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 Lunbo from "../centerleft/lunbo/lunbo" |
|||
// import "./left.less"
|
|||
|
|||
const Leftcenter = () => { |
|||
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 ( |
|||
<> |
|||
<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