26 changed files with 1208 additions and 62 deletions
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 44 KiB |
@ -0,0 +1,203 @@ |
|||||
|
import React, { useEffect, useRef } from 'react' |
||||
|
import * as echarts from 'echarts'; |
||||
|
|
||||
|
const Leftbottomecharts = () => { |
||||
|
const chartRef = useRef(null); |
||||
|
useEffect(() => { |
||||
|
var chartInstance = echarts.init(chartRef.current); |
||||
|
var colorArray = [ |
||||
|
{ |
||||
|
top: "#1978E5", //黄
|
||||
|
bottom: "#10274B", |
||||
|
}, |
||||
|
{ |
||||
|
top: "#C31E00", //绿
|
||||
|
bottom: "#10274B", |
||||
|
}, |
||||
|
{ |
||||
|
top: "#00B5E0 ", //蓝
|
||||
|
bottom: "#10274B", |
||||
|
}, |
||||
|
{ |
||||
|
top: "#19E5D6", //深蓝
|
||||
|
bottom: "#10274B", |
||||
|
}, |
||||
|
// {
|
||||
|
// top: "#b250ff", //粉
|
||||
|
// bottom: "rgba(11,42,84,.3)",
|
||||
|
// },
|
||||
|
]; |
||||
|
const option = { |
||||
|
tooltip: { |
||||
|
show: true, |
||||
|
formatter: "{b}:{c}", |
||||
|
}, |
||||
|
grid: { |
||||
|
left: "5%", |
||||
|
top: "12%", |
||||
|
right: "1%", |
||||
|
bottom: "8%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
|
||||
|
xAxis: { |
||||
|
type: "value", |
||||
|
show: true, |
||||
|
position: "bottom", |
||||
|
axisTick: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: "rgba(176,215,255,0.25)", |
||||
|
// type: "dashed",
|
||||
|
}, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: "rgba(216,240,255,0.8000)", |
||||
|
}, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: "rgba(176,215,255,0.25)", |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: "category", |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
alignWithLabel: false, |
||||
|
length: 5, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
//网格线
|
||||
|
show: false, |
||||
|
}, |
||||
|
inverse: "true", //排序
|
||||
|
// nameTextStyle: {
|
||||
|
// color: ["rgba(216,240,255,0.8)"],
|
||||
|
// },
|
||||
|
axisLine: { |
||||
|
// show: true,
|
||||
|
lineStyle: { |
||||
|
color: "rgba(216,240,255,0.8000)", |
||||
|
width: 2, |
||||
|
}, |
||||
|
}, |
||||
|
data: ["客运车", "危险货运", "出租车", "公交"], |
||||
|
}, |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "bar", |
||||
|
barWidth: 10, |
||||
|
barGap: "100%", |
||||
|
// zlevel: 1,
|
||||
|
barCategoryGap: "50%", |
||||
|
color: "#042B7F", |
||||
|
data: [150, 150, 150, 150], |
||||
|
tooltip: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "能耗值", |
||||
|
type: "bar", |
||||
|
// zlevel: 2,
|
||||
|
barWidth: 10, |
||||
|
barGap: "-100%", |
||||
|
barCategoryGap: "50%", |
||||
|
data: [60, 132, 89, 134], |
||||
|
markPoint: { |
||||
|
Symbol: "",/* 可以通过’image: *///url’设置为图片，其中url为图片的链接
|
||||
|
data: [{ type: "max", name: "最大值" }], |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
show: true, |
||||
|
color: function (params) { |
||||
|
let num = colorArray.length; |
||||
|
return { |
||||
|
type: "linear", |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: colorArray[params.dataIndex % num].bottom, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorArray[params.dataIndex % num].top, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: colorArray[params.dataIndex % num].bottom, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorArray[params.dataIndex % num].top, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: colorArray[params.dataIndex % num].bottom, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorArray[params.dataIndex % num].top, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: colorArray[params.dataIndex % num].bottom, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorArray[params.dataIndex % num].top, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: colorArray[params.dataIndex % num].bottom, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorArray[params.dataIndex % num].top, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: colorArray[params.dataIndex % num].bottom, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorArray[params.dataIndex % num].top, |
||||
|
}, |
||||
|
], |
||||
|
globalCoord: false, |
||||
|
}; |
||||
|
}, |
||||
|
barBorderRadius: 70, |
||||
|
borderWidth: 0, |
||||
|
borderColor: "#333", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
chartInstance.setOption(option); |
||||
|
window.onresize = function () { |
||||
|
chartInstance.resize(); |
||||
|
} |
||||
|
}, []); |
||||
|
|
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<div ref={chartRef} style={{ |
||||
|
height: "20vh", width: "100%" |
||||
|
}}></div> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default Leftbottomecharts |
||||
@ -0,0 +1,59 @@ |
|||||
|
import React, { useState, useEffect } from 'react' |
||||
|
import Lunbotop from "./lunbo" |
||||
|
|
||||
|
const Bottomlunbo = () => { |
||||
|
const [list, setList] = useState([ |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
]) |
||||
|
const renderBody = () => { |
||||
|
return ( |
||||
|
<div style={{ width: "100%", height: "100%" }}> |
||||
|
{ |
||||
|
list.map((item, index) => { |
||||
|
return <div style={{ fontSize: "14px", color: "#FFFFFF" }}>{item.name}</div> |
||||
|
}) |
||||
|
} |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
return ( |
||||
|
<> |
||||
|
<div style={{ |
||||
|
width: "100%", |
||||
|
height: "50%", |
||||
|
}}> |
||||
|
<div style={{ width: "100%", height: "10%", fontSize: "16px", color: "#FFFFFF", marginLeft: "10%", fontFamily: "PingFangSC-Medium, PingFang SC", }}> |
||||
|
业户信息: |
||||
|
</div> |
||||
|
<div style={{ width: "40%", height: "60%", float: "left" }}> |
||||
|
<div style={{ width: "100%", height: "100%", position: "relative" }}> |
||||
|
<img src='/assets/images/leadership/di.png' style={{ width: "60%", marginLeft: "20%", marginTop: "15%" }} /> |
||||
|
<p style={{ fontSize: "16px", color: "#FFFFFF", fontFamily: "PingFangSC-Medium, PingFang SC", position: "absolute", top: "90%", left: "33%" }}>出租车</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<Lunbotop |
||||
|
content={renderBody()} |
||||
|
containerStyle={{ position: "relative", height: "100%", width: "60%", top: "8%", float: "right", marginTop: "7%" }} |
||||
|
divHeight={"100%"} |
||||
|
divId={"bottomlunbo"} |
||||
|
/> |
||||
|
</div> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
export default Bottomlunbo |
||||
@ -0,0 +1,180 @@ |
|||||
|
'use strict' |
||||
|
import React, { Component } from 'react'; |
||||
|
// import { Col, Row, Tag, Tooltip } from '@douyinfe/semi-ui';
|
||||
|
import { Col, Row, Tag, Toolip } from 'antd'; |
||||
|
import './style.less'; |
||||
|
export default class AutoRollComponent extends Component { |
||||
|
|
||||
|
constructor(props) { |
||||
|
super(props); |
||||
|
this.scrollElem = null; |
||||
|
this.stopscroll = false; |
||||
|
this.preTop = 0; |
||||
|
this.cloneEle = null; |
||||
|
this.currentTop = 0; |
||||
|
this.marqueesHeight = 0; |
||||
|
this.interval = null; |
||||
|
} |
||||
|
|
||||
|
marque = (height) => { |
||||
|
try { |
||||
|
this.scrollElem = document.getElementById(this.props.divId); |
||||
|
this.marqueesHeight = height; |
||||
|
if (this.scrollElem) { |
||||
|
this.scrollElem.style.height = this.marqueesHeight; |
||||
|
this.scrollElem.style.overflow = 'hidden'; |
||||
|
} |
||||
|
|
||||
|
if (!this.props.closeroll) { |
||||
|
this.repeat() |
||||
|
} |
||||
|
} catch (e) { console.log(e) } |
||||
|
} |
||||
|
|
||||
|
|
||||
|
repeat = () => { |
||||
|
this.scrollElem.scrollTop = 0; |
||||
|
|
||||
|
this.interval = setInterval(() => { |
||||
|
if (this.stopscroll) return; |
||||
|
this.currentTop = this.currentTop + 1; |
||||
|
this.preTop = this.scrollElem.scrollTop; |
||||
|
this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; |
||||
|
if (this.preTop === this.scrollElem.scrollTop) { |
||||
|
this.scrollElem.scrollTop = this.marqueesHeight; |
||||
|
this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; |
||||
|
} |
||||
|
}, 80); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
componentWillUnmount() { |
||||
|
clearInterval(this.interval); |
||||
|
} |
||||
|
|
||||
|
componentDidMount() { |
||||
|
this.marque(10); |
||||
|
} |
||||
|
|
||||
|
onMouseOver = () => { |
||||
|
this.stopscroll = true; |
||||
|
} |
||||
|
|
||||
|
onMouseOut = () => { |
||||
|
this.stopscroll = false; |
||||
|
} |
||||
|
|
||||
|
loadDataColumn = (c, index, q) => { |
||||
|
const { changeStyleCol, heads, spans, data, showWord, color, dataTextAlign, customColorBox, } = this.props; |
||||
|
if (c === changeStyleCol) { |
||||
|
if (color) { |
||||
|
<span style={{ color: q.changeColor }}>{q.data[index]}</span> |
||||
|
} else { |
||||
|
if (['时间'].indexOf(c) != -1) { |
||||
|
return <span style={{ fontFamily: 'liquidCrystal' }}>{q.data[index]}</span> |
||||
|
} |
||||
|
// if (c.indexOf("时间") == -1) {
|
||||
|
// if (customColorBox) {
|
||||
|
// return <DashBorder boxStyle={{ textAlign: 'center', background: q.boxColor, width: 58, height: 18, display: 'inline-block', fontSize: 12 }} content={q.data[index]} borderStyle={{ borderColor: q.changeColor, width: 4, height: 4 }} />
|
||||
|
// }
|
||||
|
// if (q.data[index].length > showWord) {
|
||||
|
// return <Tooltip key={index} position="top" content={q.data[index]}>{q.data[index].substring(0, showWord) + '...'}</Tooltip>
|
||||
|
// } else {
|
||||
|
// return <span className='margin-left-5' style={{ fontFamily: 'liquidCrystal' }}>{q.data[index]}</span>
|
||||
|
// }
|
||||
|
// }
|
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
if (c.indexOf("时间") == -1) |
||||
|
if (q.data[index].length > showWord) { |
||||
|
return <Tooltip key={index} position="top" content={q.data[index]}>{q.data[index].substring(0, showWord) + '...'}</Tooltip> |
||||
|
} |
||||
|
return <span className='margin-left-5'>{q.data[index]}</span> |
||||
|
} |
||||
|
|
||||
|
// c === changeStyleCol ?
|
||||
|
// color ?
|
||||
|
// <span style={{ color: q.changeColor }}>{q.data[index]}</span>
|
||||
|
// : q.levelbg ?
|
||||
|
// q.isSiteAlermListMock ? <span style={extraStyle}>已处理</span> :
|
||||
|
// <span style={{ color: q.changeColor, background: `url('/assets/images/ui/${q.levelbg}.png') no-repeat`, backgroundSize: '100% 100%', textAlign: 'left', fontFamily: 'liquidCrystal', padding: '3px 10px' }}>{q.data[index]}</span>
|
||||
|
// : <Tag color={q.changeColor}>{q.data[index]}</Tag>
|
||||
|
|
||||
|
|
||||
|
// : ['时间'].indexOf(c) != -1 ? !customColorBox ? <span style={{ fontFamily: 'liquidCrystal' }}>{q.data[index]}</span> :
|
||||
|
// <DashBorder boxStyle={{ textAlign: 'center', background: q.boxColor }} content={q.data[index]} borderStyle={{ borderColor: color }} />
|
||||
|
|
||||
|
// : c.indexOf("时间") == -1 && q.data[index].length > showWord ?
|
||||
|
// <Tooltip placement="top" title={q.data[index]} className='margin-left-5'>{q.data[index].substring(0, showWord) + '...'}</Tooltip>
|
||||
|
// : <span className='margin-left-5' style={{ fontFamily: 'liquidCrystal' }}>{q.data[index]}</span>
|
||||
|
} |
||||
|
|
||||
|
getContent = () => { |
||||
|
const { changeStyleCol, heads, spans, data, showWord, color, dataTextAlign, customColorBox, } = this.props; |
||||
|
let result = <div></div>; |
||||
|
if (data) { |
||||
|
result = data.map((q, idx) => { |
||||
|
return ( |
||||
|
<div key={idx}> |
||||
|
<Row gutter={16} style={{ |
||||
|
height: 40, |
||||
|
//background: idx % 2 == 0 ? 'url(/assets/images/ui/roll1.png) no-repeat' : 'url(/assets/images/ui/roll2.png) no-repeat',
|
||||
|
background: idx % 2 == 0 ? 'rgba(22,70,116,0.32)' : '', |
||||
|
backgroundSize: '100% 100%', |
||||
|
whiteSpace: 'nowrap', |
||||
|
fontSize: 16 |
||||
|
}}> |
||||
|
{q.data[1] == -1 ? null : heads.map((c, index) => { |
||||
|
let extraStyle = {} |
||||
|
if (q.isSiteAlermListMock && c == "状态") { |
||||
|
extraStyle = { color: "green" } |
||||
|
} |
||||
|
|
||||
|
return <Col span={spans[index]} key={index} style={{ |
||||
|
// padding: `8px 0px 0px ${titleLeft && c != changeStyleCol ? 12 : index == 0 ? 8 : 0}px`,
|
||||
|
paddingLeft: index == 0 ? 20 : c != changeStyleCol ? 10 : 'auto', paddingTop: 8, paddingRight: 0, |
||||
|
textAlign: dataTextAlign ? dataTextAlign : 'left', textOverflow: 'ellipsis', overflow: 'hidden', |
||||
|
color: `${c === changeStyleCol ? q.changeColor : ''}` |
||||
|
}}> |
||||
|
{ |
||||
|
this.loadDataColumn(c, index, q) |
||||
|
} |
||||
|
</Col> |
||||
|
}) |
||||
|
} |
||||
|
</Row> |
||||
|
</div> |
||||
|
) |
||||
|
}) |
||||
|
} else { |
||||
|
result = <div style={{ textAlign: 'center', padding: 20, color: '#fff', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> |
||||
|
<span></span> |
||||
|
</div> |
||||
|
} |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
|
||||
|
const { heads, spans, divId, divHeight, content, color, titleLeft, containerStyle = {} } = this.props; |
||||
|
return ( |
||||
|
<div style={{ ...containerStyle, textAlign: 'left', }}> |
||||
|
{heads ? |
||||
|
<Row className={'bg-row'} style={{ lineHeight: '40px', height: 40, fontSize: 16, wordBreak: 'keep-all', whiteSpace: 'nowrap', textAlign: titleLeft ? 'left' : 'center', paddingLeft: titleLeft ? 5 : 0 }}> |
||||
|
{heads.map((c, index) => { |
||||
|
return <Col style={{ color: color ? color : '#fff', paddingLeft: titleLeft ? 10 : 'auto' }} span={spans[index]} key={index}>{c}</Col> |
||||
|
}) |
||||
|
} |
||||
|
</Row> |
||||
|
: ''} |
||||
|
<div id={divId} className={'hidden-scroll-bar-y'} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> |
||||
|
<div style={{ height: '100%' }}> |
||||
|
{content ? content : ''} |
||||
|
{this.getContent()} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div > |
||||
|
) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
.hidden-scroll-bar-y{ |
||||
|
overflow-y: scroll !important; |
||||
|
scrollbar-width: none !important; |
||||
|
} |
||||
|
|
||||
|
.hidden-scroll-bar-y::-webkit-scrollbar { width: 0 !important } |
||||
@ -0,0 +1,57 @@ |
|||||
|
import React, { useState, useEffect } from 'react' |
||||
|
import Lunbotop from "./lunbo" |
||||
|
|
||||
|
const Toplunbo = () => { |
||||
|
const [list, setList] = useState([ |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
{ name: "南昌宁昌物流运输有限公司" }, |
||||
|
]) |
||||
|
const renderBody = () => { |
||||
|
return ( |
||||
|
<div style={{ width: "100%", height: "100%" }}> |
||||
|
{ |
||||
|
list.map((item, index) => { |
||||
|
return <div style={{ fontSize: "14px", color: "#FFFFFF" }}>{item.name}</div> |
||||
|
}) |
||||
|
} |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
return ( |
||||
|
<> |
||||
|
<div style={{ |
||||
|
width: "100%", |
||||
|
height: "50%", |
||||
|
}}> |
||||
|
<div style={{ width: "40%", height: "60%", float: "left" }}> |
||||
|
<div style={{ width: "100%", height: "100%", position: "relative", top: "-30%" }}> |
||||
|
<img src='/assets/images/leadership/di.png' style={{ width: "60%", marginLeft: "20%" }} /> |
||||
|
<p style={{ fontSize: "16px", color: "#FFFFFF", fontFamily: "PingFangSC-Medium, PingFang SC", position: "absolute", top: "20%", left: "33%" }}>危险货运</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<Lunbotop |
||||
|
canScroll={true} |
||||
|
content={renderBody()} |
||||
|
containerStyle={{ position: "relative", height: "100%", width: "60%", top: "8%", float: "right" }} |
||||
|
divHeight={"100%"} |
||||
|
divId={"toplunbo1"} |
||||
|
/> |
||||
|
</div> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
export default Toplunbo |
||||
@ -1,13 +1,95 @@ |
|||||
import React from 'react' |
import React, { useEffect, useState } from 'react' |
||||
import Module from '../../../public/module' |
import Module from '../../../public/module' |
||||
|
import Lunbo from "../centerleft/lunbo/lunbo" |
||||
|
// import "./left.less"
|
||||
|
|
||||
const Leftcenter = () => { |
const Leftcenter = () => { |
||||
const style = { height: "30%", marginTop: "5%" } |
const style = { height: "30%", marginTop: "5%" } |
||||
|
// const hualun = "auto"
|
||||
|
const [num, setNum] = useState(1); |
||||
|
const [tu, setTu] = useState(""); |
||||
|
const [name, setName] = useState(""); |
||||
|
const [list, setList] = useState([ |
||||
|
{ name: '静夜思', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
{ name: '唐-李白', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
{ name: '窗前明月光', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
{ name: '疑是地上霜', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
{ name: '举头望明月', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
{ name: '低头思故乡', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
{ name: '静夜思', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
{ name: '唐-李白', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
{ name: '窗前明月光', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
{ name: '疑是地上霜', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
{ name: '举头望明月', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
{ name: '低头思故乡', img: "/assets/images/leadership/shiyantu.png" }, |
||||
|
]) |
||||
|
useEffect(() => { |
||||
|
const timer = setInterval(() => { |
||||
|
if (num == 12) { |
||||
|
setNum(1); |
||||
|
setTu(list[0].img); |
||||
|
} else { |
||||
|
setNum(num + 1); |
||||
|
setTu(list[num].img); |
||||
|
} |
||||
|
}, 6000); |
||||
|
return () => clearInterval(timer); |
||||
|
}, [num]); |
||||
|
const renderBody = () => { |
||||
|
return ( |
||||
|
<div style={{ width: "100%", height: "55%" }}>{ |
||||
|
list.map((item, index) => { |
||||
|
return ( |
||||
|
// <div style={{ width: "100%", height: "100%" }} >
|
||||
|
// {/* <div style={{ width: "100%", height: "100%", }}> */}
|
||||
|
<li style={{ height: "20px", width: "100%", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", backgroundColor: "pink" }} onMouseEnter={() => { |
||||
|
setTu(item.img); |
||||
|
setNum(index + 1); |
||||
|
setName(item.name) |
||||
|
// console.log(list);
|
||||
|
}}>{item.name}</li> |
||||
|
// {/* </div> */}
|
||||
|
// </div>
|
||||
|
) |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
</div > |
||||
|
) |
||||
|
} |
||||
return ( |
return ( |
||||
<> |
<> |
||||
<Module style={style}> |
<div style={{ width: "100%", height: "40px"/* , backgroundColor: "#fff" */, position: "relative" }}> |
||||
|
{/* <p>{title || []}</p> */} |
||||
|
<img src='/assets/images/quanju/icon.png' style={{ width: "24px", position: "absolute", left: "1%", top: "30%" }} /> |
||||
|
<span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "10%" }}>主要路段拥堵情况分析</span> |
||||
|
<img src='/assets/images/leadership/zibiaoti.png' style={{ width: "95%", height: "28px", position: "absolute", top: "12px", left: "6%" }} /> |
||||
|
</div> |
||||
|
<div style={{ width: "100%", height: "100%", marginTop: "3%" }}> |
||||
|
<div style={{ width: "60%", height: "100%", float: "left", marginLeft: "1%" }}> |
||||
|
{ |
||||
|
list.map((item, index) => { |
||||
|
return index + 1 == num ? |
||||
|
<div style={{ width: "100%", height: "100%", position: "relative" }}> |
||||
|
<img style={{ width: "100%", position: "absolute", bottom: "5%" }} src={item.img} /> |
||||
|
<p style={{ |
||||
|
width: "100%", height: "3vh", position: "absolute", bottom: "3%", |
||||
|
backgroundColor: "rgba(0,0,0,0.26)", lineHeight: "3vh", textAlign: "" |
||||
|
}}><span style={{ marginLeft: "13%", color: "#FFFFFF", fontSize: "12px", fontFamily: "PingFangSC-Regular, PingFang SC", fontWeight: 400 }}>{item.name}</span></p> |
||||
|
</div> : "" |
||||
|
|
||||
|
}) |
||||
|
|
||||
</Module> |
} |
||||
|
</div> |
||||
|
<Lunbo |
||||
|
canScroll={true} |
||||
|
content={renderBody()} |
||||
|
containerStyle={{ position: "relative", height: "100%", width: "35%", float: "right", marginRight: "2%", marginTop: "1%" }} |
||||
|
divHeight={"100%"} |
||||
|
divId={"screen-slope-midde-top-jiangxi"} |
||||
|
/> |
||||
|
</div> |
||||
</> |
</> |
||||
) |
) |
||||
} |
} |
||||
|
|||||
@ -0,0 +1,3 @@ |
|||||
|
li{ |
||||
|
list-style-type:none |
||||
|
} |
||||
@ -0,0 +1,139 @@ |
|||||
|
'use strict' |
||||
|
import React, { Component } from 'react'; |
||||
|
import { Row, Col } from 'antd'; |
||||
|
|
||||
|
export default class AutoRollComponent extends Component { |
||||
|
|
||||
|
constructor(props) { |
||||
|
super(props); |
||||
|
this.scrollElem = null; |
||||
|
this.stopscroll = false; |
||||
|
this.preTop = 0; |
||||
|
this.cloneEle = null; |
||||
|
this.currentTop = 0; |
||||
|
this.marqueesHeight = 0; |
||||
|
this.interval = null; |
||||
|
this.state = { |
||||
|
enabledScroll: false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
get enabledScroll() { |
||||
|
let scrollElem = document.getElementById(this.props.divId); |
||||
|
let fatherElem = scrollElem?.parentNode || null; |
||||
|
if (scrollElem && fatherElem) { |
||||
|
return scrollElem.scrollHeight > fatherElem.scrollHeight |
||||
|
} |
||||
|
|
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
marque = (height) => { |
||||
|
try { |
||||
|
this.scrollElem = document.getElementById(this.props.divId); |
||||
|
this.marqueesHeight = height; |
||||
|
if (this.scrollElem) { |
||||
|
this.scrollElem.style.height = this.marqueesHeight; |
||||
|
this.scrollElem.style.overflow = 'hidden'; |
||||
|
} |
||||
|
this.repeat(); |
||||
|
} catch (e) { console.log(e) } |
||||
|
} |
||||
|
|
||||
|
|
||||
|
repeat = () => { |
||||
|
this.scrollElem.scrollTop = 0; |
||||
|
let offset = 1.5 |
||||
|
|
||||
|
this.interval = setInterval(() => { |
||||
|
if (this.stopscroll) return; |
||||
|
this.currentTop = this.currentTop + offset; |
||||
|
this.preTop = this.scrollElem.scrollTop; |
||||
|
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; |
||||
|
// console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop} === this.preTop:${this.preTop}`);
|
||||
|
if (this.preTop === this.scrollElem.scrollTop) { |
||||
|
this.scrollElem.scrollTop = this.marqueesHeight; |
||||
|
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; |
||||
|
} |
||||
|
}, 40); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
componentWillUnmount() { |
||||
|
clearInterval(this.interval); |
||||
|
} |
||||
|
|
||||
|
componentWillReceiveProps(nextProps) { |
||||
|
requestAnimationFrame(() => { |
||||
|
if (this.enabledScroll) { |
||||
|
if (!this.state.enabledScroll) { |
||||
|
this.setState({ enabledScroll: true }, () => { |
||||
|
this.marque(10) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
componentDidMount() { |
||||
|
if (this.enabledScroll) { |
||||
|
this.setState({ enabledScroll: true }, () => { |
||||
|
this.marque(10) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMouseOver = () => { |
||||
|
this.stopscroll = true; |
||||
|
} |
||||
|
|
||||
|
onMouseOut = () => { |
||||
|
this.stopscroll = false; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
render() { |
||||
|
|
||||
|
const { changeStyleCol, heads, spans, data, divId, divHeight, content, containerStyle = {} } = this.props; |
||||
|
|
||||
|
return ( |
||||
|
<div style={{ ...containerStyle, textAlign: 'left' }}> |
||||
|
{ |
||||
|
heads ? |
||||
|
<Row style={{ lineHeight: '40px', height: 40 }}> |
||||
|
{heads.map((c, index) => { |
||||
|
return <Col span={spans[index]} key={index}>{c}</Col> |
||||
|
}) |
||||
|
} |
||||
|
</Row> : '' |
||||
|
} |
||||
|
|
||||
|
<div id={divId} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> |
||||
|
<div> |
||||
|
{content ? content : ''} |
||||
|
{this.state.enabledScroll && content ? content : ''} |
||||
|
{ |
||||
|
data ? |
||||
|
data.map((q, idx) => { |
||||
|
return ( |
||||
|
<div key={idx}> |
||||
|
<Row gutter={16} style={{ borderBottom: '0px solid grey' }}> |
||||
|
{heads.map((c, index) => { |
||||
|
return <Col span={spans[index]} key={index} style={{ paddingTop: 8, textAlign: 'left', wordBreak: 'break-word', color: `${c === changeStyleCol ? q.changeColor : ''}` }}> |
||||
|
{index == 1 ? q.data[index] == -1 ? "-" : q.data[index] : index == 2 ? q.data[1] == -1 ? '-' : q.data[index] : q.data[index]}</Col> |
||||
|
}) |
||||
|
} |
||||
|
</Row> |
||||
|
</div> |
||||
|
) |
||||
|
}) : '' |
||||
|
} |
||||
|
<div style={{ margin: 16 }}></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div > |
||||
|
) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,25 @@ |
|||||
|
#scroll-2::-webkit-scrollbar{ |
||||
|
width:4px; |
||||
|
height:4px; |
||||
|
} |
||||
|
#scroll-2::-webkit-scrollbar-track{ |
||||
|
background: #f6f6f6; |
||||
|
border-radius:2px; |
||||
|
} |
||||
|
#scroll-2::-webkit-scrollbar-thumb{ |
||||
|
background: #aaa; |
||||
|
border-radius:2px; |
||||
|
} |
||||
|
#scroll-2::-webkit-scrollbar-thumb:hover{ |
||||
|
background: #747474; |
||||
|
} |
||||
|
#scroll-2::-webkit-scrollbar-corner{ |
||||
|
background: #f6f6f6; |
||||
|
} |
||||
|
#screen-slope-midde-top-jiangxi{ |
||||
|
& > div > div{ |
||||
|
&:first-child{ |
||||
|
margin-bottom: 1px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,139 @@ |
|||||
|
'use strict' |
||||
|
import React, { Component } from 'react'; |
||||
|
import { Row, Col } from 'antd'; |
||||
|
|
||||
|
export default class AutoRollComponent extends Component { |
||||
|
|
||||
|
constructor(props) { |
||||
|
super(props); |
||||
|
this.scrollElem = null; |
||||
|
this.stopscroll = false; |
||||
|
this.preTop = 0; |
||||
|
this.cloneEle = null; |
||||
|
this.currentTop = 0; |
||||
|
this.marqueesHeight = 0; |
||||
|
this.interval = null; |
||||
|
this.state = { |
||||
|
enabledScroll: false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
get enabledScroll() { |
||||
|
let scrollElem = document.getElementById(this.props.divId); |
||||
|
let fatherElem = scrollElem?.parentNode || null; |
||||
|
if (scrollElem && fatherElem) { |
||||
|
return scrollElem.scrollHeight > fatherElem.scrollHeight |
||||
|
} |
||||
|
|
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
marque = (height) => { |
||||
|
try { |
||||
|
this.scrollElem = document.getElementById(this.props.divId); |
||||
|
this.marqueesHeight = height; |
||||
|
if (this.scrollElem) { |
||||
|
this.scrollElem.style.height = this.marqueesHeight; |
||||
|
this.scrollElem.style.overflow = 'hidden'; |
||||
|
} |
||||
|
this.repeat(); |
||||
|
} catch (e) { console.log(e) } |
||||
|
} |
||||
|
|
||||
|
|
||||
|
repeat = () => { |
||||
|
this.scrollElem.scrollTop = 0; |
||||
|
let offset = 1.5 |
||||
|
|
||||
|
this.interval = setInterval(() => { |
||||
|
if (this.stopscroll) return; |
||||
|
this.currentTop = this.currentTop + offset; |
||||
|
this.preTop = this.scrollElem.scrollTop; |
||||
|
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; |
||||
|
// console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop} === this.preTop:${this.preTop}`);
|
||||
|
if (this.preTop === this.scrollElem.scrollTop) { |
||||
|
this.scrollElem.scrollTop = this.marqueesHeight; |
||||
|
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; |
||||
|
} |
||||
|
}, 300000); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
componentWillUnmount() { |
||||
|
clearInterval(this.interval); |
||||
|
} |
||||
|
|
||||
|
componentWillReceiveProps(nextProps) { |
||||
|
requestAnimationFrame(() => { |
||||
|
if (this.enabledScroll) { |
||||
|
if (!this.state.enabledScroll) { |
||||
|
this.setState({ enabledScroll: true }, () => { |
||||
|
this.marque(10) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
componentDidMount() { |
||||
|
if (this.enabledScroll) { |
||||
|
this.setState({ enabledScroll: true }, () => { |
||||
|
this.marque(10) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMouseOver = () => { |
||||
|
this.stopscroll = true; |
||||
|
} |
||||
|
|
||||
|
onMouseOut = () => { |
||||
|
this.stopscroll = false; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
render() { |
||||
|
|
||||
|
const { changeStyleCol, heads, spans, data, divId, divHeight, content, containerStyle = {} } = this.props; |
||||
|
|
||||
|
return ( |
||||
|
<div style={{ ...containerStyle, textAlign: 'left' }}> |
||||
|
{ |
||||
|
heads ? |
||||
|
<Row style={{ lineHeight: '40px', height: 40 }}> |
||||
|
{heads.map((c, index) => { |
||||
|
return <Col span={spans[index]} key={index}>{c}</Col> |
||||
|
}) |
||||
|
} |
||||
|
</Row> : '' |
||||
|
} |
||||
|
|
||||
|
<div id={divId} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> |
||||
|
<div> |
||||
|
{content ? content : ''} |
||||
|
{this.state.enabledScroll && content ? content : ''} |
||||
|
{ |
||||
|
data ? |
||||
|
data.map((q, idx) => { |
||||
|
return ( |
||||
|
<div key={idx}> |
||||
|
<Row gutter={16} style={{ borderBottom: '0px solid grey' }}> |
||||
|
{heads.map((c, index) => { |
||||
|
return <Col span={spans[index]} key={index} style={{ paddingTop: 8, textAlign: 'left', wordBreak: 'break-word', color: `${c === changeStyleCol ? q.changeColor : ''}` }}> |
||||
|
{index == 1 ? q.data[index] == -1 ? "-" : q.data[index] : index == 2 ? q.data[1] == -1 ? '-' : q.data[index] : q.data[index]}</Col> |
||||
|
}) |
||||
|
} |
||||
|
</Row> |
||||
|
</div> |
||||
|
) |
||||
|
}) : '' |
||||
|
} |
||||
|
<div style={{ margin: 16 }}></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div > |
||||
|
) |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue