建设部分大屏部分

web/client/src/sections/quanju/containers/footer/build/AutoRollComponent.js

@@ -0,0 +1,139 @@
+
+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 >
+        )
+    }
+}

web/client/src/sections/quanju/containers/footer/build/Rightcenter.js

@@ -1,7 +1,91 @@
 import React from 'react'
 import './style.less'
+import AutoRollComponent from './AutoRollComponent'
 export default function Rightcenter() {
+  const data =[ {name: '莲塘镇', total: 12739},
+  {name: '向塘镇', total: 2445},
+  {name: '蒋巷镇', total: 2035},
+  {name: '幽兰镇', total: 1999},
+  {name: '塘南镇', total: 1915},
+  {name: '武阳镇', total: 1842},
+  {name: '冈上镇', total: 1446},
+  {name: '广福镇', total: 1063},
+  {name: '三江镇', total: 851},
+  {name: '泾口乡', total: 657},
+   {name: '南新镇', total: 640},
+   {name: '八一乡', total: 569},
+   {name: '黄马乡', total: 541},
+   {name: '塔城乡', total: 534},
+   {name: '富山乡', total: 515},
+   {name: '东新乡', total: 513},
+   {name: '银三角', total: 513},
+   {name: '八月湖街道', total: 513},]
+   const province = undefined
+  const FIRST = "linear-gradient(360deg, rgba(43, 180, 211, 0.1) 0%, rgba(43, 180, 211, 0.4) 100%)"
+const SECOND = "linear-gradient(360deg, rgba(255, 209, 86, 0.1) 0%, rgba(255, 209, 86, 0.4) 100%)"
+const THIRD = "linear-gradient(360deg, rgba(148, 148, 255, 0.1) 0%, rgba(148, 148, 255, 0.4) 100%)"
+const OTHER = "linear-gradient(360deg, rgba(28, 96, 253, 0) 0%, rgba(28, 96, 253, 0.2) 100%)"
+let TOTALS = data?.map(({ name, total }, index) => {
+  let max = province ? data.length * 30 + 100 : data.length * 500 + 100
+  return {
+    name,
+    value: total,
+    percent: (total * 100 / max).toFixed(2) + "%"
+  }
+})
+let new_TOTALS = TOTALS && TOTALS.length > 10 ? TOTALS.slice(0, 10) : TOTALS
+function Cell(props) {
+  const { name, rank, value, percent, style = {} } = props
+  let bg = RNAKS[rank] || OTHER
+  console.log(percent,'百分比')
+  return <div style={{
+    width: "100%", height: 34, display: "flex", justifyContent: 'center',
+    alignItems: "center", marginTop: 7, marginBottom: 7,
+    padding: "0 2%",
+    ...style
+  }}>
+    <div style={{
+        height: 20, color: "white",whiteSpace:'nowrap',
+      fontSize: 10, fontWeight: "bold", display: 'flex',
+      alignItems: "center", justifyContent: "center"
+    }} >
+      {name}
+    </div>
+    <div style={{ width: "92%", marginLeft: 10 }}>
+      {/* <div style={{ width: "100%", height: 18, fontSize: 12, fontWeight: 400, color: "white" }}>{name}</div> */}
+
+      <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", height: 13 }}>
+       <div style={{display:'flex', width:"85%"}}>
+          <div style={{
+          width: percent, height: 5,
+          background: "linear-gradient(270deg, #1C60FE 0%, rgba(28, 96, 254, 0) 100%)"
+            }} />
+            <div style={{width:`calc(100% - ${percent})`,background:'rgba(255,255,255,0.0800)'}}/>
+          </div>
+        <div style={{ marginLeft: 10, fontSize: 12,color:"#FFFFFF" }}>{value}</div>
+      </div>
+    </div>
+  </div>
+}
+const renderContent = () => {
+  return <div >
+    {new_TOTALS?.map(({ name, value, percent }, index) => {
+      return <Cell key={index} rank={index} name={name} value={value} percent={percent} />
+    })}
+  </div>
+}
+const RNAKS = [FIRST, SECOND, THIRD]
+ 
   return (
-    <div className='build-right-center'>Rightcenter</div>
+    <div className='build-right-center'>
+      <div className='build-right-center-top'>
+        <img src="/assets/images/quanju/gonglugongcheng.png"></img>
+        <div>在线公路工程数量</div>
+        <h2>1234,123</h2>
+      </div>
+      <AutoRollComponent content={renderContent()}
+    containerStyle={{ position: "relative", height: 190, }}
+    divHeight={"100%"} divId={"chart-overview-deviceList"} />
+    </div>
   )
 }

web/client/src/sections/quanju/containers/footer/build/index.js

@@ -3,7 +3,7 @@ import React from 'react'
 // import LeftCenter from './Leftcenter'
 import LeftBottom from './Leftbottom'
 // import RightTop from './Righttop'
-// import Rightcenter from './Rightcenter'
+import Rightcenter from './Rightcenter'
 // import Rightbottom from './Rightbottom'
 import { Carousel } from 'antd'
 import Module from '../../public/module'
@@ -115,7 +115,9 @@ const Build = () => {
             </Module>
         <Module title={"各乡镇在建公路工程"} style={{ width: "100%",
             height:" 33%",marginTop:'3%'
-            }}></Module>
+            }}>
+                <Rightcenter/>
+            </Module>
         <Module title={"公路等级统计"} style={{ width: "100%",
             height:" 30%",marginTop:'3%'
             }}>

web/client/src/sections/quanju/containers/footer/build/style.less

@@ -166,7 +166,6 @@
         width: 25%;
         height: 100%;
         .build-right-top{
-            
             width: 100%;
            height: 100%;
            padding: 0 10px 10px;
@@ -188,16 +187,38 @@
             line-height: 31px;
             background-image: url('/assets/images/quanju/bgxuanchuanlan.png');
             background-size: 100% 100%;
-            
-        
-
            }
         }
         .build-right-center{
             width: 100%;
-            height: 33%;
+           height: 100%;
-            background-color: pink;
+        //    background-color: pink;
-            margin-bottom: 3%;
+           .build-right-center-top{
+                width: 100%;
+                height: 30%;    
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                img{
+                    width:12% ;
+                    height: 80%;
+                }
+                div{
+                    font-size: 16px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #C2EEFF;
+                    line-height: 22px;
+                    letter-spacing: 1px
+                }
+                h2{
+                    font-size: 28px;
+                    font-family: YouSheBiaoTiHei;
+                    color: #FFFFFF;
+                    margin-bottom : 0!important;
+                    text-shadow: 0px 0px 4px #07B9FE;
+                }
+           }
         }
         .build-right-bottom{
             width: 100%;