mt-fe-group/xuchang-screen
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add header

Browse Source
This commit is contained in:
lb
2023-09-10 15:09:12 +08:00
parent e87bca96d6
commit 6c1435c7ff
16 changed files with 1594 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/3D.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 MiB

After

Width:  |  Height:  |  Size: 6.3 MiB

BIN
src/assets/yx-dark/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
src/assets/yx-dark/company.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/yx-dark/date.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
src/assets/yx-dark/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 309 KiB

BIN
src/assets/yx-dark/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

26
src/components/yx-dark/Header.jsx Normal file
View File

@@ -0,0 +1,26 @@
import React, { useEffect, useState, useRef } from 'react';
import './header.module.css';
import moment from 'moment';
export default (props) => {
let [today, setToday] = useState(new Date());
moment.locale('zh-cn');
setTimeout(() => {
setToday(new Date());
}, 1000);
return (
<header class="header">
<div>
<span class="header--logo"></span>
<h1>宜兴新能源生产线大数据指挥中心</h1>
</div>
<span class="header--wing absolute company">
设计单位：中建材智能自动化研究院
</span>
<span class="header--wing absolute datetime">
{moment(today).format('YYYY.M.D dddd HH:mm:ss')}
</span>
</header>
);
};

53
src/components/yx-dark/header.module.css Normal file
View File

@@ -0,0 +1,53 @@
header {
height: 121px;
width: 100%;
position: relative;
z-index: 10000;
background: url(../../assets/yx-dark/header.png) 100% 100% / contain no-repeat;
display: grid;
place-content: center;
}
header > div {
display: flex;
align-items: center;
margin-bottom: 0;
}
header > div .header--logo {
margin-top: 12px;
width: 48px;
height: 67px;
background: url(../../assets/yx-dark/logo.png) center/contain no-repeat;
}
header h1 {
margin-bottom: 0;
margin-left: 36px;
font-size: 52px;
/* line-height: 97px; */
user-select: none;
letter-spacing: 9px;
font-weight: 400;
color: #6bf2ff;
font-family: '微软雅黑', sans-serif;
}
.header--wing {
left: 0;
bottom: -12px;
height: 48px;
font-size: 28px;
line-height: 48px;
color: #51f0ff;
}
.company {
margin-left: 960px;
letter-spacing: 1px;
}
.datetime {
text-align: center;
left: unset;
right: 1100px;
letter-spacing: 1px;
}

19
src/pages/index.jsx
View File

@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import './global.less';
import './index.less';
import Head from '../components/Head';
import Header from '../components/yx-dark/Header';
import LeftBar from '../components/LeftBar';
import BottomBar from '../components/BottomBar';
import RightBar from '../components/RightBar';
@@ -9,11 +9,8 @@ import CenterTopData from '../components/CenterTopData';
import Slider from '../components/Slider';
import { SocketContextProvider } from '../store/socket-data-provider';
import V3DBG from '../assets/V3DBG.png';
// import V3D from './V3D';
export default function index() {
const [value, setValue] = useState(100);
const [value, setValue] = useState(50);
const v = (value / 100).toFixed(2);
const styles = {
@@ -24,13 +21,11 @@ export default function index() {
useEffect(() => {
let fn = (e) => {
console.log('add fn');
if (e.shiftKey && e.key === 'L') {
document.getElementById('slider').classList.toggle('show');
}
};
let fn2 = () => {
console.log('add fn2');
setTimeout(() => {
document.getElementById('slider').classList.remove('show');
}, 200);
@@ -40,7 +35,6 @@ export default function index() {
document.getElementById('slider').addEventListener('mouseleave', fn2);
return () => {
console.log('remove fn, fn2');
document.removeEventListener('keydown', fn);
document.getElementById('slider').removeEventListener('mouseleave', fn2);
};
@@ -50,20 +44,19 @@ export default function index() {
// <FullScreenContainer>
<SocketContextProvider>
<div id="FullScreen" style={styles}>
<Head />
<Header />
<div className="Main">
<LeftBar />
{/* <LeftBar />
<div className="Center">
<div className="CenterData">
<CenterTopData />
</div>
<img src={V3DBG} alt="图片加载错误" className="V3DBG" />
<div className="V3DBorder">{/* <V3D /> */}</div>
<div className="V3DBorder"></div>
<div className="Button">
<BottomBar />
</div>
</div>
<RightBar />
<RightBar /> */}
</div>
</div>
<Slider handleSlide={setValue} />

14
src/pages/index.less
View File

@@ -1,13 +1,16 @@
#FullScreen {
width: 3840px;
width: 4320px;
height: 1080px;
transform-origin: 'lefttop';
background-color: #040c1c;
background: url(../assets/yx-dark/bg.png) 100% / cover no-repeat;
display: flex;
flex-direction: column;
.Main {
// background: #a935355f;
width: 3840px;
height: 996px;
width: 4320px;
height: 1px;
flex: 1;
background: #ccc3;
display: flex;
flex-direction: row;
@@ -28,7 +31,6 @@
width: 2472px;
height: 640px;
z-index: 1;
box-shadow: inset 0 0 128px 64px #0a2859;
}
.V3DBorder {

3
src/store/socket-data-provider.js
View File

@@ -9,7 +9,8 @@ export const SocketContextProvider = (props) => {
useEffect(() => {
// const socket = new WebSocket('ws://172.16.1.55:8081/xc-screen/websocket/1');
const socket = new WebSocket(
'ws://192.168.1.12:8081/xc-screen/websocket/1',
// 'ws://192.168.1.12:8081/xc-screen/websocket/1',
'ws://127.0.0.1:9800',
);
socket.onopen = () => {
console.log('[*] socket connected!');