提交领导驾驶舱

web/client/src/sections/quanju/containers/footer/leadership/centerLeft.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Centerlefttop from "./centerleft/center-left-top"
-import Centerleftcenter from "./centerleft/center-left-center"
+import Centerleftcenter from "./centerleft/top"
-import Centerleftcentertop from "./centerleft/center-left-centertop"
+import Centerleftcentertop from "./centerleft/bottom"
 import Centerleftbottom from "./centerleft/center-left-bottom"
 
 const CenterLeft = () => {

web/client/src/sections/quanju/containers/footer/leadership/centerleft/bottom.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react'
+// import Module from '../../../public/module'
+import Daolu from "./daolu"
+import Handong from "./handong"
+import Qiaoliang from "./qiqoliang"
+
+
+const Leftcentertop = (props) => {
+    const style = { height: "23%" }
+    const { tabKey } = props
+    return (
+        <>
+            {
+                (() => {
+                    switch (tabKey) {
+                        case 'daolu':
+                            return <Daolu />
+                        case 'handong':
+                            return <Handong />
+                        case "qiaoliang":
+                            return <Qiaoliang />
+                    }
+                })()
+            }
+        </>
+    )
+}
+export default Leftcentertop

web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-center.js

@@ -1,16 +0,0 @@
-import React from 'react'
-import Module from '../../../public/module'
-
-const Leftcenter = () => {
-    const style = {
-        height: "23%"
-    }
-    return (
-        <>
-            <Module style={style}>
-                <div style={{ width: "40%", height: "40%", background: "red" }}></div>
-            </Module>
-        </>
-    )
-}
-export default Leftcenter

web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-centertop.js

@@ -1,14 +0,0 @@
-import React from 'react'
-import Module from '../../../public/module'
-
-const Leftcentertop = () => {
-    const style = { height: "23%" }
-    return (
-        <>
-            <Module style={style}>
-                <div style={{ width: "40%", height: "40%", background: "red" }}></div>
-            </Module>
-        </>
-    )
-}
-export default Leftcentertop

web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js

@@ -1,13 +1,30 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import Module from '../../../public/module'
+import Top from "./top"
+import Bottom from "./bottom"
 
 const Lefttop = (props) => {
-    const { } = props
     const style = { height: "68%" }
+    const [tabKey, setTabKey] = useState('daolu')
+
+    // useEffect(() => {
+    //     dispatch(actions.example.getMembers(user.orgId))
+    // }, [])
+    const tabChange = (tab) => {
+        //leader 领导驾驶舱 site 工地 toilet 公厕 light 照明  water水质  encomic经济 environment 生态环境  security 智慧安监
+        // setCurrentTab(tab);
+        setTabKey(tab)
+        // dispatch({ type: 'TAB-CHANGE', data: tab })
+    }
     return (
         <>
             <Module style={style}>
-
+                <div style={{ width: "100%", height: "33%" }}>
+                    <Top tabChange={tabChange} tabKey={tabKey} />
+                </div>
+                <div style={{ width: "100%", height: "70%" }}>
+                    <Bottom tabKey={tabKey} />
+                </div>
             </Module>
         </>
     )

web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react'
+import Lun from "./lunbo/lunbo"
+
+const Right = () => {
+    const [beijing, setBeijing] = useState()
+    const [list, setList] = useState([{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11121", chaoxian: "30%", penalty: "-6分和扣200元", days: "2022年5月4日" },
+    { name: "苏LD112512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD1151121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11912121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD16112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L2D111221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "62", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11152121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L1D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD13112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD111612121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD111216221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L63D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD163112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD651112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }])
+    const renderBody = () => {
+        return (
+
+            <div style={{ width: "100%", height: "100%" }}>
+                {
+                    list.map((item, index) => {
+                        return (
+                            <li className={index} style={{
+                                height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px"
+                            }} onMouseEnter={() => {
+                                setBeijing(index)
+                                // console.log(beijing);
+                            }}>
+                                {beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "6%" }} /> : ""}
+                                {beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""}
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", left: "25%" }} >{item.name}</p>
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "25%" }} >{item.name}</p>
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", left: "5%" }} >{item.name}</p>
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "5%" }}>{item.name}</p></li>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+    return (
+        <>
+            <div style={{ width: "100%", height: "100%", float: "right", marginRight: "1%", position: "relative" }}>
+
+
+                <div style={{ height: "70%", width: "100%", position: "relative", left: "5%", top: "45%" }}>
+                    <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: "23%" }} />
+                        <span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "3%" }}>离线详情</span>
+                        {/* <img src='/assets/images/leadership/zibiaoti.png' style={{ width: "95%", height: "34px", position: "absolute", top: "12px", left: "6%" }} /> */}
+                    </div>
+                    <Lun
+                        canScroll={true}
+                        content={renderBody()}
+                        containerStyle={{ position: "absolute", height: "80%", width: "90%" }}
+                        divHeight={"100%"}
+                        divId={"screen"}
+                    />
+                </div>
+
+            </div>
+        </>
+    )
+}
+export default Right

web/client/src/sections/quanju/containers/footer/leadership/centerleft/handong.js

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react'
+import Lun from "./lunbo/lunbo"
+
+const Right = () => {
+    const [beijing, setBeijing] = useState()
+    const [list, setList] = useState([{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11121", chaoxian: "30%", penalty: "-6分和扣200元", days: "2022年5月4日" },
+    { name: "苏LD112512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD1151121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11912121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD16112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L2D111221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "62", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11152121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L1D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD13112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD111612121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD111216221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L63D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD163112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD651112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }])
+    const renderBody = () => {
+        return (
+
+            <div style={{ width: "100%", height: "100%" }}>
+                {
+                    list.map((item, index) => {
+                        return (
+                            <li className={index} style={{
+                                height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px"
+                            }} onMouseEnter={() => {
+                                setBeijing(index)
+                                // console.log(beijing);
+                            }}>
+                                {beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "6%" }} /> : ""}
+                                {beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""}
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", left: "25%" }} >{item.name}</p>
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "25%" }} >{item.name}</p>
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", left: "5%" }} >{item.name}</p>
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "5%" }}>{item.name}</p></li>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+    return (
+        <>
+            <div style={{ width: "100%", height: "100%", float: "right", marginRight: "1%", position: "relative" }}>
+
+
+                <div style={{ height: "70%", width: "100%", position: "relative", left: "5%", top: "45%" }}>
+                    <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: "23%" }} />
+                        <span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "3%" }}>离线详情</span>
+                        {/* <img src='/assets/images/leadership/zibiaoti.png' style={{ width: "95%", height: "34px", position: "absolute", top: "12px", left: "6%" }} /> */}
+                    </div>
+                    <Lun
+                        canScroll={true}
+                        content={renderBody()}
+                        containerStyle={{ position: "absolute", height: "80%", width: "90%" }}
+                        divHeight={"100%"}
+                        divId={"screen"}
+                    />
+                </div>
+
+            </div>
+        </>
+    )
+}
+export default Right

web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/lunbo.js

@@ -40,9 +40,11 @@ export default class AutoRollComponent extends Component {
             this.currentTop = this.currentTop + 1;
             this.preTop = this.scrollElem.scrollTop;
             this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1;
+            // console.log(this.scrollElem.scrollTop);
             if (this.preTop === this.scrollElem.scrollTop) {
                 this.scrollElem.scrollTop = this.marqueesHeight;
                 this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1;
+                // console.log(this.scrollElem.scrollTop);
             }
         }, 80);
     }

web/client/src/sections/quanju/containers/footer/leadership/centerleft/qiqoliang.js

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react'
+import Lun from "./lunbo/lunbo"
+
+const Right = () => {
+    const [beijing, setBeijing] = useState()
+    const [list, setList] = useState([{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11121", chaoxian: "30%", penalty: "-6分和扣200元", days: "2022年5月4日" },
+    { name: "苏LD112512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD1151121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11912121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD16112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L2D111221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "62", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11152121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L1D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD11512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD13112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD111612121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD111216221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏L63D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD163112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" },
+    { name: "苏LD651112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }])
+    const renderBody = () => {
+        return (
+
+            <div style={{ width: "100%", height: "100%" }}>
+                {
+                    list.map((item, index) => {
+                        return (
+                            <li className={index} style={{
+                                height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px"
+                            }} onMouseEnter={() => {
+                                setBeijing(index)
+                                // console.log(beijing);
+                            }}>
+                                {beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "6%" }} /> : ""}
+                                {beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""}
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", left: "25%" }} >{item.name}</p>
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "25%" }} >{item.name}</p>
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", left: "5%" }} >{item.name}</p>
+                                <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "5%" }}>{item.name}</p></li>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+    return (
+        <>
+            <div style={{ width: "100%", height: "100%", float: "right", marginRight: "1%", position: "relative" }}>
+
+
+                <div style={{ height: "70%", width: "100%", position: "relative", left: "5%", top: "45%" }}>
+                    <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: "23%" }} />
+                        <span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "3%" }}>离线详情</span>
+                        {/* <img src='/assets/images/leadership/zibiaoti.png' style={{ width: "95%", height: "34px", position: "absolute", top: "12px", left: "6%" }} /> */}
+                    </div>
+                    <Lun
+                        canScroll={true}
+                        content={renderBody()}
+                        containerStyle={{ position: "absolute", height: "80%", width: "90%" }}
+                        divHeight={"100%"}
+                        divId={"screen"}
+                    />
+                </div>
+
+            </div>
+        </>
+    )
+}
+export default Right

web/client/src/sections/quanju/containers/footer/leadership/centerleft/top.js

@@ -0,0 +1,63 @@
+import React, { useState, useEFFect } from 'react'
+// import Module from '../../../public/module'
+
+const Leftcenter = (props) => {
+    const { tabChange, tabKey } = props
+    // const [tab, setTad] = useState("base")
+    const onClick = (tab) => {
+        // setTad({ tab })
+        tabChange(tab)
+    }
+    return (
+        <>
+            <div style={{ position: "relative", width: "100%", height: "30%" }}>
+                {/* <div className={tabKey == "build" ? "tabKey-map" : "notabKey"} style={{ backgroundImage: "url(/assets/images/quanju/zuobeijing.png)", backgroundSize: "100% 100%" }} onClick={() => {
+                    onClick("build")
+                }}><a>建设</a></div> */}
+                <div style={{ width: "30%", height: "10vh", backgroundColor: "", position: "relative", left: "2%", top: "100%" }} onClick={() => {
+                    onClick("daolu")
+                }} >
+                    {
+                        tabKey == "daolu" ? <img src='/assets/images/leadership/diguang.png' style={{ width: "100%", height: "100%" }} /> : ""
+                    }
+                    <div style={{ width: "50%", height: "100%", position: "absolute", left: "17%", top: "23%" }}>
+                        <img src='/assets/images/leadership/lu.png' style={{ width: "50%" }} />
+                    </div>
+                    <div style={{ width: "50%", height: "100%", position: "absolute", left: "50%", top: "11%" }}>
+                        <p style={{ fontSize: "2vh", color: "#D8F0FF", fontFamily: "PingFangSC-Regular, PingFang SC", marginTop: "3%" }}>道路统计<span style={{ marginLeft: "10px", color: "rgba(216,240,255,0.8000)" }}>公里</span></p>
+                        <p style={{ fontFamily: "YouSheBiaoTiHei", color: "#ffffff", fontSize: "2.5vh", marginTop: "-2%" }}>2333.4</p>
+                    </div>
+                </div>
+                <div style={{ width: "30%", height: "10vh", backgroundColor: "", position: "relative", left: "35%", top: "-105%" }} onClick={() => {
+                    onClick("handong")
+                }} >
+                    {
+                        tabKey == "handong" ? <img src='/assets/images/leadership/diguang.png' style={{ width: "100%", height: "100%" }} /> : ""
+                    }
+                    <div style={{ width: "50%", height: "100%", position: "absolute", left: "17%", top: "10%" }}>
+                        <img src='/assets/images/leadership/handong.png' style={{ width: "50%" }} />
+                    </div>
+                    <div style={{ width: "50%", height: "100%", position: "absolute", left: "50%", top: "8%" }}>
+                        <p style={{ fontSize: "2vh", color: "#D8F0FF", fontFamily: "PingFangSC-Regular, PingFang SC", marginTop: "3%" }}>涵洞统计<span style={{ fontSize: "14px", marginLeft: "10px", color: "rgba(216,240,255,0.8000)" }}>个</span></p>
+                        <p style={{ fontFamily: "YouSheBiaoTiHei", color: "#ffffff", fontSize: "2.5vh" }}>2333.4</p>
+                    </div>
+                </div>
+                <div style={{ width: "30%", height: "10vh", backgroundColor: "", position: "relative", left: "68%", top: "-315%" }} onClick={() => {
+                    onClick("qiaoliang")
+                }} >
+                    {
+                        tabKey == "qiaoliang" ? <img src='/assets/images/leadership/diguang.png' style={{ width: "100%", height: "100%" }} /> : ""
+                    }
+                    <div style={{ width: "50%", height: "100%", position: "absolute", left: "17%", top: "10%" }}>
+                        <img src='/assets/images/leadership/qiao.png' style={{ width: "50%" }} />
+                    </div>
+                    <div style={{ width: "50%", height: "100%", position: "absolute", left: "50%", top: "8%" }}>
+                        <p style={{ fontSize: "2vh", color: "#D8F0FF", fontFamily: "PingFangSC-Regular, PingFang SC", marginTop: "3%" }}>桥梁统计<span style={{ fontSize: "14px", marginLeft: "10px", color: "rgba(216,240,255,0.8000)" }}>座</span></p>
+                        <p style={{ fontFamily: "YouSheBiaoTiHei", color: "#ffffff", fontSize: "2.5vh", marginTop: "-2%" }}>2333.4</p>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+export default Leftcenter

web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js

@@ -9,10 +9,12 @@ const Leftbottomecharts = () => {
             title: {
             },
             tooltip: {
+                formatter: " {b}年<br/> 施工了{c}公里",
                 trigger: "axis",
                 axisPointer: {
                     lineStyle: {
-                        color: "#57617B",
+                        color: "rgba(226,240,255,0.4)",
+                        default: "solid"
                     },
                 },
             },
@@ -55,7 +57,7 @@ const Leftbottomecharts = () => {
                     ],
                     normal: {
                         lineStyle: {
-                            color: "red"//折线的颜色
+                            color: "rgba(226,240,255,0.4)"//折线的颜色
                         }
                     }
                 },
@@ -96,6 +98,7 @@ const Leftbottomecharts = () => {
                     symbol: "circle",
                     symbolSize: 5,
                     showSymbol: false,
+                    color: "#00D3FD",
                     areaStyle: {
                         normal: {
                             color: new echarts.graphic.LinearGradient(
@@ -132,7 +135,7 @@ const Leftbottomecharts = () => {
     return (
         <>
             <div style={{ width: "72px", height: "20px", backgroundColor: "rgba(216,240,255,0.1000)", float: "right", textAlign: "center", marginRight: "4%", borderLeft: "solid 2px #6E7A83" }}>
-                <p style={{ color: "rgba(216,240,255,0.8000)", fontSize: "0.4vh", lineHeight: "20px" }}>公里数Km</p></div>
+                <p style={{ color: "rgba(216,240,255,0.8000)", fontSize: "0.4vh", lineHeight: "20px" }}>公里</p></div>
             <div ref={chartRef} style={{
                 height: "20vh", width: "100%"
             }}></div>

web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js

@@ -0,0 +1,218 @@
+import React, { useEffect, useRef } from 'react'
+import * as echarts from 'echarts';
+
+const Lefttopecharts = () => {
+    const chartRef = useRef(null);
+    useEffect(() => {
+        var chartInstance = echarts.init(chartRef.current);
+        var dataArr = 50;
+        var names = names()
+        var colorSet = colors();
+        function names() {
+            if (dataArr >= 0 && dataArr < 30) {
+                return ("畅通");
+            } else if (dataArr >= 30 && dataArr < 50) {
+                return ("缓行");
+            } else if (dataArr >= 50 && dataArr < 70) {
+                return ("拥堵");
+            } else if (dataArr >= 70 && dataArr <= 100) {
+                return ("严重拥堵");
+            }
+        }
+        function colors() {
+            if (dataArr >= 0 && dataArr < 30) {
+                return (colorSet = { color: "#33B000" });
+            } else if (dataArr >= 30 && dataArr < 50) {
+                return (colorSet = { color: "#FECB00" });
+            } else if (dataArr >= 50 && dataArr < 70) {
+                return (colorSet = { color: "#DF0001" });
+            } else if (dataArr >= 70 && dataArr <= 100) {
+                return (colorSet = { color: "#8E0E0B" });
+            }
+        }
+        var option = {
+            // backgroundColor: "#0E1327",
+            tooltip: {
+                formatter: "{a} <br/>{b} : {c}%",
+            },
+
+            series: [
+                {
+                    name: names,
+                    type: "gauge",
+                    // center: ['20%', '50%'],
+                    radius: "60%",
+
+                    splitNumber: 10,
+                    axisLine: {
+                        lineStyle: {
+                            color: [
+                                [dataArr / 100, colorSet.color],
+                                [1, "#111F42"],
+                            ],
+                            width: 3,
+                        },
+                    },
+                    axisLabel: {
+                        show: false,
+                    },
+                    // axisTick: {
+                    //     show: false,
+                    // },
+                    splitLine: {
+                        show: false,
+                    },
+                    // itemStyle: {
+                    //     show: false,
+                    // },
+                    detail: {
+                        formatter: function (value) {
+                            if (value !== 0) {
+                                var num = Math.round(value);
+                                return (
+                                    parseInt(num).toFixed(0) +
+                                    "%" +
+                                    "\n" +
+                                    "\n" +
+                                    "\n" +
+                                    "\n" +
+                                    "\n"
+
+                                );
+                            } else {
+                                return 0;
+                            }
+                        },
+                        offsetCenter: [0, 82],
+                        textStyle: {
+                            padding: [0, 0, 0, 0],
+                            fontSize: 18,
+                            fontWeight: "700",
+                            color: "#FFFFFF",
+                            // zlevel: 3,
+                        },
+                    },
+                    title: {
+                        //标题
+                        show: true,
+                        offsetCenter: [0, 46], // x, y，单位px
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 14, //表盘上的标题文字大小
+                            fontWeight: 400,
+                            fontFamily: "PingFangSC",
+                        },
+                    },
+                    data: [
+
+                        {
+                            name: "拥堵指数",
+                            value: dataArr,
+                            itemStyle: colorSet
+                        },
+                    ],
+                    pointer: {
+                        show: true,
+                        length: "75%",
+                        radius: "20%",
+                        width: 4, //指针粗细
+                    },
+                    animationDuration: 4000,
+                },
+                {
+                    name: "外部刻度",
+                    type: "gauge",
+                    //  center: ['20%', '50%'],
+                    radius: "90%",
+                    //   min: 0, //最小刻度
+                    //   max: 100, //最大刻度
+                    //   splitNumber: 10, //刻度数量
+                    startAngle: 225,
+                    endAngle: -45,
+                    axisLine: {
+                        show: false,
+                    }, //仪表盘轴线
+                    axisLabel: {
+                        show: true,
+                        color: "#FFFFFF",
+                        distance: 20,
+                        formatter: function (v) {
+                            switch (v + "") {
+                                case "0":
+                                    return "0";
+                                case "20":
+                                    return "20";
+                                case "40":
+                                    return "40";
+                                case "60":
+                                    return "60";
+                                case "80":
+                                    return "80";
+                                case "100":
+                                    return "100";
+                            }
+                        },
+                    }, //刻度标签。
+                    axisTick: {
+                        show: false,
+                        splitNumber: 7,
+                        lineStyle: {
+                            color: colorSet.color, //用颜色渐变函数不起作用
+                            width: 1,
+                        },
+                        length: -8,
+                    }, //刻度样式
+                    splitLine: {
+                        show: false,
+                        length: -20,
+                        lineStyle: {
+                            color: colorSet.color, //用颜色渐变函数不起作用
+                        },
+                    }, //分隔线样式
+                    detail: {
+                        show: false,
+                    },
+                    pointer: {
+                        show: false,
+                    },
+                },
+            ],
+        };
+        chartInstance.setOption(option);
+        window.addEventListener('resize', function () {
+            chartInstance.resize();
+        })
+    }, []);
+
+
+    return (
+        <>
+            <div ref={chartRef} style={{
+                height: "20vh", width: "100%"
+            }}></div>
+            <div style={{ position: "relative", top: "-29%", left: "42.5%", color: "rgba(216,240,255,0.8000)", fontSize: "12px" }}>Km/h</div>
+            <div style={{ position: "relative", top: "-49%", left: "43%", color: "rgba(216,240,255,0.8000)", fontSize: "12px" }}>当前</div>
+            {/* <div style={{ width: "10%", height: "5%", position: "relative", top: "-32%", left: "42.5%", backgroundColor: "#002D96" }}></div> */}
+            <div style={{ width: "100%", height: "20vh", marginTop: "-29%" }}>
+                <div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "3%" }}>
+                    <p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#33B000", left: "-50%", top: "20%" }}></p>畅通</p>
+                    <p style={{ position: "absolute", left: "60%" }}>0-30</p>
+                </div>
+                <div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "11%" }}>
+                    <p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#FECB00", left: "-50%", top: "20%" }}></p>缓慢</p>
+                    <p style={{ position: "absolute", left: "60%" }}>30-50</p>
+                </div>
+                <div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "19%" }}>
+                    <p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#DF0001", left: "-50%", top: "20%" }}></p>拥堵</p>
+                    <p style={{ position: "absolute", left: "60%" }}>50-70</p>
+                </div>
+                <div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "27%" }}>
+                    <p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#8E0E0B", left: "-25%", top: "20%" }}></p>严重拥堵</p>
+                    <p style={{ position: "absolute", left: "60%" }}>70-100</p>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Lefttopecharts

web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js

@@ -32,7 +32,7 @@ const Leftcenter = () => {
                 setNum(num + 1);
                 setTu(list[num].img);
             }
-        }, 6000);
+        }, 2000);
         return () => clearInterval(timer);
     }, [num]);
     const renderBody = () => {
@@ -42,12 +42,15 @@ const Leftcenter = () => {
                     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={() => {
+                        <li style={{ height: "20px", position: "relative", width: "100%", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", borderLeft: "2px solid #1C60FE", backgroundColor: "linear-gradient(to right, rgba(0,70,200,0.3000) , rgba(0,124,230,0))" }} onMouseEnter={() => {
                             setTu(item.img);
                             setNum(index + 1);
                             setName(item.name)
                             // console.log(list);
-                        }}>{item.name}</li>
+                        }}>
+                            <p style={{ position: "absolute", color: num - 1 == index ? "#fff" : "rgba(216,240,255,0.8)" }}>{item.name}</p>
+                            <img src='/assets/images/leadership/juxing.png' style={{ width: "100%", height: "100%", position: "absolute" }} />
+                        </li>
                         // {/* </div> */}
                         // </div>
                     )

web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js

@@ -1,14 +1,15 @@
 import React from 'react'
 import Module from '../../../public/module'
 import Leftcenter from './left-center'
+import Lefttopecharts from "./echarts/lefttopecharts"
 
 const Lefttop = () => {
     const style = { height: "68%" }
     return (
         <>
             <Module style={style} title={"道路拥堵指数"} >
-                <div style={{ width: "100%", height: "60%", position: "relative" }}>
+                <div style={{ width: "100%", height: "60%", position: "relative", top: "3%" }}>
-                    <div style={{ width: "50%", height: "100%" }}>
+                    <div style={{ width: "50%", height: "100%", float: "left" }}>
                         <div style={{ width: "100%", height: "30%" }}>
                             <img src='/assets/images/leadership/road.png' style={{ width: "15%", height: "30%", position: "absolute", left: "10%" }} />
                             <p style={{
@@ -33,10 +34,11 @@ const Lefttop = () => {
                             }}>预测明日</p>
                             <p style={{ fontSize: "24px", fontFamily: "YouSheBiaoTiHei", color: "#ffffff", position: "absolute", top: "72%", left: "30%" }}>55.2<span style={{ fontSize: "2px", color: "#EEF4FF" }}>Km/h</span></p>
                         </div>
-                    </div>
-                    <div>
 
                     </div>
+                    <div style={{ width: "50%", height: "100%", position: "absolute", left: "50%", top: "-10%" }}>
+                        <Lefttopecharts />
+                    </div>
                 </div>
                 <div style={{ width: "100%", height: "40%", position: "relative", /* top: "63%" */ }}>
                     <Leftcenter />

web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js

@@ -0,0 +1,145 @@
+import React, { Component } from 'react';
+import './left.less';
+class ReactCarousel extends Component {
+    chunk(arr, size) {
+        var arr1 = new Array();
+        for (var i = 0; i < Math.ceil(arr.length / size); i++) {
+            arr1[i] = new Array();
+        }
+        var j = 0;
+        var x = 0;
+        for (var i = 0; i < arr.length; i++) {
+            if (!((i % size == 0) && (i != 0))) {
+                arr1[j][x] = arr[i];
+                x++;
+                // console.log("j=" + j + "  " + "x=" + x);
+            } else {
+                j++;
+                x = 0;
+                console.log("else:" + "j=" + j + "  " + "x=" + x);
+                arr1[j][x] = arr[i];
+                // console.log(arr1);
+                x++;
+            }
+        }
+        return arr1;
+    }
+
+    constructor() {
+        super();
+        this.state = {
+            shuzu: [{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段2", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段3", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段4", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }],
+            imgs: [],
+            showIndex: 0, //显示第几个图片
+            timer: null,  // 定时器
+            show: false   // 前后按钮显示
+        }
+        this.setState({
+            imgs: this.chunk((this.state.shuzu), 4)
+        })
+        console.log(this.chunk((this.state.shuzu), 4));
+    }
+
+    render() {
+        return (
+            <div className="ReactCarousel" style={{ width: "100%", height: "100%" }}>
+                <div className="contain"
+                    onMouseEnter={() => { this.stop() }} //鼠标进入停止自动播放
+                    onMouseLeave={() => { this.start() }}  //鼠标退出自动播放
+                >
+                    <ul className="ul">
+                        {
+                            this.state.imgs.map((value, index) => {
+                                return (
+                                    <li className={index === this.state.showIndex ? 'show' : ''}
+                                        key={index}
+                                    >
+                                        <div>{value[0].name}</div>
+                                        <div>{value[1].name}</div>
+                                        <div>{value[2].name}</div>
+                                        <div>{value[3].name}</div>
+                                    </li>
+                                )
+                            })
+                        }
+                    </ul>
+                    {/* <ul className="dots" style={{ width: this.state.imgs.length * 20 + 'px' }}>
+                        {
+                            this.state.imgs.map((value, index) => {
+                                return (
+                                    <li key={index}
+                                        className={index === this.state.showIndex ? 'active' : ''}
+                                        onClick={() => { this.change(index) }}>
+                                    </li>)
+                            })
+                        }
+
+                    </ul> */}
+                    <div className="control" style={{ width: "100%", height: "10%", backgroundColor: "red" }}>
+                        <span className="left" onClick={(e) => { this.previous(e) }}>左</span>
+                        <span className="right" onClick={(e) => { this.next(e) }}>右</span>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+    componentDidMount() { //一开始自动播放
+        this.start();
+    }
+    componentWillUnmount() { //销毁前清除定时器
+        this.stop();
+    }
+    stop = () => { //暂停
+        let { timer } = this.state;
+        clearInterval(timer);
+    }
+    start = () => { //开始
+        let { timer } = this.state;
+        timer = setInterval(() => {
+            this.next();
+        }, 2000);
+        this.setState({
+            timer
+        })
+    }
+    change = (index) => { //点击下面的按钮切换当前显示的图片
+        let { showIndex } = this.state;
+        showIndex = index;
+        this.setState({
+            showIndex
+        })
+    }
+    previous = (e) => { //上一张
+        let ev = e || window.event;
+        let { showIndex, imgs } = this.state;
+        if (showIndex <= 0) {
+            showIndex = imgs.length - 1;
+        } else {
+            showIndex--;
+        }
+        this.setState({
+            showIndex
+        })
+    }
+    next = (e) => { //下一张
+        let ev = e || window.event;
+        let { showIndex, imgs } = this.state;
+        if (showIndex >= imgs.length - 1) {
+            showIndex = 0;
+        } else {
+            showIndex++;
+        }
+        this.setState({
+            showIndex
+        })
+    }
+}
+export default ReactCarousel;

web/client/src/sections/quanju/containers/footer/leadership/right/left.less

@@ -1,3 +1,95 @@
 li{
 	list-style-type:none
 }
+
+.ant-select-selector, .ant-select-selection-placeholder{
+	background-color:#011f59 !important;
+	border:#1E7BD6 1px solid !important;
+	font-family: PingFangSC-Regular, PingFang SC !important;
+	height: 25px !important;
+	// line-height: 25px !important;
+}
+.ant-select-selection-item{
+	line-height: 25px !important;
+}
+.anticon{
+	color: #fff !important;
+}
+.contain {
+    position: relative;
+    top: 5%;
+    left: 45%;
+    width: 100%;
+    height: 100%;
+    transition: all 2s;
+    transform: translateX(-50%);
+    color: #fff;
+    overflow: hidden;
+    cursor: pointer;
+}
+.contain .ul {
+     height: 100%;
+     list-style: none;
+}
+.contain .ul .items {
+       position: absolute;
+       top: 0px;
+       width: 100%;
+       height: 100%;
+}
+.ul li.show{
+    display: block;
+}
+.ul li {
+    display: none;
+}
+.ul li img {
+    width: 100%;
+    height: 100%;
+}
+.contain .dots {
+     position: absolute;
+     left: 50%;
+     bottom: 30px;
+     height: 10px;
+     transform: translateX(-50%);
+}
+.dots li {
+    float: left;
+    width: 10px;
+    height: 10px;
+    margin: 0px 5px;
+    border-radius: 50%;
+    transition: all .3s;
+    // background-color: antiquewhite;
+    list-style: none;
+}
+// .dots li.active {
+//    background-color: blue;
+// }
+.control .left {
+    position: absolute;
+    top: 80%;
+    left: 85%;
+    // padding: 5px;
+    // transform: translateY(-50%);
+	width: 20px;
+	height: 50px;
+    font-size: 20px;
+    cursor: pointer;
+}
+// .control .left:hover {
+//     background-color:  #000000, 
+// }
+.control .right {
+    position: absolute;
+    top: 80%;
+    right: 3%;
+    // padding: 5px;
+    // transform: translateY(-50%);
+    font-size: 20px;
+    cursor: pointer;
+}
+// .control .right:hover {
+//     background-color: rgba(0, 0, 0, .3);
+// }

web/client/src/sections/quanju/containers/footer/leadership/right/lunbo copy.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function lunbo() {
+  return (
+    <div>lunbo copy</div>
+  )
+}
+
+export default lunbo

web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js

@@ -42,9 +42,9 @@ const Rightbottom = () => {
             // </div >
             <div style={{ width: "100%", height: "50%" }}>
                 {list.map((item, index) => {
-                    return <li style={{ width: "100%", height: "3vh", marginTop: "5px", backgroundColor: beijing == item.name ? "rgba(0,124,230,1) " : "" }} onMouseEnter={() => {
+                    return <li style={{ width: "100%", height: "3vh", marginTop: "5px", backgroundColor: beijing == index ? "rgba(0,124,230,1) " : "" }} onMouseEnter={() => {
-                        setBeijing(item.name)
+                        setBeijing(index)
-                        console.log(beijing);
+                        // console.log(beijing);
                     }}>
                         <div style={{ width: "30%", height: "100%", float: "left", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == item.name ? "#FFFFFF" : "rgba(216,240,255,0.8000)" }}>{item.name}</div>
                         <div style={{ width: "10%", height: "100%", float: "left", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == item.name ? "#FFFFFF" : "rgba(216,240,255,0.8000)" }}>{item.chaoxian}</div>

web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js

@@ -1,11 +1,118 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react';
 import Module from '../../../public/module'
+import { Radio, Select } from 'antd';
+import Lunbo from "../centerleft/lunbo/lunbo"
+import Huadong from './hudong';
+import "./left.less"
 
 const Righttop = () => {
+    const { Option } = Select;
     const style = { height: "68%" }
+    const children = [];
+    const [size, setSize] = useState('454544545');
+    const [num, setNum] = useState();
+    const [tu, setTu] = useState("");
+    const [name, setName] = useState("");
+    const handleChange = (value) => {
+        // console.log(`Selected: ${value}`);
+        setSize(value)
+    };
+    for (let i = 10; i < 36; i++) {
+        children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
+    }
+    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 id='op' style={{ width: "100%", height: "55%" }}>{
+                list.map((item, index) => {
+                    return (
+                        // <div style={{ width: "100%", height: "100%" }} >
+                        // {/* <div style={{ width: "100%", height: "100%", }}> */}
+                        <li className={index} style={{ height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px" }} onMouseEnter={() => {
+                            // setTu(item.img);
+                            setNum(index);
+                        }}>
+                            {num == index ? <img src='/assets/images/leadership/red.png' style={{ width: "100%", height: "120%", position: "absolute", }} /> : ""}
+                            {num == index ? <img src='/assets/images/leadership/wangluo.png' style={{ width: "5%", height: "100%", position: "absolute", left: "-0.5%", top: "20%" }} /> : ""}
+
+                            <p style={{ position: "absolute", left: "5%" }} >{item.name}</p><p style={{ position: "absolute", right: "5%" }}>{item.name}</p></li>
+                        // {/* </div> */}
+                        // </div>
+                    )
+
+                })
+            }
+            </div >
+        )
+    }
     return (
         <>
-            <Module style={style}>
+            <Module style={style} title={"路面执法监控"}>
+                <div style={{ width: "100%", height: "65%" }}>
+                    <div style={{ width: "100%", height: "10%", position: "relative" }}>
+                        <img src='/assets/images/leadership/head.png' style={{ width: "15%", marginLeft: "5%" }} />
+                        <div style={{ position: "absolute", right: "5%", top: "130%" }}>
+                            <Select
+                                size={size}
+                                defaultValue="选择路段"
+                                onChange={handleChange}
+                                style={{
+                                    width: 100,
+                                    fontSize: "12px",
+                                    color: "#D8F0FF",
+                                }}
+                            >
+                                {children}
+                            </Select>
+                            {/* <div>{size}</div> */}
+
+                        </div>
+
+                    </div>
+                    <div style={{ width: "100%", height: "80%", position: "relative", backgroundColor: "red", top: "10%" }}>
+                        <Huadong />
+                    </div>
+                </div>
+                <div style={{ width: "100%", height: "35%" }}>
+                    <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: "34px", position: "absolute", top: "12px", left: "6%" }} />
+                    </div>
+                    <Lunbo
+                        canScroll={true}
+                        content={renderBody()}
+                        containerStyle={{ position: "relative", height: "100%", width: "90%", left: "5%", top: "5%" }}
+                        divHeight={"100%"}
+                        divId={"screen-slope"}
+                    />
+                </div>
             </Module>
         </>
     )

web/client/src/utils/webapi.js

@@ -8,17 +8,17 @@ export const ApiTable = {
     getEnterprisesMembers: 'enterprises/{enterpriseId}/members',
 
     //组织管理-用户管理-部门
-    getDepMessage: 'department',
+    getDepMessage: 'department',
-    createDepMessage: 'department',
+    createDepMessage: 'department',
-    updateDepMessage: 'department',
+    updateDepMessage: 'department',
-    delDepMessage: 'department/{depId}',
+    delDepMessage: 'department/{depId}',
-    //组织管理-用户管理-用户 
+    //组织管理-用户管理-用户 
-    getDepUser: 'department/{depId}/user',
+    getDepUser: 'department/{depId}/user',
-    createUser: 'department/user',
+    createUser: 'department/user',
-    updateUser: 'department/user/{userId}',
+    updateUser: 'department/user/{userId}',
-    delUser: 'department/user/{userIds}',
+    delUser: 'department/user/{userIds}',
 
-    resetPwd: 'department/user/{userId}/password',
+    resetPwd: 'department/user/{userId}/password',
 
 
     //用户权限
@@ -39,15 +39,16 @@ export const ApiTable = {
     compileReportRectifyDetail: 'report/rectify/detail',
 
     //运政管理
-    getOperaTional:'vehicle',
+    getOperaTional: 'vehicle',
-    getSpecificVehicle:'vehicle/specific',
+    getSpecificVehicle: 'vehicle/specific',
-    getHouseholds:'vehicle/business',
+    getHouseholds: 'vehicle/business',
     //道路管理
-    getRoadway:'road',
+    getRoadway: 'road',
-//桥梁管理
+    //桥梁管理
-getBridge:'bridge',
+    getBridge: 'bridge',
-//工程数据
+    //工程数据
-getProject:'project'
+    getProject: 'project',
+
 };
 
 export const RouteTable = {

web/package-lock.json

@@ -5114,6 +5114,14 @@
         "entities": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "4.0.4",
+      "resolved": "http://npm.anxinyun.cn/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "requires": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "domelementtype": {
       "version": "2.3.0",
       "resolved": "http://npm.anxinyun.cn/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -10789,6 +10797,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "4.0.2",
+      "resolved": "http://npm.anxinyun.cn/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "stack-trace": {
       "version": "0.0.10",
       "resolved": "http://npm.anxinyun.cn/stack-trace/-/stack-trace-0.0.10.tgz",
@@ -11053,6 +11066,15 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "swiper": {
+      "version": "8.3.1",
+      "resolved": "http://npm.anxinyun.cn/swiper/-/swiper-8.3.1.tgz",
+      "integrity": "sha512-oASYsulsERlbQVTZ8FjlTDJSN4YZwhp+AkvepOj8EOhgpvxzKoMpWpBPrk7ypkMioQUx6x2NPvkRU0Qv9mpS0A==",
+      "requires": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      }
+    },
     "swr": {
       "version": "1.3.0",
       "resolved": "http://npm.anxinyun.cn/swr/-/swr-1.3.0.tgz",

web/package.json

@@ -88,6 +88,7 @@
     "react-router-breadcrumbs-hoc": "^4.0.1",
     "react-sortable-hoc": "^2.0.0",
     "superagent": "^6.1.0",
+    "swiper": "^8.3.1",
     "uuid": "^8.3.1",
     "webpack-dev-server": "^3.11.2",
     "xlsx": "^0.16.9"