大数据大屏日志（开发中）
前序
一、搭建开发环境
1、安装node v18.16.0
二、创建React项目
1、运行命令：
Tags:
本项目运用到了
TypeScript
npx create-react-app big_led
新建以下文件夹：
在
public目录下创建1、
static/image：用于存储页面内的图片在
src目录下创建1、
compontents2、
config3、
css4、
pages5、
router6、
util修改以下文件：前提：已安装
sass1、修改
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 Design2、
sass3、
eCharts4、
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：用于存储工具文件修改以下文件：前提：已安装
sass1、修改
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%
扫一扫
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
