diff --git a/web/client/assets/images/leadership/diguang.png b/web/client/assets/images/leadership/diguang.png new file mode 100644 index 00000000..727c132e Binary files /dev/null and b/web/client/assets/images/leadership/diguang.png differ diff --git a/web/client/assets/images/leadership/handong.png b/web/client/assets/images/leadership/handong.png new file mode 100644 index 00000000..19947b09 Binary files /dev/null and b/web/client/assets/images/leadership/handong.png differ diff --git a/web/client/assets/images/leadership/head.png b/web/client/assets/images/leadership/head.png new file mode 100644 index 00000000..9eb1b2d8 Binary files /dev/null and b/web/client/assets/images/leadership/head.png differ diff --git a/web/client/assets/images/leadership/juxing.png b/web/client/assets/images/leadership/juxing.png new file mode 100644 index 00000000..a62244f0 Binary files /dev/null and b/web/client/assets/images/leadership/juxing.png differ diff --git a/web/client/assets/images/leadership/lan.png b/web/client/assets/images/leadership/lan.png new file mode 100644 index 00000000..0fce0bd9 Binary files /dev/null and b/web/client/assets/images/leadership/lan.png differ diff --git a/web/client/assets/images/leadership/lu.png b/web/client/assets/images/leadership/lu.png new file mode 100644 index 00000000..6baaa8c7 Binary files /dev/null and b/web/client/assets/images/leadership/lu.png differ diff --git a/web/client/assets/images/leadership/qiao.png b/web/client/assets/images/leadership/qiao.png new file mode 100644 index 00000000..0e6e1fc8 Binary files /dev/null and b/web/client/assets/images/leadership/qiao.png differ diff --git a/web/client/assets/images/leadership/red.png b/web/client/assets/images/leadership/red.png new file mode 100644 index 00000000..3fb42a29 Binary files /dev/null and b/web/client/assets/images/leadership/red.png differ diff --git a/web/client/assets/images/leadership/shezhi.png b/web/client/assets/images/leadership/shezhi.png new file mode 100644 index 00000000..98cf77e5 Binary files /dev/null and b/web/client/assets/images/leadership/shezhi.png differ diff --git a/web/client/assets/images/leadership/wangluo.png b/web/client/assets/images/leadership/wangluo.png new file mode 100644 index 00000000..db996543 Binary files /dev/null and b/web/client/assets/images/leadership/wangluo.png differ diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerLeft.js b/web/client/src/sections/quanju/containers/footer/leadership/centerLeft.js index 49e2c97b..b2c31804 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/centerLeft.js +++ b/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 Centerleftcentertop from "./centerleft/center-left-centertop" +import Centerleftcenter from "./centerleft/top" +import Centerleftcentertop from "./centerleft/bottom" import Centerleftbottom from "./centerleft/center-left-bottom" const CenterLeft = () => { diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/bottom.js new file mode 100644 index 00000000..f4f85635 --- /dev/null +++ b/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 + case 'handong': + return + case "qiaoliang": + return + } + })() + } + + ) +} +export default Leftcentertop \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-center.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-center.js deleted file mode 100644 index 08ff5043..00000000 --- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-center.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import Module from '../../../public/module' - -const Leftcenter = () => { - const style = { - height: "23%" - } - return ( - <> - -
-
- - ) -} -export default Leftcenter \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-centertop.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-centertop.js deleted file mode 100644 index 393e3164..00000000 --- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-centertop.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import Module from '../../../public/module' - -const Leftcentertop = () => { - const style = { height: "23%" } - return ( - <> - -
-
- - ) -} -export default Leftcentertop \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js index fada6e84..ced94483 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js +++ b/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 ( <> - +
+ +
+
+ +
) diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js new file mode 100644 index 00000000..673c4a15 --- /dev/null +++ b/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 ( + +
+ { + list.map((item, index) => { + return ( +
  • { + setBeijing(index) + // console.log(beijing); + }}> + {beijing == index ? : ""} + {beijing == index ? : ""} +

    {item.name}

    +

    {item.name}

    +

    {item.name}

    +

    {item.name}

  • + ) + }) + } +
    + ) + } + return ( + <> +
    + + +
    +
    + {/*

    {title || []}

    */} + + 离线详情 + {/* */} +
    + +
    + +
    + + ) +} +export default Right \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/handong.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/handong.js new file mode 100644 index 00000000..673c4a15 --- /dev/null +++ b/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 ( + +
    + { + list.map((item, index) => { + return ( +
  • { + setBeijing(index) + // console.log(beijing); + }}> + {beijing == index ? : ""} + {beijing == index ? : ""} +

    {item.name}

    +

    {item.name}

    +

    {item.name}

    +

    {item.name}

  • + ) + }) + } +
    + ) + } + return ( + <> +
    + + +
    +
    + {/*

    {title || []}

    */} + + 离线详情 + {/* */} +
    + +
    + +
    + + ) +} +export default Right \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/lunbo.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/lunbo.js index 6bf6d406..e992fb0d 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/lunbo/lunbo.js +++ b/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); } diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/qiqoliang.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/qiqoliang.js new file mode 100644 index 00000000..673c4a15 --- /dev/null +++ b/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 ( + +
    + { + list.map((item, index) => { + return ( +
  • { + setBeijing(index) + // console.log(beijing); + }}> + {beijing == index ? : ""} + {beijing == index ? : ""} +

    {item.name}

    +

    {item.name}

    +

    {item.name}

    +

    {item.name}

  • + ) + }) + } +
    + ) + } + return ( + <> +
    + + +
    +
    + {/*

    {title || []}

    */} + + 离线详情 + {/* */} +
    + +
    + +
    + + ) +} +export default Right \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/top.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/top.js new file mode 100644 index 00000000..96d51507 --- /dev/null +++ b/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 ( + <> +
    + {/*
    { + onClick("build") + }}>建设
    */} +
    { + onClick("daolu") + }} > + { + tabKey == "daolu" ? : "" + } +
    + +
    +
    +

    道路统计公里

    +

    2333.4

    +
    +
    +
    { + onClick("handong") + }} > + { + tabKey == "handong" ? : "" + } +
    + +
    +
    +

    涵洞统计

    +

    2333.4

    +
    +
    +
    { + onClick("qiaoliang") + }} > + { + tabKey == "qiaoliang" ? : "" + } +
    + +
    +
    +

    桥梁统计

    +

    2333.4

    +
    +
    +
    + + ) +} +export default Leftcenter \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js index 906278be..3b856b15 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js @@ -9,10 +9,12 @@ const Leftbottomecharts = () => { title: { }, tooltip: { + formatter: " {b}年
    施工了{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 ( <>
    -

    公里数Km

    +

    公里

    diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js new file mode 100644 index 00000000..ab50b76f --- /dev/null +++ b/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}
    {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 ( + <> +
    +
    Km/h
    +
    当前
    + {/*
    */} +
    +
    +

    畅通

    +

    0-30

    +
    +
    +

    缓慢

    +

    30-50

    +
    +
    +

    拥堵

    +

    50-70

    +
    +
    +

    严重拥堵

    +

    70-100

    +
    +
    + + ); +} + +export default Lefttopecharts \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js b/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js index 052e59c4..19dd88b8 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js +++ b/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 ( //
    // {/*
    */} -
  • { +
  • { setTu(item.img); setNum(index + 1); setName(item.name) // console.log(list); - }}>{item.name}
  • + }}> +

    {item.name}

    + + // {/*
    */} //
    ) diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js b/web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js index c486d189..d4a3e9cb 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js +++ b/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 ( <> -
    -
    +
    +

    { }}>预测明日

    55.2Km/h

    -
    -
    +
    + +
    diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js b/web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js new file mode 100644 index 00000000..e740f270 --- /dev/null +++ b/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 ( +
    +
    { this.stop() }} //鼠标进入停止自动播放 + onMouseLeave={() => { this.start() }} //鼠标退出自动播放 + > +
      + { + this.state.imgs.map((value, index) => { + return ( +
    • +
      {value[0].name}
      +
      {value[1].name}
      +
      {value[2].name}
      +
      {value[3].name}
      +
    • + ) + }) + } +
    + {/*
      + { + this.state.imgs.map((value, index) => { + return ( +
    • { this.change(index) }}> +
    • ) + }) + } + +
    */} +
    + { this.previous(e) }}>左 + { this.next(e) }}>右 +
    +
    +
    + ) + } + 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; \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/left.less b/web/client/src/sections/quanju/containers/footer/leadership/right/left.less index b5333c1a..dcf56b90 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/right/left.less +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/left.less @@ -1,3 +1,95 @@ li{ list-style-type:none -} \ No newline at end of file +} + +.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); +// } \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/lunbo copy.js b/web/client/src/sections/quanju/containers/footer/leadership/right/lunbo copy.js new file mode 100644 index 00000000..f6230ea7 --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/lunbo copy.js @@ -0,0 +1,9 @@ +import React from 'react' + +function lunbo() { + return ( +
    lunbo copy
    + ) +} + +export default lunbo \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js index 470a4c58..0558c40e 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js @@ -42,9 +42,9 @@ const Rightbottom = () => { //
    {list.map((item, index) => { - return
  • { - setBeijing(item.name) - console.log(beijing); + return
  • { + setBeijing(index) + // console.log(beijing); }}>
    {item.name}
    {item.chaoxian}
    diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js b/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js index 239b7815..ea666b61 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js +++ b/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(); + } + 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 ( +
    { + list.map((item, index) => { + return ( + //
    + // {/*
    */} +
  • { + // setTu(item.img); + setNum(index); + }}> + {num == index ? : ""} + {num == index ? : ""} + +

    {item.name}

    {item.name}

  • + // {/*
    */} + //
    + ) + + }) + } +
    + ) + } return ( <> - + +
    +
    + +
    + + {/*
    {size}
    */} + +
    + +
    +
    + +
    +
    +
    +
    + {/*

    {title || []}

    */} + + 离线详情 + +
    + +
    ) diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js index 7e36e0fd..4cd08c87 100644 --- a/web/client/src/utils/webapi.js +++ b/web/client/src/utils/webapi.js @@ -7,18 +7,18 @@ export const ApiTable = { getEnterprisesMembers: 'enterprises/{enterpriseId}/members', - //组织管理-用户管理-部门 -    getDepMessage: 'department', -    createDepMessage: 'department', -    updateDepMessage: 'department', -    delDepMessage: 'department/{depId}', -    //组织管理-用户管理-用户 -    getDepUser: 'department/{depId}/user', -    createUser: 'department/user', -    updateUser: 'department/user/{userId}', -    delUser: 'department/user/{userIds}', + //组织管理-用户管理-部门 + getDepMessage: 'department', + createDepMessage: 'department', + updateDepMessage: 'department', + delDepMessage: 'department/{depId}', + //组织管理-用户管理-用户 + getDepUser: 'department/{depId}/user', + createUser: 'department/user', + updateUser: 'department/user/{userId}', + 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', - getSpecificVehicle:'vehicle/specific', - getHouseholds:'vehicle/business', + getOperaTional: 'vehicle', + getSpecificVehicle: 'vehicle/specific', + getHouseholds: 'vehicle/business', //道路管理 - getRoadway:'road', -//桥梁管理 -getBridge:'bridge', -//工程数据 -getProject:'project' + getRoadway: 'road', + //桥梁管理 + getBridge: 'bridge', + //工程数据 + getProject: 'project', + }; export const RouteTable = { diff --git a/web/package-lock.json b/web/package-lock.json index ee58156f..d9bc70d5 100644 --- a/web/package-lock.json +++ b/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", diff --git a/web/package.json b/web/package.json index e6d11a96..99ae3345 100644 --- a/web/package.json +++ b/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"