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

init

Browse Source
This commit is contained in:
lb
2023-06-30 11:08:43 +08:00
commit 3c69bc58bf
131 changed files with 4841 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/LeftBar/Chart1.jsx Normal file
View File

@@ -0,0 +1,72 @@
import React from 'react'
import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import Item from './substitutionCharts/Chart1.jsx'
import Icon from '../../assets/Icon/LeftrChart1ICon.png'
import Icon1 from '../../assets/ButtonChart7Icon1.svg'
import Icon2 from '../../assets/ButtonChart7Icon2.svg'
import './Chart1.less'
var Data1 = {
'冷水管温度': '3℃',
'主线冷水管水压': ' 500Pa',
'冷管流量': '800m³'
}
var Data2 = {
'冷水管温度': '8℃',
'主线冷水管水压': ' 900Pa',
'冷管流量': '400m³'
}
//循环的参数
var Number = 1
export default function Chart1() {
useEffect(() => {
setInterval(() => {
Number = Number + 1
setNum(Number % 2)
if (Number == 3) {
Number = 1
}
}, 10000)
}, [])
const [num, setNum] = useState(1)
return (
<div className='LeftChart1AllBorder'>
<div className='LeftChart1ItemitemBorder'>
<img src={Icon} alt="图片加载错误" className='LeftChart1ItemIcon' />
<div className='LeftChart1ItemTitle'>公共工程</div>
</div>
<div className='LeftChart1ItemBorder'>
<div className='LeftChart1ItemRow'>
<div className='LeftChart1ItemRowDetail'>
<img src={Icon1} alt="" />
<h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
</div>
<Item data={num == 1 ? Data1 : Data2} />
</div>
<div className='LeftChart1ItemRow'></div>
<div className='LeftChart1ItemRow'>
<div className='LeftChart1ItemRowDetail'>
<img src={Icon2} alt="" />
<h2 className='LeftChart1ItemRowDetailTxt'>氢气</h2>
</div>
<Item data={num == 1 ? Data1 : Data2} />
</div>
<div className='LeftChart1ItemRow'></div>
</div>
</div>
)
}

63
src/components/LeftBar/Chart1.less Normal file
View File

@@ -0,0 +1,63 @@
.LeftChart1AllBorder {
width: 625px;
height: 305px;
background: url('../../assets/ItemBg.png');
display: flex;
flex-direction: column;
justify-content: space-between;
.LeftChart1ItemitemBorder {
margin-top: 24px;
margin-left: 24px;
width: 202px;
height: 24px;
display: flex;
flex-direction: row;
justify-content: flex-start;
vertical-align: middle;
.LeftChart1ItemIcon {
width: 24px;
height: 24px;
margin-top: 2px;
}
.LeftChart1ItemTitle {
font-size: 24px;
color: #ffffff;
font-weight: 900px;
margin-left: 8px;
margin-top: -5px;
font-family: 'pingFangSC-Medium';
}
}
.LeftChart1ItemBorder {
width: 95%;
height: 227px;
margin-left: 16px;
margin-bottom: 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
.LeftChart1ItemRow {
width: 288px;
height: 100%;
display: flex;
flex-direction:column;
justify-content: flex-start;
.LeftChart1ItemRowDetail{
width: 100%;
height: 32px;
display: flex;
flex-direction: row;
.LeftChart1ItemRowDetailTxt{
font-size: 22px;
font-weight: 400px;
color: #FFFFFF;
margin-left: 8px;
}
}
}
}
}

113
src/components/LeftBar/Chart2.jsx Normal file
View File

@@ -0,0 +1,113 @@
import React, { useEffect, useState } from 'react'
import { motion } from "framer-motion"
//烟气处理
import Item1 from './substitutionCharts/Chart2.jsx'
//温度变化
import Item2 from './substitutionCharts/Chart3.jsx'
//发电量
import Item3 from './substitutionCharts/Chart4.jsx'
import Icon1 from '../../assets/Icon/LeftChart2Icon.png'
import Icon2 from '../../assets/Icon/LeftChart2Icon2.png'
import './Chart2.less'
const data = [10, 25, 30, 25, 58, 23, 36, 34]
//温度
const Temptitle = "温度变化";
const Tempxdata = ["1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00"]
const Tempdata = [420, 410, 410, 300, 350, 380, 352, 410, 410, 300, 350, 380, 352, 410, 410, 300, 350, 380, 352, 350, 380, 352, 380, 352]
//风机频率数据
var data2 = [[800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234],
[4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234],
[2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234],
[50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334],
]
var data3 = [[4450, 553, 2350, 234, 4452, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234],
[700, 4002, 200, 3234, 800, 4302, 200, 3234, 700, 3302, 200, 3234, 800, 4302, 200, 3234],
[50, 3302, 480, 3334, 53, 3302, 480, 3034, 50, 3302, 480, 3334, 20, 3302, 580, 3334],
[2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 205, 3500, 234],
]
export default function Chart2() {
const [index, setIndex] = useState(1)
let num = 1;
useEffect(() => {
const timer = setInterval(() => { SwitchIndex() }, 10000);
return () => clearInterval(timer);
}, [])
function SwitchIndex() {
num = num + 1
if (num < 3) {
setIndex(num)
}
else {
num = 1
setIndex(num)
}
}
function SwitchData(index) {
switch (index) {
case 1: return <Item data={data} />
case 2: return <Item1 data={Tempdata} title={Temptitle} xdata={Tempxdata} />
}
}
//切换标题
function SwitchTitle(index) {
switch (index) {
case 1: return "烟气处理"
case 2: return "余热发电"
}
}
//切换LOGO
function SwitchIcon(index) {
switch (index) {
case 1: return Icon1
case 2: return Icon2
}
}
//切换图表1
function SwitchChart1(index) {
switch (index) {
case 1: return <Item1 />
case 2: return <Item3 />
}
}
//切换图表2
function SwitchChart2(index) {
switch (index) {
case 1: return <Item2 data={data2} />
case 2: return <Item2 data={data3} />
}
}
return (
<div className='LeftChart2AllBorder'>
<div className='LeftChart2ItemitemBorder'>
<img src={SwitchIcon(index)} alt="图片加载错误" className='LeftChart2ItemIcon' />
<div className='LeftChart2ItemTitle'>{SwitchTitle(index)}</div>
</div>
<div className='LeftChart2Item1Row1'>
{SwitchChart1(index)}
</div>
<div className='LeftChart2Item1Row2'>
{SwitchChart2(index)}
</div>
</div>
)
}

48
src/components/LeftBar/Chart2.less Normal file
View File

@@ -0,0 +1,48 @@
.LeftChart2AllBorder {
width: 624px;
height: 632px;
background: url('../../assets/ItemBg2.png');
display: flex;
flex-direction: column;
justify-content: space-between;
.LeftChart2ItemitemBorder {
margin-top: 24px;
margin-left: 24px;
width: 100%;
height: 24px;
display: flex;
flex-direction: row;
justify-content: flex-start;
vertical-align: middle;
.LeftChart2ItemIcon {
width: 24px;
height: 24px;
margin-top: 3px;
}
.LeftChart2ItemTitle {
font-size: 24px;
color: #ffffff;
margin-left: 8px;
margin-top: -5px;
}
}
.LeftChart2Item1Row1 {
width: 95%;
height: 271px;
align-self: center;
margin-top: -56px;
}
.LeftChart2Item1Row2 {
width: 95%;
height: 271px;
align-self: center;
margin-bottom:24px;
}
}

15
src/components/LeftBar/index.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react'
import Chart1 from './Chart1'
import Chart2 from './Chart2'
import './index.less'
export default function index() {
return (
<div className='LeftBorder'>
<Chart1/>
<Chart2/>
</div>
)
}

25
src/components/LeftBar/index.less Normal file
View File

@@ -0,0 +1,25 @@
.LeftBorder {
width: 625px;
height: 966px;
margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
.LeftChart1Border {
width: 100%;
height: 304px;
background: url('../../assets/ItemBg.png');
}
.LeftChart2Border {
width: 624px;
height: 632px;
background: url('../../assets/ItemBg2.png');
display: flex;
flex-direction: column;
//justify-content: space-between;
}
}

38
src/components/LeftBar/substitutionCharts/Chart1.jsx Normal file
View File

@@ -0,0 +1,38 @@
import React, { Component } from 'react';
import './Chart1.less'
export default class Chart7 extends Component {
parseData() {
const { data } = this.props
const name = Object.keys(data)
const Value = Object.values(data)
return name.map((item, index) => (
<div className='buttonChart7FormBorder' key={index}>
<div className='buttonChart7FormTxt1Border'>
<h2 className='buttonChart7FormTxt1'>{name[index]}:</h2>
</div>
<div className='buttonChart7FormTxt2Border'>
<h2 className='buttonChart7FormTxt2'>{Value[index]}</h2>
</div>
</div>
))
}
render() {
return (
<div className='ButtonChart7itemDetailBorder'>
{this.parseData()}
</div >
);
}
}

44
src/components/LeftBar/substitutionCharts/Chart1.less Normal file
View File

@@ -0,0 +1,44 @@
.ButtonChart7itemDetailBorder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top:-8px;
.buttonChart7FormBorder {
background: url(../../../assets/ButtonChart7ItemBg.png);
margin-top: 1.5%;
width: 288px;
height: 48px;
border-radius: 3px;
display: flex;
flex-direction: row;
justify-content: left;
.buttonChart7FormTxt2Border {
width: 30%;
height: 100%;
.buttonChart7FormTxt2 {
margin-left: 20%;
margin-right: 5%;
margin-top: 13px;
text-align:left;
font-size: 15px;
color: rgba(255, 255, 255, 1);
}
}
.buttonChart7FormTxt1Border {
width: 55%;
height: 100%;
.buttonChart7FormTxt1 {
margin-top: 13px;
margin-left: 3%;
text-align:right;
font-size: 15px;
color: rgba(255, 255, 255, 1);
}
}
}
}

109
src/components/LeftBar/substitutionCharts/Chart2.jsx Normal file
View File

@@ -0,0 +1,109 @@
import React, { Component } from 'react';
import './Chart2.less'
import ReactECharts from 'echarts-for-react';
var data = [[320, 302, 301, 334, 390, 330, 320, 100], [120, 132, 101, 134, 90, 230, 210, 100], [220, 182, 191, 234, 290, 330, 310, 100], [150, 212, 201, 154, 190, 330, 410, 100], [320, 332, 301, 334, 290, 330, 320, 300], [320, 332, 301, 334, 290, 330, 320, 300]]
var name = ['烟气总量', '余氧总量', '氮氧化物排放浓度', '二氧化碳排放浓度', '颗粒物排放浓度', '烟气流速']
var color = ["#2760ff", "#8167f6", "#5b9bff", "#99d66c", "#ffd160", "#ff8a40"]
var fontColor = '#fff'
var lineColor = 'rgba(33, 50, 89,0.8)'
function makeseries(data, name, color) {
if (data) {
let All = []
for (let i in data) {
All.push({
name: name[i],
type: 'bar',
stack: 'total',
barWidth: "20%",
itemStyle: {
normal: {
color: color[i],
},
},
label: {
},
data: data[i]
})
}
return All;
}
}
class Chart2 extends Component {
getOption = () => ({
legend: {
right: "0%",
width: "70%",
height: "14%",
itemWidth: 17,
itemHeight: 13.5,
orient: "vertical",
textStyle: {
fontSize: 12,
color: "#F1F1F3",
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
show: true,
color: fontColor,
},
axisLine: {
lineStyle: {
color: lineColor,
},
},
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
color: fontColor,
},
axisLine: {
show:true,
lineStyle: {
color: lineColor,
},
},
splitLine: {
lineStyle: {
color: lineColor,
width: 0.5,
},
},
},
series: makeseries(data, name, color)
})
render() {
return (
<div className='LeftChart2itemDetailBorder'>
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
</div >
);
}
}
export default Chart2;

11
src/components/LeftBar/substitutionCharts/Chart2.less Normal file
View File

@@ -0,0 +1,11 @@
.LeftChart2itemDetailBorder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top:-8px;
}

120
src/components/LeftBar/substitutionCharts/Chart3.jsx Normal file
View File

@@ -0,0 +1,120 @@
import React, { Component } from 'react';
import './Chart3.less'
import ReactECharts from 'echarts-for-react';
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
var fontColor = '#fff'
var lineColor = 'rgba(33, 50, 89,0.8)'
function makeseries(data, name, color) {
if (data) {
let All = []
for (let i in data) {
All.push({
name: name[i],
type: 'line',
showSymbol: false,
symbol: "circle",
data: data[i],
lineStyle: {
width: 1,
color: color[i]
},
itemStyle: {
color: color[i],
},
})
}
return All;
}
}
class Chart3 extends Component {
getOption = () => ({
title: {
text: '风机运行频率',
textStyle: {
fontSize: 20,
color: "#52FFF8"
},
},
legend: {
right: "0%",
width: "70%",
height: "14%",
itemWidth: 17,
itemHeight: 13.5,
textStyle: {
fontSize: 12,
color: "#F1F1F3",
},
// itemStyle: {
// color: "rgba(222, 9, 9, 1)"
// },
data: name
},
grid: {
left: '3%',
right: '4%',
bottom: '3%', containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
axisLabel: {
show: true,
color: fontColor,
},
axisLine: {
lineStyle: {
color: lineColor,
},
},
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
color: fontColor,
},
axisLine: {
show:true,
lineStyle: {
color: lineColor,
},
},
splitLine: {
lineStyle: {
color: lineColor,
},
},
},
series: makeseries(this.props.data, name, color)
})
render() {
return (
<div className='LeftChart3itemDetailBorder'>
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
</div >
);
}
}
export default Chart3;

9
src/components/LeftBar/substitutionCharts/Chart3.less Normal file
View File

@@ -0,0 +1,9 @@
.LeftChart3itemDetailBorder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top:-8px;
}

126
src/components/LeftBar/substitutionCharts/Chart4.jsx Normal file
View File

@@ -0,0 +1,126 @@
import React, { Component } from 'react';
import './Chart4.less'
import ReactECharts from 'echarts-for-react';
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
import * as echarts from 'echarts';
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
var fontColor = '#fff'
var lineColor = 'rgba(33, 50, 89,0.8)'
class Chart3 extends Component {
getOption = () => ({
title: {
text: '发电量',
top: "2%",
textStyle: {
fontSize: 20,
color: "#52FFF8"
},
},
legend: {
right: "0%",
width: "70%",
height: "14%",
itemWidth: 17,
itemHeight: 13.5,
textStyle: {
fontSize: 12,
color: "#F1F1F3",
},
// itemStyle: {
// color: "rgba(222, 9, 9, 1)"
// },
data: name
},
grid: {
left: '3%',
right: '4%',
bottom: '0%',
top:'30%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
axisLabel: {
show: true,
color: fontColor,
},
axisLine: {
lineStyle: {
color: lineColor,
},
},
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
color: fontColor,
},
axisLine: {
show: true,
lineStyle: {
color: lineColor,
},
},
splitLine: {
lineStyle: {
color: lineColor,
},
},
},
series: {
name:'发电量',
type: 'line',
showSymbol: true,
symbol: "circle",
symbolSize:8,
symbolBorder:"rgba(17, 36, 246,0.1)",
data: [200,320,121,125,585,213,521,326,542,258,632,145,258,632,145],
lineStyle: {
width: 1,
color:"rgba(246, 23, 106,0.9)",
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(246, 23, 106,0.3)' },
{ offset: 0.5, color: 'rgba(246, 23, 106,0.2)' },
{ offset: 1, color: 'rgba(246, 23, 106,0.1)' }
]),
},
itemStyle: {
borderColor: '#F6176A',
color: "rgba(4, 20, 36,0.8)",
},
}
})
render() {
return (
<div className='LeftChart4itemDetailBorder'>
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '80%' }} />
</div >
);
}
}
export default Chart3;

9
src/components/LeftBar/substitutionCharts/Chart4.less Normal file
View File

@@ -0,0 +1,9 @@
.LeftChart4itemDetailBorder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15px;
}