Code Monkey home page Code Monkey logo

ly_vis's Introduction

可视化交互分析界面说明文档

使用部署

如果不需要开发改造,而是应用的话,直接部署本界面即可,操作流程如下:

  1. 在本页面右侧,下载最新版本的release(发行版)中的 build.zip压缩包,下载完成后解压。
  2. 登录部署 server的文件服务器,进入 home/Server/www/ui路径,如果没有ui文件夹就新建一个。
  3. 将第一步下载的 build文件夹下的文件全部复制到该 ui文件夹下。
  4. 完成上述步骤后,用浏览器访问 http:// yourserver:18080/ui,即可访问本界面。
  5. 如有使用问题,请在下面加入我们的开源群反馈。

相关地址

本地研发

运行环境

  • 开发工具:Visual Studio Code

  • 插件:

    • EditorConfig for VS Code
    • ESLint
    • Stylelint
  • 编辑工具:node >= v16.13.1

  • 包管理工具:Yarn >= v1.22.1

  • 运行环境:

    • 推荐 Chrome 浏览器,其他现代浏览器不保证完全兼容
    • 屏幕分辨率 >= 1024

启动项目

  1. 下载代码。
git clone https://gitee.com/abyssalfish-os/ly_vis.git
  1. 初始化仓库。进入仓库,执行 yarn
cd ly-vis
yarn
  1. 配置服务器信息。

打开 /packages/std/config-overrides.js文件。修改 devServerConfigtarget变量为自己数据的Server路径。

const devServerConfig = () => config => {
    return {
        ...config,
        proxy: {
            '/d/': {
                target: http:// + server地址:端口(端口号默认为18080,根据实际部署情况修改),
                changeOrigin: true,
            },
        },
    }
}
  1. 运行项目。
yarn std start

项目会唤醒浏览器,自动访问localhost:8004,展示为登录页面。如启动程序运行完毕之后未能自动访问,则需要手动访问。

默认管理员登录密码为:

  • 账号:admin
  • 密码:LoginLY@2016

代码介绍

项目采用create-react-app + antd为基础架构,采用multi-repo的仓库管理方式,本仓库仅包含其中一个主项目仓库和共用组件库,仍保持多仓库的代码结构。

目录结构介绍

仅介绍开发过程中会涉及到的文件路径:

- packages // 仓库集合
  - components // 仓库1:公用组件库
    - charts // 图标库
    - config-store // 全局变量模板
    - locale // 词汇翻译对照表
    - request-config // Ajax请求封装
    - style // 产品基础样式
    - system // 子模块系统
      - event-system // 事件子系统
    - ui // ui组件库
    - utils // 计算函数库
  - std // 仓库2: 项目仓库
    - doc // 开发复杂逻辑文档
    - public // create-react-app自带的公共文件夹
      - app-config // 一些系统变量和开关的配置
      - template // 数据导入模板
      - theme // 主题样式表
    - src // 项目源代码
      - components // 组件库
      - config // 路由配置
      - layout // 布局配置
      - locale // i18配置
      - page // 页面代码
        - 404 // 404页面
        - config // 配置页面
        - event // 事件页面
        - login // 登录页面
        - overview // 总览页面
        - result // 全局搜索结果页面
        - search // 全局搜索页面
        - track // 跟踪页面
      - service // API配置
      - style // 仓库2私有样式
      - utils // 仓库2私有工具函数
      - index.jsx // 入口文件
      - router.jsx // 路由组件
    - config-overrides.js // 仓库2拓展webpack配置。
- .prettierrc.js // prettier代码规范配置
- .eslintrc.js // eslint代码规范配置
- .stylelintrc.js // stylelint/css规范配置

Git Commit

采用了Angular提交信息规范,所以在提交commit信息时,需要采用以下命令代替 git commit

yarn commit

按照以下五个问题填入commit信息:

  • Select the type of change that you're committing:更新类型(必填)

    • feat:新功能
    • fix:修复BUG
    • docs:文档修改
    • style:代码样式
    • refactor:重构工作
    • perf:性能相关
    • test:测试相关
    • build:打包配置相关
    • ci:对CI配置文件或脚本进行了修改
    • chore:修改主要业务代码以外的代码
    • revert:版本回退
  • What is the scope of this change:影响范围

  • Write a short, imperative tense description of the change:简要说明(必填)

  • Provide a longer description of the change: (press enter to skip):详细说明

  • Are there any breaking changes:是否有重大变动,主要是不兼容变动,默认否

  • Does this change affect any open issues:是否影响了哪些开放的issus,默认否

如果提交失败请检查Eslint、Stylelint等工具是否报错。

打包

进入项目文件后,执行以下命令,等待打包完成。

yarn std build

打包后文件会在 packages/std/build 文件夹下。

Vmware虚拟机镜像

为了方便大家安装试用,制作了vmware安装镜像,请大家前往如下百度网盘地址下载。

虚拟机安装后,流影前端默认使用18080端口,访问地址及默认账号:

联系我们

如果在开发、部署、产品使用的过程中遇到任何问题,或者技术讨论、产品咨询、商务合作等,都欢迎前来联系我们!

  • 联系邮箱:[email protected]
  • 开源讨论组:
  • 微信公众号:(深海鱼科技有限公司)

常见问题

Q:启动本地开发环境是,报错 error:0308010C:digital envelope routines::unsupported

A:在 packages/std/package.json文件的start命中添加参数 --openssl-legacy-provider,修改为 "start": "cross-env REACT_APP_ENV=dev react-app-rewired --openssl-legacy-provider start"

ly_vis's People

Contributors

791106912 avatar yanglinga avatar abyssalfish-os avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.