大数据大屏日志(开发中)
前序
一、搭建开发环境
1、安装node v18.16.0
二、创建React项目
1、运行命令:
Tags:
本项目运用到了
TypeScript
npx create-react-app big_led
新建以下文件夹:
在
public
目录下创建1、
static/image
:用于存储页面内的图片在
src
目录下创建1、
compontents
2、
config
3、
css
4、
pages
5、
router
6、
util
修改以下文件:前提:已安装
sass
1、修改
index.css
为index.sass
,并修改文件内部数据:body margin: 0 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale background: #000d4a .container background: rgba(6,48,109,.5) 2、修改
App.css
为App.sass
,并修改文件内部数据:.App width: 100vw height: 100vh //min-width: 1000px display: flex flex-direction: column align-items: center
创建完成后项目目录:
2、安装依赖
本项目运用到了以下依赖:
1、
Ant Design
2、
sass
3、
eCharts
4、
react-router
#导入Ant Design npm add antd #导入sass npm install sass --save-dev #导入eCharts npm install echarts #导入react-router npm install react-router-dom
.App width: 100vw height: 100vh //min-width: 1000px display: flex flex-direction: column align-items: center
3、修改基础文件
新建以下文件夹:
在
public
目录下创建1、
static/image
:用于存储页面内的图片在
src
目录下创建1、
compontents
:用于存储组件2、
config
:用于存储配置文件3、
css
:用于存储层叠样式表在
css
文件夹中创建:1、
pages
:用于存储页面的层叠样式表2、
comp
:用于存储组件的层叠样式表4、
pages
:用于存储页面5、
router
:用于存储路由配置6、
util
:用于存储工具文件修改以下文件:前提:已安装
sass
1、修改
index.css
为index.sass
,并修改文件内部数据:body margin: 0 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale background: #000d4a .container background: rgba(6,48,109,.5) 2、修改
App.css
为App.sass
,并修改文件内部数据:.App width: 100vw height: 100vh //min-width: 1000px display: flex flex-direction: column align-items: center
创建完成后项目目录:
4、配置依赖
1、配置react-router
需要配置的文件有:
1、
App.tsx
在
router
文件夹中创建index.tsx
// router/index.tsx import {BrowserRouter as Router,Routes,Route} from "react-router-dom"; import Home from "../pages/home"; const AppRouter = () =>{ return( <> <Router> <Routes> <Route path={"/"} element={<Home/>}></Route> </Routes> </Router> </> ) } export default AppRouter
// App.tsx import React from 'react'; import './App.sass'; import AppRouter from "./router"; const App = () => { return ( <div className="App"> <AppRouter /> </div> ); } export default App;
5、编写项目
1、创建主界面
构建思路:
主界面是一个大屏,我将它分为标题和下方图表两块,所以我就新建了一个
classname={"container"}
的一个div
,用于盛放下方的图表整个主页运用了
css
的弹性盒子布局和盒子模型,将整个页面变为上下两个区域,并且盒子的大小进行了动态变化。开始构建:
在
pages
中创建home.tsx
在
css/pages
中创建home.sass
1、编写页面基础(不引入组件)
// 引入css import "../css/pages/home.sass" // 引入组件 const Home = () =>{ return( <div id={"home"}> <div id={"container"}> </div> </div> ) } export default Home;
2、编写页面层叠样式表
#home width: 100% height: 100% #container width: 100% height: calc(100% - 50px) display: flex flex-wrap: wrap align-items: center justify-content: space-around
2、创建头部组件
构建思路:
头部包含一个标题,标题的位置在中间对齐,包含一个时间,通过
js
原生自带的Date
类创建时间,并通过绝对定位将表示时间span
标签定位到右上角构建开始:
在
components
里创建headerCom
在
css/comp
里创建headerCom.sass
1、编写头部组件
import "../css/comp/headerCom.sass"; import React, {useEffect, useState} from "react"; interface HeaderPrams { title: string } const HeaderComp: React.FC<HeaderPrams> = ({title}) => { const [time,setTime] = useState(new Date()); useEffect(()=>{ const timer = setTimeout(()=>{ setTime(new Date()) },1000) return () =>{ clearTimeout(timer); } },[time]) return ( <div className={"headerComp"}> <span className={"title"}>{title}</span> <div id="dateTime"> <span className={"date"}>{time.toLocaleDateString()}</span> <span className={"time"}>{time.toLocaleTimeString()}</span> </div> </div> ) } export default HeaderComp;
2、编写头部组件的层叠样式表
.headerComp width: 100% height: 50px position: relative display: flex flex-wrap: wrap align-items: center justify-content: center .title font-size: 30px line-height: 50px color: #ffffff font-weight: bold #dateTime width: auto height: 50px line-height: 50px position: absolute right: 20px top: 0 color: #b3b7c9 font-size: 20px .time margin-left: 10px
3、加入主界面
// 引入css import "../css/pages/home.sass" // 引入组件 import HeaderComp from "../components/headerComp"; const Home = () =>{ return( <div id={"home"}> <HeaderComp title={"电商用户大数据分析"} /> <div id={"container"}> </div> </div> ) } export default Home;
成品展示:
3、创建左侧组件
构建思路:
我将下方图表的界面分成左、中、右三个组件,再将每一个图表拆分为单个的组件,在进行拼接。
构建开始:
在
components
里创建viewLeft.tsx
在
css/comp
里创建viewLeft.sass
1、编写左组件(不引入内部组件)
import "../css/comp/viewLeft.sass"; const ViewLeft = () =>{ return( <div id={"viewLeft"}> </div> ) } export default ViewLeft;
#viewLeft width: 28% height: 100% display: flex flex-direction: column align-items: center justify-content: space-around
2、加入主界面
// 引入css import "../css/pages/home.sass" // 引入组件 import HeaderComp from "../components/headerComp"; import ViewLeft from "../components/viewLeft"; const Home = () =>{ return( <div id={"home"}> <HeaderComp title={"电商用户大数据分析"} /> <div id={"container"}> <ViewLeft /> </div> </div> ) } export default Home;
4、创建左侧上方组件
构建思路:
通过观察页面可以发现,此组件是一个公共组件,又因为此组件内部有三个布局很类似的模块,那么,我就将这个相似的模块提取出来,形成一个新的组件
构建开始:
我先创建子组件,再将子组件加入到创建的左侧上方的组件内。
1、创建子组件
构建思路:
创建一个盒子
div
,以弹性盒子进行布局,形成上下层的类型,并且居中分布构建开始:
在
components
里创建dataResItem.tsx
在
css/comp
里创建dataResItem.sass
// dataResItem.tsx import React from "react"; import "../css/comp/dataResItem.sass"; interface DataResItemParam { param:{ icon: string, title: string, value: string, unit: string } } const DataResItem: React.FC<DataResItemParam> = ({param}) => { return ( <div className={"dataResItem"}> <img className={"icon"} src={param.icon} alt=""/> <div className={"dataResItemMsg"}> <span className={"dataResItemTitle"}>{param.title}</span> <span className={"dataResItemValue"}>{param.value} <span className={"dataResItemValueUnit"}>{param.unit}</span> </span> </div> </div> ) } export default DataResItem
//dataResItem.sass .dataResItem width: 100% height: 100% display: flex flex-wrap: wrap align-items: center justify-content: space-around .icon width: 25% .dataResItemMsg width: 55% height: 80% display: flex flex-direction: column align-items: center justify-content: center span display: inline-block color: #ffffff .dataResItemTitle width: 100% height: auto font-size: .80vw .dataResItemValue width: 100% height: auto font-size: 1.2vw line-height: 2vw color: #fef000 font-weight: bold .dataResItemValueUnit width: auto height: auto font-size: 1.2vw color: #fef000 font-weight: bold
2、编写左侧上方组件,并将子组件加入其中
在
components
里创建dataResList.tsx
在
css/comp
里创建dataResList.sass
调用了
components
里的DataResItem
组件
import "../css/comp/dataResList.sass"; import DataResItem from "./dataResItem"; import React from "react"; interface DataResListParam{ param:Array<{ id: number, icon: string, title: string, value: string, unit: string }> } export const DataResList:React.FC<DataResListParam> = ({param}) => { return ( <div id={"dataResList"} className={"container"}> {/*这里通过遍历param数组来调用子组件*/} {param.map((item,index) =>( <div className={"dataResItemBox"} key={item.id}> <DataResItem param={item}/> </div> ))} </div> ) } export default DataResList;
#dataResList width: 100% height: 13vh display: flex flex-wrap: wrap align-items: center justify-content: space-around .dataResItemBox width: 30% height: 100%