├── .eslintrc.js ├── .gitignore ├── .prettierrc.json ├── README.md ├── bash.exe.stackdump ├── config-overrides.js ├── package-lock.json ├── package.json ├── paths.json ├── public ├── css │ └── animate.min.css ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.test.tsx ├── App.tsx ├── assets │ ├── font │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ ├── image │ │ ├── common │ │ │ └── avatar.png │ │ ├── configuration │ │ │ ├── bar │ │ │ │ ├── widgetAlignmentBar.png │ │ │ │ ├── widgetBackgroudBar.png │ │ │ │ ├── widgetBaseBar.png │ │ │ │ ├── widgetLengthwaysBar.png │ │ │ │ ├── widgetRadiusBar.png │ │ │ │ └── widgetStackBar.png │ │ │ ├── emap │ │ │ │ └── widgetEmapBase.png │ │ │ ├── funnel │ │ │ │ └── widgetBaseFunnel.png │ │ │ ├── line │ │ │ │ ├── widgetBaseAreaLine.png │ │ │ │ ├── widgetBaseLengthwaysLine.png │ │ │ │ ├── widgetBaseLine.png │ │ │ │ └── widgetBaseSmoothLine.png │ │ │ ├── pie │ │ │ │ ├── widgetAnnulusPie.png │ │ │ │ ├── widgetBasePie.png │ │ │ │ └── widgetRosetypePie.png │ │ │ ├── radar │ │ │ │ ├── widgetBaseRadar.png │ │ │ │ └── widgetCircleRadar.png │ │ │ ├── scatter │ │ │ │ └── widgetBaseScatter.png │ │ │ └── wordcloud │ │ │ │ └── widgetBaseWordcloud.png │ │ ├── login │ │ │ └── bg.jpg │ │ └── report │ │ │ └── canvas-bg.png │ └── scss │ │ ├── base │ │ ├── font.scss │ │ ├── normalize.scss │ │ └── var.scss │ │ ├── index.scss │ │ └── mixin │ │ ├── basic.scss │ │ ├── config.scss │ │ ├── function.scss │ │ └── mixins.scss ├── components │ ├── create-portal │ │ └── index.tsx │ ├── echarts │ │ └── index.tsx │ ├── json-editor │ │ ├── index.scss │ │ └── index.tsx │ ├── loading │ │ └── index.tsx │ ├── pop-confirm │ │ └── index.tsx │ ├── private-route │ │ ├── index.scss │ │ └── index.tsx │ ├── request │ │ └── index.tsx │ └── wrapper │ │ ├── index.scss │ │ └── index.tsx ├── config │ ├── index.ts │ └── table-config.ts ├── index.scss ├── index.tsx ├── logo.svg ├── mock │ ├── index.ts │ └── modules │ │ ├── configuration.ts │ │ ├── login.ts │ │ └── report.ts ├── pages │ ├── configuration │ │ ├── components │ │ │ ├── add-or-edit-page │ │ │ │ └── index.tsx │ │ │ ├── center │ │ │ │ ├── components │ │ │ │ │ ├── auxiliary.tsx │ │ │ │ │ ├── drag.tsx │ │ │ │ │ └── grid.tsx │ │ │ │ └── index.tsx │ │ │ ├── header │ │ │ │ ├── index.scss │ │ │ │ └── index.tsx │ │ │ ├── left │ │ │ │ ├── index.scss │ │ │ │ └── index.tsx │ │ │ ├── right │ │ │ │ ├── index.scss │ │ │ │ └── index.tsx │ │ │ └── ruler │ │ │ │ ├── index.scss │ │ │ │ └── index.tsx │ │ ├── index.scss │ │ └── index.tsx │ ├── frame │ │ ├── components │ │ │ ├── bread-crumbs.tsx │ │ │ ├── menu.tsx │ │ │ └── routers.tsx │ │ ├── index.scss │ │ └── index.tsx │ ├── home │ │ ├── index.scss │ │ └── index.tsx │ ├── login │ │ ├── index.scss │ │ └── index.tsx │ ├── preview │ │ ├── index.scss │ │ └── index.tsx │ └── report │ │ └── big-screen │ │ ├── index.scss │ │ └── index.tsx ├── react-app-env.d.ts ├── reportWebVitals.ts ├── service │ ├── config.ts │ ├── fetch.ts │ └── index.ts ├── setupProxy.js ├── setupTests.ts ├── store │ ├── actionType.ts │ ├── actions │ │ ├── authorization.ts │ │ ├── counter.ts │ │ ├── largeScreen.ts │ │ └── userinfo.ts │ ├── index.ts │ └── reducers │ │ ├── authorization.ts │ │ ├── counter.ts │ │ ├── index.ts │ │ ├── largeScreen.ts │ │ └── userinfo.ts ├── theme │ ├── dark.ts │ ├── index.ts │ └── white.ts ├── types │ └── index.ts ├── utils │ ├── echarts-wordcloud.js │ ├── echarts.ts │ ├── session-storage.ts │ └── tools.ts └── widget │ ├── bar │ └── index.tsx │ ├── emap │ └── index.tsx │ ├── form │ ├── index.tsx │ └── widget-form-radio.tsx │ ├── funnel │ └── index.tsx │ ├── group │ ├── index.scss │ └── index.tsx │ ├── image │ ├── index.scss │ └── index.tsx │ ├── index.scss │ ├── index.tsx │ ├── line │ └── index.tsx │ ├── pie │ └── index.tsx │ ├── radar │ └── index.tsx │ ├── scatter │ └── index.tsx │ ├── table │ ├── index.scss │ └── index.tsx │ ├── text │ ├── index.tsx │ ├── widget-base-text │ │ ├── index.scss │ │ └── index.tsx │ ├── widget-digital-scroll │ │ ├── components │ │ │ └── item.tsx │ │ ├── index.scss │ │ └── index.tsx │ └── widget-time-text │ │ ├── index.scss │ │ └── index.tsx │ ├── tools │ ├── base-configuration │ │ ├── animate.ts │ │ ├── box.ts │ │ ├── coordinate.ts │ │ ├── data.ts │ │ ├── echarts.ts │ │ ├── font.ts │ │ ├── index.ts │ │ └── page.ts │ ├── main.ts │ ├── widget-types-configuration │ │ ├── bar.ts │ │ ├── emap │ │ │ ├── main.ts │ │ │ └── widget-emap-base.ts │ │ ├── form │ │ │ ├── main.ts │ │ │ └── widget-form-radio.ts │ │ ├── funnel.ts │ │ ├── group.ts │ │ ├── image.ts │ │ ├── index.ts │ │ ├── line.ts │ │ ├── pie.ts │ │ ├── radar.ts │ │ ├── scatter.ts │ │ ├── table.ts │ │ ├── text │ │ │ ├── main.ts │ │ │ ├── widget-base-text.ts │ │ │ ├── widget-digital-scroll.ts │ │ │ └── widget-time-text.ts │ │ └── wordcloud.ts │ └── widget │ │ ├── bar │ │ ├── index.ts │ │ ├── main.ts │ │ ├── widget-alignment-bar.ts │ │ ├── widget-backgroud-bar.ts │ │ ├── widget-base-bar.ts │ │ ├── widget-lengthways-bar.ts │ │ ├── widget-radius-bar.ts │ │ └── widget-stack-bar.ts │ │ ├── emap │ │ ├── index.ts │ │ ├── main.ts │ │ └── widget-emap-base.ts │ │ ├── form │ │ ├── main.tsx │ │ └── widget-form-radio.tsx │ │ ├── funnel │ │ ├── index.ts │ │ ├── main.ts │ │ └── widget-funnel-bar.ts │ │ ├── index.ts │ │ ├── line │ │ ├── index.ts │ │ ├── main.ts │ │ ├── widget-base-area-line.ts │ │ ├── widget-base-lengthways-line.ts │ │ ├── widget-base-line.ts │ │ └── widget-base-smooth-line.ts │ │ ├── pie │ │ ├── index.ts │ │ ├── main.ts │ │ ├── widget-annulus-pie.ts │ │ ├── widget-base-pie.ts │ │ └── widget-rosetype-pie.ts │ │ ├── radar │ │ ├── index.ts │ │ ├── main.ts │ │ ├── widget-base-radar.ts │ │ └── widget-circle-radar.ts │ │ ├── scatter │ │ ├── index.ts │ │ ├── main.ts │ │ └── widget-base-scatter.ts │ │ ├── table │ │ ├── index.ts │ │ ├── main.ts │ │ └── widget-base-table.ts │ │ ├── text │ │ ├── main.ts │ │ ├── widget-base-text.ts │ │ ├── widget-digital-scroll.ts │ │ └── widget-time-text.ts │ │ ├── widget-group.ts │ │ ├── widget-image.ts │ │ └── wordcloud │ │ ├── index.ts │ │ ├── main.ts │ │ └── widget-base-wrodcloud.ts │ └── wordcloud │ └── index.tsx ├── tree.md ├── tsconfig.json ├── vscode └── setting.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "semi": false, 4 | "singleQuote": true, 5 | "trailingComma": "none", 6 | "arrowParens": "always", 7 | "jsxSingleQuote": true, 8 | "bracketSpacing": true, 9 | "bracketSameLine": true 10 | } 11 | -------------------------------------------------------------------------------- /bash.exe.stackdump: -------------------------------------------------------------------------------- 1 | Stack trace: 2 | Frame Function Args 3 | 000FFFF0060 00210062F57 (000FFFF0268, 00000000002, 00000000002, 000FFFFDE50) 4 | 00000000000 00210065045 (00000000064, 00000000000, 00000000378, 00000000000) 5 | 000FFFF0770 0021013A968 (00000000000, 00000000000, 00000000000, 00000000000) 6 | 000000000C1 00210135F9B (00000000000, 00200000000, 00000000000, 00000000000) 7 | 00000000000 002101363A5 (00000000000, 00000000000, 00000000000, 00000000000) 8 | 00000000000 0021019993B (00000000000, 00000000000, 00000000000, 00000000000) 9 | 00000000000 0010044BE58 (00000000000, 00000000000, 00000000000, 000FFFFCE00) 10 | 00000000000 0010044C065 (00000000000, 00000000000, 00000000003, 00000000220) 11 | 00000000000 00210065045 (00000000064, 00000000000, 00000000378, 00000000000) 12 | 000FFFF1270 0021013A968 (00000000000, 00000000000, 00000000030, 00000000000) 13 | 000FFFF13E0 00210063243 (00000000000, 00000000000, 000FFFF20F0, 000FFFF1A80) 14 | 000FFFF1A30 7FFDC648119F (00210040000, 00000000000, 002102D35D0, 000FFFF1530) 15 | 000FFFF1A30 7FFDC644A229 (000000004A4, 00210373470, 00000000000, 00000000000) 16 | 000FFFFC740 7FFDC647FE0E (00000000000, 00000000000, 00000000000, 00000000000) 17 | 000FFFFC740 002100C9649 (000FFFFC560, 00600000000, 0000000049C, 00000000000) 18 | 000FFFFC740 002100CAD50 (00000000000, 00210135BE8, 000FFFFC670, 00210273880) 19 | 000FFFFC740 002100CB5D1 (000000000C8, 00000000000, 0010042CD50, 00210135BE8) 20 | 000FFFFC740 0021015A812 (00000080000, 00100615894, 00000000000, 0010061B1C8) 21 | 0010061C700 0021019993B (00000080000, 00100615894, 00000000000, 0010061B1C8) 22 | 0010061C700 0010042C44B (008000775D0, 0080018EBA0, 0021019993B, 00800078C80) 23 | 0010061C700 0010042E996 (00000000000, 00100000000, 00800056C90, 001FFFFFFFF) 24 | 008000757D0 0010041A6E9 (0021019993B, 0010044BAF0, 00000000002, 008000757D0) 25 | 00000000000 0010041B022 (150023000500018 -------------------------------------------------------------------------------- /config-overrides.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const { 3 | override, 4 | adjustStyleLoaders, 5 | addWebpackAlias, 6 | addWebpackPlugin 7 | } = require('customize-cra') 8 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') 9 | // scope hosting 10 | const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin') 11 | // 打包加进度条 12 | const ProgressBarPlugin = require('progress-bar-webpack-plugin') 13 | // 打包速度分析 14 | const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin') 15 | 16 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 17 | 18 | const smp = new SpeedMeasureWebpackPlugin() 19 | 20 | /** 21 | * @param target: 要遍历的对象 22 | * @param name: 插件名 23 | * @param callback: 回调函数，第一个参数为该插件对象 24 | * @return null 25 | */ 26 | function invade(target, name, callback) { 27 | target.forEach((item) => { 28 | if (item.constructor.name === name) { 29 | // eslint-disable-next-line callback-return 30 | callback(item) 31 | } 32 | }) 33 | } 34 | 35 | module.exports = override( 36 | // 配置c 37 | adjustStyleLoaders((rule) => { 38 | if (rule.test.toString().includes('scss')) { 39 | rule.use.push({ 40 | loader: require.resolve('sass-resources-loader'), 41 | options: { 42 | resources: path.resolve(__dirname, './src/assets/scss/index.scss') 43 | } 44 | }) 45 | } 46 | }), 47 | // 路径别名 48 | addWebpackAlias({ 49 | '@src': path.resolve(__dirname, 'src'), 50 | '@assets': path.resolve(__dirname, 'src/assets'), 51 | '@utils': path.resolve(__dirname, 'src/utils'), 52 | '@pages': path.resolve(__dirname, 'src/pages'), 53 | '@service': path.resolve(__dirname, 'src/service'), 54 | '@components': path.resolve(__dirname, 'src/components'), 55 | '@types': path.resolve(__dirname, 'src/types'), 56 | '@store': path.resolve(__dirname, 'src/store') 57 | }), 58 | process.env.NODE_ENV !== 'development' && 59 | addWebpackPlugin( 60 | new ProgressBarPlugin(), 61 | new ModuleConcatenationPlugin(), 62 | new BundleAnalyzerPlugin({ analyzerPort: 8919 }) 63 | ), 64 | // 配置其他选项 65 | (config) => { 66 | config.resolve.plugins = [] 67 | if (process.env.NODE_ENV !== 'development') { 68 | config.devtool = false 69 | // 针对npm第三方包采用jsnext：main中只想es6模块化的语法文件 70 | config.resolve.mainFields = ['jsnext:main', 'browser', 'main'] 71 | 72 | // 删除打包后的所有console 73 | invade(config.optimization.minimizer, 'TerserPlugin', (e) => { 74 | e.options.extractComments = false 75 | // 删除console 76 | e.options.minimizer.options.compress.drop_console = true 77 | // 删除debugger 78 | e.options.minimizer.options.compress.drop_debugger = true 79 | e.options.minimizer.options.compress.pure_funcs = ['config.log'] 80 | }) 81 | // 美化打包后 js 文件名 82 | config.output.chunkFilename = config.output.chunkFilename.replace( 83 | '.chunk', 84 | '' 85 | ) 86 | // 美化打包后 css 文件名 87 | invade(config.plugins, 'MiniCssExtractPlugin', (e) => { 88 | e.options.chunkFilename = e.options.chunkFilename.replace('.chunk', '') 89 | }) 90 | } 91 | 92 | // return smp.wrap(config) 93 | return config 94 | } 95 | ) 96 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "main", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@ant-design/pro-layout": "^6.34.9", 7 | "@ant-design/pro-table": "^2.71.2", 8 | "@testing-library/jest-dom": "^5.16.3", 9 | "@testing-library/react": "^12.1.4", 10 | "@testing-library/user-event": "^13.5.0", 11 | "@types/jest": "^27.4.1", 12 | "@types/mockjs": "^1.0.7", 13 | "@types/node": "^16.11.26", 14 | "@types/react": "^17.0.43", 15 | "@types/react-dom": "^17.0.14", 16 | "ahooks": "^3.3.0", 17 | "mockjs": "^1.1.0", 18 | "react": "^18.0.0", 19 | "react-color": "^2.19.3", 20 | "react-dom": "^18.0.0", 21 | "react-scripts": "5.0.0", 22 | "typescript": "^4.6.3", 23 | "web-vitals": "^2.1.4" 24 | }, 25 | "scripts": { 26 | "start": "set PORT=6001 && cross-env REACT_APP_ENV=development react-app-rewired start", 27 | "build:test": "cross-env REACT_APP_ENV=test react-app-rewired build", 28 | "build:production": "cross-env REACT_APP_ENV=production react-app-rewired build", 29 | "eject": "react-scripts eject" 30 | }, 31 | "eslintConfig": { 32 | "extends": [ 33 | "react-app", 34 | "react-app/jest" 35 | ], 36 | "rules": { 37 | "jsx-a11y/anchor-is-valid": "off" 38 | } 39 | }, 40 | "browserslist": { 41 | "production": [ 42 | ">0.2%", 43 | "not dead", 44 | "not op_mini all" 45 | ], 46 | "development": [ 47 | "last 1 chrome version", 48 | "last 1 firefox version", 49 | "last 1 safari version" 50 | ] 51 | }, 52 | "devDependencies": { 53 | "@types/classnames": "^2.3.1", 54 | "@types/jsoneditor": "^9.5.1", 55 | "@types/react-color": "^3.0.6", 56 | "@types/react-redux": "^7.1.23", 57 | "@types/react-router-dom": "^5.3.3", 58 | "@types/redux-logger": "^3.0.9", 59 | "@types/redux-thunk": "^2.1.0", 60 | "antd": "^4.19.3", 61 | "antd-img-crop": "^4.2.3", 62 | "axios": "^0.26.1", 63 | "braft-editor": "^2.3.9", 64 | "build-plugin-icestark": "^2.5.3", 65 | "cross-env": "^7.0.3", 66 | "customize-cra": "^1.0.0", 67 | "default-passive-events": "^2.0.0", 68 | "echarts": "^5.3.2", 69 | "echarts-wordcloud": "^2.0.0", 70 | "http-proxy-middleware": "^2.0.6", 71 | "ice": "^3.7.71", 72 | "jsoneditor": "^9.9.0", 73 | "mini-css-extract-plugin": "^2.6.1", 74 | "node-sass": "^7.0.1", 75 | "progress-bar-webpack-plugin": "^2.1.0", 76 | "react-app-rewired": "^2.2.1", 77 | "react-json-view": "^1.21.3", 78 | "react-redux": "^7.2.8", 79 | "react-rnd": "^10.3.7", 80 | "react-router-dom": "^5.3.0", 81 | "redux": "^4.1.2", 82 | "redux-logger": "^3.0.6", 83 | "redux-persist": "^6.0.0", 84 | "redux-thunk": "^2.4.1", 85 | "sass-loader": "^12.6.0", 86 | "sass-resources-loader": "^2.2.4", 87 | "speed-measure-webpack-plugin": "^1.5.0", 88 | "webpack-bundle-analyzer": "^4.5.0" 89 | }, 90 | "homepage": "." 91 | } 92 | -------------------------------------------------------------------------------- /paths.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@src/*": ["src/*"], 6 | "@assets/*": ["src/assets/*"], 7 | "@store/*": ["src/store/*"], 8 | "@utils/*": ["src/utils/*"], 9 | "@pages/*": ["src/pages/*"], 10 | "@components/*": ["src/components/*"], 11 | "@service/*": ["src/service/*"], 12 | "@types/*": ["src/types/*"] 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 26 | 27 | 36 | React App 37 | 38 | 39 | 40 | 41 |
42 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-10 22:23:39 7 | * @FilePath: \bigscreen\src\App.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { FC, Suspense, lazy } from 'react' 11 | import Loading from '@src/components/loading' 12 | import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom' 13 | import { Spin } from 'antd' 14 | // 私有路由 15 | import ComPrivateRoute from '@src/components/private-route' 16 | 17 | interface IAppProps {} 18 | 19 | const App: FC = () => { 20 | return ( 21 | }> 22 | 23 | 24 | {/*登录*/} 25 | import(/*webpackChunkName:"login"*/ '@pages/login/index') 29 | )} 30 | /> 31 | {/*有头部的框架*/} 32 | import(/*webpackChunkName:"frame"*/ '@pages/frame') 38 | )} 39 | /> 40 | 41 | 42 | 43 | {/* 接口loading */} 44 |
45 | 46 |
47 | 48 | ) 49 | } 50 | 51 | export default App 52 | -------------------------------------------------------------------------------- /src/assets/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/font/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/font/iconfont.woff -------------------------------------------------------------------------------- /src/assets/font/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/font/iconfont.woff2 -------------------------------------------------------------------------------- /src/assets/image/common/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/common/avatar.png -------------------------------------------------------------------------------- /src/assets/image/configuration/bar/widgetAlignmentBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/bar/widgetAlignmentBar.png -------------------------------------------------------------------------------- /src/assets/image/configuration/bar/widgetBackgroudBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/bar/widgetBackgroudBar.png -------------------------------------------------------------------------------- /src/assets/image/configuration/bar/widgetBaseBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/bar/widgetBaseBar.png -------------------------------------------------------------------------------- /src/assets/image/configuration/bar/widgetLengthwaysBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/bar/widgetLengthwaysBar.png -------------------------------------------------------------------------------- /src/assets/image/configuration/bar/widgetRadiusBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/bar/widgetRadiusBar.png -------------------------------------------------------------------------------- /src/assets/image/configuration/bar/widgetStackBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/bar/widgetStackBar.png -------------------------------------------------------------------------------- /src/assets/image/configuration/emap/widgetEmapBase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/emap/widgetEmapBase.png -------------------------------------------------------------------------------- /src/assets/image/configuration/funnel/widgetBaseFunnel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/funnel/widgetBaseFunnel.png -------------------------------------------------------------------------------- /src/assets/image/configuration/line/widgetBaseAreaLine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/line/widgetBaseAreaLine.png -------------------------------------------------------------------------------- /src/assets/image/configuration/line/widgetBaseLengthwaysLine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/line/widgetBaseLengthwaysLine.png -------------------------------------------------------------------------------- /src/assets/image/configuration/line/widgetBaseLine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/line/widgetBaseLine.png -------------------------------------------------------------------------------- /src/assets/image/configuration/line/widgetBaseSmoothLine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/line/widgetBaseSmoothLine.png -------------------------------------------------------------------------------- /src/assets/image/configuration/pie/widgetAnnulusPie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/pie/widgetAnnulusPie.png -------------------------------------------------------------------------------- /src/assets/image/configuration/pie/widgetBasePie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/pie/widgetBasePie.png -------------------------------------------------------------------------------- /src/assets/image/configuration/pie/widgetRosetypePie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/pie/widgetRosetypePie.png -------------------------------------------------------------------------------- /src/assets/image/configuration/radar/widgetBaseRadar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/radar/widgetBaseRadar.png -------------------------------------------------------------------------------- /src/assets/image/configuration/radar/widgetCircleRadar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/radar/widgetCircleRadar.png -------------------------------------------------------------------------------- /src/assets/image/configuration/scatter/widgetBaseScatter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/scatter/widgetBaseScatter.png -------------------------------------------------------------------------------- /src/assets/image/configuration/wordcloud/widgetBaseWordcloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/configuration/wordcloud/widgetBaseWordcloud.png -------------------------------------------------------------------------------- /src/assets/image/login/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/login/bg.jpg -------------------------------------------------------------------------------- /src/assets/image/report/canvas-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/assets/image/report/canvas-bg.png -------------------------------------------------------------------------------- /src/assets/scss/base/font.scss: -------------------------------------------------------------------------------- 1 | /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */ 2 | @font-face { 3 | font-family: 'iconfont'; /* Project id 3592685 */ 4 | src: url('//at.alicdn.com/t/c/font_3592685_6l4r93gukms.woff2?t=1664282947725') 5 | format('woff2'), 6 | url('//at.alicdn.com/t/c/font_3592685_6l4r93gukms.woff?t=1664282947725') 7 | format('woff'), 8 | url('//at.alicdn.com/t/c/font_3592685_6l4r93gukms.ttf?t=1664282947725') 9 | format('truetype'); 10 | } 11 | 12 | .app-icon { 13 | font-family: 'iconfont' !important; 14 | font-size: 16px; 15 | font-style: normal; 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-font-smoothing: grayscale; 18 | } 19 | -------------------------------------------------------------------------------- /src/assets/scss/base/var.scss: -------------------------------------------------------------------------------- 1 | // 系统主题等样式库[与antd主题保持一致] 2 | // https://github.com/ant-design/ant-design/blob/master/components/style/color/colors.less 3 | // 背景 4 | $bgBase: #F5F7FA; 5 | $bgBlack: #000000; 6 | $bgWhite: #ffffff; 7 | $bgTrans: transparent; 8 | $blue-base: #526ecc; 9 | /// color|1|Background Color|4 10 | $--color-white: #FFFFFF !default; 11 | $blue-1: mix($--color-white, $blue-base, 10%) !default; 12 | $blue-2: mix($--color-white, $blue-base, 20%) !default; 13 | $blue-3: mix($--color-white, $blue-base, 30%) !default; 14 | $blue-4: mix($--color-white, $blue-base, 40%) !default; 15 | $blue-5: mix($--color-white, $blue-base, 50%) !default; 16 | $blue-6: mix($--color-white, $blue-base, 60%) !default; 17 | $blue-7: mix($--color-white, $blue-base, 70%) !default; 18 | $blue-8: mix($--color-white, $blue-base, 80%) !default; 19 | $blue-9: mix($--color-white, $blue-base, 90%) !default; 20 | $blue-10: mix($--color-white, $blue-base, 100%) !default; -------------------------------------------------------------------------------- /src/assets/scss/index.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 样式 3 | */ 4 | @import './base/font'; 5 | @import "./base/var"; 6 | @import "./mixin/mixins"; 7 | @import "./mixin/basic"; 8 | @import "./base/normalize"; 9 | -------------------------------------------------------------------------------- /src/assets/scss/mixin/basic.scss: -------------------------------------------------------------------------------- 1 | // 单行文本溢出 2 | @mixin single() { 3 | overflow: hidden; 4 | text-overflow:ellipsis; 5 | white-space: nowrap; 6 | } 7 | // 多行文本溢出 8 | @mixin multiple($line: 2) { 9 | display: -webkit-box; 10 | -webkit-box-orient: vertical; 11 | -webkit-line-clamp: $line; 12 | overflow: hidden; 13 | -ms-text-overflow: ellipsis; 14 | -o-text-overflow: ellipsis; 15 | text-overflow: ellipsis; 16 | } 17 | // 禁止文本被选择 18 | @mixin user-select { 19 | -webkit-user-select: none; 20 | -moz-user-select: none; 21 | -ms-user-select: none; 22 | user-select: none; 23 | } 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/assets/scss/mixin/config.scss: -------------------------------------------------------------------------------- 1 | $namespace: 'app'; 2 | $element-separator: '__'; 3 | $modifier-separator: '--'; 4 | $state-prefix: 'is-'; -------------------------------------------------------------------------------- /src/assets/scss/mixin/function.scss: -------------------------------------------------------------------------------- 1 | @import "config"; 2 | 3 | /* BEM support Func 4 | -------------------------- */ 5 | @function selectorToString($selector) { 6 | $selector: inspect($selector); 7 | $selector: str-slice($selector, 2, -2); 8 | @return $selector; 9 | } 10 | 11 | @function containsModifier($selector) { 12 | $selector: selectorToString($selector); 13 | 14 | @if str-index($selector, $modifier-separator) { 15 | @return true; 16 | } @else { 17 | @return false; 18 | } 19 | } 20 | 21 | @function containWhenFlag($selector) { 22 | $selector: selectorToString($selector); 23 | 24 | @if str-index($selector, '.' + $state-prefix) { 25 | @return true 26 | } @else { 27 | @return false 28 | } 29 | } 30 | 31 | @function containPseudoClass($selector) { 32 | $selector: selectorToString($selector); 33 | 34 | @if str-index($selector, ':') { 35 | @return true 36 | } @else { 37 | @return false 38 | } 39 | } 40 | 41 | @function hitAllSpecialNestRule($selector) { 42 | 43 | @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector); 44 | } 45 | // $number 不能为偶数 46 | @function px($number) { 47 | @return $number / 2 48 | } 49 | -------------------------------------------------------------------------------- /src/assets/scss/mixin/mixins.scss: -------------------------------------------------------------------------------- 1 | @import "function"; 2 | 3 | /* Break-points 4 | -------------------------- */ 5 | @mixin res($key, $map: $--breakpoints) { 6 | // 循环断点Map，如果存在则返回 7 | @if map-has-key($map, $key) { 8 | @media only screen and #{inspect(map-get($map, $key))} { 9 | @content; 10 | } 11 | } @else { 12 | @warn "Undefeined points: `#{$map}`"; 13 | } 14 | } 15 | 16 | /* Scrollbar 17 | -------------------------- */ 18 | @mixin scroll-bar { 19 | $--scrollbar-thumb-background: #b4bccc; 20 | $--scrollbar-track-background: #fff; 21 | 22 | &::-webkit-scrollbar { 23 | z-index: 11; 24 | width: 6px; 25 | 26 | &:horizontal { 27 | height: 6px; 28 | } 29 | 30 | &-thumb { 31 | border-radius: 5px; 32 | width: 6px; 33 | background: $--scrollbar-thumb-background; 34 | } 35 | 36 | &-corner { 37 | background: $--scrollbar-track-background; 38 | } 39 | 40 | &-track { 41 | background: $--scrollbar-track-background; 42 | 43 | &-piece { 44 | background: $--scrollbar-track-background; 45 | width: 6px; 46 | } 47 | } 48 | } 49 | } 50 | 51 | /* Placeholder 52 | -------------------------- */ 53 | @mixin placeholder { 54 | &::-webkit-input-placeholder { 55 | @content 56 | } 57 | 58 | &::-moz-placeholder { 59 | @content 60 | } 61 | 62 | &:-ms-input-placeholder { 63 | @content 64 | } 65 | } 66 | 67 | /* BEM 68 | -------------------------- */ 69 | @mixin b($block) { 70 | $B: $namespace+'-'+$block !global; 71 | 72 | .#{$B} { 73 | @content; 74 | } 75 | } 76 | 77 | @mixin e($element) { 78 | $E: $element !global; 79 | $selector: &; 80 | $currentSelector: ""; 81 | @each $unit in $element { 82 | $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","}; 83 | } 84 | 85 | @if hitAllSpecialNestRule($selector) { 86 | @at-root { 87 | #{$selector} { 88 | #{$currentSelector} { 89 | @content; 90 | } 91 | } 92 | } 93 | } @else { 94 | @at-root { 95 | #{$currentSelector} { 96 | @content; 97 | } 98 | } 99 | } 100 | } 101 | 102 | @mixin m($modifier) { 103 | $selector: &; 104 | $currentSelector: ""; 105 | @each $unit in $modifier { 106 | $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","}; 107 | } 108 | 109 | @at-root { 110 | #{$currentSelector} { 111 | @content; 112 | } 113 | } 114 | } 115 | 116 | @mixin configurable-m($modifier, $E-flag: false) { 117 | $selector: &; 118 | $interpolation: ''; 119 | 120 | @if $E-flag { 121 | $interpolation: $element-separator + $E-flag; 122 | } 123 | 124 | @at-root { 125 | #{$selector} { 126 | .#{$B+$interpolation+$modifier-separator+$modifier} { 127 | @content; 128 | } 129 | } 130 | } 131 | } 132 | 133 | @mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) { 134 | $modifierCombo: ''; 135 | 136 | @if $modifier { 137 | $modifierCombo: $modifier-separator + $modifier; 138 | } 139 | 140 | @at-root { 141 | #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} { 142 | @content 143 | } 144 | } 145 | } 146 | 147 | @mixin meb($modifier: false, $element: $E, $block: $B) { 148 | $selector: &; 149 | $modifierCombo: ''; 150 | 151 | @if $modifier { 152 | $modifierCombo: $modifier-separator + $modifier; 153 | } 154 | 155 | @at-root { 156 | #{$selector} { 157 | .#{$block+$element-separator+$element+$modifierCombo} { 158 | @content 159 | } 160 | } 161 | } 162 | } 163 | 164 | @mixin when($state) { 165 | @at-root { 166 | &.#{$state-prefix + $state} { 167 | @content; 168 | } 169 | } 170 | } 171 | 172 | @mixin extend-rule($name) { 173 | @extend #{'%shared-'+$name}; 174 | } 175 | 176 | @mixin share-rule($name) { 177 | $rule-name: '%shared-'+$name; 178 | 179 | @at-root #{$rule-name} { 180 | @content 181 | } 182 | } 183 | 184 | @mixin pseudo($pseudo) { 185 | @at-root #{&}#{':#{$pseudo}'} { 186 | @content 187 | } 188 | } 189 | -------------------------------------------------------------------------------- /src/components/create-portal/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-07 20:16:24 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-06 21:12:19 7 | * @FilePath: \bigscreen\src\components\create-portal\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { FC, ReactNode, useEffect, useRef } from 'react' 11 | import ReactDOM from 'react-dom' 12 | 13 | interface CreatePortalProps { 14 | children: ReactNode 15 | } 16 | 17 | const CreatePortal: FC = ({ children }) => { 18 | let el = useRef(document.createElement('div')) 19 | useEffect(() => { 20 | document.body.appendChild(el.current) 21 | return () => { 22 | document.body.removeChild(el.current) 23 | } 24 | }, [el]) 25 | return ReactDOM.createPortal(children, el.current) 26 | } 27 | 28 | export default CreatePortal 29 | -------------------------------------------------------------------------------- /src/components/json-editor/index.scss: -------------------------------------------------------------------------------- 1 | @include b(json-editor) { 2 | .jsoneditor { 3 | border: 1px solid #383838; 4 | border-radius: 3px; 5 | overflow: hidden; 6 | color: #999; 7 | } 8 | .jsoneditor-menu { 9 | display: none; 10 | } 11 | .jsoneditor-statusbar { 12 | background-color: #424242; 13 | border-top: 1px solid #383838; 14 | } 15 | .ace-jsoneditor { 16 | .ace_marker-layer .ace_active-line { 17 | background-color: rgba(255, 255, 255, 0.2); 18 | } 19 | color: #999; 20 | .ace_gutter, 21 | .ace_scroller { 22 | background-color: #424242; 23 | } 24 | .ace_gutter { 25 | color: #999; 26 | border-right: 1px solid #383838; 27 | } 28 | .ace_gutter-active-line { 29 | background-color: rgba(255, 255, 255, .2); 30 | } 31 | } 32 | .ace_variable, 33 | .ace_text-layer { 34 | color: #999; 35 | } 36 | } -------------------------------------------------------------------------------- /src/components/json-editor/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FC, useCallback, useEffect, useRef 3 | } from 'react' 4 | import { IAnyObject } from '@src/types' 5 | import JSONEditor, { JSONEditorOptions } from 'jsoneditor' 6 | import 'jsoneditor/dist/jsoneditor.css' 7 | import './index.scss' 8 | 9 | interface IJsonEditorProps { 10 | value: IAnyObject; 11 | onChange?: (josn?: any) => void; 12 | options?: JSONEditorOptions; 13 | } 14 | 15 | const JsonEditor: FC = ({ 16 | value, 17 | onChange, 18 | options = {} 19 | }) => { 20 | 21 | const editorRef = useRef(null) 22 | const editorObj = useRef(null) 23 | 24 | // 初始化JOSN编辑器 25 | const initEditor = useCallback(() => { 26 | if (!editorObj.current) { 27 | const totalOptions: JSONEditorOptions = { 28 | mode: 'code', 29 | onChange: () => { 30 | onChange && onChange(editorObj.current?.get()) 31 | }, 32 | ...options 33 | } 34 | editorObj.current = new JSONEditor(editorRef.current, totalOptions, value) 35 | } 36 | }, [onChange, options, value]) 37 | 38 | useEffect(() => { 39 | initEditor() 40 | }, [initEditor]) 41 | 42 | 43 | useEffect(() => { 44 | return () => { 45 | // 销毁 46 | if (editorObj.current) { 47 | editorObj.current.destroy() 48 | } 49 | } 50 | }, [editorObj]) 51 | 52 | return ( 53 |
54 | ) 55 | } 56 | 57 | export default JsonEditor -------------------------------------------------------------------------------- /src/components/loading/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-10 22:09:59 7 | * @FilePath: \bigscreen\src\components\loading\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { FC, HTMLAttributes } from 'react' 11 | import { Spin } from 'antd' 12 | 13 | interface ILoadingProps extends HTMLAttributes { 14 | text?: string 15 | } 16 | 17 | const Loaindg: FC = ({ text, style, ...reset }) => { 18 | return ( 19 | <> 20 |
34 | 35 |
36 | 37 | ) 38 | } 39 | 40 | export default Loaindg 41 | -------------------------------------------------------------------------------- /src/components/pop-confirm/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-11 21:40:17 7 | * @FilePath: \bigscreen\src\components\pop-confirm\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { FC, ReactNode } from 'react' 11 | import { message, Popconfirm } from 'antd' 12 | import Ajax from '@src/service' 13 | import { IAnyObject } from '@src/types' 14 | 15 | interface IPopConfirmProps { 16 | // 请求接口，这里查找的@src/service 17 | requestName: string 18 | // 文本 19 | text?: string 20 | // 刷新表格 21 | reload?: () => void 22 | // 其他参数 23 | params?: IAnyObject 24 | // 回调方法 25 | callback?: Function 26 | children?: ReactNode 27 | } 28 | 29 | const PopConfirm: FC = ({ 30 | text, 31 | requestName, 32 | reload, 33 | params, 34 | callback, 35 | children 36 | }) => { 37 | const onConfirm = () => { 38 | // 判断是否有该接口 39 | if (!Ajax[requestName]) { 40 | message.error('该接口不存在，请检查') 41 | return false 42 | } 43 | Ajax[requestName](params).then((res) => { 44 | if (res) { 45 | message.success(`${text}成功`) 46 | reload && reload() 47 | callback && callback() 48 | } 49 | }) 50 | } 51 | return ( 52 | 58 | {children ? children : text} 59 | 60 | ) 61 | } 62 | 63 | export default PopConfirm 64 | -------------------------------------------------------------------------------- /src/components/private-route/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/components/private-route/index.scss -------------------------------------------------------------------------------- /src/components/private-route/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-11 22:29:06 7 | * @FilePath: \bigscreen\src\components\private-route\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import session from '@src/utils/session-storage' 11 | import { memo, useEffect } from 'react' 12 | import { Route, Redirect } from 'react-router-dom' 13 | interface IPrivateRoute { 14 | component: any 15 | title: string 16 | isPrivate: boolean 17 | [propName: string]: any 18 | } 19 | const PrivateRoute = memo( 20 | ({ 21 | // eslint-disable-next-line react/prop-types 22 | component: Component, 23 | title, 24 | isPrivate, 25 | ...rest 26 | }: IPrivateRoute) => { 27 | // 处理标题 28 | useEffect(() => { 29 | document.title = title 30 | }, [title]) 31 | return ( 32 | { 35 | if (isPrivate) { 36 | return session.getItem('token') ? ( 37 | 38 | ) : ( 39 | 44 | ) 45 | } else { 46 | return 47 | } 48 | }} 49 | /> 50 | ) 51 | } 52 | ) 53 | export default PrivateRoute 54 | -------------------------------------------------------------------------------- /src/components/request/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: hejp 378540660@qq.com 3 | * @Date: 2022-09-04 16:50:14 4 | * @LastEditors: hejp 378540660@qq.com 5 | * @LastEditTime: 2022-10-12 16:28:34 6 | * @FilePath: \bigscreen\src\components\request\index.tsx 7 | * @Description: 页面描述 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import React, { useEffect, memo, FC, useState } from 'react' 11 | import Wrapper from '@src/components/wrapper' 12 | import { useRequest } from 'ahooks' 13 | import axios from 'axios' 14 | 15 | interface IResult { 16 | code: string 17 | data: any 18 | msg: string 19 | success: boolean 20 | 21 | [propNames: string]: any 22 | } 23 | 24 | interface IRequestProps { 25 | // 是否需要占位 26 | isPlaceholder: Boolean 27 | // 类型 28 | method: 'get' | 'post' 29 | // 接口地址 30 | url: string 31 | // 接口参数 32 | params: string 33 | render: (data: any, success: boolean, setP?: React.Dispatch) => any 34 | } 35 | 36 | // const Request: FC = ({ 37 | // method, 38 | // url, 39 | // params, 40 | // isPlaceholder, 41 | // render 42 | // }) => { 43 | // // 获取数据 44 | // const [data, setData] = useState(null) 45 | // const [loading, setLoading] = useState(false) 46 | // const [error, setError] = useState(false) 47 | // const [success, setSuccess] = useState(false) 48 | 49 | // useEffect(() => { 50 | // if (url) { 51 | // setError(false) 52 | // setLoading(true) 53 | // axios({ 54 | // url: url, 55 | // method: method, 56 | // params: JSON.parse(params) 57 | // }) 58 | // .then((res: any) => { 59 | // setLoading(false) 60 | // setSuccess(true) 61 | // setData(res.data.data || res.data) 62 | // }) 63 | // .catch((res) => { 64 | // setLoading(false) 65 | // setSuccess(false) 66 | // setError(false) 67 | // }) 68 | // } 69 | // }, [url, params]) 70 | // return ( 71 | // <> 72 | // {isPlaceholder ? ( 73 | // 74 | // {render(data, success)} 75 | // 76 | // ) : ( 77 | // render(data, success) 78 | // )} 79 | // 80 | // ) 81 | // } 82 | 83 | const Request: FC = ({ 84 | method, 85 | url, 86 | params, 87 | isPlaceholder, 88 | render 89 | }) => { 90 | // 获取数据 91 | const { data, loading, error } = useRequest( 92 | async () => { 93 | console.log(url, process.env.REACT_APP_ENV === 'production', 'urlurl') 94 | return await new Promise( 95 | (resolve: (data: IResult) => void, reject: (data: any) => void) => { 96 | axios({ 97 | url: 98 | process.env.REACT_APP_ENV === 'production' && 99 | url === 'http://localhost:6001/configuration' 100 | ? 'https://myfirebug.github.io/bigscreen/configuration' 101 | : url, 102 | method: method, 103 | params: JSON.parse(params) 104 | }) 105 | .then((res: any) => { 106 | // resolve(res.data.data || res.data) 107 | resolve(res) 108 | }) 109 | .catch((res) => { 110 | reject(res) 111 | }) 112 | } 113 | ) 114 | }, 115 | { 116 | refreshDeps: [params, url], 117 | ready: Boolean(url) 118 | } 119 | ) 120 | 121 | return ( 122 | <> 123 | {isPlaceholder ? ( 124 | 125 | {render(url ? data : null, url ? !error : true)} 126 | 127 | ) : ( 128 | render(url ? data : null, url ? !error : true) 129 | )} 130 | 131 | ) 132 | } 133 | export default Request 134 | -------------------------------------------------------------------------------- /src/components/wrapper/index.scss: -------------------------------------------------------------------------------- 1 | @include b(wrapper) { 2 | position: absolute; 3 | left: 0; 4 | top: 0; 5 | width: 100%; 6 | height: 100%; 7 | text-align: center; 8 | @include e(loading) { 9 | position: absolute; 10 | left: 50%; 11 | top: 50%; 12 | transform: translate(-50%, -50%); 13 | } 14 | @include e(error) { 15 | .anticon { 16 | font-size: 40px; 17 | color: #bbb; 18 | padding-bottom: 10px; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/wrapper/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-07 09:33:32 7 | * @FilePath: \bigscreen\src\components\wrapper\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { FC, ReactNode, HTMLAttributes } from 'react' 11 | import { Spin, Empty } from 'antd' 12 | import { CloseCircleOutlined } from '@ant-design/icons' 13 | import './index.scss' 14 | 15 | interface IWrapperProps extends HTMLAttributes { 16 | loading: boolean 17 | error: boolean 18 | nodata: boolean 19 | children: ReactNode 20 | } 21 | 22 | const Wrapper: FC = ({ loading, error, nodata, children }) => { 23 | return ( 24 |
25 | {loading && ( 26 |
27 | 28 |
29 | )} 30 | {error && !loading && ( 31 |
32 | 33 |

38 | 加载失败 39 |

40 |
41 | )} 42 | {!loading && !error && nodata && ( 43 |
44 | 45 |
46 | )} 47 | {!loading && !error && !nodata && children} 48 |
49 | ) 50 | } 51 | 52 | export default Wrapper 53 | -------------------------------------------------------------------------------- /src/config/index.ts: -------------------------------------------------------------------------------- 1 | import { IAnyObject } from '@src/types' 2 | 3 | interface IConfig { 4 | [propName: string]: IAnyObject 5 | } 6 | 7 | // 这里是后台接口前缀 8 | export const config: IConfig = { 9 | development: { 10 | default: 'http://192.168.200.7:9900', 11 | localhost: '/', 12 | hjcLocalhost: 'http://192.168.200.7:9900', 13 | wjLocalhost: 'http://192.168.200.7:9900' 14 | }, 15 | production: { 16 | default: 'http://yjyj.hkdata.com', 17 | localhost: '/', 18 | hjcLocalhost: 'http://yjyj.hkdata.com', 19 | wjLocalhost: 'http://yjyj.hkdata.com' 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/config/table-config.ts: -------------------------------------------------------------------------------- 1 | const tableConfig = { 2 | bordered: true, 3 | pagination: { 4 | show: true, 5 | pageSize: 10, 6 | current: 1 7 | }, 8 | showHeader: true, 9 | hasData: true, 10 | tableLayout: undefined, 11 | dateValueType: 'date', 12 | search: { 13 | span: 6, 14 | collapseRender: undefined, 15 | labelWidth: 100 16 | }, 17 | options: { 18 | show: true, 19 | density: true, 20 | // fullScreen: true, 21 | setting: true 22 | }, 23 | rowKey: 'id' 24 | }; 25 | 26 | export default tableConfig; 27 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | /*公用搜索样式*/ 2 | 3 | @include b(search) { 4 | margin-bottom: 10px; 5 | padding: 15px 10px 0 10px; 6 | background: #fff; 7 | border-radius: 5px; 8 | @include e(list) { 9 | display: flex; 10 | flex-wrap: wrap; 11 | } 12 | @include e(item) { 13 | width: 300px; 14 | display: flex; 15 | align-items: center; 16 | padding-bottom: 15px; 17 | overflow: hidden; 18 | .label { 19 | width: 100px; 20 | text-align: right; 21 | } 22 | .value { 23 | flex: 1; 24 | overflow: hidden; 25 | } 26 | } 27 | } 28 | 29 | /*公用表格*/ 30 | 31 | @include b(table) { 32 | @include e(operation) { 33 | position: relative; 34 | left: -5px; 35 | display: flex; 36 | align-items: center; 37 | .link { 38 | opacity: 1; 39 | color: #1890ff; 40 | cursor: pointer; 41 | margin: 0 5px; 42 | transition: all 0.25s ease 0s; 43 | &:hover { 44 | opacity: 0.8; 45 | } 46 | } 47 | .num { 48 | display: inline; 49 | min-width: 60px; 50 | color: #333; 51 | } 52 | } 53 | } 54 | 55 | .link { 56 | color: #1890ff; 57 | transition: all 0.25s ease 0s; 58 | cursor: pointer; 59 | &:hover { 60 | color: #40a9ff; 61 | } 62 | } 63 | 64 | /* 设置滚动条的样式 */ 65 | 66 | ::-webkit-scrollbar { 67 | width: 6px; 68 | height: 6px; 69 | } 70 | 71 | /* 滚动槽 */ 72 | 73 | ::-webkit-scrollbar-track { 74 | border-radius: 6px; 75 | } 76 | 77 | /* 滚动条滑块 */ 78 | 79 | ::-webkit-scrollbar-thumb { 80 | border-radius: 6px; 81 | background: rgba(255, 255, 255, 0.5); 82 | } 83 | 84 | ::-webkit-scrollbar-thumb:window-inactive { 85 | background: rgba(255, 255, 255, 0.5); 86 | } 87 | 88 | .ant-pro-table .ant-pro-table-search { 89 | margin-bottom: 10px; 90 | } 91 | 92 | .ant-tabs-content-left .ant-tabs-tabpane { 93 | padding-left: 10px !important; 94 | } 95 | 96 | @keyframes rotate { 97 | 0% { 98 | transform: rotate(0); 99 | } 100 | 100% { 101 | transform: rotate(360deg); 102 | } 103 | } 104 | 105 | // 右击菜单样式 106 | @include b(content-menu) { 107 | display: none; 108 | position: fixed; 109 | left: 300px; 110 | top: 200px; 111 | z-index: 99999; 112 | width: 200px; 113 | background-color: #666; 114 | border: 1px solid rgba(0, 0, 0, 0.8); 115 | border-radius: 5px; 116 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 117 | overflow: hidden; 118 | @include e(item) { 119 | display: flex; 120 | padding: 0 10px; 121 | line-height: 30px; 122 | cursor: pointer; 123 | color: rgba(255, 255, 255, 0.8); 124 | transition: all 0.25s ease 0s; 125 | &:hover { 126 | color: #fff; 127 | background-color: #444; 128 | } 129 | .app-icon { 130 | padding-right: 10px; 131 | } 132 | .name { 133 | flex: 1; 134 | } 135 | &:last-child { 136 | border: none; 137 | } 138 | @include when(disabled) { 139 | cursor: no-drop; 140 | color: rgba(255, 255, 255, 0.4); 141 | &:hover { 142 | color: rgba(255, 255, 255, 0.4); 143 | background-color: #666; 144 | } 145 | } 146 | @include when(border) { 147 | border-bottom: 1px solid rgba(0, 0, 0, 0.4); 148 | } 149 | } 150 | } 151 | 152 | #js_loading { 153 | position: fixed; 154 | left: 50%; 155 | top: 59%; 156 | transform: translate(-50%, -100px); 157 | display: none; 158 | align-items: center; 159 | justify-content: center; 160 | width: 80px; 161 | height: 80px; 162 | border-radius: 10px; 163 | background: rgba(0, 0, 0, 0.85); 164 | .ant-spin { 165 | color: #fff; 166 | } 167 | .ant-spin-dot-item { 168 | background: #fff; 169 | } 170 | } 171 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-10 21:06:49 7 | * @FilePath: \bigscreen\src\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import ReactDOM from 'react-dom' 11 | import { ConfigProvider } from 'antd' 12 | import moment from 'moment' 13 | import App from './App' 14 | import { persistStore } from 'redux-persist' 15 | import { PersistGate } from 'redux-persist/integration/react' 16 | import { Provider } from 'react-redux' 17 | import store from './store/index' 18 | import '@ant-design/pro-table/dist/table.css' 19 | // import 'default-passive-events' 20 | // 国际化 21 | import zhCN from 'antd/lib/locale/zh_CN' 22 | import 'moment/locale/zh-cn' 23 | import 'antd/dist/antd.min.css' 24 | import './index.scss' 25 | import './mock' 26 | moment.locale('zh-cn') 27 | const persistor = persistStore(store) 28 | 29 | ReactDOM.render( 30 | 31 | 32 | 33 | 34 | 35 | 36 | , 37 | document.getElementById('root') 38 | ) 39 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/mock/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-10-10 20:59:35 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-12 15:10:03 7 | * @FilePath: \bigscreen\src\mock\index.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import Mock from 'mockjs' 11 | // 登录模块 12 | import * as login from './modules/login' 13 | // 模拟数据接口 14 | import * as configuration from './modules/configuration' 15 | // 简报数据接口 16 | import * as report from './modules/report' 17 | 18 | create(login) 19 | create(configuration) 20 | create(report) 21 | /** 22 | * 根据模块创建接口 23 | * @param mod m模块 24 | */ 25 | function create(mod: any) { 26 | for (let key in mod) { 27 | Mock.mock(RegExp(mod[key].url + '*'), mod[key].method, (options) => { 28 | const body = JSON.parse(options.body) 29 | const { url, data } = mod[key] 30 | // 这里判断登录是username:admin,password:123456,才可以判断 31 | if ( 32 | url === '/login' && 33 | (body.username !== 'admin' || body.password !== '123456') 34 | ) { 35 | return { 36 | ...data, 37 | code: 400, 38 | data: null, 39 | message: '用户名或密码错误' 40 | } 41 | } 42 | 43 | return { 44 | ...data, 45 | data: { 46 | ...data.data, 47 | ...body 48 | } 49 | } 50 | }) 51 | } 52 | } 53 | 54 | export default Mock 55 | -------------------------------------------------------------------------------- /src/mock/modules/configuration.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 模拟接口数据 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-10-11 19:49:25 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-12 14:18:53 7 | * @FilePath: \bigscreen\src\mock\modules\configuration.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import Mock from 'mockjs' 11 | export const configuration = { 12 | url: '/configuration', 13 | method: 'get', 14 | data: { 15 | code: 0, 16 | sucess: true, 17 | data: Mock.mock({ 18 | value: '@csentence(5)', 19 | series: [ 20 | { 21 | seriesName: '@ctitle(3)', 22 | 'data|6': [ 23 | { 24 | name: '@region', 25 | 'value|1-300': 100 26 | } 27 | ] 28 | } 29 | ], 30 | 'radio|3': [{ label: '@csentence(2)', value: '@increment' }] 31 | }) 32 | }, 33 | message: '成功' 34 | } 35 | -------------------------------------------------------------------------------- /src/mock/modules/login.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 登录接口配置 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-10-11 08:53:06 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-11 20:47:53 7 | * @FilePath: \bigscreen\src\mock\modules\login.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | /*eslint-disable*/ 11 | import Mock from 'mockjs' 12 | 13 | export const login = { 14 | url: '/login', 15 | method: 'post', 16 | data: { 17 | code: 0, 18 | sucess: true, 19 | data: Mock.mock({ 20 | email: '@email()', 21 | 'age|20-80': 10, 22 | name: '@cword(3, 5)', 23 | describe: '@cparagraph(2)', 24 | token: '@guid', 25 | avatar: '@image(200x100)' 26 | }), 27 | message: '登录成功' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/pages/configuration/components/add-or-edit-page/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-09 20:35:48 7 | * @FilePath: \bigscreen\src\pages\configuration\components\add-or-edit-page\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import React, { FC, useEffect } from 'react' 11 | import { Button, Form, Input, message } from 'antd' 12 | import { IPage } from '@src/store/actionType' 13 | import { guid } from '@src/utils/tools' 14 | import { useForm } from 'antd/lib/form/Form' 15 | 16 | interface IAddOrEditPageProps { 17 | setModal: React.Dispatch 18 | addLargeScreenPage: (data: IPage, callback?: Function) => void 19 | modifyLargeScreenPage: (id: string, data: IPage, callback?: Function) => void 20 | details: any 21 | } 22 | 23 | const AddOrEditPage: FC = ({ 24 | setModal, 25 | addLargeScreenPage, 26 | modifyLargeScreenPage, 27 | details 28 | }) => { 29 | const [form] = useForm() 30 | // 编辑时回填表单数据 31 | useEffect(() => { 32 | if (details.name) { 33 | form.setFieldsValue({ 34 | name: details.name 35 | }) 36 | } 37 | }, [details.name, form]) 38 | 39 | // 成功回调函数 40 | const successHandler = (msg: string) => { 41 | message.success(msg) 42 | setModal((state: any) => ({ 43 | ...state, 44 | visible: false 45 | })) 46 | } 47 | // 保存 48 | const onFinish = (values: any) => { 49 | const params = { 50 | ...values, 51 | id: details.id || guid(), 52 | widgets: details.widgets || [] 53 | } 54 | // 编辑 55 | if (details.id) { 56 | modifyLargeScreenPage(details.id, params, () => { 57 | successHandler('编辑成功') 58 | }) 59 | } else { 60 | // 新增 61 | addLargeScreenPage(params, () => { 62 | successHandler('新增成功') 63 | }) 64 | } 65 | } 66 | 67 | return ( 68 |
69 | 72 | 73 | 74 | 75 | 78 | 79 |
80 | ) 81 | } 82 | 83 | export default AddOrEditPage 84 | -------------------------------------------------------------------------------- /src/pages/configuration/components/center/components/auxiliary.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FC 3 | } from 'react' 4 | 5 | interface IAuxiliaryProps { 6 | screen: any; 7 | } 8 | 9 | const Auxiliary: FC = ({ 10 | screen 11 | }) => { 12 | const arr = Array.from(new Array(screen.horizontalNumber * screen.verticalNumber).keys()) 13 | return ( 14 | <> 15 | { 16 | screen.showAuxiliary ?
21 | { 22 | arr.map(item => ( 23 |
32 | )) 33 | } 34 |
: null 35 | } 36 | 37 | ) 38 | } 39 | 40 | export default Auxiliary -------------------------------------------------------------------------------- /src/pages/configuration/components/center/components/grid.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FC 3 | } from 'react' 4 | 5 | interface IGridPrips { 6 | screen: any; 7 | } 8 | 9 | const Grid: FC = ({ 10 | screen 11 | }) => { 12 | return ( 13 | <> 14 | { 15 | screen.gridFlag ? 16 | 21 | 22 | 30 | 38 | 39 | 40 | 41 | : null 42 | } 43 | 44 | ) 45 | } 46 | 47 | export default Grid -------------------------------------------------------------------------------- /src/pages/configuration/components/header/index.scss: -------------------------------------------------------------------------------- 1 | @include b(screen-disign) { 2 | @include e(header) { 3 | position: relative; 4 | z-index: 1000; 5 | display: flex; 6 | height: 50px; 7 | color: rgba(255, 255, 255, 0.8); 8 | background-color: #535353; 9 | border-bottom: 1px solid rgba(0, 0, 0, 0.8); 10 | p { 11 | margin: 0; 12 | font-size: 12px; 13 | line-height: 1; 14 | } 15 | @include m(left) { 16 | display: flex; 17 | height: 100%; 18 | font-size: 16px; 19 | li { 20 | position: relative; 21 | margin-right: 5px; 22 | padding: 3px 8px 0 8px; 23 | font-size: 16px; 24 | cursor: pointer; 25 | text-align: center; 26 | transition: all 0.25s ease 0s; 27 | &:hover { 28 | color: #fff; 29 | background-color: #222; 30 | .elements { 31 | display: flex; 32 | } 33 | } 34 | @include when(disabled) { 35 | color: rgba(255, 255, 255, 0.4); 36 | cursor: no-drop; 37 | &:hover { 38 | .elements { 39 | display: none; 40 | } 41 | background: none !important; 42 | } 43 | } 44 | } 45 | .elements { 46 | display: none; 47 | flex-wrap: wrap; 48 | position: absolute; 49 | left: 0; 50 | top: 49px; 51 | width: 450px; 52 | padding-top: 15px; 53 | background-color: #222; 54 | > div { 55 | width: 100px; 56 | height: 100px; 57 | margin: 0 0 0 10px; 58 | color: #666; 59 | &:hover { 60 | color: #fff; 61 | img { 62 | transform: scale(1.1); 63 | } 64 | } 65 | } 66 | .img { 67 | width: 100%; 68 | height: 64px; 69 | font-size: 45px; 70 | text-align: center; 71 | line-height: 80px; 72 | border: 1px solid #333; 73 | box-sizing: border-box; 74 | border-radius: 5px; 75 | overflow: hidden; 76 | img { 77 | vertical-align: top; 78 | width: 100%; 79 | height: 100%; 80 | transition: all 0.25s ease 0s; 81 | } 82 | } 83 | .name { 84 | height: 30px; 85 | line-height: 30px; 86 | font-size: 12px; 87 | transition: all 0.25s ease 0s; 88 | @include single(); 89 | } 90 | } 91 | } 92 | @include m(center) { 93 | flex: 1; 94 | display: flex; 95 | justify-content: flex-end; 96 | height: 100%; 97 | padding-left: 10px; 98 | line-height: 1; 99 | .shortcuts-group { 100 | position: relative; 101 | display: flex; 102 | padding-right: 10px; 103 | &:after, 104 | &:before { 105 | position: absolute; 106 | top: 12px; 107 | bottom: 12px; 108 | content: ''; 109 | width: 1px; 110 | } 111 | &:after { 112 | right: 5px; 113 | background-color: rgba(0, 0, 0, 0.3); 114 | } 115 | &:before { 116 | right: 4px; 117 | background-color: rgba(255, 255, 255, 0.11); 118 | } 119 | } 120 | p { 121 | padding-top: 5px; 122 | } 123 | li { 124 | display: flex; 125 | align-items: center; 126 | margin-right: 5px; 127 | padding: 0 8px; 128 | font-size: 16px; 129 | cursor: pointer; 130 | text-align: center; 131 | transition: all 0.25s ease 0s; 132 | &:hover { 133 | color: #fff; 134 | background-color: #222; 135 | } 136 | @include when(disabled) { 137 | color: rgba(255, 255, 255, 0.4); 138 | cursor: no-drop; 139 | &:hover { 140 | background: none !important; 141 | } 142 | } 143 | } 144 | } 145 | @include m(right) { 146 | display: flex; 147 | li { 148 | padding: 0 15px; 149 | line-height: 50px; 150 | font-size: 20px; 151 | &:hover { 152 | cursor: pointer; 153 | color: #fff; 154 | background-color: #1890ff; 155 | } 156 | } 157 | } 158 | } 159 | } 160 | -------------------------------------------------------------------------------- /src/pages/configuration/components/left/index.scss: -------------------------------------------------------------------------------- 1 | @include b(screen-disign) { 2 | @include e(body) { 3 | @include m(left) { 4 | position: absolute; 5 | left: 0; 6 | top: 0; 7 | bottom: 0; 8 | z-index: 101; 9 | width: 200px; 10 | background-color: #535353; 11 | border-right: 1px solid rgba(0, 0, 0, .8); 12 | transition: all .25s ease 0s; 13 | .header { 14 | height: 30px; 15 | padding: 0 10px; 16 | line-height: 30px; 17 | color: #a0a0a0; 18 | font-size: 12px; 19 | background-color: #424242; 20 | border-bottom: 1px solid #383838; 21 | border-top: 1px solid #383838; 22 | } 23 | .body { 24 | padding: 10px; 25 | } 26 | .page { 27 | overflow: hidden; 28 | } 29 | .page-item { 30 | display: flex; 31 | width: calc(100% + 80px); 32 | position: relative; 33 | padding: 0 0 0 10px; 34 | cursor: pointer; 35 | line-height: 40px; 36 | color: rgba(255, 255, 255, .6); 37 | border-bottom: 1px solid #383838; 38 | border-left: 5px solid transparent; 39 | transition: all .25s ease 0s; 40 | box-sizing: border-box; 41 | &.is-noactive:hover { 42 | transform: translateX(-80px); 43 | } 44 | &:hover { 45 | color: #fff; 46 | } 47 | .name { 48 | flex: 1; 49 | @include single(); 50 | } 51 | @include when(active) { 52 | font-weight: bold; 53 | color: #fff; 54 | border-left-color: #1890ff; 55 | } 56 | } 57 | .page-item__operation { 58 | display: flex; 59 | width: 80px; 60 | >span { 61 | flex: 1; 62 | text-align: center; 63 | border-left: 1px solid #383838; 64 | transition: all .25s ease 0s; 65 | &:hover { 66 | background-color: #1890ff; 67 | } 68 | } 69 | } 70 | .operation { 71 | width: 30px; 72 | height: 30px; 73 | background: #535353; 74 | position: absolute; 75 | top: 50%; 76 | right: -30px; 77 | margin-top: -15px; 78 | padding-left: 5px; 79 | border: 1px solid rgba(0, 0, 0, 0.8); 80 | border-left-color: transparent; 81 | border-top-right-radius: 15px; 82 | border-bottom-right-radius: 15px; 83 | box-shadow: 4px 0 7px rgba(0, 0, 0, .3); 84 | cursor: pointer; 85 | color: rgba(255, 255, 255, .6); 86 | line-height: 30px; 87 | font-size: 16px; 88 | transition: all .25s ease 0s; 89 | &:hover { 90 | color: #fff; 91 | } 92 | } 93 | } 94 | } 95 | } -------------------------------------------------------------------------------- /src/pages/configuration/components/ruler/index.scss: -------------------------------------------------------------------------------- 1 | @include b(screen-disign) { 2 | @include e(ruler) { 3 | @include m(h) { 4 | position: absolute; 5 | left: 0; 6 | top: 0; 7 | width: 5000px; 8 | display: flex; 9 | flex-wrap: wrap; 10 | padding-left: 16px; 11 | height: 16px; 12 | background-color: #474747; 13 | overflow: hidden; 14 | .ruler-h-50 { 15 | position: relative; 16 | display: flex; 17 | width: 50px; 18 | height: 100%; 19 | align-items: flex-end; 20 | i { 21 | flex: 1; 22 | border-right: 1px solid #666; 23 | box-sizing: border-box; 24 | &:nth-child(2n) { 25 | height: 6px; 26 | } 27 | &:nth-child(2n + 1) { 28 | height: 4px; 29 | } 30 | &:last-child { 31 | height: 100%; 32 | } 33 | } 34 | b { 35 | transform: scale(.7); 36 | transform-origin: 0 0; 37 | position: absolute; 38 | left: 0; 39 | top: 0; 40 | font-size: 10; 41 | line-height: 1; 42 | font-weight: normal; 43 | color: #a0a0a0; 44 | font-family: Arial, Helvetica, sans-serif; 45 | } 46 | } 47 | } 48 | @include m(v) { 49 | position: absolute; 50 | left: 0; 51 | top: 0; 52 | bottom: 0; 53 | height: 3000px; 54 | width: 16px; 55 | overflow: hidden; 56 | padding-top: 16px; 57 | background-color: #474747; 58 | .ruler-h-50 { 59 | position: relative; 60 | display: flex; 61 | flex-direction: column; 62 | height: 50px; 63 | width: 100%; 64 | align-items: flex-end; 65 | i { 66 | flex: 1; 67 | border-bottom: 1px solid #666; 68 | &:nth-child(2n) { 69 | width: 6px; 70 | } 71 | &:nth-child(2n + 1) { 72 | width: 4px; 73 | } 74 | &:last-child { 75 | width: 100%; 76 | } 77 | } 78 | b { 79 | width: 10px; 80 | transform: scale(.7); 81 | transform-origin: 0 0; 82 | position: absolute; 83 | left: 0; 84 | top: 0; 85 | font-size: 10; 86 | line-height: 1; 87 | font-weight: normal; 88 | color: #a0a0a0; 89 | font-family: Arial, Helvetica, sans-serif; 90 | } 91 | } 92 | } 93 | } 94 | } -------------------------------------------------------------------------------- /src/pages/configuration/components/ruler/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FC 3 | } from 'react' 4 | import './index.scss' 5 | 6 | interface IRulerProps { } 7 | 8 | const Ruler: FC = () => { 9 | 10 | const arr = Array.from(new Array(100).keys()) 11 | 12 | 13 | return ( 14 |
16 |
17 |
19 | 20 | 50 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | { 33 | arr.map((item: any, index: number) => ( 34 | 35 | {index * 50} 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | )) 48 | } 49 |
50 |
51 |
52 |
54 | 55 | 50 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | { 68 | arr.map((item: any, index: number) => ( 69 | 70 | {index * 50} 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | )) 83 | } 84 |
85 |
86 |
87 | ) 88 | } 89 | 90 | export default Ruler -------------------------------------------------------------------------------- /src/pages/configuration/index.scss: -------------------------------------------------------------------------------- 1 | @include b(screen-disign) { 2 | user-select: none; 3 | overflow: hidden; 4 | @include e(body) { 5 | display: flex; 6 | height: calc(100vh - 51px); 7 | position: relative; 8 | @include m(center) { 9 | position: relative; 10 | flex: 1; 11 | padding: 0 300px 0 200px; 12 | overflow: hidden; 13 | transition: all 0.25s ease 0s; 14 | .react-draggable-group { 15 | // >.handle { 16 | // display: none; 17 | // } 18 | > .app-widget__item > .mask { 19 | display: none; 20 | } 21 | > .is-active > .mask { 22 | display: block !important; 23 | } 24 | } 25 | .react-draggable-disabled { 26 | > .handle { 27 | display: none; 28 | } 29 | } 30 | .body { 31 | position: relative; 32 | width: 100%; 33 | height: calc(100% - 30px); 34 | overflow: auto; 35 | box-sizing: border-box; 36 | background-color: #282828; 37 | border-bottom: 1px solid #000; 38 | .elements-wrap { 39 | width: 5000px; 40 | height: 3000px; 41 | background: url('../../assets/image/report/canvas-bg.png') repeat; 42 | overflow: hidden; 43 | } 44 | } 45 | .footer { 46 | display: flex; 47 | justify-content: flex-end; 48 | align-items: center; 49 | padding-right: 15px; 50 | color: rgba(255, 255, 255, 0.6); 51 | } 52 | .grid { 53 | position: absolute; 54 | left: 0; 55 | top: 0; 56 | right: 0; 57 | bottom: 0; 58 | } 59 | } 60 | } 61 | } 62 | 63 | @include b(widget) { 64 | @include e(item) { 65 | width: 100%; 66 | height: 100%; 67 | &:hover { 68 | > .mask { 69 | display: block; 70 | } 71 | } 72 | @include when(active) { 73 | > .handle { 74 | z-index: 1000; 75 | } 76 | > .mask { 77 | display: block; 78 | } 79 | > .draggable { 80 | display: block; 81 | } 82 | } 83 | .mask { 84 | display: none; 85 | position: absolute; 86 | z-index: 1; 87 | width: 100%; 88 | height: 100%; 89 | cursor: move; 90 | background: rgba(255, 255, 255, 0.6); 91 | } 92 | .line-top { 93 | position: absolute; 94 | border-left: 1px dashed #1890ff; 95 | width: 0; 96 | height: 10000px; 97 | left: 0; 98 | transform: translateY(-100%); 99 | } 100 | .line-left { 101 | position: absolute; 102 | border-top: 1px dashed #1890ff; 103 | width: 10000px; 104 | height: 0; 105 | top: 0; 106 | transform: translateX(-100%); 107 | } 108 | .label { 109 | top: -5px; 110 | left: -8px; 111 | position: absolute; 112 | padding: 5px; 113 | transform: translate(-100%, -100%); 114 | color: #1890ff; 115 | font-size: 18px; 116 | white-space: nowrap; 117 | cursor: move; 118 | } 119 | } 120 | } 121 | 122 | @include b(auxiliary) { 123 | @include e(list) { 124 | display: flex; 125 | flex-wrap: wrap; 126 | width: 100%; 127 | height: 100%; 128 | box-sizing: border-box; 129 | } 130 | @include e(item) { 131 | border: 1px dashed #1890ff; 132 | margin: 10px; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /src/pages/frame/components/bread-crumbs.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import { 3 | memo 4 | } from 'react' 5 | import { IBreadCrumbsItem } from '@store/actionType' 6 | import { Breadcrumb } from 'antd' 7 | import { Link } from 'react-router-dom' 8 | 9 | interface IBreadCrumbsProps { 10 | breadCrumbs: IBreadCrumbsItem[]; 11 | currPageTabKey: string; 12 | } 13 | 14 | const BreadCrumbs = memo((props: IBreadCrumbsProps) => { 15 | const { breadCrumbs, currPageTabKey } = props 16 | return ( 17 | <> 18 | { 19 | breadCrumbs.length ? 20 |
21 | 22 | { 23 | breadCrumbs.map((item, index: number) => 25 | { 26 | item.path ? {item.name} : 27 | item.name 28 | } 29 | ) 30 | } 31 | 32 |
33 | {breadCrumbs[breadCrumbs.length - 1].name} 34 | 对{breadCrumbs[breadCrumbs.length - 1].name}进行展示管理 35 |
36 |
: null 37 | } 38 | 39 | ) 40 | 41 | }) 42 | export default BreadCrumbs -------------------------------------------------------------------------------- /src/pages/frame/components/menu.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo, useState, useEffect } from 'react' 2 | import { Menu } from 'antd' 3 | import { Link } from 'react-router-dom' 4 | import { IMenu, IRouter } from '@store/actionType' 5 | import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons' 6 | import session from '@src/utils/session-storage' 7 | 8 | const { SubMenu } = Menu 9 | 10 | interface ICustomMenuProps { 11 | menu: IMenu[] 12 | routers: IRouter[] 13 | currPageTabKey: string 14 | collapsed: Boolean 15 | setCollapsed: React.Dispatch> 16 | } 17 | 18 | const CustomMenu = memo((props: ICustomMenuProps) => { 19 | const { menu, routers, currPageTabKey, collapsed, setCollapsed } = props 20 | // 获取当前选中的路由 21 | const [current, setCurrent] = useState('/home') 22 | // 所有一级菜单 23 | const rootSubmenuKeys: string[] = [] 24 | // 打开的菜单 25 | const [openKeys, setOpenKeys] = useState([]) 26 | 27 | // 获取首次选中的某个菜单 28 | useEffect(() => { 29 | const href = currPageTabKey 30 | if (routers.some((item) => item.path === href)) { 31 | const routerSplit = href.split('/') 32 | const currentOpenKeys: string[] = [] 33 | routerSplit.pop() 34 | if (routerSplit.length >= 1) { 35 | for (let i = 1; i < routerSplit.length; i++) { 36 | currentOpenKeys.push(routerSplit.slice(0, i + 1).join('/')) 37 | } 38 | setOpenKeys(currentOpenKeys) 39 | } 40 | } 41 | 42 | setCurrent(href) 43 | }, [currPageTabKey]) 44 | 45 | // 动态生存菜单 46 | const getMenuNodes = (menuList: any) => { 47 | return menuList.map((item: any) => { 48 | if ( 49 | item.subResource && 50 | item.subResource.some((subItem: any) => subItem.isMemu === 1) 51 | ) { 52 | if (item.resUrl && item.resUrl.split('/').length === 1) { 53 | rootSubmenuKeys.push(item.resUrl) 54 | } 55 | return ( 56 | 64 | ) : null 65 | } 66 | key={item.resUrl}> 67 | {getMenuNodes(item.subResource)} 68 | 69 | ) 70 | } 71 | if (item.components) { 72 | return ( 73 | 81 | ) : null 82 | } 83 | key={item.resUrl}> 84 | {item.resTitle} 85 | 86 | ) 87 | } 88 | }) 89 | } 90 | 91 | // 选择中菜单这里用于跳转 92 | const menuClickHandler = (key: string) => { 93 | setCurrent(key) 94 | } 95 | 96 | // 展开收起菜单时 97 | const onOpenChange = (keys: any) => { 98 | const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1) 99 | if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) { 100 | setOpenKeys(keys) 101 | } else { 102 | setOpenKeys(latestOpenKey ? [latestOpenKey] : []) 103 | } 104 | } 105 | 106 | return ( 107 |
108 |
{ 111 | setCollapsed(!collapsed) 112 | }}> 113 | {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)} 114 |
115 | menuClickHandler(e.key)} 119 | openKeys={openKeys} 120 | onOpenChange={onOpenChange} 121 | mode='inline' 122 | theme='dark'> 123 | {getMenuNodes(menu.filter((item) => item.flag))} 124 | 125 |
126 | ) 127 | }) 128 | 129 | export default CustomMenu 130 | -------------------------------------------------------------------------------- /src/pages/frame/components/routers.tsx: -------------------------------------------------------------------------------- 1 | import { lazy, memo } from 'react' 2 | import ComPrivateRoute from '@src/components/private-route' 3 | import { 4 | Switch, 5 | Redirect 6 | } from 'react-router-dom' 7 | import { IRouter } from '@store/actionType' 8 | 9 | interface IAppProps { 10 | routers: IRouter[]; 11 | } 12 | 13 | const Routers = memo((props: IAppProps) => { 14 | const { routers } = props 15 | 16 | return ( 17 | 18 | {/*首页*/} 19 | { 20 | routers.map(item => ( 21 | import(`@src/pages/${item.component}`))} /> 27 | )) 28 | } 29 | { 30 | routers.length ? 31 | : null 32 | } 33 | 34 | ); 35 | }) 36 | 37 | export default Routers 38 | -------------------------------------------------------------------------------- /src/pages/home/index.scss: -------------------------------------------------------------------------------- 1 | @include b(screen-home) { 2 | display: flex; 3 | height: calc(100vh - 124px); 4 | align-items: center; 5 | justify-content: center; 6 | font-size: 50px; 7 | font-weight: bold; 8 | } -------------------------------------------------------------------------------- /src/pages/home/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-11 11:11:05 7 | * @FilePath: \bigscreen\src\pages\home\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { FC, useEffect } from 'react' 11 | import { ALL_STATE } from '@store/actionType' 12 | import { connect } from 'react-redux' 13 | import { getStrategy } from '@store/actions/authorization' 14 | import { IAnyObject } from '@src/types' 15 | import './index.scss' 16 | 17 | interface IHomeProps { 18 | strategy: IAnyObject 19 | getStrategy: (key: string) => void 20 | path: string 21 | } 22 | 23 | const Home: FC = ({ strategy, getStrategy, path }) => { 24 | // 获取策略 25 | useEffect(() => { 26 | getStrategy(path) 27 | }, [path, getStrategy]) 28 | 29 | return ( 30 |
31 | 欢迎来到大屏后台管理系统 32 |
33 | ) 34 | } 35 | 36 | // 对应的statemkjh m, 37 | const mapStateToProps = (state: ALL_STATE) => ({ 38 | strategy: state.authorization.strategy 39 | }) 40 | 41 | // 将 对应action 插入到组件的 props 中 42 | const mapDispatchToProps = { 43 | getStrategy 44 | } 45 | 46 | export default connect(mapStateToProps, mapDispatchToProps)(Home) 47 | -------------------------------------------------------------------------------- /src/pages/login/index.scss: -------------------------------------------------------------------------------- 1 | @include b(login) { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | width: 100vw; 7 | background: url('../../assets/image/login/bg.jpg') no-repeat; 8 | background-size: 100% 100%; 9 | @include e(form) { 10 | width: 410px; 11 | padding: 50px; 12 | border-radius: 11px; 13 | background: #fff; 14 | .header { 15 | padding-bottom: 20px; 16 | .title { 17 | margin: 0; 18 | font-size: 20px; 19 | font-weight: bold; 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /src/pages/login/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-11 22:29:28 7 | * @FilePath: \bigscreen\src\pages\login\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { FC, useCallback, useEffect } from 'react' 11 | import { Form, Input, Checkbox, Button } from 'antd' 12 | import { UserOutlined, LockOutlined } from '@ant-design/icons' 13 | import { connect } from 'react-redux' 14 | import { useHistory } from 'react-router-dom' 15 | import { ALL_STATE } from '@store/actionType' 16 | import './index.scss' 17 | import { userinfo } from '@src/store/actions/userinfo' 18 | import Ajax from '@src/service' 19 | import { IAnyObject } from '@src/types/index' 20 | import session from '@src/utils/session-storage' 21 | 22 | interface ILoginProps { 23 | saveUserInfo: (data: IAnyObject) => void 24 | userinfo: IAnyObject 25 | } 26 | 27 | const Login: FC = ({ saveUserInfo, userinfo }) => { 28 | // history实例 29 | let history = useHistory() 30 | // 获取form实例 31 | const [loginForm] = Form.useForm() 32 | 33 | const jumpHome = useCallback(() => { 34 | history.replace('/frame/home') 35 | }, [history]) 36 | // 登录 37 | const onFinish = (values: any) => { 38 | Ajax.login(values).then((res) => { 39 | if (res) { 40 | saveUserInfo(res) 41 | session.setItem('token', res.token) 42 | jumpHome() 43 | } 44 | }) 45 | } 46 | useEffect(() => { 47 | if (session.getItem('token')) { 48 | jumpHome() 49 | } 50 | }, [jumpHome]) 51 | return ( 52 |
53 |
54 |
55 |
56 |

大屏管理系统

57 |
58 |
59 |
65 | 68 | } 71 | placeholder='账户' 72 | /> 73 | 74 | 77 | } 80 | placeholder='密码' 81 | /> 82 | 83 | 84 | 87 | 88 | 89 | 90 | 已阅读并同意《用户使用协议》及 91 | 《用户隐私协议》 92 | 93 | 94 |
95 |
96 |
97 |
98 | ) 99 | } 100 | 101 | // 对应的statemkjh m, 102 | const mapStateToProps = (state: ALL_STATE) => ({ 103 | counter: state.counter, 104 | userinfo: state.userinfo 105 | }) 106 | 107 | // 将 对应action 插入到组件的 props 中 108 | const mapDispatchToProps = { 109 | saveUserInfo: userinfo 110 | } 111 | 112 | export default connect(mapStateToProps, mapDispatchToProps)(Login) 113 | -------------------------------------------------------------------------------- /src/pages/preview/index.scss: -------------------------------------------------------------------------------- 1 | @include b(preview) { 2 | position: relative; 3 | width: 100vw; 4 | height: 100vh; 5 | @include e(container) { 6 | position: 'absolute'; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/report/big-screen/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myfirebug/bigscreen/0523974cd341c0c025d93138e6352be5b729792f/src/pages/report/big-screen/index.scss -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /src/service/config.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-15 00:00:51 7 | * @FilePath: \bigscreen\src\service\config.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { IAnyObject } from '@src/types' 11 | 12 | interface IConfig { 13 | [propName: string]: IAnyObject 14 | } 15 | 16 | const config: IConfig = { 17 | // 开发 18 | development: { 19 | default: 'http://172.19.20.12:9905', 20 | geo: 'http://geo.datav.aliyun.com/areas_v3/bound/', 21 | local: window.location.href.split('#')[0] 22 | }, 23 | // 测试 24 | test: { 25 | default: 'http://172.19.20.12:9905', 26 | geo: 'http://geo.datav.aliyun.com/areas_v3/bound/', 27 | local: 'http://geo.datav.aliyun.com/' 28 | }, 29 | // 正式 30 | production: { 31 | default: 'http://192.168.200.7:9905', 32 | geo: 'http://geo.datav.aliyun.com/areas_v3/bound/', 33 | local: 'https://myfirebug.github.io' 34 | } 35 | } 36 | 37 | export default config 38 | -------------------------------------------------------------------------------- /src/service/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-12 15:37:43 7 | * @FilePath: \bigscreen\src\service\index.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { get, IResult, post } from './fetch' 11 | import { IAnyObject } from '@src/types' 12 | interface IApi { 13 | [propNames: string]: (params?: IAnyObject) => Promise 14 | } 15 | 16 | const api: IApi = { 17 | // 获取echarts geo数据 18 | getGeo(params: any) { 19 | return get({ 20 | url: `/geo/areas_v3/bound/${params.field}.json`, 21 | loading: true, 22 | servicePrefix: 'local' 23 | }) 24 | }, 25 | // 登录 26 | login(params: any) { 27 | return post({ 28 | url: `/login`, 29 | loading: true, 30 | data: params, 31 | servicePrefix: 'local' 32 | }) 33 | }, 34 | // 简报列表 35 | report(params: any) { 36 | return get({ 37 | url: `/report-list`, 38 | loading: true, 39 | data: params, 40 | servicePrefix: 'local' 41 | }) 42 | }, 43 | // 简报删除 44 | reportDelete(params: any) { 45 | return post({ 46 | url: `/report-delete`, 47 | loading: true, 48 | data: params, 49 | servicePrefix: 'local' 50 | }) 51 | } 52 | } 53 | 54 | export default api 55 | -------------------------------------------------------------------------------- /src/setupProxy.js: -------------------------------------------------------------------------------- 1 | const { createProxyMiddleware } = require('http-proxy-middleware') 2 | 3 | module.exports = function (app) { 4 | app.use( 5 | createProxyMiddleware('/geo', { 6 | //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000) 7 | target: 'http://geo.datav.aliyun.com', //配置转发目标地址(能返回数据的服务器地址) 8 | changeOrigin: true, //控制服务器接收到的请求头中host字段的值 9 | /* 10 | changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 11 | changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000 12 | changeOrigin默认值为false，但我们一般将changeOrigin值设为true 13 | */ 14 | pathRewrite: { '^/geo': '' } //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置) 15 | }) 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/store/actions/authorization.ts: -------------------------------------------------------------------------------- 1 | import { 2 | MENU, 3 | MENU_TYPE, 4 | MENU_STATE, 5 | STRATEGY, 6 | STRATEGY_TYPE, 7 | RESIDENCES 8 | } from '../actionType' 9 | import { Dispatch } from 'redux' 10 | import { IResult } from '@service/fetch' 11 | import Ajax from '@service/index' 12 | import asession from '@src/utils/session-storage' 13 | 14 | // 获取菜单接口类型 15 | export interface IMenuAction { 16 | type: MENU_TYPE 17 | datas: MENU_STATE 18 | } 19 | 20 | // 获取策略 21 | export interface IStrategyAction { 22 | type: STRATEGY_TYPE 23 | key: string 24 | } 25 | 26 | // 定义 ModifyMenuAction 类型 27 | export type ModifyMenuAction = IMenuAction | IStrategyAction 28 | 29 | // 获取菜单action 30 | const actionMenu = (datas: MENU_STATE): IMenuAction => ({ 31 | type: MENU, 32 | datas: datas 33 | }) 34 | 35 | // 获取策略 action 36 | const actionStrategy = (key: string): IStrategyAction => ({ 37 | type: STRATEGY, 38 | key 39 | }) 40 | 41 | // 更新菜单方法 42 | export const getMenu = 43 | (datas?: MENU_STATE, callback?: Function) => 44 | (dispatch: Dispatch, getState: Function) => { 45 | const state = getState() 46 | 47 | if (datas) { 48 | dispatch(actionMenu(datas)) 49 | } else { 50 | if ( 51 | state && 52 | state.authorization && 53 | state.authorization.menu && 54 | state.authorization.menu.length 55 | ) { 56 | return false 57 | } 58 | const memus: MENU_STATE = [ 59 | { 60 | isMemu: 1, 61 | resUrl: '/frame/home', 62 | components: 'home', 63 | resIcon: '', 64 | resTitle: '首页', 65 | status: 0, 66 | flag: true, 67 | subResource: [] 68 | }, 69 | { 70 | isMemu: 1, 71 | resUrl: '/frame/configuration', 72 | components: 'configuration', 73 | resIcon: '', 74 | resTitle: '配置', 75 | status: 0, 76 | flag: false, 77 | subResource: [] 78 | }, 79 | { 80 | isMemu: 1, 81 | resUrl: '/frame/preview', 82 | components: 'preview', 83 | resIcon: 'e670', 84 | resTitle: '预览', 85 | status: 0, 86 | flag: false, 87 | subResource: [] 88 | }, 89 | { 90 | isMemu: 2, 91 | resUrl: '/frame/report', 92 | components: '', 93 | resIcon: '', 94 | resTitle: '报表设计', 95 | flag: true, 96 | status: 0, 97 | subResource: [ 98 | { 99 | isMemu: 1, 100 | resUrl: '/frame/report/big-screen', 101 | components: 'report/big-screen', 102 | resIcon: '', 103 | resTitle: '报表管理', 104 | status: 0, 105 | flag: true, 106 | subResource: [] 107 | } 108 | ] 109 | } 110 | ] 111 | dispatch(actionMenu(memus)) 112 | } 113 | } 114 | 115 | // 获取策略 116 | export const getStrategy = (key: string) => (dispatch: Dispatch) => { 117 | dispatch(actionStrategy(key)) 118 | } 119 | -------------------------------------------------------------------------------- /src/store/actions/counter.ts: -------------------------------------------------------------------------------- 1 | import { 2 | DECREMENT, 3 | DECREMENT_TYPE, 4 | INCREMENT, 5 | INCREMENT_TYPE 6 | } from '../actionType'; 7 | import { Dispatch } from 'redux'; 8 | 9 | // 增加的接口类型 10 | export interface IIncrementAction { 11 | type: INCREMENT_TYPE; 12 | } 13 | // 删除的接口类型 14 | export interface IDecrementAction { 15 | type: DECREMENT_TYPE; 16 | } 17 | 18 | // 定义 ModifyAction 类型，包含 IIncrementAction 和 IDecrementAction接口类型 19 | export type ModifyAction = IIncrementAction | IDecrementAction; 20 | 21 | // 增加 state 次数据的方法 22 | const actionIncrement = (): IIncrementAction => ({ 23 | type: INCREMENT 24 | }); 25 | 26 | // 减少 state 次数据的方法 27 | const actionDecrement = (): IDecrementAction => ({ 28 | type: DECREMENT 29 | }); 30 | 31 | export const increment = () => (dispatch: Dispatch) => { 32 | dispatch(actionIncrement()); 33 | }; 34 | 35 | export const decrement = () => (dispatch: Dispatch) => { 36 | dispatch(actionDecrement()); 37 | }; 38 | -------------------------------------------------------------------------------- /src/store/actions/userinfo.ts: -------------------------------------------------------------------------------- 1 | import { USERINFO, USERINFO_TYPE } from '../actionType' 2 | import { IAnyObject } from '@src/types/index' 3 | import { Dispatch } from 'redux' 4 | 5 | // 增加的接口类型 6 | export interface IUserInfoAction { 7 | type: USERINFO_TYPE 8 | data: IAnyObject 9 | } 10 | // 定义 ModifyAction 类型，包含 IIncrementAction 和 IDecrementAction接口类型 11 | export type ModifyAction = IUserInfoAction 12 | 13 | // 增加 state 次数据的方法 14 | const actioUserinfo = (data: IAnyObject): IUserInfoAction => ({ 15 | type: USERINFO, 16 | data 17 | }) 18 | 19 | export const userinfo = (data: IAnyObject) => (dispatch: Dispatch) => { 20 | dispatch(actioUserinfo(data)) 21 | } 22 | -------------------------------------------------------------------------------- /src/store/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: store入口文件 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-11 11:31:29 7 | * @FilePath: \bigscreen\src\store\index.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { createStore, applyMiddleware } from 'redux' 11 | // 数据持久化工具 12 | import { persistReducer } from 'redux-persist' 13 | import storage from 'redux-persist/lib/storage/session' 14 | import logger from 'redux-logger' 15 | import thunk from 'redux-thunk' 16 | import reducers from './reducers' 17 | 18 | const middleware: any[] = [thunk] 19 | 20 | // 判断是否是正式环境 21 | if (process.env.NODE_ENV === 'development') { 22 | middleware.push(logger) 23 | } 24 | 25 | const persistConfig = { 26 | // 存储的名称 27 | key: 'BASE_ROOT', 28 | // 存储方式 29 | storage: storage, 30 | // 某个reducer,不持久化 31 | // blacklist: ['development'], 32 | // 需要持久化的模块 33 | whitelist: [ 34 | 'counter', 35 | 'dictionary', 36 | 'authorization', 37 | 'largeScreen', 38 | 'userinfo' 39 | ] 40 | } 41 | 42 | const persistedReducer = persistReducer(persistConfig, reducers) 43 | 44 | export default createStore(persistedReducer, applyMiddleware(...middleware)) 45 | -------------------------------------------------------------------------------- /src/store/reducers/authorization.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import { ModifyMenuAction } from '../actions/authorization'; 3 | import { IAuthorization, MENU, STRATEGY } from '../actionType'; 4 | import { IAnyObject } from '@src/types'; 5 | 6 | import { getRouters, getGroupById, getParentsById } from '@src/utils/tools'; 7 | 8 | const initialState = { 9 | menu: [], 10 | routers: [], 11 | strategy: [], 12 | breadCrumbs: [] 13 | }; 14 | 15 | // 处理并返回 state 16 | export const authorization = ( 17 | state: IAuthorization = initialState, 18 | action: ModifyMenuAction 19 | ): IAuthorization => { 20 | switch (action.type) { 21 | case MENU: { 22 | const routers: any[] = []; 23 | getRouters(JSON.parse(JSON.stringify(action.datas)), routers); 24 | return { 25 | ...state, 26 | menu: action.datas, 27 | routers: routers 28 | }; 29 | } 30 | case STRATEGY: { 31 | let strategy: IAnyObject = {}; 32 | const data: any = getGroupById(state.menu, action.key, 'resUrl'); 33 | const breadCrumbs = getParentsById(state.menu, action.key); 34 | const menuDatas = data.subResource 35 | ? data.subResource.filter( 36 | (item: any) => item.isMemu === 3 || item.isMemu === 4 37 | ) 38 | : []; 39 | if (menuDatas.length) { 40 | for (let i = 0; i < menuDatas.length; i++) { 41 | if (menuDatas[i].permissions) { 42 | strategy[menuDatas[i].permissions] = menuDatas[i].resUrl || true; 43 | } 44 | } 45 | } 46 | return { 47 | ...state, 48 | breadCrumbs: breadCrumbs ? breadCrumbs.reverse() : [], 49 | strategy: strategy 50 | }; 51 | } 52 | default: 53 | return state; 54 | } 55 | }; 56 | -------------------------------------------------------------------------------- /src/store/reducers/counter.ts: -------------------------------------------------------------------------------- 1 | import { ModifyAction } from '../actions/counter'; 2 | import { DECREMENT, INCREMENT, COUNTER_STATE } from '../actionType'; 3 | 4 | // 处理并返回 state 5 | 6 | export const counter = ( 7 | state: COUNTER_STATE = 4, 8 | action: ModifyAction 9 | ): number => { 10 | switch (action.type) { 11 | case DECREMENT: 12 | return state - 1; 13 | case INCREMENT: 14 | return state + 1; 15 | default: 16 | return state; 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/store/reducers/index.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | import { authorization } from './authorization' 3 | import { counter } from './counter' 4 | import { largeScreen } from './largeScreen' 5 | import { userinfo } from './userinfo' 6 | export default combineReducers({ 7 | counter, 8 | authorization, 9 | largeScreen, 10 | userinfo 11 | }) 12 | -------------------------------------------------------------------------------- /src/store/reducers/userinfo.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: userinfo reducers 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-10-11 11:24:07 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-10-11 11:34:00 7 | * @FilePath: \bigscreen\src\store\reducers\userinfo.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { ModifyAction } from '../actions/userinfo' 11 | import { USERINFO } from '../actionType' 12 | import { IAnyObject } from '@src/types/index' 13 | 14 | // 处理并返回 state 15 | 16 | export const userinfo = ( 17 | state: IAnyObject = {}, 18 | action: ModifyAction 19 | ): IAnyObject => { 20 | switch (action.type) { 21 | case USERINFO: 22 | return action.data 23 | default: 24 | return state 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/theme/index.ts: -------------------------------------------------------------------------------- 1 | // 白色主题 2 | import white from './white'; 3 | // 白色主题 4 | import dark from './dark'; 5 | 6 | // 所有主题的集合 7 | const THEMES = { 8 | white: white, 9 | dark: dark 10 | }; 11 | 12 | export default THEMES; 13 | -------------------------------------------------------------------------------- /src/types/index.ts: -------------------------------------------------------------------------------- 1 | import { AxiosRequestConfig } from 'axios' 2 | // 任意类型的object 3 | export interface IAnyObject { 4 | [propName: string]: any 5 | } 6 | // 默认接口请求 7 | export interface IDefaultConfig extends AxiosRequestConfig { 8 | loading?: boolean 9 | servicePrefix?: string 10 | } 11 | 12 | // echarts所有主题，这里需要与themes里的THEMES的key保持一致 13 | export type IThemeNames = 'white' | 'dark' 14 | 15 | // echarts里的events 16 | export interface IEchartOnEventItem { 17 | name: 18 | | 'click' 19 | | 'dblclick' 20 | | 'mousedown' 21 | | 'mousemove' 22 | | 'mouseup' 23 | | 'mouseover' 24 | | 'mouseout' 25 | | 'globalout' 26 | | 'contextmenu' 27 | fn: (params?: any) => void 28 | } 29 | 30 | // echarts配置 31 | export interface IEchartConfig { 32 | style?: IAnyObject 33 | options: IAnyObject 34 | theme?: IThemeNames 35 | /** 36 | * notMerge 可选。 37 | * 是否不跟之前设置的 option 进行合并。默认为 false。 38 | * 即表示合并。合并的规则，详见 组件合并模式。 39 | * 如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。 40 | */ 41 | notMerge?: boolean 42 | /** 43 | * lazyUpdate 可选。 44 | * 在设置完 option 后是否不立即更新图表，默认为 false，即同步立即更新。 45 | * 如果为 true，则会在下一个 animation frame 中，才更新图表。 46 | */ 47 | lazyUpdate?: boolean 48 | getEchart?: (instance?: any) => void 49 | autoplay?: { 50 | interval: number 51 | } 52 | onEvents?: IEchartOnEventItem[] 53 | } 54 | 55 | // 抽屉接口 56 | export interface IDrawer { 57 | title: string 58 | visible: boolean 59 | type: 'add' | 'edit' 60 | data: IAnyObject 61 | } 62 | -------------------------------------------------------------------------------- /src/utils/session-storage.ts: -------------------------------------------------------------------------------- 1 | // Storage封装 2 | const STORAGE_KEY = 'PUBLIC'; 3 | 4 | const session = { 5 | setItem(key: string, value: any, moduleName?: string) { 6 | if (moduleName) { 7 | const val = this.getItem(moduleName); 8 | val[key] = value; 9 | this.setItem(moduleName, val); 10 | } else { 11 | const val = this.getStorage(); 12 | val[key] = value; 13 | window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val)); 14 | } 15 | }, 16 | // 获取某一个模块下面的属性user下面的userName 17 | getItem(key: string, moduleName?: string) { 18 | if (moduleName) { 19 | const val: any = this.getItem(moduleName); 20 | if (val) return val[key]; 21 | } 22 | return this.getStorage()[key]; 23 | }, 24 | getStorage() { 25 | const result = (window as any).sessionStorage.getItem(STORAGE_KEY); 26 | return result ? JSON.parse(result) : {}; 27 | }, 28 | clear(key: string, moduleName: string) { 29 | const val = this.getStorage(); 30 | if (moduleName) { 31 | if (val[moduleName]) return; 32 | delete val[moduleName][key]; 33 | } else { 34 | delete val[key]; 35 | } 36 | window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val)); 37 | } 38 | }; 39 | 40 | export default session; 41 | -------------------------------------------------------------------------------- /src/widget/bar/index.tsx: -------------------------------------------------------------------------------- 1 | import { FC, useMemo } from 'react' 2 | // 自定义ehcarts 3 | import CustomEcharts from '@src/components/echarts' 4 | // echarts类型 5 | import { IEchartConfig } from '@src/types' 6 | // 处理options 7 | import { handleEchartsOption, handleData } from '@src/utils/echarts' 8 | import { getStyles } from '@utils/tools' 9 | 10 | interface IBarProps extends IEchartConfig { 11 | options: any 12 | data: any 13 | field: string 14 | } 15 | 16 | const Bar: FC = ({ options, data, field }) => { 17 | // 处理echarts数据 18 | const getOption = useMemo(() => { 19 | const configuration = handleEchartsOption(options) 20 | const currentData = data && data[field] ? data[field] : [] 21 | const { legendData, xAxisData, yAxisData, series } = handleData(currentData) 22 | return { 23 | ...configuration, 24 | legend: { 25 | ...configuration.legend, 26 | data: legendData 27 | }, 28 | xAxis: { 29 | ...configuration.xAxis, 30 | data: xAxisData 31 | }, 32 | yAxis: { 33 | ...configuration.yAxis, 34 | data: yAxisData 35 | }, 36 | series: series 37 | ? series.map((item) => ({ 38 | ...configuration.bar.series, 39 | ...item 40 | })) 41 | : [] 42 | } 43 | }, [data, field, options]) 44 | 45 | return 46 | } 47 | 48 | export default Bar 49 | -------------------------------------------------------------------------------- /src/widget/form/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-08-28 13:59:43 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-08-28 14:01:53 7 | * @FilePath: \bigscreen\src\widget\form\index.tsx 8 | * Copyright (c) 2022 by hejp email: 378540660@qq.com, All Rights Reserved. 9 | */ 10 | // 单选项 11 | import widgetFormRadio from './widget-form-radio' 12 | 13 | export default { 14 | widgetFormRadio 15 | } 16 | -------------------------------------------------------------------------------- /src/widget/form/widget-form-radio.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-08-28 14:00:20 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-10 11:45:18 7 | * @FilePath: \bigscreen\src\widget\form\widget-form-radio.tsx 8 | * Copyright (c) 2022 by hejp email: 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import React, { FC, useState } from 'react' 11 | import { IAnyObject } from '@src/types' 12 | import { getStyles } from '@utils/tools' 13 | import { Radio } from 'antd' 14 | import { IWidget } from '@store/actionType' 15 | 16 | interface IWidgetFormRadioProps { 17 | // 数据，模拟跟真实数据都走这里 18 | data: IAnyObject 19 | // 字段名 20 | field: string 21 | options: any 22 | paramValue: any 23 | paramName: any 24 | parentWidget: IWidget 25 | modifyLargeScreenElement: (id: string, groupId: string, data: IWidget) => void 26 | } 27 | 28 | const WidgetFormRadio: FC = ({ 29 | data = {}, 30 | field = 'radio', 31 | options, 32 | paramValue, 33 | paramName, 34 | parentWidget, 35 | modifyLargeScreenElement 36 | }) => { 37 | const changeHandler = (val: any) => { 38 | if (parentWidget && paramName) { 39 | const widget = parentWidget 40 | console.log(widget.dataValue.params, 'before') 41 | widget.dataValue.params[paramName] = val 42 | console.log(widget.dataValue.params, 'after') 43 | modifyLargeScreenElement(parentWidget.id, parentWidget.id, widget) 44 | } 45 | } 46 | return ( 47 |
50 | 73 | changeHandler(e.target.value)} 79 | value={paramValue} 80 | /> 81 |
82 | ) 83 | } 84 | 85 | export default WidgetFormRadio 86 | -------------------------------------------------------------------------------- /src/widget/funnel/index.tsx: -------------------------------------------------------------------------------- 1 | import { FC, useMemo } from 'react' 2 | // 自定义ehcarts 3 | import CustomEcharts from '@src/components/echarts' 4 | // echarts类型 5 | import { IEchartConfig } from '@src/types' 6 | // 处理options 7 | import { handleEchartsOption, handleData } from '@src/utils/echarts' 8 | import { getStyles } from '@utils/tools' 9 | 10 | interface IFunnelProps extends IEchartConfig { 11 | options: any 12 | data: any 13 | field: string 14 | } 15 | 16 | const Funnel: FC = ({ options, data, field }) => { 17 | // 处理echarts数据 18 | const getOption = useMemo(() => { 19 | const configuration = handleEchartsOption(options) 20 | const currentData = data && data[field] ? data[field] : [] 21 | const { legendData, xAxisData, yAxisData, series } = handleData(currentData) 22 | 23 | return { 24 | ...configuration, 25 | legend: { 26 | ...configuration.legend, 27 | data: legendData 28 | }, 29 | series: series 30 | ? series.map((item, index) => ({ 31 | ...configuration.funnel.series, 32 | name: item.name, 33 | labelLine: { 34 | length: 10, 35 | lineStyle: { 36 | width: 0, 37 | type: 'solid' 38 | } 39 | }, 40 | itemStyle: { 41 | borderColor: '#fff', 42 | borderWidth: 0 43 | }, 44 | data: currentData[index].data 45 | })) 46 | : [] 47 | } 48 | }, [data, field, options]) 49 | 50 | return 51 | } 52 | 53 | export default Funnel 54 | -------------------------------------------------------------------------------- /src/widget/group/index.scss: -------------------------------------------------------------------------------- 1 | @include b(element) { 2 | @include e(group) { 3 | // +.handle { 4 | // display: none; 5 | // } 6 | @include when(active) { 7 | border: 1px dashed #fff; 8 | background-color: rgba(255, 255, 255, .1); 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /src/widget/group/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-08-20 16:07:16 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-08-26 22:23:28 7 | * @FilePath: \bigscreen\src\widget\group\index.tsx 8 | * Copyright (c) 2022 by hejp email: 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { FC, HTMLAttributes, ReactNode } from 'react' 11 | import './index.scss' 12 | import { getStyles } from '@utils/tools' 13 | 14 | interface IGroupProps extends HTMLAttributes { 15 | options: any 16 | children: ReactNode 17 | } 18 | const Group: FC = ({ options, children }) => { 19 | return ( 20 |
23 | {children} 24 |
25 | ) 26 | } 27 | export default Group 28 | -------------------------------------------------------------------------------- /src/widget/image/index.scss: -------------------------------------------------------------------------------- 1 | @include b(element) { 2 | @include e(image) { 3 | position: relative; 4 | .anticon { 5 | position: absolute; 6 | left: 50%; 7 | top: 50%; 8 | transform: translate(-50%, -50%); 9 | font-size: 100px; 10 | color: #fff; 11 | } 12 | img { 13 | width: 100%; 14 | height: 100%; 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /src/widget/image/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FC 3 | } from 'react' 4 | import { IAnyObject } from '@src/types' 5 | import { getStyles } from '@utils/tools' 6 | import './index.scss' 7 | import { PictureOutlined } from '@ant-design/icons' 8 | 9 | 10 | interface IImageProps { 11 | // 数据，模拟跟真实数据都走这里 12 | data: IAnyObject, 13 | // 字段名 14 | field: string; 15 | options: any; 16 | 17 | } 18 | 19 | const Image: FC = ({ 20 | data = {}, 21 | options, 22 | field = 'imgSrc' 23 | }) => { 24 | return ( 25 |
28 | { 29 | data && data[field] ? 30 | : 31 | 32 | } 33 |
34 | ) 35 | } 36 | export default Image -------------------------------------------------------------------------------- /src/widget/index.scss: -------------------------------------------------------------------------------- 1 | @include b(element) { 2 | position: absolute; 3 | overflow: hidden; 4 | } -------------------------------------------------------------------------------- /src/widget/line/index.tsx: -------------------------------------------------------------------------------- 1 | import { FC, useMemo } from 'react' 2 | // 自定义ehcarts 3 | import CustomEcharts from '@src/components/echarts' 4 | // echarts类型 5 | import { IEchartConfig } from '@src/types' 6 | // 处理options 7 | import { handleEchartsOption, handleData } from '@src/utils/echarts' 8 | import { getStyles } from '@utils/tools' 9 | 10 | interface IBaseLineProps extends IEchartConfig { 11 | options: any 12 | data: any 13 | field: string 14 | } 15 | 16 | const BaseLine: FC = ({ data, field, options }) => { 17 | // 处理echarts数据 18 | const getOption = useMemo(() => { 19 | const configuration = handleEchartsOption(options) 20 | const currentData = data && data[field] ? data[field] : [] 21 | const { legendData, xAxisData, yAxisData, series } = handleData(currentData) 22 | return { 23 | ...configuration, 24 | legend: { 25 | ...configuration.legend, 26 | data: legendData 27 | }, 28 | xAxis: { 29 | ...configuration.xAxis, 30 | data: xAxisData 31 | }, 32 | yAxis: { 33 | ...configuration.yAxis, 34 | data: yAxisData 35 | }, 36 | series: series 37 | ? series.map((item) => ({ 38 | ...configuration.line.series, 39 | ...item 40 | })) 41 | : [] 42 | } 43 | }, [data, field, options]) 44 | 45 | return 46 | } 47 | 48 | export default BaseLine 49 | -------------------------------------------------------------------------------- /src/widget/pie/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-14 14:22:41 7 | * @FilePath: \bigscreen\src\widget\pie\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { FC, useMemo } from 'react' 11 | // 自定义ehcarts 12 | import CustomEcharts from '@src/components/echarts' 13 | // echarts类型 14 | import { IEchartConfig } from '@src/types' 15 | // 处理options 16 | import { handleEchartsOption, handleData } from '@src/utils/echarts' 17 | import { getStyles } from '@utils/tools' 18 | 19 | interface IPieProps extends IEchartConfig { 20 | options: any 21 | data: any 22 | field: string 23 | } 24 | 25 | const Pie: FC = ({ options, data, field }) => { 26 | // 处理echarts数据 27 | const getOption = useMemo(() => { 28 | const configuration = handleEchartsOption(options) 29 | const currentData = data && data[field] ? data[field] : [] 30 | const { legendData, xAxisData, yAxisData, series } = handleData(currentData) 31 | return { 32 | ...configuration, 33 | tooltip: { 34 | trigger: 'item' 35 | }, 36 | legend: { 37 | ...configuration.legend, 38 | data: legendData 39 | }, 40 | xAxis: { 41 | ...configuration.xAxis, 42 | data: xAxisData 43 | }, 44 | yAxis: { 45 | ...configuration.yAxis, 46 | data: yAxisData 47 | }, 48 | series: series 49 | ? series.map((item, index) => ({ 50 | ...configuration.pie.series, 51 | ...item, 52 | data: currentData[index].data 53 | })) 54 | : [] 55 | } 56 | }, [data, field, options]) 57 | 58 | return 59 | } 60 | 61 | export default Pie 62 | -------------------------------------------------------------------------------- /src/widget/radar/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-04 16:50:14 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-14 18:11:55 7 | * @FilePath: \bigscreen\src\widget\radar\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { FC, useMemo } from 'react' 11 | // 自定义ehcarts 12 | import CustomEcharts from '@src/components/echarts' 13 | // echarts类型 14 | import { IEchartConfig } from '@src/types' 15 | // 处理options 16 | import { handleEchartsOption, handleData } from '@src/utils/echarts' 17 | import { getStyles } from '@utils/tools' 18 | 19 | interface IRadarProps extends IEchartConfig { 20 | options: any 21 | data: any 22 | field: string 23 | } 24 | 25 | const Radar: FC = ({ options, data, field }) => { 26 | // 处理echarts数据 27 | const getOption = useMemo(() => { 28 | const configuration = handleEchartsOption(options) 29 | const currentData = data && data[field] ? data[field] : [] 30 | const { legendData, xAxisData, yAxisData, series } = handleData(currentData) 31 | return { 32 | ...configuration, 33 | tooltip: { 34 | trigger: 'item' 35 | }, 36 | legend: { 37 | ...configuration.legend, 38 | data: legendData 39 | }, 40 | xAxis: { 41 | ...configuration.xAxis, 42 | data: xAxisData 43 | }, 44 | yAxis: { 45 | ...configuration.yAxis, 46 | data: yAxisData 47 | }, 48 | radar: { 49 | ...configuration.radar.config, 50 | indicator: xAxisData.map((item) => ({ 51 | name: item 52 | })) 53 | }, 54 | series: series 55 | ? [ 56 | { 57 | ...configuration.radar.series, 58 | data: series.map((item, index) => ({ 59 | name: item.name, 60 | value: item.data, 61 | areaStyle: { 62 | color: configuration.color[index] 63 | }, 64 | lineStyle: { 65 | width: 1 66 | } 67 | })) 68 | } 69 | ] 70 | : [] 71 | } 72 | }, [data, field, options]) 73 | 74 | return 75 | } 76 | 77 | export default Radar 78 | -------------------------------------------------------------------------------- /src/widget/scatter/index.tsx: -------------------------------------------------------------------------------- 1 | import { FC, useMemo } from 'react' 2 | // 自定义ehcarts 3 | import CustomEcharts from '@src/components/echarts' 4 | // echarts类型 5 | import { IEchartConfig } from '@src/types' 6 | // 处理options 7 | import { handleEchartsOption, handleData } from '@src/utils/echarts' 8 | import { getStyles } from '@utils/tools' 9 | 10 | interface IScatterProps extends IEchartConfig { 11 | options: any 12 | data: any 13 | field: string 14 | } 15 | 16 | const Scatter: FC = ({ options, data, field }) => { 17 | // 处理echarts数据 18 | const getOption = useMemo(() => { 19 | const configuration = handleEchartsOption(options) 20 | const currentData = data && data[field] ? data[field] : [] 21 | const { legendData, xAxisData, yAxisData, series } = handleData(currentData) 22 | return { 23 | ...configuration, 24 | legend: { 25 | ...configuration.legend, 26 | data: legendData 27 | }, 28 | xAxis: { 29 | ...configuration.xAxis, 30 | data: xAxisData 31 | }, 32 | yAxis: { 33 | ...configuration.yAxis, 34 | data: yAxisData 35 | }, 36 | series: series 37 | ? series.map((item) => ({ 38 | ...configuration.scatter.series, 39 | ...item 40 | })) 41 | : [] 42 | } 43 | }, [data, field, options]) 44 | 45 | return 46 | } 47 | 48 | export default Scatter 49 | -------------------------------------------------------------------------------- /src/widget/table/index.scss: -------------------------------------------------------------------------------- 1 | @include b(table) { 2 | border-collapse: collapse; 3 | table-layout: fixed; 4 | padding: 0; 5 | background: none; 6 | color: #fff; 7 | overflow: hidden; 8 | @include e(header) { 9 | position: relative; 10 | z-index: 2; 11 | } 12 | @include e(body) { 13 | position: relative; 14 | z-index: 1; 15 | transition: all .25s ease 0s; 16 | } 17 | table { 18 | width: 100%; 19 | border-collapse: collapse; 20 | } 21 | td, 22 | th { 23 | padding: 0 10px; 24 | } 25 | } -------------------------------------------------------------------------------- /src/widget/text/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * 所有文本集合 3 | * @Author: hejp 4 | * @Date: 2022-08-10 11:36:11 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 11:39:42 7 | */ 8 | // 基础文本 9 | import widgetBaseText from './widget-base-text'; 10 | // 时间文本 11 | import widgetTimeText from './widget-time-text'; 12 | // 时间文本 13 | import widgetDigitalScroll from './widget-digital-scroll'; 14 | 15 | export default { 16 | widgetBaseText, 17 | widgetTimeText, 18 | widgetDigitalScroll 19 | }; -------------------------------------------------------------------------------- /src/widget/text/widget-base-text/index.scss: -------------------------------------------------------------------------------- 1 | @include b(element) { 2 | @include e(text) { 3 | // 4 | } 5 | } -------------------------------------------------------------------------------- /src/widget/text/widget-base-text/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FC 3 | } from 'react' 4 | import { IAnyObject } from '@src/types' 5 | import { getStyles } from '@utils/tools' 6 | import './index.scss' 7 | 8 | 9 | interface IBaseTextProps { 10 | // 数据，模拟跟真实数据都走这里 11 | data: IAnyObject, 12 | // 字段名 13 | field: string; 14 | options: any; 15 | } 16 | 17 | const BaseText: FC = ({ 18 | data = {}, 19 | field = 'value', 20 | options 21 | }) => { 22 | return ( 23 |
26 | {data && data[field] ? data[field] : '文本框'} 27 |
28 | ) 29 | } 30 | export default BaseText -------------------------------------------------------------------------------- /src/widget/text/widget-digital-scroll/components/item.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FC, useEffect, useState 3 | } from 'react' 4 | import { getStyles } from '@utils/tools' 5 | 6 | interface IDigitalScrollItemProps { 7 | value: number, 8 | options: any 9 | } 10 | 11 | const DigitalScrollItem: FC = ({ 12 | value, 13 | options 14 | }) => { 15 | const [itemStyle, setItemStyle] = useState({}) 16 | useEffect(() => { 17 | let timmer = setTimeout(() => { 18 | setItemStyle({ 19 | transform: `translateY(-${value * options.styleHeight}px)` 20 | }) 21 | }, 0); 22 | return () => { 23 | clearTimeout(timmer) 24 | } 25 | }, [value, options.styleHeight]) 26 | return ( 27 |
30 |
31 | 0 32 | 1 33 | 2 34 | 3 35 | 4 36 | 5 37 | 6 38 | 7 39 | 8 40 | 9 41 |
42 |
43 | ) 44 | } 45 | 46 | export default DigitalScrollItem -------------------------------------------------------------------------------- /src/widget/text/widget-digital-scroll/index.scss: -------------------------------------------------------------------------------- 1 | @include b(element) { 2 | @include e(digitalscroll) { 3 | display: flex!important; 4 | flex-wrap: wrap; 5 | @include m(item) { 6 | height: 50px; 7 | width: 40px; 8 | line-height: 50px; 9 | margin-right: 10px; 10 | border: 1px solid #fff; 11 | overflow: hidden; 12 | div { 13 | position: relative; 14 | width: 100%; 15 | height: 1000%; 16 | transform: translateY(0); 17 | transition: all 1s ease-in-out; 18 | } 19 | span { 20 | display: block; 21 | width: 100%; 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/widget/text/widget-digital-scroll/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FC, 3 | HTMLAttributes, 4 | useEffect, 5 | useState 6 | } from 'react' 7 | import { IAnyObject } from '@src/types' 8 | import DigitalScrollItem from './components/item' 9 | import './index.scss' 10 | 11 | 12 | interface IDigitalScrollProps { 13 | // 数据，模拟跟真实数据都走这里 14 | data: IAnyObject, 15 | // 字段名 16 | field: string; 17 | options: any; 18 | } 19 | 20 | const DigitalScroll: FC = ({ 21 | data = {}, 22 | field = 'value', 23 | options 24 | }) => { 25 | const [arr, setArr] = useState([0]) 26 | useEffect(() => { 27 | if (data && data[field] && !isNaN(data[field])) { 28 | setArr(String(data[field]).split('')) 29 | } 30 | }, [data, field]) 31 | return ( 32 |
38 | { 39 | arr.map((item, idx) => ( 40 | 44 | )) 45 | } 46 | 47 |
48 | ) 49 | } 50 | export default DigitalScroll -------------------------------------------------------------------------------- /src/widget/text/widget-time-text/index.scss: -------------------------------------------------------------------------------- 1 | @include b(element) { 2 | @include e(text) { 3 | // 4 | } 5 | } -------------------------------------------------------------------------------- /src/widget/text/widget-time-text/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FC, 3 | useCallback, 4 | useEffect, 5 | useRef, 6 | useState 7 | } from 'react' 8 | import './index.scss' 9 | import { getStyles } from '@utils/tools' 10 | import { fmtDate } from '@src/utils/tools' 11 | 12 | 13 | interface ITimeTextProps { 14 | options: any; 15 | } 16 | 17 | const TimeText: FC = ({ 18 | options 19 | }) => { 20 | const timer = useRef(null) 21 | // 初始化时间 22 | const [text, setText] = useState(() => { 23 | return fmtDate(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss') 24 | }) 25 | // 获取时间 26 | const getText = useCallback(() => { 27 | setText(fmtDate(new Date().getTime(), options.fmtDate || 'yyyy-MM-dd hh:mm:ss')) 28 | }, [options.fmtDate]) 29 | 30 | useEffect(() => { 31 | timer.current = setInterval(getText, 1000) 32 | return () => { 33 | clearInterval(timer.current) 34 | } 35 | }, [timer, getText]) 36 | return ( 37 |
39 | {text} 40 |
41 | ) 42 | } 43 | export default TimeText -------------------------------------------------------------------------------- /src/widget/tools/base-configuration/box.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 盒子配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:16:14 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 14:14:23 7 | */ 8 | const box = { 9 | configureValue: { 10 | styleBoxInset: false, 11 | styleBoxShadowX: 0, 12 | styleBoxShadowY: 0, 13 | styleBoxShadowF: 0, 14 | styleBoxShadowC: '', 15 | styleBorderStyle: 'none', 16 | styleBorderWidth: 0, 17 | styleBorderColor: '', 18 | styleBorderTopLeftRadius: 0, 19 | styleBorderTopRightRadius: 0, 20 | styleBorderBottomLeftRadius: 0, 21 | styleBorderBottomRightRadius: 0 22 | }, 23 | configure: [ 24 | { 25 | name: '盒子阴影', 26 | list: [ 27 | { 28 | componentName: 'Switch', 29 | label: '内阴影', 30 | name: 'styleBoxInset', 31 | required: false, 32 | placeholder: '' 33 | }, 34 | { 35 | componentName: 'InputNumber', 36 | label: 'X轴偏移', 37 | name: 'styleBoxShadowX', 38 | required: false, 39 | placeholder: '请输入X轴偏移' 40 | }, 41 | { 42 | componentName: 'InputNumber', 43 | label: 'Y轴偏移', 44 | name: 'styleBoxShadowY', 45 | required: false, 46 | placeholder: '请输入Y轴偏移' 47 | }, 48 | { 49 | componentName: 'InputNumber', 50 | label: '模糊值', 51 | name: 'styleBoxShadowF', 52 | required: false, 53 | placeholder: '请输入模糊值' 54 | }, 55 | { 56 | componentName: 'SketchPicker', 57 | label: '颜色', 58 | name: 'styleBoxShadowC', 59 | required: false, 60 | placeholder: '请选择颜色' 61 | } 62 | ] 63 | }, 64 | { 65 | name: '边框', 66 | list: [ 67 | { 68 | componentName: 'Select', 69 | label: '边框样式', 70 | name: 'styleBorderStyle', 71 | required: false, 72 | placeholder: '请选择边框样式', 73 | options: [ 74 | { code: 'none', name: '无' }, 75 | { code: 'solid', name: '直线' }, 76 | { code: 'dashed', name: '破折线' }, 77 | { code: 'dotted', name: '点状线' }, 78 | { code: 'double', name: '双划线' }, 79 | { code: 'groove', name: '3D凹槽' }, 80 | { code: 'ridge', name: '3D垄状' }, 81 | { code: 'inset', name: '3D内嵌' }, 82 | { code: 'outset', name: '3D外嵌' } 83 | ] 84 | }, 85 | { 86 | componentName: 'InputNumber', 87 | label: '边框尺寸', 88 | name: 'styleBorderWidth', 89 | required: false, 90 | placeholder: '请输入尺寸' 91 | }, 92 | { 93 | componentName: 'SketchPicker', 94 | label: '颜色', 95 | name: 'styleBorderColor', 96 | required: false, 97 | placeholder: '请选择边框颜色' 98 | } 99 | ] 100 | }, 101 | { 102 | name: '圆角', 103 | list: [ 104 | { 105 | componentName: 'InputNumber', 106 | label: '左上', 107 | name: 'styleBorderTopLeftRadius', 108 | required: false, 109 | placeholder: '请输入尺寸' 110 | }, 111 | { 112 | componentName: 'InputNumber', 113 | label: '右上', 114 | name: 'styleBorderTopRightRadius', 115 | required: false, 116 | placeholder: '请输入尺寸' 117 | }, 118 | { 119 | componentName: 'InputNumber', 120 | label: '左下', 121 | name: 'styleBorderBottomLeftRadius', 122 | required: false, 123 | placeholder: '请输入尺寸' 124 | }, 125 | { 126 | componentName: 'InputNumber', 127 | label: '右下', 128 | name: 'styleBorderBottomRightRadius', 129 | required: false, 130 | placeholder: '请输入尺寸' 131 | } 132 | ] 133 | } 134 | ] 135 | } 136 | 137 | export default box 138 | -------------------------------------------------------------------------------- /src/widget/tools/base-configuration/coordinate.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 坐标配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:15:52 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 14:31:08 7 | */ 8 | const coordinate = { 9 | type: 'page', 10 | label: '坐标', 11 | configure: [ 12 | { 13 | componentName: 'InputNumber', 14 | label: '左边距', 15 | name: 'left', 16 | required: false, 17 | placeholder: '请输入左边距' 18 | }, 19 | { 20 | componentName: 'InputNumber', 21 | label: '上边距', 22 | name: 'top', 23 | required: false, 24 | placeholder: '请输入上边距' 25 | }, 26 | { 27 | componentName: 'InputNumber', 28 | label: '宽度', 29 | name: 'width', 30 | required: false, 31 | placeholder: '请输入宽度' 32 | }, 33 | { 34 | componentName: 'InputNumber', 35 | label: '高度', 36 | name: 'height', 37 | required: false, 38 | placeholder: '请输入高度' 39 | } 40 | ] 41 | }; 42 | 43 | export default coordinate; 44 | -------------------------------------------------------------------------------- /src/widget/tools/base-configuration/data.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 数据项配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:10:09 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-11 14:33:44 7 | */ 8 | // 获取本地环境的数据 9 | const data = { 10 | // 数据项默认值 11 | configureValue: { 12 | useInterface: false, 13 | dataType: 'mock', 14 | mock: { 15 | value: '文本框' 16 | }, 17 | url: '', 18 | method: 'get', 19 | field: 'value' 20 | }, 21 | // 数据项配置 22 | configure: [ 23 | { 24 | componentName: 'Switch', 25 | label: '使用组数据', 26 | name: 'useInterface', 27 | required: false, 28 | placeholder: '', 29 | tooltip: '该组件使用组的接口数据' 30 | }, 31 | { 32 | componentName: 'Select', 33 | label: '请求类型', 34 | name: 'dataType', 35 | required: false, 36 | placeholder: '', 37 | relationFields: 'useInterface', 38 | relationValues: 'false', 39 | options: [ 40 | { code: 'mock', name: 'mock数据' }, 41 | { code: 'dynamic', name: '接口数据' } 42 | ] 43 | }, 44 | { 45 | componentName: 'JsonEdit', 46 | label: 'mock数据', 47 | name: 'mock', 48 | required: false, 49 | placeholder: '请输入mock数据', 50 | relationFields: 'dataType,useInterface', 51 | relationValues: 'mock,false' 52 | }, 53 | { 54 | componentName: 'TextArea', 55 | label: '接口地址', 56 | name: 'url', 57 | required: false, 58 | placeholder: '请输入接口地址', 59 | relationFields: 'dataType,useInterface', 60 | relationValues: 'dynamic,false' 61 | }, 62 | { 63 | componentName: 'Select', 64 | label: '请求方式', 65 | name: 'method', 66 | required: false, 67 | placeholder: '', 68 | relationFields: 'dataType,useInterface', 69 | relationValues: 'dynamic,false', 70 | options: [ 71 | { code: 'get', name: 'GET' }, 72 | { code: 'post', name: 'post' } 73 | ] 74 | }, 75 | { 76 | componentName: 'Input', 77 | label: '对应字段', 78 | name: 'field', 79 | required: false, 80 | placeholder: '' 81 | } 82 | ] 83 | } 84 | 85 | export default data 86 | -------------------------------------------------------------------------------- /src/widget/tools/base-configuration/font.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 字体配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:16:14 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-17 11:37:07 7 | */ 8 | const font = { 9 | configureValue: { 10 | styleFontSize: 26, 11 | styleLetterSpacing: 0, 12 | styleFontWeight: 'normal', 13 | styleTextAlign: 'center', 14 | styleBackgroundColor: '', 15 | styleFontFamily: 'Microsoft YaHei', 16 | styleLineHeight: 1, 17 | styleColor: '#fff' 18 | }, 19 | configure: [ 20 | { 21 | componentName: 'InputNumber', 22 | label: '字体大小', 23 | name: 'styleFontSize', 24 | required: false, 25 | min: 12, 26 | placeholder: '' 27 | }, 28 | { 29 | componentName: 'InputNumber', 30 | label: '字体间距', 31 | name: 'styleLetterSpacing', 32 | required: false, 33 | placeholder: '' 34 | }, 35 | { 36 | componentName: 'InputNumber', 37 | label: '行高', 38 | name: 'styleLineHeight', 39 | required: false, 40 | placeholder: '' 41 | }, 42 | { 43 | componentName: 'Select', 44 | label: '字体样式', 45 | name: 'styleFontFamily', 46 | required: false, 47 | placeholder: '', 48 | options: [ 49 | { code: 'SimSun', name: '宋体' }, 50 | { code: 'KaiTi', name: '楷体' }, 51 | { code: 'Microsoft YaHei', name: '微软雅黑' }, 52 | { code: 'STHeiti', name: '华文黑体' }, 53 | { code: 'arial', name: '无衬线体' }, 54 | { code: 'serif', name: '有衬线体' }, 55 | { code: 'cursive', name: '草书' }, 56 | { code: 'monospace', name: '等宽字体' }, 57 | { code: 'courier', name: '打印字体' } 58 | ] 59 | }, 60 | { 61 | componentName: 'Select', 62 | label: '文字粗细', 63 | name: 'styleFontWeight', 64 | required: false, 65 | placeholder: '', 66 | options: [ 67 | { code: 'normal', name: '正常' }, 68 | { code: 'bold', name: '粗体' }, 69 | { code: 'bolder', name: '特粗体' }, 70 | { code: 'lighter', name: '细体' } 71 | ] 72 | }, 73 | { 74 | componentName: 'Select', 75 | label: '对齐方式', 76 | name: 'styleTextAlign', 77 | required: false, 78 | placeholder: '', 79 | options: [ 80 | { code: 'center', name: '居中' }, 81 | { code: 'left', name: '左对齐' }, 82 | { code: 'right', name: '右对齐' } 83 | ] 84 | }, 85 | { 86 | componentName: 'SketchPicker', 87 | label: '字体颜色', 88 | name: 'styleColor', 89 | required: false, 90 | placeholder: '请选择字体颜色' 91 | }, 92 | { 93 | componentName: 'SketchPicker', 94 | label: '背景颜色', 95 | name: 'styleBackgroundColor', 96 | required: false, 97 | placeholder: '请选择背景颜色' 98 | } 99 | ] 100 | } 101 | 102 | export default font 103 | -------------------------------------------------------------------------------- /src/widget/tools/base-configuration/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 基础配置项，包含坐标、动画、数据、字体、页面、图表 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:48:55 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-11 16:08:37 7 | */ 8 | // 页面 9 | import page from './page'; 10 | // 坐标 11 | import coordinate from './coordinate'; 12 | // 动画 13 | import animate from './animate'; 14 | // 数据 15 | import data from './data'; 16 | // 字体 17 | import font from './font'; 18 | // 盒子 19 | import box from './box'; 20 | // 图表 21 | import echarts from './echarts'; 22 | 23 | const baseConfiguration = { 24 | page, 25 | coordinate, 26 | animate, 27 | data, 28 | font, 29 | echarts, 30 | box 31 | }; 32 | 33 | export default baseConfiguration; 34 | -------------------------------------------------------------------------------- /src/widget/tools/base-configuration/page.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 页面配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:16:25 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-14 16:23:23 7 | */ 8 | const page = { 9 | type: 'page', 10 | label: '页面配置', 11 | configure: [ 12 | { 13 | componentName: 'Input', 14 | label: '项目名称', 15 | name: 'projectName', 16 | required: false, 17 | placeholder: '请输入项目名称' 18 | }, 19 | { 20 | componentName: 'InputNumber', 21 | label: '屏幕宽度', 22 | name: 'width', 23 | required: false, 24 | placeholder: '请输入屏幕宽度', 25 | min: 1366, 26 | max: 5000 27 | }, 28 | { 29 | componentName: 'InputNumber', 30 | label: '屏幕高度', 31 | name: 'height', 32 | required: false, 33 | placeholder: '请输入屏幕高度', 34 | min: 768, 35 | max: 3000 36 | }, 37 | { 38 | componentName: 'InputNumber', 39 | label: '横几屏', 40 | name: 'horizontalNumber', 41 | required: false, 42 | min: 1, 43 | max: 6, 44 | placeholder: '请输入横几屏' 45 | }, 46 | { 47 | componentName: 'InputNumber', 48 | label: '竖几屏', 49 | min: 1, 50 | max: 6, 51 | name: 'verticalNumber', 52 | required: false, 53 | placeholder: '请输入竖几屏' 54 | }, 55 | { 56 | componentName: 'SketchPicker', 57 | label: '背景颜色', 58 | name: 'backgroundColor', 59 | required: false, 60 | placeholder: '请选择背景颜色' 61 | }, 62 | { 63 | componentName: 'Input', 64 | label: '背景图片', 65 | name: 'backgroundImage', 66 | required: false, 67 | placeholder: '请输入背景图片地址' 68 | }, 69 | { 70 | componentName: 'Input', 71 | label: '标题', 72 | name: 'title', 73 | require: false, 74 | placeholder: '请输入标题' 75 | }, 76 | { 77 | componentName: 'TextArea', 78 | label: '大屏简介', 79 | name: 'description', 80 | required: false, 81 | placeholder: '请输入大屏简介' 82 | }, 83 | [ 84 | { 85 | name: '屏幕辅助线', 86 | list: [ 87 | { 88 | componentName: 'Switch', 89 | label: '是否显示', 90 | name: 'showAuxiliary', 91 | required: false, 92 | placeholder: '请选择是否显示' 93 | }, 94 | { 95 | componentName: 'InputNumber', 96 | label: '屏幕间隔', 97 | min: 0, 98 | max: 20, 99 | name: 'interval', 100 | required: false, 101 | placeholder: '请输入竖几屏' 102 | }, 103 | { 104 | componentName: 'SketchPicker', 105 | label: '线颜色', 106 | name: 'auxiliaryBorderColor', 107 | required: false, 108 | placeholder: '请选择网络线颜色' 109 | } 110 | ] 111 | } 112 | ] 113 | ] 114 | } 115 | 116 | export default page 117 | -------------------------------------------------------------------------------- /src/widget/tools/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 配置入口文件 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:21:45 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-10 10:38:40 7 | */ 8 | // 基础配置 9 | import baseConfiguration from './base-configuration'; 10 | // 类型的配置 11 | import widgetTypesConfiguration from './widget-types-configuration'; 12 | // 默认配置 13 | import widgetConfiguration from './widget'; 14 | 15 | export default { 16 | baseConfiguration, 17 | widgetTypesConfiguration, 18 | widgetConfiguration 19 | }; 20 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/bar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * bar类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 17:13:24 7 | */ 8 | import baseConfiguration from '../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | const bar = { 12 | configure: [ 13 | [ 14 | { 15 | name: '柱状设置', 16 | list: [...echarts.seriesStack, ...echarts.bar, echarts.seriesLabel] 17 | }, 18 | { 19 | name: '标题', 20 | list: echarts.title 21 | }, 22 | { 23 | name: '图例', 24 | list: echarts.legend 25 | }, 26 | { 27 | name: '网格', 28 | list: echarts.grid 29 | }, 30 | { 31 | name: 'X轴', 32 | list: echarts.xAxis 33 | }, 34 | { 35 | name: 'y轴', 36 | list: echarts.yAxis 37 | }, 38 | { 39 | name: '自定义颜色', 40 | list: echarts.echartColor 41 | }, 42 | ...animate.configure 43 | ] 44 | ], 45 | data: data.configure 46 | }; 47 | 48 | export default bar; 49 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/emap/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-06 14:47:32 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-11 17:32:25 7 | * @FilePath: \bigscreen\src\widget\tools\widget-types-configuration\emap\main.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | // 基础地图 11 | import widgetEmapBase from './widget-emap-base' 12 | 13 | export default { 14 | widgetEmapBase 15 | } 16 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/form/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-06 14:47:32 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-06 14:49:29 7 | * @FilePath: \bigscreen\src\widget\tools\widget-types-configuration\form\main.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | // 单选 11 | import widgetFormRadio from './widget-form-radio' 12 | 13 | export default { 14 | widgetFormRadio 15 | } 16 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/form/widget-form-radio.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-text类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 14:17:30 7 | */ 8 | 9 | const widgetFormRadio = { 10 | // 基础配置项 11 | configure: [ 12 | { 13 | componentName: 'Select', 14 | label: '大小', 15 | name: 'radioSize', 16 | required: false, 17 | placeholder: '', 18 | options: [ 19 | { code: 'large', name: 'large' }, 20 | { code: 'middle', name: 'middle' }, 21 | { code: 'small', name: 'small' } 22 | ] 23 | }, 24 | { 25 | componentName: 'SketchPicker', 26 | label: '字体颜色', 27 | name: 'radioColor', 28 | required: false, 29 | placeholder: '请选择字体颜色' 30 | }, 31 | { 32 | componentName: 'SketchPicker', 33 | label: '背景颜色', 34 | name: 'radioBackgroundColor', 35 | required: false, 36 | placeholder: '请选择背景颜色' 37 | }, 38 | { 39 | componentName: 'SketchPicker', 40 | label: '边框颜色', 41 | name: 'radioBorderColor', 42 | required: false, 43 | placeholder: '请选择边框颜色' 44 | }, 45 | [ 46 | { 47 | name: '高亮', 48 | list: [ 49 | { 50 | componentName: 'SketchPicker', 51 | label: '字体颜色', 52 | name: 'radioHighColor', 53 | required: false, 54 | placeholder: '请选择字体颜色' 55 | }, 56 | { 57 | componentName: 'SketchPicker', 58 | label: '背景颜色', 59 | name: 'radioHighBackgroundColor', 60 | required: false, 61 | placeholder: '请选择背景颜色' 62 | }, 63 | { 64 | componentName: 'SketchPicker', 65 | label: '颜色', 66 | name: 'radioHighBorderColor', 67 | required: false, 68 | placeholder: '请选择边框颜色' 69 | } 70 | ] 71 | } 72 | ] 73 | ], 74 | data: [ 75 | { 76 | componentName: 'Switch', 77 | label: '使用组数据', 78 | name: 'useInterface', 79 | disabled: true, 80 | required: false, 81 | placeholder: '', 82 | tooltip: '该组件使用组的接口数据' 83 | }, 84 | { 85 | componentName: 'Input', 86 | label: '数据对应字段', 87 | name: 'field', 88 | required: false, 89 | placeholder: '' 90 | } 91 | ] 92 | } 93 | 94 | export default widgetFormRadio 95 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/funnel.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * funnel类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-14 21:02:21 7 | */ 8 | import baseConfiguration from '../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | const funnel = { 12 | configure: [ 13 | [ 14 | { 15 | name: '漏斗图设置', 16 | list: [...echarts.funnel, echarts.seriesLabel] 17 | }, 18 | { 19 | name: '标题', 20 | list: echarts.title 21 | }, 22 | { 23 | name: '图例', 24 | list: echarts.legend 25 | } 26 | ], 27 | echarts.echartColor[echarts.echartColor.length - 1], 28 | animate.configure 29 | ], 30 | data: data.configure 31 | }; 32 | 33 | export default funnel; 34 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/group.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * group类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:00:37 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-14 11:35:23 7 | */ 8 | import baseConfiguration from '../base-configuration' 9 | const { animate, box } = baseConfiguration 10 | 11 | const group = { 12 | configure: [ 13 | { 14 | componentName: 'SketchPicker', 15 | label: '背景颜色', 16 | name: 'backgroundColor', 17 | required: false, 18 | placeholder: '请选择背景颜色' 19 | }, 20 | animate.configure, 21 | box.configure 22 | ], 23 | data: [ 24 | { 25 | componentName: 'Switch', 26 | label: '使用接口', 27 | name: 'useInterface', 28 | required: false, 29 | type: 'hidden', 30 | placeholder: '' 31 | }, 32 | { 33 | componentName: 'JsonEdit', 34 | label: 'mock数据', 35 | name: 'mock', 36 | required: false, 37 | placeholder: '请输入mock数据', 38 | relationFields: 'useInterface', 39 | relationValues: 'false' 40 | }, 41 | { 42 | componentName: 'Select', 43 | label: '请求类型', 44 | name: 'dataType', 45 | required: false, 46 | placeholder: '', 47 | disabled: true, 48 | relationFields: 'useInterface', 49 | relationValues: 'true', 50 | options: [ 51 | { code: 'mock', name: 'mock数据' }, 52 | { code: 'dynamic', name: '接口数据' } 53 | ] 54 | }, 55 | { 56 | componentName: 'TextArea', 57 | label: '接口地址', 58 | name: 'url', 59 | required: false, 60 | placeholder: '请输入接口地址', 61 | relationFields: 'dataType,useInterface', 62 | relationValues: 'dynamic,true' 63 | }, 64 | { 65 | componentName: 'Select', 66 | label: '请求方式', 67 | name: 'method', 68 | required: false, 69 | placeholder: '', 70 | relationFields: 'dataType,useInterface', 71 | relationValues: 'dynamic,true', 72 | options: [ 73 | { code: 'get', name: 'GET' }, 74 | { code: 'post', name: 'post' } 75 | ] 76 | }, 77 | { 78 | componentName: 'JsonEdit', 79 | label: '请求参数', 80 | name: 'params', 81 | required: false, 82 | placeholder: '请输入mock数据', 83 | relationFields: 'useInterface', 84 | relationValues: 'true' 85 | } 86 | ] 87 | } 88 | 89 | export default group 90 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/image.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * text类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-15 11:40:13 7 | */ 8 | import baseConfiguration from '../base-configuration'; 9 | const { font, animate, data, box } = baseConfiguration; 10 | 11 | const text = { 12 | // 基础配置项 13 | configure: [[...animate.configure]], 14 | data: data.configure 15 | }; 16 | 17 | export default text; 18 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: hejp 3 | * @Date: 2022-08-10 10:01:56 4 | * @Last Modified by: hejp 5 | * @Last Modified time: 2022-08-17 11:11:09 6 | */ 7 | // 组配置 8 | import group from './group' 9 | // text配置 10 | import text from './text/main' 11 | // image配置 12 | import image from './image' 13 | // line配置 14 | import line from './line' 15 | // bar配置 16 | import bar from './bar' 17 | // pie配置 18 | import pie from './pie' 19 | // radar配置 20 | import radar from './radar' 21 | // funnel配置 22 | import funnel from './funnel' 23 | // scatter配置 24 | import scatter from './scatter' 25 | // table配置 26 | import table from './table' 27 | // form配置 28 | import form from './form/main' 29 | // emap配置 30 | import emap from './emap/main' 31 | // wordcloud配置 32 | import wordcloud from './wordcloud' 33 | 34 | const widgetTypesConfiguration: any = { 35 | group, 36 | ...text, 37 | image, 38 | line, 39 | bar, 40 | pie, 41 | radar, 42 | funnel, 43 | scatter, 44 | table, 45 | ...form, 46 | ...emap, 47 | wordcloud 48 | } 49 | 50 | export default widgetTypesConfiguration 51 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/line.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * line类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-14 11:39:42 7 | */ 8 | import baseConfiguration from '../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | const line = { 12 | configure: [ 13 | [ 14 | { 15 | name: '折线设置', 16 | list: [ 17 | ...echarts.line, 18 | echarts.seriesLabel, 19 | echarts.symbol, 20 | ...echarts.seriesStack 21 | ] 22 | }, 23 | { 24 | name: '标题', 25 | list: echarts.title 26 | }, 27 | { 28 | name: '图例', 29 | list: echarts.legend 30 | }, 31 | { 32 | name: '网格', 33 | list: echarts.grid 34 | }, 35 | { 36 | name: 'X轴', 37 | list: echarts.xAxis 38 | }, 39 | { 40 | name: 'y轴', 41 | list: echarts.yAxis 42 | }, 43 | { 44 | name: '自定义颜色', 45 | list: echarts.echartColor 46 | }, 47 | ...animate.configure 48 | ] 49 | ], 50 | data: data.configure 51 | }; 52 | 53 | export default line; 54 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/pie.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * bar类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-14 11:27:30 7 | */ 8 | import baseConfiguration from '../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | const pie = { 12 | configure: [ 13 | [ 14 | { 15 | name: '饼图设置', 16 | list: [ 17 | ...echarts.pie, 18 | echarts.seriesLabel.map((item) => { 19 | return { 20 | ...item, 21 | list: item.list.map((subItem) => { 22 | if (subItem.name === 'seriesLabelPosition') { 23 | return { 24 | ...subItem, 25 | options: [ 26 | { code: 'outside', name: 'outside' }, 27 | { code: 'inside', name: 'inside' }, 28 | { code: 'center', name: 'center' } 29 | ] 30 | }; 31 | } 32 | return subItem; 33 | }) 34 | }; 35 | }) 36 | ] 37 | }, 38 | { 39 | name: '标题', 40 | list: [...echarts.title] 41 | }, 42 | { 43 | name: '图例', 44 | list: [...echarts.title] 45 | }, 46 | { 47 | name: '自定义颜色', 48 | list: [...echarts.echartColor] 49 | }, 50 | ...animate.configure 51 | ] 52 | ], 53 | data: [...data.configure] 54 | }; 55 | 56 | export default pie; 57 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/radar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * radar类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-14 11:43:13 7 | */ 8 | import baseConfiguration from '../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | const radar = { 12 | configure: [ 13 | [ 14 | { 15 | name: '雷达设置', 16 | list: [...echarts.radar, echarts.symbol] 17 | }, 18 | { 19 | name: '标题', 20 | list: echarts.title 21 | }, 22 | { 23 | name: '图例', 24 | list: echarts.legend 25 | } 26 | ], 27 | echarts.echartColor[echarts.echartColor.length - 1], 28 | animate.configure 29 | ], 30 | data: data.configure 31 | }; 32 | 33 | export default radar; 34 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/scatter.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * scatter类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-15 11:01:33 7 | */ 8 | import baseConfiguration from '../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | const scatter = { 12 | configure: [ 13 | [ 14 | { 15 | name: '散点图设置', 16 | list: [...echarts.scatter, echarts.symbol, echarts.seriesLabel] 17 | }, 18 | { 19 | name: '标题', 20 | list: echarts.title 21 | }, 22 | { 23 | name: '图例', 24 | list: echarts.legend 25 | }, 26 | { 27 | name: '网格', 28 | list: echarts.grid 29 | }, 30 | { 31 | name: 'X轴', 32 | list: echarts.xAxis 33 | }, 34 | { 35 | name: 'y轴', 36 | list: echarts.yAxis 37 | }, 38 | { 39 | name: '自定义颜色', 40 | list: echarts.echartColor 41 | }, 42 | ...animate.configure 43 | ] 44 | ], 45 | data: data.configure 46 | }; 47 | 48 | export default scatter; 49 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/table.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * table类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-18 10:06:24 7 | */ 8 | import baseConfiguration from '../base-configuration'; 9 | const { data } = baseConfiguration; 10 | 11 | const table = { 12 | configure: [ 13 | { 14 | componentName: 'InputNumber', 15 | label: '字体大小', 16 | name: 'tableFontSize', 17 | required: false, 18 | min: 12, 19 | placeholder: '' 20 | }, 21 | { 22 | componentName: 'InputNumber', 23 | label: '行高', 24 | name: 'tableLineHeight', 25 | required: false, 26 | placeholder: '' 27 | }, 28 | { 29 | componentName: 'InputNumber', 30 | label: '最多显几行', 31 | name: 'tableRows', 32 | required: false, 33 | min: 12, 34 | placeholder: '' 35 | }, 36 | { 37 | componentName: 'JsonEdit', 38 | label: 'Column数据', 39 | name: 'tableColumn', 40 | required: false, 41 | placeholder: '请输入Column数据' 42 | }, 43 | [ 44 | { 45 | name: '边框', 46 | list: [ 47 | { 48 | componentName: 'Switch', 49 | label: '是否显示', 50 | name: 'tableShowBorder', 51 | required: false, 52 | placeholder: '' 53 | }, 54 | { 55 | componentName: 'SketchPicker', 56 | label: '颜色', 57 | name: 'tableBorderColor', 58 | required: false, 59 | placeholder: '请选择颜色', 60 | relationFields: 'tableShowBorder', 61 | relationValues: 'true' 62 | } 63 | ] 64 | }, 65 | { 66 | name: '表头', 67 | list: [ 68 | { 69 | componentName: 'Switch', 70 | label: '是否显示', 71 | name: 'tableShowHeader', 72 | required: false, 73 | placeholder: '' 74 | }, 75 | { 76 | componentName: 'SketchPicker', 77 | label: '背景颜色', 78 | name: 'tableHeaderBackgroudColor', 79 | required: false, 80 | placeholder: '请选择背景颜色', 81 | relationFields: 'tableShowHeader', 82 | relationValues: 'true' 83 | }, 84 | { 85 | componentName: 'SketchPicker', 86 | label: '字体颜色', 87 | name: 'tableHeaderColor', 88 | required: false, 89 | placeholder: '请选择字体颜色', 90 | relationFields: 'tableShowHeader', 91 | relationValues: 'true' 92 | } 93 | ] 94 | }, 95 | { 96 | name: '表体', 97 | list: [ 98 | { 99 | componentName: 'SketchPicker', 100 | label: '字体颜色', 101 | name: 'tableTbodyColor', 102 | required: false, 103 | placeholder: '请选择字体颜色' 104 | }, 105 | { 106 | componentName: 'SketchPicker', 107 | label: '奇数行颜色', 108 | name: 'tableTbodyOddBackgroudColor', 109 | required: false, 110 | placeholder: '请选择奇数行颜色' 111 | }, 112 | { 113 | componentName: 'SketchPicker', 114 | label: '偶数行颜色', 115 | name: 'tableTbodyEvenBackgroudColor', 116 | required: false, 117 | placeholder: '请选择偶数行颜色' 118 | } 119 | ] 120 | }, 121 | { 122 | name: '滚动', 123 | list: [ 124 | { 125 | componentName: 'Switch', 126 | label: '是否滚动', 127 | name: 'tableRolling', 128 | required: false, 129 | placeholder: '' 130 | } 131 | ] 132 | } 133 | ] 134 | ], 135 | data: data.configure 136 | }; 137 | 138 | export default table; 139 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/text/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 所有文本集合 3 | * @Author: hejp 4 | * @Date: 2022-08-10 11:36:11 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 11:37:10 7 | */ 8 | // 基础文本 9 | import widgetBaseText from './widget-base-text'; 10 | // 时间文本 11 | import widgetTimeText from './widget-time-text'; 12 | // 数字滚动 13 | import widgetDigitalScroll from './widget-digital-scroll'; 14 | 15 | export default { 16 | widgetBaseText, 17 | widgetTimeText, 18 | widgetDigitalScroll 19 | }; 20 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/text/widget-base-text.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-text类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 14:17:30 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { font, animate, data, box } = baseConfiguration; 10 | 11 | const widgetBaseText = { 12 | // 基础配置项 13 | configure: [ 14 | ...font.configure, 15 | [ 16 | ...animate.configure, 17 | { 18 | name: '文字阴影', 19 | list: [ 20 | { 21 | componentName: 'InputNumber', 22 | label: 'X轴偏移', 23 | name: 'styleTextShadowX', 24 | required: false, 25 | placeholder: '请输入X轴偏移' 26 | }, 27 | { 28 | componentName: 'InputNumber', 29 | label: 'Y轴偏移', 30 | name: 'styleTextShadowY', 31 | required: false, 32 | placeholder: '请输入Y轴偏移' 33 | }, 34 | { 35 | componentName: 'InputNumber', 36 | label: '模糊值', 37 | name: 'styleTextShadowF', 38 | required: false, 39 | placeholder: '请输入模糊值' 40 | }, 41 | { 42 | componentName: 'SketchPicker', 43 | label: '颜色', 44 | name: 'styleTextShadowC', 45 | required: false, 46 | placeholder: '请选择颜色' 47 | } 48 | ] 49 | }, 50 | ...box.configure 51 | ] 52 | ], 53 | data: data.configure 54 | }; 55 | 56 | export default widgetBaseText; 57 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/text/widget-digital-scroll.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-digital-scroll类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 15:55:54 7 | */ 8 | import baseConfiguration from '../../base-configuration' 9 | const { font, data, box } = baseConfiguration 10 | 11 | const widgetDigitalText = { 12 | // 基础配置项 13 | configure: [ 14 | ...font.configure, 15 | { 16 | componentName: 'InputNumber', 17 | label: '宽度', 18 | name: 'styleWidth', 19 | required: false, 20 | placeholder: '请输入宽度', 21 | min: 0, 22 | max: 100 23 | }, 24 | { 25 | componentName: 'InputNumber', 26 | label: '高度', 27 | name: 'styleHeight', 28 | required: false, 29 | placeholder: '请输入高度', 30 | min: 0, 31 | max: 100 32 | }, 33 | box.configure 34 | ], 35 | data: data.configure 36 | } 37 | 38 | export default widgetDigitalText 39 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/text/widget-time-text.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-time-text类型的配置 3 | * @Author: hejp 4 | * @Date: 2022-08-10 09:57:10 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 11:10:51 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { font } = baseConfiguration; 10 | 11 | const widgetTimeText = { 12 | // 基础配置项 13 | configure: [ 14 | { 15 | componentName: 'Input', 16 | label: '自定义格式', 17 | name: 'fmtDate', 18 | required: false, 19 | placeholder: '' 20 | }, 21 | ...font.configure 22 | ] 23 | }; 24 | 25 | export default widgetTimeText; 26 | -------------------------------------------------------------------------------- /src/widget/tools/widget-types-configuration/wordcloud.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 词云 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-29 17:28:53 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-29 19:56:59 7 | * @FilePath: \bigscreen\src\widget\tools\widget-types-configuration\wordcloud.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import baseConfiguration from '../base-configuration' 11 | const { data } = baseConfiguration 12 | 13 | const wordcloud = { 14 | configure: [ 15 | { 16 | componentName: 'Select', 17 | label: '字体样式', 18 | name: 'wordcloudFontFamily', 19 | required: false, 20 | placeholder: '', 21 | options: [ 22 | { code: 'SimSun', name: '宋体' }, 23 | { code: 'KaiTi', name: '楷体' }, 24 | { code: 'Microsoft YaHei', name: '微软雅黑' }, 25 | { code: 'STHeiti', name: '华文黑体' }, 26 | { code: 'arial', name: '无衬线体' }, 27 | { code: 'serif', name: '有衬线体' }, 28 | { code: 'cursive', name: '草书' }, 29 | { code: 'monospace', name: '等宽字体' }, 30 | { code: 'courier', name: '打印字体' } 31 | ] 32 | }, 33 | { 34 | componentName: 'Select', 35 | label: '文字粗细', 36 | name: 'wordcloudFontWeight', 37 | required: false, 38 | placeholder: '', 39 | options: [ 40 | { code: 'normal', name: '正常' }, 41 | { code: 'bold', name: '粗体' }, 42 | { code: 'bolder', name: '特粗体' }, 43 | { code: 'lighter', name: '细体' } 44 | ] 45 | }, 46 | { 47 | componentName: 'InputNumber', 48 | label: '间距', 49 | name: 'wordcloudGridSize', 50 | required: false, 51 | placeholder: '请输入间距', 52 | min: 0, 53 | max: 100 54 | }, 55 | { 56 | componentName: 'InputNumber', 57 | label: '最大字体', 58 | name: 'wordcloudMaxFontSize', 59 | required: false, 60 | placeholder: '请输入最大字体', 61 | min: 12, 62 | max: 100 63 | } 64 | ], 65 | data: data.configure 66 | } 67 | 68 | export default wordcloud 69 | -------------------------------------------------------------------------------- /src/widget/tools/widget/bar/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 16:12:46 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | export default { 12 | type: 'bar', 13 | // 配置项值 14 | configureValue: { 15 | styleDisplay: 'block', 16 | ...animate.configureValue, 17 | ...echarts.titleValue, 18 | ...echarts.legendValue, 19 | ...echarts.gridValue, 20 | ...echarts.xAxisValue, 21 | ...echarts.yAxisValue, 22 | ...echarts.echartColorValue, 23 | ...echarts.barValue, 24 | ...echarts.seriesLabelValue, 25 | ...echarts.seriesStackValue, 26 | xAxisBoundaryGap: true, 27 | yAxisBoundaryGap: true 28 | }, 29 | // 坐标值 30 | coordinateValue: { 31 | left: 0, 32 | top: 0, 33 | width: 467, 34 | height: 346 35 | }, 36 | // 数据值 37 | dataValue: { 38 | ...data.configureValue, 39 | field: 'series', 40 | mock: { 41 | series: [ 42 | { 43 | seriesName: 'Email', 44 | data: [ 45 | { 46 | name: 'Mon', 47 | value: 120 48 | }, 49 | { 50 | name: 'Tue', 51 | value: 132 52 | }, 53 | { 54 | name: 'Wed', 55 | value: 101 56 | }, 57 | { 58 | name: 'Thu', 59 | value: 134 60 | }, 61 | { 62 | name: 'Fri', 63 | value: 90 64 | }, 65 | { 66 | name: 'Sat', 67 | value: 230 68 | }, 69 | { 70 | name: 'Sun', 71 | value: 210 72 | } 73 | ] 74 | } 75 | ] 76 | } 77 | } 78 | }; 79 | -------------------------------------------------------------------------------- /src/widget/tools/widget/bar/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 所有柱状图集合 3 | * @Author: hejp 4 | * @Date: 2022-08-10 11:36:11 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-12 15:05:48 7 | */ 8 | // 基础柱状图 9 | import widgetBaseBar from './widget-base-bar'; 10 | // 带背景色的柱状图 11 | import widgetBackgroudBar from './widget-backgroud-bar'; 12 | // 坐标轴刻度与标签对齐 13 | import widgetAlignmentBar from './widget-alignment-bar'; 14 | // 圆角柱状图 15 | import widgetRadiusBar from './widget-radius-bar'; 16 | // 纵向柱状图 17 | import widgetLengthwaysBar from './widget-lengthways-bar'; 18 | // 堆积柱状图 19 | import widgetStackBar from './widget-stack-bar'; 20 | 21 | export default { 22 | widgetBaseBar, 23 | widgetBackgroudBar, 24 | widgetAlignmentBar, 25 | widgetRadiusBar, 26 | widgetLengthwaysBar, 27 | widgetStackBar 28 | }; 29 | -------------------------------------------------------------------------------- /src/widget/tools/widget/bar/widget-alignment-bar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-alignment-bar组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-12 11:03:34 7 | */ 8 | import barConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetAlignmentBar', 12 | label: '坐标轴刻度与标签对齐', 13 | ...barConfig, 14 | configureValue: { 15 | ...barConfig.configureValue, 16 | xAxisAlignWithLabel: true 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/widget/tools/widget/bar/widget-backgroud-bar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-background-bar组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-12 11:00:46 7 | */ 8 | import barConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetBackgroudBar', 12 | label: '带背景色的柱状图', 13 | ...barConfig, 14 | configureValue: { 15 | ...barConfig.configureValue, 16 | barShowBackground: true 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/widget/tools/widget/bar/widget-base-bar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-bar组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-12 10:51:07 7 | */ 8 | import barConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetBaseBar', 12 | label: '带背景色的柱状图', 13 | ...barConfig 14 | }; 15 | -------------------------------------------------------------------------------- /src/widget/tools/widget/bar/widget-lengthways-bar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-lengthways-bar组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-12 11:15:18 7 | */ 8 | import barConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetLengthwaysBar', 12 | label: '纵向柱状图', 13 | ...barConfig, 14 | configureValue: { 15 | ...barConfig.configureValue, 16 | barWidth: 15, 17 | barBorderRadius: 20, 18 | xAxisType: 'value', 19 | yAxisType: 'category' 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/widget/tools/widget/bar/widget-radius-bar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-radius-bar组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-12 11:09:58 7 | */ 8 | import barConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetRadiusBar', 12 | label: '圆角柱状图', 13 | ...barConfig, 14 | configureValue: { 15 | ...barConfig.configureValue, 16 | barWidth: 20, 17 | barBorderRadius: 20 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /src/widget/tools/widget/bar/widget-stack-bar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-stack-bar组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-12 12:13:04 7 | */ 8 | import barConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetStackBar', 12 | label: '堆积柱状图', 13 | ...barConfig, 14 | configureValue: { 15 | ...barConfig.configureValue, 16 | seriesStackValue: 'total', 17 | seriesLabelShow: true, 18 | seriesLabelPosition: 'inside', 19 | seriesLabelColor: '#fff' 20 | }, 21 | dataValue: { 22 | ...barConfig.dataValue, 23 | mock: { 24 | series: [ 25 | { 26 | seriesName: 'Email', 27 | data: [ 28 | { 29 | name: 'Mon', 30 | value: 120 31 | }, 32 | { 33 | name: 'Tue', 34 | value: 132 35 | }, 36 | { 37 | name: 'Wed', 38 | value: 101 39 | }, 40 | { 41 | name: 'Thu', 42 | value: 134 43 | }, 44 | { 45 | name: 'Fri', 46 | value: 90 47 | }, 48 | { 49 | name: 'Sat', 50 | value: 230 51 | }, 52 | { 53 | name: 'Sun', 54 | value: 210 55 | } 56 | ] 57 | }, 58 | { 59 | seriesName: 'Direct', 60 | data: [ 61 | { 62 | name: 'Mon', 63 | value: 220 64 | }, 65 | { 66 | name: 'Tue', 67 | value: 182 68 | }, 69 | { 70 | name: 'Wed', 71 | value: 191 72 | }, 73 | { 74 | name: 'Thu', 75 | value: 234 76 | }, 77 | { 78 | name: 'Fri', 79 | value: 290 80 | }, 81 | { 82 | name: 'Sat', 83 | value: 330 84 | }, 85 | { 86 | name: 'Sun', 87 | value: 310 88 | } 89 | ] 90 | } 91 | ] 92 | } 93 | } 94 | }; 95 | -------------------------------------------------------------------------------- /src/widget/tools/widget/emap/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-emap-base组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 16:12:46 7 | */ 8 | import baseConfiguration from '../../base-configuration' 9 | const { data } = baseConfiguration 10 | 11 | export default { 12 | type: 'emap', 13 | // 配置项值 14 | configureValue: { 15 | styleDisplay: 'block', 16 | emapZoom: 1, 17 | emapLabelShow: true, 18 | emapFontSize: 12, 19 | emapFontColor: 'rgba(255,255,255,.5)', 20 | emapHighFontColor: '#fff', 21 | emapBorderSize: 1, 22 | emapBorderColor: '#666', 23 | emapHighBorderColor: '#fff', 24 | emapAreaColor: '#333', 25 | emapHighAreaColor: '#000', 26 | emapTop: 0, 27 | emapVisualMapShow: false, 28 | emapVisualMapFontColor: '#fff', 29 | emapVisualMapLeft: 'right', 30 | emapVisualMapOrient: 'horizontal', 31 | emapVisualMapStartColor: '#fff', 32 | emapVisualMapEndColor: '#000' 33 | }, 34 | // 坐标值 35 | coordinateValue: { 36 | left: 0, 37 | top: 0, 38 | width: 467, 39 | height: 346 40 | }, 41 | // 数据值 42 | dataValue: { 43 | ...data.configureValue, 44 | field: 'series', 45 | mock: { 46 | series: [ 47 | { 48 | seriesName: '今日完成情况', 49 | data: [ 50 | { name: '北京市', value: 39.93 }, 51 | { name: '天津市', value: 39.13 }, 52 | { name: '河北省', value: 147 }, 53 | { name: '山西省', value: 39 }, 54 | { name: '内蒙古自治区', value: 58 }, 55 | { name: '辽宁省', value: 50 }, 56 | { name: '吉林省', value: 51 }, 57 | { name: '黑龙江省', value: 114 }, 58 | { name: '上海市', value: 31.23 }, 59 | { name: '江苏省', value: 67 }, 60 | { name: '浙江省', value: 84 }, 61 | { name: '安徽省', value: 117 }, 62 | { name: '福建省', value: 29 }, 63 | { name: '江西省', value: 96 }, 64 | { name: '山东省', value: 92 }, 65 | { name: '河南省', value: 113 }, 66 | { name: '湖北省', value: 273 }, 67 | { name: '湖南省', value: 175 }, 68 | { name: '广东省', value: 38 }, 69 | { name: '广西壮族自治区', value: 59 }, 70 | { name: '海南省', value: 54 }, 71 | { name: '重庆市', value: 66 }, 72 | { name: '四川省', value: 58 }, 73 | { name: '贵州省', value: 71 }, 74 | { name: '云南省', value: 25 }, 75 | { name: '西藏自治区', value: 24 }, 76 | { name: '陕西省', value: 61 }, 77 | { name: '甘肃省', value: 99 }, 78 | { name: '青海省', value: 57 }, 79 | { name: '宁夏回族自治区', value: 52 }, 80 | { name: '新疆维吾尔自治区', value: 84 }, 81 | { name: '台湾省', value: 88 }, 82 | { name: '香港特别行政区', value: 66 }, 83 | { name: '澳门特别行政区', value: 77 } 84 | ] 85 | } 86 | ] 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/widget/tools/widget/emap/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-11 17:22:45 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-11 17:22:59 7 | * @FilePath: \bigscreen\src\widget\tools\widget\emap\main.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | // 基础echart地图 11 | import widgetEmapBase from './widget-emap-base' 12 | 13 | export default { 14 | widgetEmapBase 15 | } 16 | -------------------------------------------------------------------------------- /src/widget/tools/widget/emap/widget-emap-base.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-11 17:23:04 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-11 17:24:54 7 | * @FilePath: \bigscreen\src\widget\tools\widget\emap\widget-emap-base.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import emapConfig from './index' 11 | 12 | export default { 13 | code: 'widgetEmapBase', 14 | label: '基础Echarts图表', 15 | ...emapConfig 16 | } 17 | -------------------------------------------------------------------------------- /src/widget/tools/widget/form/main.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 所有表单的集合 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-06 14:41:23 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-06 14:44:47 7 | * @FilePath: \bigscreen\src\widget\tools\widget\form\main.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | // 单选 11 | import widgetFormRadio from './widget-form-radio' 12 | 13 | export default { 14 | widgetFormRadio 15 | } 16 | -------------------------------------------------------------------------------- /src/widget/tools/widget/form/widget-form-radio.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-text组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 14:18:50 7 | */ 8 | 9 | export default { 10 | code: 'widgetFormRadio', 11 | type: 'form', 12 | label: '单选', 13 | // 配置项值 14 | configureValue: { 15 | styleDisplay: 'block', 16 | radioSize: 'middle', 17 | radioColor: 'rgba(255,255,255, .6)', 18 | radioBackgroundColor: '#2F2271', 19 | radioBorderColor: '#36248C', 20 | radioHighColor: '#fff', 21 | radioHighBackgroundColor: '#3109EC', 22 | radioHighBorderColor: '#3109EC' 23 | }, 24 | // 坐标值 25 | coordinateValue: { 26 | left: 0, 27 | top: 0, 28 | width: 300, 29 | height: 40 30 | }, 31 | // 数据值 32 | dataValue: { 33 | useInterface: true, 34 | field: 'radio' 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/widget/tools/widget/funnel/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 16:12:53 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | export default { 12 | type: 'funnel', 13 | // 配置项值 14 | configureValue: { 15 | styleDisplay: 'block', 16 | ...animate.configureValue, 17 | ...echarts.titleValue, 18 | ...echarts.legendValue, 19 | ...echarts.echartColorValue, 20 | ...echarts.funnelValue, 21 | ...echarts.seriesLabelValue, 22 | xAxisShow: false, 23 | yAxisShow: false, 24 | seriesLabelShow: true, 25 | seriesLabelPosition: 'inside', 26 | xAxisType: 'category', 27 | yAxisType: 'value' 28 | }, 29 | // 坐标值 30 | coordinateValue: { 31 | left: 0, 32 | top: 0, 33 | width: 467, 34 | height: 346 35 | }, 36 | // 数据值 37 | dataValue: { 38 | ...data.configureValue, 39 | field: 'series', 40 | mock: { 41 | series: [ 42 | { 43 | seriesName: 'Email', 44 | data: [ 45 | { 46 | name: 'Mon', 47 | value: 120 48 | }, 49 | { 50 | name: 'Tue', 51 | value: 132 52 | }, 53 | { 54 | name: 'Wed', 55 | value: 101 56 | }, 57 | { 58 | name: 'Thu', 59 | value: 134 60 | }, 61 | { 62 | name: 'Fri', 63 | value: 90 64 | }, 65 | { 66 | name: 'Sat', 67 | value: 230 68 | }, 69 | { 70 | name: 'Sun', 71 | value: 210 72 | } 73 | ] 74 | } 75 | ] 76 | } 77 | } 78 | }; 79 | -------------------------------------------------------------------------------- /src/widget/tools/widget/funnel/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 所有漏斗图集合 3 | * @Author: hejp 4 | * @Date: 2022-08-10 11:36:11 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-14 20:10:24 7 | */ 8 | // 基础漏斗图 9 | import widgetBaseFunnel from './widget-funnel-bar'; 10 | 11 | export default { 12 | widgetBaseFunnel 13 | }; 14 | -------------------------------------------------------------------------------- /src/widget/tools/widget/funnel/widget-funnel-bar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-funnel-bar组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-14 20:09:43 7 | */ 8 | import funnelConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetBaseFunnel', 12 | label: '基础漏斗图', 13 | ...funnelConfig 14 | }; 15 | -------------------------------------------------------------------------------- /src/widget/tools/widget/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 所有组件默认配置的集合 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:21:13 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-17 11:09:30 7 | */ 8 | import text from './text/main' 9 | import widgetGroup from './widget-group' 10 | import widgetImage from './widget-image' 11 | // 折线图 12 | import line from './line/main' 13 | // 柱状图 14 | import bar from './bar/main' 15 | // 饼图 16 | import pie from './pie/main' 17 | // 雷达图 18 | import radar from './radar/main' 19 | // 漏斗图 20 | import funnel from './funnel/main' 21 | // 散点图 22 | import scatter from './scatter/main' 23 | // 表格 24 | import table from './table/main' 25 | // 表单 26 | import form from './form/main' 27 | // echart地图 28 | import emap from './emap/main' 29 | // 词云 30 | import wrodcloud from './wordcloud/main' 31 | 32 | const widgetConfiguration: any = { 33 | ...text, 34 | widgetGroup, 35 | widgetImage, 36 | ...line, 37 | ...bar, 38 | ...pie, 39 | ...radar, 40 | ...funnel, 41 | ...scatter, 42 | ...table, 43 | ...form, 44 | ...emap, 45 | ...wrodcloud 46 | } 47 | 48 | export default widgetConfiguration 49 | -------------------------------------------------------------------------------- /src/widget/tools/widget/line/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 16:12:59 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | export default { 12 | type: 'line', 13 | // 配置项值 14 | configureValue: { 15 | styleDisplay: 'block', 16 | ...animate.configureValue, 17 | ...echarts.titleValue, 18 | ...echarts.legendValue, 19 | ...echarts.gridValue, 20 | ...echarts.xAxisValue, 21 | ...echarts.yAxisValue, 22 | ...echarts.echartColorValue, 23 | ...echarts.lineValue, 24 | ...echarts.seriesLabel, 25 | ...echarts.seriesStackValue, 26 | ...echarts.symbolValue 27 | }, 28 | // 坐标值 29 | coordinateValue: { 30 | left: 0, 31 | top: 0, 32 | width: 467, 33 | height: 346 34 | }, 35 | // 数据值 36 | dataValue: { 37 | ...data.configureValue, 38 | field: 'series', 39 | mock: { 40 | series: [ 41 | { 42 | seriesName: 'Email', 43 | data: [ 44 | { 45 | name: 'Mon', 46 | value: 120 47 | }, 48 | { 49 | name: 'Tue', 50 | value: 132 51 | }, 52 | { 53 | name: 'Wed', 54 | value: 101 55 | }, 56 | { 57 | name: 'Thu', 58 | value: 134 59 | }, 60 | { 61 | name: 'Fri', 62 | value: 90 63 | }, 64 | { 65 | name: 'Sat', 66 | value: 230 67 | }, 68 | { 69 | name: 'Sun', 70 | value: 210 71 | } 72 | ] 73 | } 74 | ] 75 | } 76 | } 77 | }; 78 | -------------------------------------------------------------------------------- /src/widget/tools/widget/line/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 所有折线图集合 3 | * @Author: hejp 4 | * @Date: 2022-08-10 11:36:11 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-11 16:54:25 7 | */ 8 | // 基础折线图 9 | import widgetBaseLine from './widget-base-line'; 10 | // 基础平滑折线图 11 | import widgetBaseSmoothLine from './widget-base-smooth-line'; 12 | // 基础面积图 13 | import widgetBaseAreaLine from './widget-base-area-line'; 14 | // 基础纵向折线图 15 | import widgetBaseLengthwaysLine from './widget-base-lengthways-line'; 16 | 17 | export default { 18 | widgetBaseLine, 19 | widgetBaseSmoothLine, 20 | widgetBaseAreaLine, 21 | widgetBaseLengthwaysLine 22 | }; 23 | -------------------------------------------------------------------------------- /src/widget/tools/widget/line/widget-base-area-line.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-area-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-11 16:44:11 7 | */ 8 | import lineConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetBaseAreaLine', 12 | label: '基础面积图', 13 | ...lineConfig, 14 | configureValue: { 15 | ...lineConfig.configureValue, 16 | lineAreaStyle: true 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/widget/tools/widget/line/widget-base-lengthways-line.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-lengthways-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-11 16:53:51 7 | */ 8 | import lineConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetBaseLengthwaysLine', 12 | label: '基础纵向折线图', 13 | ...lineConfig, 14 | configureValue: { 15 | ...lineConfig.configureValue, 16 | xAxisType: 'value', 17 | yAxisType: 'category' 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /src/widget/tools/widget/line/widget-base-line.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-11 14:43:49 7 | */ 8 | import lineConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetBaseLine', 12 | label: '基础折线图', 13 | ...lineConfig 14 | }; 15 | -------------------------------------------------------------------------------- /src/widget/tools/widget/line/widget-base-smooth-line.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-smooth-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-11 16:42:30 7 | */ 8 | import lineConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetBaseSmoothLine', 12 | label: '基础平滑折线图', 13 | ...lineConfig, 14 | configureValue: { 15 | ...lineConfig.configureValue, 16 | lineSmooth: true 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/widget/tools/widget/pie/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 16:13:06 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | export default { 12 | type: 'pie', 13 | // 配置项值 14 | configureValue: { 15 | styleDisplay: 'block', 16 | ...animate.configureValue, 17 | ...echarts.titleValue, 18 | ...echarts.legendValue, 19 | ...echarts.echartColorValue, 20 | ...echarts.pieValue, 21 | xAxisShow: false, 22 | yAxisShow: false, 23 | seriesLabelShow: true, 24 | seriesLabelPosition: 'outside', 25 | seriesLabelColor: '', 26 | xAxisType: 'category', 27 | yAxisType: 'value' 28 | }, 29 | // 坐标值 30 | coordinateValue: { 31 | left: 0, 32 | top: 0, 33 | width: 467, 34 | height: 346 35 | }, 36 | // 数据值 37 | dataValue: { 38 | ...data.configureValue, 39 | field: 'series', 40 | mock: { 41 | series: [ 42 | { 43 | seriesName: 'Email', 44 | data: [ 45 | { 46 | name: 'Mon', 47 | value: 120 48 | }, 49 | { 50 | name: 'Tue', 51 | value: 132 52 | }, 53 | { 54 | name: 'Wed', 55 | value: 101 56 | }, 57 | { 58 | name: 'Thu', 59 | value: 134 60 | }, 61 | { 62 | name: 'Fri', 63 | value: 90 64 | }, 65 | { 66 | name: 'Sat', 67 | value: 230 68 | }, 69 | { 70 | name: 'Sun', 71 | value: 210 72 | } 73 | ] 74 | } 75 | ] 76 | } 77 | } 78 | }; 79 | -------------------------------------------------------------------------------- /src/widget/tools/widget/pie/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 所有柱状图集合 3 | * @Author: hejp 4 | * @Date: 2022-08-10 11:36:11 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-12 17:51:10 7 | */ 8 | // 基础柱状图 9 | import widgetBasePie from './widget-base-pie'; 10 | // 圆环饼图 11 | import widgetAnnulusPie from './widget-annulus-pie'; 12 | // 南丁格尔图 13 | import widgetRosetypePie from './widget-rosetype-pie'; 14 | 15 | export default { 16 | widgetBasePie, 17 | widgetAnnulusPie, 18 | widgetRosetypePie 19 | }; 20 | -------------------------------------------------------------------------------- /src/widget/tools/widget/pie/widget-annulus-pie.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-annulus-pie组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-12 17:43:10 7 | */ 8 | import picConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetAnnulusPie', 12 | label: '圆环饼图', 13 | ...picConfig, 14 | configureValue: { 15 | ...picConfig.configureValue, 16 | seriesInsideRadius: 40, 17 | seriesAutsideRadius: 80 18 | }, 19 | dataValue: picConfig.dataValue 20 | }; 21 | -------------------------------------------------------------------------------- /src/widget/tools/widget/pie/widget-base-pie.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-pie组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-12 17:35:25 7 | */ 8 | import picConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetBasePie', 12 | label: '基础饼图', 13 | ...picConfig, 14 | configureValue: { 15 | ...picConfig.configureValue 16 | }, 17 | dataValue: picConfig.dataValue 18 | }; 19 | -------------------------------------------------------------------------------- /src/widget/tools/widget/pie/widget-rosetype-pie.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-rosetype-pie组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-12 17:51:48 7 | */ 8 | import picConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetRosetypePie', 12 | label: '南丁格尔图', 13 | ...picConfig, 14 | configureValue: { 15 | ...picConfig.configureValue, 16 | seriesInsideRadius: 40, 17 | seriesAutsideRadius: 80, 18 | seriesRoseType: true 19 | }, 20 | dataValue: picConfig.dataValue 21 | }; 22 | -------------------------------------------------------------------------------- /src/widget/tools/widget/radar/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 16:13:11 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | export default { 12 | type: 'radar', 13 | // 配置项值 14 | configureValue: { 15 | styleDisplay: 'block', 16 | ...animate.configureValue, 17 | ...echarts.titleValue, 18 | ...echarts.legendValue, 19 | ...echarts.echartColorValue, 20 | ...echarts.radarValue, 21 | ...echarts.seriesLabelValue, 22 | ...echarts.symbolValue, 23 | xAxisShow: false, 24 | yAxisShow: false, 25 | xAxisType: 'category', 26 | yAxisType: 'value' 27 | }, 28 | // 坐标值 29 | coordinateValue: { 30 | left: 0, 31 | top: 0, 32 | width: 467, 33 | height: 346 34 | }, 35 | // 数据值 36 | dataValue: { 37 | ...data.configureValue, 38 | field: 'series', 39 | mock: { 40 | series: [ 41 | { 42 | seriesName: 'Email', 43 | data: [ 44 | { 45 | name: 'Mon', 46 | value: 120 47 | }, 48 | { 49 | name: 'Tue', 50 | value: 132 51 | }, 52 | { 53 | name: 'Wed', 54 | value: 101 55 | }, 56 | { 57 | name: 'Thu', 58 | value: 134 59 | }, 60 | { 61 | name: 'Fri', 62 | value: 90 63 | }, 64 | { 65 | name: 'Sat', 66 | value: 230 67 | }, 68 | { 69 | name: 'Sun', 70 | value: 210 71 | } 72 | ] 73 | }, 74 | { 75 | seriesName: 'Direct', 76 | data: [ 77 | { 78 | name: 'Mon', 79 | value: 220 80 | }, 81 | { 82 | name: 'Tue', 83 | value: 182 84 | }, 85 | { 86 | name: 'Wed', 87 | value: 191 88 | }, 89 | { 90 | name: 'Thu', 91 | value: 234 92 | }, 93 | { 94 | name: 'Fri', 95 | value: 290 96 | }, 97 | { 98 | name: 'Sat', 99 | value: 330 100 | }, 101 | { 102 | name: 'Sun', 103 | value: 310 104 | } 105 | ] 106 | } 107 | ] 108 | } 109 | } 110 | }; 111 | -------------------------------------------------------------------------------- /src/widget/tools/widget/radar/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 所有雷达图集合 3 | * @Author: hejp 4 | * @Date: 2022-08-10 11:36:11 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-14 11:09:18 7 | */ 8 | // 基础雷达 9 | import widgetBaseRadar from './widget-base-radar'; 10 | // 圆形雷达图 11 | import widgetCircleRadar from './widget-circle-radar'; 12 | export default { 13 | widgetBaseRadar, 14 | widgetCircleRadar 15 | }; 16 | -------------------------------------------------------------------------------- /src/widget/tools/widget/radar/widget-base-radar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-13 21:16:57 7 | */ 8 | import radarConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetBaseRadar', 12 | label: '基础雷达图', 13 | ...radarConfig 14 | }; 15 | -------------------------------------------------------------------------------- /src/widget/tools/widget/radar/widget-circle-radar.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-circle-radar组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-14 11:11:12 7 | */ 8 | import radarConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetCircleRadar', 12 | label: '圆形雷达图', 13 | ...radarConfig, 14 | configureValue: { 15 | ...radarConfig.configureValue, 16 | radarShape: 'circle' 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/widget/tools/widget/scatter/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 16:13:20 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { echarts, animate, data } = baseConfiguration; 10 | 11 | export default { 12 | type: 'scatter', 13 | // 配置项值 14 | configureValue: { 15 | display: 'block', 16 | ...animate.configureValue, 17 | ...echarts.titleValue, 18 | ...echarts.legendValue, 19 | ...echarts.gridValue, 20 | ...echarts.xAxisValue, 21 | ...echarts.yAxisValue, 22 | ...echarts.echartColorValue, 23 | ...echarts.scatterValue, 24 | ...echarts.seriesLabelValue, 25 | legendShow: false, 26 | showSymbol: true, 27 | symbol: 'circle', 28 | symbolSize: 10 29 | }, 30 | // 坐标值 31 | coordinateValue: { 32 | left: 0, 33 | top: 0, 34 | width: 467, 35 | height: 346 36 | }, 37 | // 数据值 38 | dataValue: { 39 | ...data.configureValue, 40 | field: 'series', 41 | mock: { 42 | series: [ 43 | { 44 | seriesName: 'Email', 45 | data: [ 46 | { 47 | name: 'Mon', 48 | value: 120 49 | }, 50 | { 51 | name: 'Tue', 52 | value: 132 53 | }, 54 | { 55 | name: 'Wed', 56 | value: 101 57 | }, 58 | { 59 | name: 'Thu', 60 | value: 134 61 | }, 62 | { 63 | name: 'Fri', 64 | value: 90 65 | }, 66 | { 67 | name: 'Sat', 68 | value: 230 69 | }, 70 | { 71 | name: 'Sun', 72 | value: 210 73 | } 74 | ] 75 | } 76 | ] 77 | } 78 | } 79 | }; 80 | -------------------------------------------------------------------------------- /src/widget/tools/widget/scatter/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 所有散点图集合 3 | * @Author: hejp 4 | * @Date: 2022-08-10 11:36:11 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-15 10:38:08 7 | */ 8 | // 基础漏斗图 9 | import widgetBaseScatter from './widget-base-scatter'; 10 | 11 | export default { 12 | widgetBaseScatter 13 | }; 14 | -------------------------------------------------------------------------------- /src/widget/tools/widget/scatter/widget-base-scatter.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-scatter组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-15 10:35:30 7 | */ 8 | import scatterConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetBaseScatter', 12 | label: '基础散点图', 13 | ...scatterConfig 14 | }; 15 | -------------------------------------------------------------------------------- /src/widget/tools/widget/table/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-line组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-18 10:07:26 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { data } = baseConfiguration; 10 | 11 | export default { 12 | type: 'table', 13 | // 配置项值 14 | configureValue: { 15 | styleDisplay: 'block', 16 | tableBorderColor: 'rgba(255,255,255,0.2)', 17 | tableFontSize: 14, 18 | tableHeaderBackgroudColor: 'rgba(80,18,215,1)', 19 | tableHeaderColor: 'rgba(255,255,255,0.5)', 20 | tableLineHeight: 35, 21 | tableShowBorder: true, 22 | tableShowBorderColor: 'rgba(230,30,30,1)', 23 | tableShowHeader: true, 24 | tableTbodyColor: 'rgba(153,144,197,1)', 25 | tableTbodyEvenBackgroudColor: 'rgba(40,34,89,1)', 26 | tableTbodyOddBackgroudColor: 'rgba(98,68,244,1)', 27 | tableRows: 5, 28 | tableRolling: false, 29 | tableColumn: [ 30 | { 31 | title: '姓名', 32 | dataIndex: 'name', 33 | align: 'left', 34 | width: 100 35 | }, 36 | { 37 | title: '年龄', 38 | dataIndex: 'age', 39 | align: 'left', 40 | width: 100 41 | }, 42 | { 43 | title: '工作', 44 | dataIndex: 'job', 45 | align: 'left' 46 | } 47 | ] 48 | }, 49 | // 坐标值 50 | coordinateValue: { 51 | left: 0, 52 | top: 0, 53 | width: 467, 54 | height: 346 55 | }, 56 | // 数据值 57 | dataValue: { 58 | ...data.configureValue, 59 | field: 'table', 60 | mock: { 61 | table: [ 62 | { 63 | name: 'hejp', 64 | age: 20, 65 | job: '前端开发工程师' 66 | }, 67 | { 68 | name: 'zhangsan', 69 | age: 20, 70 | job: '后台开发' 71 | }, 72 | { 73 | name: 'lisi', 74 | age: 20, 75 | job: '产品经理' 76 | } 77 | ] 78 | } 79 | } 80 | }; 81 | -------------------------------------------------------------------------------- /src/widget/tools/widget/table/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 所有表格集合 3 | * @Author: hejp 4 | * @Date: 2022-08-10 11:36:11 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-17 11:05:04 7 | */ 8 | // 基础表格 9 | import widgetBaseTable from './widget-base-table'; 10 | 11 | export default { 12 | widgetBaseTable 13 | }; 14 | -------------------------------------------------------------------------------- /src/widget/tools/widget/table/widget-base-table.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-table组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-17 11:04:42 7 | */ 8 | import tableConfig from './index'; 9 | 10 | export default { 11 | code: 'widgetBaseTable', 12 | label: '基础表格', 13 | ...tableConfig 14 | }; 15 | -------------------------------------------------------------------------------- /src/widget/tools/widget/text/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 所有文本集合 3 | * @Author: hejp 4 | * @Date: 2022-08-10 11:36:11 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 11:36:48 7 | */ 8 | // 基础文本 9 | import widgetBaseText from './widget-base-text'; 10 | // 时间文本 11 | import widgetTimeText from './widget-time-text'; 12 | // 数字滚动 13 | import widgetDigitalScroll from './widget-digital-scroll'; 14 | 15 | export default { 16 | widgetBaseText, 17 | widgetTimeText, 18 | widgetDigitalScroll 19 | }; 20 | -------------------------------------------------------------------------------- /src/widget/tools/widget/text/widget-base-text.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-text组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 14:18:50 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { font, animate, data, box } = baseConfiguration; 10 | 11 | export default { 12 | code: 'widgetBaseText', 13 | type: 'text', 14 | label: '基础文本', 15 | // 配置项值 16 | configureValue: { 17 | styleDisplay: 'block', 18 | styleTextShadowX: 0, 19 | styleTextShadowY: 0, 20 | styleTextShadowF: 0, 21 | styleTextShadowC: '', 22 | ...box.configureValue, 23 | ...animate.configureValue, 24 | ...font.configureValue 25 | }, 26 | // 坐标值 27 | coordinateValue: { 28 | left: 0, 29 | top: 0, 30 | width: 100, 31 | height: 40 32 | }, 33 | // 数据值 34 | dataValue: data.configureValue 35 | }; 36 | -------------------------------------------------------------------------------- /src/widget/tools/widget/text/widget-digital-scroll.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-digital-scroll组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 17:37:56 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { font, data, box } = baseConfiguration; 10 | 11 | export default { 12 | code: 'widgetDigitalScroll', 13 | type: 'text', 14 | label: '数字滚动', 15 | // 配置项值 16 | configureValue: { 17 | styleDisplay: 'block', 18 | styleTextShadowX: 0, 19 | styleTextShadowY: 0, 20 | styleTextShadowF: 0, 21 | styleTextShadowC: '', 22 | ...font.configureValue, 23 | ...box.configureValue, 24 | styleColor: '#fc97af', 25 | styleWidth: 50, 26 | styleHeight: 50, 27 | styleBorderBottomLeftRadius: 5, 28 | styleBorderBottomRightRadius: 5, 29 | styleBorderColor: '#fc97af', 30 | styleBorderStyle: 'solid', 31 | styleBorderTopLeftRadius: 5, 32 | styleBorderTopRightRadius: 5, 33 | styleBorderWidth: 1, 34 | styleBoxInset: true, 35 | styleBoxShadowC: '#fc97af', 36 | styleBoxShadowF: 5, 37 | styleBoxShadowX: 0, 38 | styleBoxShadowY: 0 39 | }, 40 | // 坐标值 41 | coordinateValue: { 42 | left: 0, 43 | top: 0, 44 | width: 800, 45 | height: 50 46 | }, 47 | // 数据值 48 | dataValue: { 49 | ...data.configureValue, 50 | mock: { 51 | value: 18665997697 52 | } 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /src/widget/tools/widget/text/widget-time-text.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-time-text组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 15:12:19 7 | */ 8 | import baseConfiguration from '../../base-configuration'; 9 | const { font, data } = baseConfiguration; 10 | 11 | export default { 12 | code: 'widgetTimeText', 13 | type: 'text', 14 | label: '基础文本', 15 | // 配置项值 16 | configureValue: { 17 | styleDisplay: 'block', 18 | styleTextShadowX: 0, 19 | styleTextShadowY: 0, 20 | styleTextShadowF: 0, 21 | styleTextShadowC: '', 22 | ...font.configureValue, 23 | fmtDate: 'yyyy-MM-dd hh:mm:ss', 24 | styleColor: 'orange' 25 | }, 26 | // 坐标值 27 | coordinateValue: { 28 | left: 0, 29 | top: 0, 30 | width: 300, 31 | height: 40 32 | }, 33 | // 数据值 34 | dataValue: data.configureValue 35 | }; 36 | -------------------------------------------------------------------------------- /src/widget/tools/widget/widget-group.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-group组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 16:13:46 7 | */ 8 | // 获取本地环境的数据 9 | import baseConfiguration from '../base-configuration' 10 | const { animate, box } = baseConfiguration 11 | 12 | export default { 13 | code: 'widgetGroup', 14 | type: 'group', 15 | label: '组件', 16 | // 配置项值 17 | configureValue: { 18 | styleDisplay: 'block', 19 | backgroundColor: '', 20 | ...animate.configureValue, 21 | styleBoxInset: true, 22 | styleBoxShadowX: 0, 23 | styleBoxShadowY: 0, 24 | styleBoxShadowF: 10, 25 | styleBoxShadowC: 'rgba(15,32,212,0.5)', 26 | styleBorderStyle: 'solid', 27 | styleBorderWidth: 1, 28 | styleBorderColor: 'rgba(15,32,212, 1)', 29 | styleBorderTopLeftRadius: 5, 30 | styleBorderTopRightRadius: 5, 31 | styleBorderBottomLeftRadius: 5, 32 | styleBorderBottomRightRadius: 5 33 | }, 34 | // 坐标值 35 | coordinateValue: { 36 | left: 0, 37 | top: 0, 38 | width: 467, 39 | height: 346 40 | }, 41 | // 数据值 42 | dataValue: { 43 | useInterface: false, 44 | dataType: 'dynamic', 45 | mock: { 46 | value: '我是文本框', 47 | radio: [ 48 | { label: 'Apple', value: 'Apple' }, 49 | { label: 'Pear', value: 'Pear' }, 50 | { label: 'Orange', value: 'Orange' } 51 | ] 52 | }, 53 | url: '', 54 | method: 'get' 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/widget/tools/widget/widget-image.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-text组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-16 16:13:40 7 | */ 8 | import baseConfiguration from '../base-configuration' 9 | const { font, animate, data, box } = baseConfiguration 10 | 11 | export default { 12 | code: 'widgetImage', 13 | type: 'image', 14 | label: '图片', 15 | // 配置项值 16 | configureValue: { 17 | display: 'block', 18 | ...animate.configureValue 19 | }, 20 | // 坐标值 21 | coordinateValue: { 22 | left: 0, 23 | top: 0, 24 | width: 467, 25 | height: 346 26 | }, 27 | // 数据值 28 | dataValue: { 29 | ...data.configureValue, 30 | field: 'imgSrc', 31 | mock: { 32 | imgSrc: 33 | 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1115%2F092221102018%2F210922102018-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663126838&t=b28b080374fe1a14aae2eb2d99d5ab87' 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/widget/tools/widget/wordcloud/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-wordcloud组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-18 10:07:26 7 | */ 8 | import baseConfiguration from '../../base-configuration' 9 | const { data } = baseConfiguration 10 | 11 | export default { 12 | type: 'wordcloud', 13 | // 配置项值 14 | configureValue: { 15 | wordcloudFontFamily: 'Microsoft YaHei', 16 | wordcloudFontWeight: 'bold', 17 | wordcloudGridSize: 0, 18 | wordcloudMaxFontSize: 32 19 | }, 20 | // 坐标值 21 | coordinateValue: { 22 | left: 0, 23 | top: 0, 24 | width: 467, 25 | height: 346 26 | }, 27 | // 数据值 28 | dataValue: { 29 | ...data.configureValue, 30 | field: 'series', 31 | mock: { 32 | series: [ 33 | { 34 | seriesName: '测试', 35 | data: [ 36 | { 37 | name: '数据可视化', 38 | value: 3000 39 | }, 40 | { 41 | name: '大数据', 42 | value: 2181 43 | }, 44 | { 45 | name: '云计算', 46 | value: 1386 47 | }, 48 | { 49 | name: '物联网', 50 | value: 2055 51 | }, 52 | { 53 | name: '移动互联网', 54 | value: 2467 55 | }, 56 | { 57 | name: '人工智能', 58 | value: 2244 59 | }, 60 | { 61 | name: '深度学习', 62 | value: 1898 63 | }, 64 | { 65 | name: '机器学习', 66 | value: 1484 67 | }, 68 | { 69 | name: '区块链', 70 | value: 3865 71 | }, 72 | { 73 | name: '互联网+', 74 | value: 2222 75 | }, 76 | { 77 | name: '智能合约', 78 | value: 366 79 | }, 80 | { 81 | name: '比特币', 82 | value: 360 83 | }, 84 | { 85 | name: '数据挖掘', 86 | value: 273 87 | } 88 | ] 89 | } 90 | ] 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /src/widget/tools/widget/wordcloud/main.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-27 21:05:34 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-27 21:05:57 7 | * @FilePath: \bigscreen\src\widget\tools\widget\wordcloud\main.ts 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | // 基础表格 11 | import widgetBaseWordcloud from './widget-base-wrodcloud' 12 | 13 | export default { 14 | widgetBaseWordcloud 15 | } 16 | -------------------------------------------------------------------------------- /src/widget/tools/widget/wordcloud/widget-base-wrodcloud.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * widget-base-table组件的默认配置值 3 | * @Author: hejp 4 | * @Date: 2022-08-10 10:05:22 5 | * @Last Modified by: hejp 6 | * @Last Modified time: 2022-08-17 11:04:42 7 | */ 8 | import wordcloudConfig from './index' 9 | 10 | export default { 11 | code: 'widgetBaseWordcloud', 12 | label: '基础表格', 13 | ...wordcloudConfig 14 | } 15 | -------------------------------------------------------------------------------- /src/widget/wordcloud/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 页面描述 3 | * @Author: hejp 378540660@qq.com 4 | * @Date: 2022-09-27 20:53:29 5 | * @LastEditors: hejp 378540660@qq.com 6 | * @LastEditTime: 2022-09-29 20:05:36 7 | * @FilePath: \bigscreen\src\widget\wordcloud\index.tsx 8 | * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved. 9 | */ 10 | import { FC, useMemo } from 'react' 11 | // 自定义ehcarts 12 | import CustomEcharts from '@src/components/echarts' 13 | // echarts类型 14 | import { IEchartConfig } from '@src/types' 15 | // 处理options 16 | import { handleEchartsOption, handleData } from '@src/utils/echarts' 17 | import { getStyles } from '@utils/tools' 18 | 19 | interface IWordcloudProps extends IEchartConfig { 20 | options: any 21 | data: any 22 | field: string 23 | } 24 | 25 | const Wordcloud: FC = ({ options, data, field }) => { 26 | // 处理echarts数据 27 | const getOption = useMemo(() => { 28 | const configuration = handleEchartsOption(options) 29 | const currentData = data && data[field] ? data[field] : [] 30 | return { 31 | tooltip: { 32 | trigger: 'item' 33 | }, 34 | series: currentData 35 | ? currentData.map((item: any) => ({ 36 | ...configuration.wordcloud.series, 37 | data: item.data, 38 | name: item.seriesName 39 | })) 40 | : [] 41 | } 42 | }, [data, field, options]) 43 | 44 | return 45 | } 46 | 47 | export default Wordcloud 48 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./paths.json", 3 | "compilerOptions": { 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "noFallthroughCasesInSwitch": true, 17 | "module": "esnext", 18 | "moduleResolution": "node", 19 | "resolveJsonModule": true, 20 | "isolatedModules": true, 21 | "noEmit": true, 22 | "jsx": "react-jsx" 23 | }, 24 | "include": [ 25 | "src" 26 | ] 27 | } 28 | --------------------------------------------------------------------------------