diff --git a/web/client/assets/images/gis/marker_icon_gongjiao.png b/web/client/assets/images/gis/marker_icon_gongjiao.png new file mode 100644 index 00000000..db1cbeb6 Binary files /dev/null and b/web/client/assets/images/gis/marker_icon_gongjiao.png differ diff --git a/web/client/assets/images/gis/marker_icon_jianshe.png b/web/client/assets/images/gis/marker_icon_jianshe.png new file mode 100644 index 00000000..83287ff7 Binary files /dev/null and b/web/client/assets/images/gis/marker_icon_jianshe.png differ diff --git a/web/client/assets/images/gis/marker_icon_yanghu.png b/web/client/assets/images/gis/marker_icon_yanghu.png new file mode 100644 index 00000000..2f6068f0 Binary files /dev/null and b/web/client/assets/images/gis/marker_icon_yanghu.png differ diff --git a/web/client/assets/images/gis/marker_icon_zaizhong.png b/web/client/assets/images/gis/marker_icon_zaizhong.png new file mode 100644 index 00000000..0837449e Binary files /dev/null and b/web/client/assets/images/gis/marker_icon_zaizhong.png differ diff --git a/web/client/assets/images/leadership/fake/1.jpg b/web/client/assets/images/leadership/fake/1.jpg new file mode 100644 index 00000000..e5f4b844 Binary files /dev/null and b/web/client/assets/images/leadership/fake/1.jpg differ diff --git a/web/client/assets/images/leadership/fake/2.jpg b/web/client/assets/images/leadership/fake/2.jpg new file mode 100644 index 00000000..e56c3aef Binary files /dev/null and b/web/client/assets/images/leadership/fake/2.jpg differ diff --git a/web/client/assets/images/leadership/fake/3.jpg b/web/client/assets/images/leadership/fake/3.jpg new file mode 100644 index 00000000..21a84888 Binary files /dev/null and b/web/client/assets/images/leadership/fake/3.jpg differ diff --git a/web/client/assets/images/leadership/fake/4.jpg b/web/client/assets/images/leadership/fake/4.jpg new file mode 100644 index 00000000..496aebd2 Binary files /dev/null and b/web/client/assets/images/leadership/fake/4.jpg differ diff --git a/web/client/assets/images/leadership/fake/5.jpg b/web/client/assets/images/leadership/fake/5.jpg new file mode 100644 index 00000000..2a0870e4 Binary files /dev/null and b/web/client/assets/images/leadership/fake/5.jpg differ diff --git a/web/client/assets/images/quanju/fake/gj1.png b/web/client/assets/images/quanju/fake/gj1.png new file mode 100644 index 00000000..f8a4cb8e Binary files /dev/null and b/web/client/assets/images/quanju/fake/gj1.png differ diff --git a/web/client/assets/images/quanju/fake/gj2.png b/web/client/assets/images/quanju/fake/gj2.png new file mode 100644 index 00000000..75fd3569 Binary files /dev/null and b/web/client/assets/images/quanju/fake/gj2.png differ diff --git a/web/client/assets/images/quanju/fake/gj3.png b/web/client/assets/images/quanju/fake/gj3.png new file mode 100644 index 00000000..7ed46859 Binary files /dev/null and b/web/client/assets/images/quanju/fake/gj3.png differ diff --git a/web/client/assets/images/quanju/fake/gj4.png b/web/client/assets/images/quanju/fake/gj4.png new file mode 100644 index 00000000..2646928b Binary files /dev/null and b/web/client/assets/images/quanju/fake/gj4.png differ diff --git a/web/client/assets/images/quanju/fake/gj5.png b/web/client/assets/images/quanju/fake/gj5.png new file mode 100644 index 00000000..4c50e2c1 Binary files /dev/null and b/web/client/assets/images/quanju/fake/gj5.png differ diff --git a/web/client/src/sections/quanju/containers/example.js b/web/client/src/sections/quanju/containers/example.js index 5a40535b..a10e1106 100644 --- a/web/client/src/sections/quanju/containers/example.js +++ b/web/client/src/sections/quanju/containers/example.js @@ -11,53 +11,48 @@ import Gis from './footer/gis/gis'; const MAPID = 'screenGis' const Example = (props) => { - const { dispatch, actions, user, loading } = props - const [tabKey, setTabKey] = useState('leadership') - const [mapObj, setMapObj] = useState(); - - // 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 ( - -
{ + setTabKey(tab) + // dispatch({ type: 'TAB-CHANGE', data: tab }) + } + + + + return ( + +
+ }}> -
-
-
-
- -
- -
+
+
+
+
+ +
- - ) + +
+ + ) } -function mapStateToProps(state) { - const { auth, global, members } = state; - return { - loading: members.isRequesting, - user: auth.user, - actions: global.actions, - members: members.data - }; +function mapStateToProps (state) { + const { auth, global, members } = state; + return { + loading: members.isRequesting, + user: auth.user, + actions: global.actions, + members: members.data + }; } export default connect(mapStateToProps)(Example); diff --git a/web/client/src/sections/quanju/containers/footer/gis/gis.js b/web/client/src/sections/quanju/containers/footer/gis/gis.js index f711e91e..25ac9d02 100644 --- a/web/client/src/sections/quanju/containers/footer/gis/gis.js +++ b/web/client/src/sections/quanju/containers/footer/gis/gis.js @@ -1,52 +1,568 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import { connect } from 'react-redux'; import Bounds from './bounds'; -const MAPID = 'screenGis' -const Gis = (props) => { +const markerArr = { + guanli: [{ + longitude: 115.910831, + latitude: 28.354804, + title: '广福非现场检测点', + data: [{ + title: '检测', + value: '27970 条' + }, { + title: '已处理', + value: '3.47 %' + }] + }, { + longitude: 115.944728, + latitude: 28.506873, + title: '向塘非现场检测点', + data: [{ + title: '检测', + value: '12477 条' + }, { + title: '已处理', + value: '4.1 %' + }] + }, { + longitude: 116.194391, + latitude: 28.652307, + title: '泾口非现场检测点', + data: [{ + title: '检测', + value: '6789 条' + }, { + title: '已处理', + value: '7.14 %' + }] + }, { + longitude: 115.967866, + latitude: 28.564967, + title: '八一非现场检测点', + data: [{ + title: '检测', + value: '3125 条' + }, { + title: '已处理', + value: '8.8 %' + }] + }], + build: [{ + longitude: 115.972472, + latitude: 28.564967, + title: '程扬线至万王电站公路重建工程', + data: [{ + title: '里程(公里)', + value: '3.089' + }, { + title: '建设单位', + value: '南昌县南新乡人民政府' + }] + }, { + longitude: 115.893419, + latitude: 28.547622, + title: '村委会至下徐公路重建工程', + data: [{ + title: '里程(公里)', + value: '1.586' + }, { + title: '建设单位', + value: '昌县南新乡人民政府' + }] + }, { + longitude: 116.094463, + latitude: 28.754601, + title: '滁北大桥至塘里龚家公路及支线重建工程', + data: [{ + title: '里程(公里)', + value: '4.231' + }, { + title: '建设单位', + value: '蒋巷镇人民政府' + }] + }, { + longitude: 116.026707, + latitude: 28.475733, + title: '塘新公路至西联公路改造工程', + data: [{ + title: '里程(公里)', + value: '1.8' + }, { + title: '建设单位', + value: '塘南镇人民政府' + }] + }, { + longitude: 115.898934, + latitude: 28.425624, + title: '滁协线至梓溪公路重建工程', + data: [{ + title: '里程(公里)', + value: '4.2' + }, { + title: '建设单位', + value: '塘南镇人民政府' + }] + }, { + longitude: 116.050607, + latitude: 28.402986, + title: '德昌高速泾口连接线至东升公路拓宽改造工程', + data: [{ + title: '里程(公里)', + value: '3.322' + }, { + title: '建设单位', + value: '泾口乡人民政府' + }] + }, { + longitude: 115.956845, + latitude: 28.361741, + title: '马泾公路至岗背村公路拓宽改造工程', + data: [{ + title: '里程(公里)', + value: '2.82' + }, { + title: '建设单位', + value: '泾口乡人民政府' + }] + }, { + longitude: 116.04693, + latitude: 28.317242, + title: '幽兰至少城公路提升改造工程', + data: [{ + title: '里程(公里)', + value: '7.8' + }, { + title: '建设单位', + value: '昌县幽兰镇人民政府' + }] + }, { + longitude: 115.80793, + latitude: 28.444215, + title: '渡头至郭上公路改造工程', + data: [{ + title: '里程(公里)', + value: '5.492' + }, { + title: '建设单位', + value: '武阳镇人民政府' + }] + }, { + longitude: 116.09473, + latitude: 28.471693, + title: '湾庄线至南洲公路改造工程', + data: [{ + title: '里程(公里)', + value: '1.746' + }, { + title: '建设单位', + value: '塔城乡人民政府' + }] + }, { + longitude: 116.091972, + latitude: 28.369829, + title: '湾庄线至青岚湖公路改造工程', + data: [{ + title: '里程(公里)', + value: '1.962' + }, { + title: '建设单位', + value: '塔城乡人民政府' + }] + }, { + longitude: 115.872276, + latitude: 28.555696, + title: '新坊至涂埠公路改造工程', + data: [{ + title: '里程(公里)', + value: '2.08' + }, { + title: '建设单位', + value: '八一乡人民政府' + }] + }, { + longitude: 115.982584, + latitude: 28.573458, + title: '埂头至后曲公路改造工程', + data: [{ + title: '里程(公里)', + value: '2.359' + }, { + title: '建设单位', + value: '八一乡人民政府' + }] + }, { + longitude: 115.878711, + latitude: 28.597673, + title: '105国道至涂家公路重建工程', + data: [{ + title: '里程(公里)', + value: '2.19' + }, { + title: '建设单位', + value: '银三角管委会' + }] + }, { + longitude: 116.023949, + latitude: 28.499163, + title: '剑霞至团结公路改造工程', + data: [{ + title: '里程(公里)', + value: '0.398' + }, { + title: '建设单位', + value: '南昌县向塘镇人民政府' + }] + },], + operation: [{ + longitude: 115.83529, + latitude: 28.583314, + title: '赣AB8019', + data: [{ + title: '所属车队', + value: '四车队' + }, { + title: '所属线路', + value: '106路' + }] + }, { + longitude: 115.956477, + latitude: 28.421436, + title: '赣AB8280', + data: [{ + title: '所属车队', + value: '三车队' + }, { + title: '所属线路', + value: '23路' + }] + }, { + longitude: 115.954861, + latitude: 28.544287, + title: '赣AC2987', + data: [{ + title: '所属车队', + value: '三车队' + }, { + title: '所属线路', + value: '118路' + }] + }, { + longitude: 115.974251, + latitude: 28.513765, + title: '赣AB8235', + data: [{ + title: '所属车队', + value: '二车队' + }, { + title: '所属线路', + value: '109路' + }] + }, { + longitude: 116.008991, + latitude: 28.478264, + title: '赣AE0588', + data: [{ + title: '所属车队', + value: '一车队' + }, { + title: '所属线路', + value: '15路' + }] + }, { + longitude: 116.074432, + latitude: 28.388747, + title: '赣AD3176', + data: [{ + title: '所属车队', + value: '三车队' + }, { + title: '所属线路', + value: '112路' + }] + }, { + longitude: 115.863567, + latitude: 28.384482, + title: '赣AB8273', + data: [{ + title: '所属车队', + value: '三车队' + }, { + title: '所属线路', + value: '122路' + }] + }, { + longitude: 115.973443, + latitude: 28.285637, + title: '赣AC2935', + data: [{ + title: '所属车队', + value: '一车队' + }, { + title: '所属线路', + value: '131路' + }] + }, { + longitude: 116.055042, + latitude: 28.500986, + title: '赣A03871D', + data: [{ + title: '所属车队', + value: '一车队' + }, { + title: '所属线路', + value: '16路' + }] + }, { + longitude: 115.898307, + latitude: 28.579057, + title: '赣A09606D', + data: [{ + title: '所属车队', + value: '四车队' + }, { + title: '所属线路', + value: '11路' + }] + }, { + longitude: 115.990409, + latitude: 28.570543, + title: '赣AN9900', + data: [{ + title: '所属车队', + value: '一车队' + }, { + title: '所属线路', + value: '116路' + }] + },], + conserve: [{ + longitude: 115.948963, + latitude: 28.556655, + title: '沙潭至五星', + data: [{ + title: '养护时间', + value: '2022.04.09 14:16' + }, { + title: '养护内容', + value: '刷石灰' + }] + }, { + longitude: 115.92641, + latitude: 28.56433, + title: '滁槎至协城', + data: [{ + title: '养护时间', + value: '2022.05.21 09:31' + }, { + title: '养护内容', + value: '砍树枝' + }] + }, { + longitude: 115.938906, + latitude: 28.536912, + title: '瓜山至广福', + data: [{ + title: '养护时间', + value: '2022.06.01 12:02' + }, { + title: '养护内容', + value: '打草' + }] + }, { + longitude: 115.959316, + latitude: 28.576649, + title: '泾口-塘山', + data: [{ + title: '养护时间', + value: '2022.06.05 09:42' + }, { + title: '养护内容', + value: '砍树枝' + }] + }, { + longitude: 115.910689, + latitude: 28.344683, + title: '罗舍至泗洪', + data: [{ + title: '养护时间', + value: '2022.06.08 07:30' + }, { + title: '养护内容', + value: '打草' + }] + }, { + longitude: 115.784252, + latitude: 28.292816, + title: '渔业至万州', + data: [{ + title: '养护时间', + value: '2022.06.14 08:14' + }, { + title: '养护内容', + value: '清路基' + }] + }, { + longitude: 115.853238, + latitude: 28.436127, + title: '向塘-西洛', + data: [{ + title: '养护时间', + value: '2022.06.16 07:03' + }, { + title: '养护内容', + value: '扫杂草' + }] + }, { + longitude: 116.011835, + latitude: 28.479896, + title: '协成-塘南', + data: [{ + title: '养护时间', + value: '2022.05.25 16:01' + }, { + title: '养护内容', + value: '砍树枝' + }] + }, { + longitude: 115.996189, + latitude: 28.499273, + title: '小蓝-东新', + data: [{ + title: '养护时间', + value: '2022.05.24 08:31' + }, { + title: '养护内容', + value: '砍树枝' + }] + }, { + longitude: 115.955651, + latitude: 28.588613, + title: '新坊-土坊', + data: [{ + title: '养护时间', + value: '2022.05.24 16:44' + }, { + title: '养护内容', + value: '砍树枝' + }] + }, { + longitude: 115.958495, + latitude: 28.432375, + title: '合乞-璜溪', + data: [{ + title: '养护时间', + value: '2022.05.27 07:17' + }, { + title: '养护内容', + value: '打草' + }] + },] +} - const [mapObj, setMapObj] = useState(); +const markerIcon = { + build: '/assets/images/gis/marker_icon_jianshe.png', + guanli: '/assets/images/gis/marker_icon_zaizhong.png', + operation: '/assets/images/gis/marker_icon_gongjiao.png', + conserve: '/assets/images/gis/marker_icon_yanghu.png' +} + +const MAPID = 'screenGis' +const Gis = ({ tabKey }) => { + console.log(tabKey); + const [mapObj, setMapObj] = useState(); + const [markers, serMarkers] = useState([]) + const curInfoWindow = useRef(null) + useEffect(() => { + if (AMap) loadMap(); + return () => { + if (window.local_) { + window.local_ = null + } + if (mapObj) + mapObj.clearMap(); + } + }, [true]) - useEffect(() => { - if (AMap) loadMap(); - return () => { - if (window.local_) { - window.local_ = null + useEffect(() => { + if (mapObj) { + if (markers.length) { + mapObj.remove(markers) + } + if (curInfoWindow.current) { + curInfoWindow.current.close(); + } + if (tabKey && markerArr[tabKey]) { + let icon = new AMap.Icon({ + size: new AMap.Size(32, 40), // 图标尺寸 + image: markerIcon[tabKey], // Icon的图像 + // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等 + imageSize: new AMap.Size(32, 40) // 根据所设置的大小拉伸或压缩图片 + }); + let nextMarkers = markerArr[tabKey]?.map(mk => { + let marker = new AMap.Marker({ + position: new AMap.LngLat(mk.longitude, mk.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] + title: mk.title, + icon: icon, + }) + marker.on('click', function (ev) { + console.log(ev); + const infoWindow = new AMap.InfoWindow({ + anchor: 'bottom-center', + content: ` +
+
+ ${mk.title} +
+
+ ${mk.data.map(t => { + return `

${t.title}

:

${t.value}

` + })} +
+
+ ` //传入 dom 对象，或者 html 字符串 + }); + infoWindow.open(mapObj, [mk.longitude, mk.latitude]); + curInfoWindow.current = infoWindow + }) + return marker + }) + mapObj.add(nextMarkers); + serMarkers(nextMarkers) + } } - if (mapObj) - mapObj.clearMap(); - } - }, [true]) - - const loadMap = () => { - const map = new AMap.Map(MAPID, { - resizeEnable: true, - center: [115.99255, 28.503617],//地图中心点，初始定位加载显示楼块 - zoom: 8,//地图显示的缩放级别 - zooms: [8, 18], - pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度 - viewMode: '3D', // 地图模式 - mapStyle: 'amap://styles/fb26776387242721c2fc32e2cb1daccc', - }); - - let windowOnload = false; - map.on('complete', function () { - if (!window.local_) { - window.local_ = new Loca.Container({ map }); - setMapObj(map); + }, [mapObj, tabKey]) + + const loadMap = () => { + const map = new AMap.Map(MAPID, { + resizeEnable: true, + center: [115.99255, 28.503617],//地图中心点，初始定位加载显示楼块 + zoom: 8,//地图显示的缩放级别 + zooms: [8, 18], + pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度 + viewMode: '3D', // 地图模式 + mapStyle: 'amap://styles/fb26776387242721c2fc32e2cb1daccc', + }); + + let windowOnload = false; + map.on('complete', function () { + if (!window.local_) { + window.local_ = new Loca.Container({ map }); + setMapObj(map); + } + + }); + window.onload = function () { + windowOnload = true; } - }); - window.onload = function () { - windowOnload = true; - } - }; - - return ( -
-
- {mapObj ? : ''} -
- ) + }; + + return ( +
+
+ {mapObj ? : ''} +
+ ) } 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 c6c6bf1c..542a8743 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 @@ -4,99 +4,92 @@ import Lunbo from "../right/lunbo" // import "./left.less" const Leftcenter = () => { - const style = { height: "30%", marginTop: "5%" } - // const hualun = "auto" - const [num, setNum] = useState(1); - const [tu, setTu] = useState(""); - const [name, setName] = useState(""); - const [list, setList] = useState([ - { name: '静夜思', img: "/assets/images/leadership/shiyantu.png" }, - { name: '唐-李白', img: "/assets/images/leadership/shiyantu.png" }, - { name: '窗前明月光', img: "/assets/images/leadership/shiyantu.png" }, - { name: '疑是地上霜', img: "/assets/images/leadership/shiyantu.png" }, - { name: '举头望明月', img: "/assets/images/leadership/shiyantu.png" }, - { name: '低头思故乡', img: "/assets/images/leadership/shiyantu.png" }, - { name: '静夜思', img: "/assets/images/leadership/shiyantu.png" }, - { name: '唐-李白', img: "/assets/images/leadership/shiyantu.png" }, - { name: '窗前明月光', img: "/assets/images/leadership/shiyantu.png" }, - { name: '疑是地上霜', img: "/assets/images/leadership/shiyantu.png" }, - { name: '举头望明月', img: "/assets/images/leadership/shiyantu.png" }, - { name: '低头思故乡', img: "/assets/images/leadership/shiyantu.png" }, - ]) - useEffect(() => { - const timer = setInterval(() => { - if (num == list.length) { - setNum(1); - setTu(list[0].img); - } else { - setNum(num + 1); - setTu(list[num].img); - } - }, 2000); - return () => clearInterval(timer); - }, [num]); - const renderBody = () => { - return ( -
{ - list.map((item, index) => { - return ( - //
- // {/*
*/} -
  • { - setTu(item.img); - setNum(index + 1); - setName(item.name) - // console.log(list); - }}> -

    {item.name}

    - -
    • - // {/*
    */} - //
    - ) + const style = { height: "30%", marginTop: "5%" } + // const hualun = "auto" + const [num, setNum] = useState(1); + const [tu, setTu] = useState(""); + const [name, setName] = useState(""); + const [list, setList] = useState([ + { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" }, + { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" }, + { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" }, + { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" }, + { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" }, + // { name: '小蓝至东新', img: "/assets/images/leadership/shiyantu.png" }, + ]) + useEffect(() => { + const timer = setInterval(() => { + if (num == list.length) { + setNum(1); + setTu(list[0].img); + } else { + setNum(num + 1); + setTu(list[num].img); + } + }, 2000); + return () => clearInterval(timer); + }, [num]); + const renderBody = () => { + return ( +
    { + list.map((item, index) => { + return ( + //
    + // {/*
    */} +
  • { + setTu(item.img); + setNum(index + 1); + setName(item.name) + // console.log(list); + }}> +

    {item.name}

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

    {title || []}

    */} - - 主要路段拥堵情况分析 - -
    -
    -
    - {/* { - list.map((item, index) => { - return index + 1 == num ? -
    - - -

    - - {item.name}

    -
    : "" + }) + } +
    + ) + } + return ( + <> +
    + {/*

    {title || []}

    */} + + 主要路段拥堵情况分析 + +
    +
    +
    + { + list.map((item, index) => { + return index + 1 == num ? +
    - }) + +

    + + {item.name}

    +
    : "" - } */} -
    - {/* */} + }) + }
    - - ) + +
    + + ) } export default Leftcenter \ No newline at end of file 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 index 74a61d14..77ec7cc0 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js @@ -1,184 +1,182 @@ 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; - } + 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++; + } else { + j++; + x = 0; + arr1[j][x] = arr[i]; + 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, // 前后按钮显示 - // arr1: "" - } - // console.log(this.state.imgs); - this.state.imgs = this.chunk((this.state.shuzu), 4) - } + constructor() { + super(); + this.state = { + shuzu: [ + { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" }, + { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" }, + { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" }, + { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" }, + { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" }, + { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" }, + { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" }, + { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" }, + { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" }, + { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" }, + ], + imgs: [], + showIndex: 0, //显示第几个图片 + timer: null, // 定时器 + show: false, // 前后按钮显示 + // arr1: "" + } + // console.log(this.state.imgs); + this.state.imgs = this.chunk((this.state.shuzu), 4) + } + render () { + return ( +
    +
    { this.stop() }} //鼠标进入停止自动播放 + onMouseLeave={() => { this.start() }} //鼠标退出自动播放 + > +
      + { + this.state.imgs.map((value, index) => { + return ( +
    • +
      +
      +
      + + {value[0]?.name} +
      +
      - - render() { - return ( -
      -
      { this.stop() }} //鼠标进入停止自动播放 - onMouseLeave={() => { this.start() }} //鼠标退出自动播放 - > -
        - { - - this.state.imgs.map((value, index) => { - return ( -
      • -
        -
        -
        - - {value[0]?.name} -
        -
        - -
        - {value[1]?.name ?
        -
        -
        - - {value[1]?.name} -
        -
        -
        : ""} - {value[2]?.name ?
        -
        -
        - - {value[2]?.name} -
        -
        -
        : ""} - {value[3]?.name ?
        -
        -
        - - {value[3]?.name} -
        -
        -
        : ""} - {/*
        {value[1].name}
        +
      + {value[1]?.name ?
      +
      +
      + + {value[1]?.name} +
      +
      +
      : ""} + {value[2]?.name ?
      +
      +
      + + {value[2]?.name} +
      +
      +
      : ""} + {value[3]?.name ?
      +
      +
      + + {value[3]?.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) }}> - - -
    -
    +
    + { this.previous(e) }}> + + + { this.next(e) }}> + + +
    - ) - } - componentDidMount() { //一开始自动播放 - this.start(); - } +
    + ) + } + componentDidMount () { //一开始自动播放 + this.start(); + } - componentWillUnmount() { //销毁前清除定时器 - this.stop(); - } - stop = () => { //暂停 - let { timer } = this.state; - clearInterval(timer); - } - start = () => { //开始 - let { timer } = this.state; - timer = setInterval(() => { - this.next(); - }, 300000); - 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 - }) - } + componentWillUnmount () { //销毁前清除定时器 + this.stop(); + } + stop = () => { //暂停 + let { timer } = this.state; + clearInterval(timer); + } + start = () => { //开始 + let { timer } = this.state; + timer = setInterval(() => { + this.next(); + }, 300000); + 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/right-top.js b/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js index 33f01995..c46e0de6 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 @@ -6,125 +6,129 @@ 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); + 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) + }; + + const [list, setList] = useState([ + { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" }, + { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" }, + { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" }, + { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" }, + { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" }, + { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" }, + { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" }, + { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" }, + { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" }, + { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" }, + ]) + for (let i = 0; i < list.length; i++) { + children.push(); + } + + // 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); }} onMouseLeave={() => { - setNum() + setNum() }}> - {num == index ? : ""} - {num == index ? : ""} + {num == index ? : ""} + {num == index ? : ""} -

    {item.name}

    {item.name}

    • - // {/*
    */} - //
    - ) +

    {item.name}

    +

    {item.name}

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

    监控总数

    129

    -

    在线率

    88.87%

    */} -
    - {/* */} + +
    +

    监控总数

    129

    +

    在线率

    88.87%

    +
    + -
    - {/* */} - {/*
    {size}
    */} +
    + +
    {size}
    -
    +
    -
    -
    - {/* */} -
    -
    -
    -
    - {/*

    {title || []}

    */} - - 离线详情 - -
    - {/* */} - {/* */} - {/* */} -
    +
    +
    + +
    +
    +
    +
    + {/*

    {title || ''}

    */} + + 离线详情 + +
    + + + +
    -     + - - ) + + ) } export default Righttop \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/operation/right.js b/web/client/src/sections/quanju/containers/footer/operation/right.js index 87407e3a..e5cc28db 100644 --- a/web/client/src/sections/quanju/containers/footer/operation/right.js +++ b/web/client/src/sections/quanju/containers/footer/operation/right.js @@ -1,71 +1,71 @@ import React, { useState } from 'react' -// import { Carousel } from 'antd'; +import { Carousel } from 'antd'; import Module from '../../public/module' const Right = () => { - // const [dataLists, setDataList] = useState([ - // { - // route: '147', - // plate: '赣APJ090' - // }, { - // route: '166', - // plate: '赣APJ087' - // }, { - // route: '171', - // plate: '赣APJ184' - // }, { - // route: '186', - // plate: '赣APJ241' - // }, { - // route: '199', - // plate: '赣APJ337' - // } - // ]) - const style = { height: "97%", marginTop: "3%" } - return ( -
    - -
    - {/* - { - dataLists.map((data, index) => ( -
    -
    - - -

    所属线路

    -

    {data.route}

    -

    车辆牌照号

    -
    {data.plate}
    -     -
    -
    -
    -
    -
    -
    -
    - )) - } -     */} -
    -     -
    - ) + const [dataLists, setDataList] = useState([ + { + route: '147', + plate: '赣APJ090' + }, { + route: '166', + plate: '赣APJ087' + }, { + route: '171', + plate: '赣APJ184' + }, { + route: '186', + plate: '赣APJ241' + }, { + route: '199', + plate: '赣APJ337' + } + ]) + const style = { height: "97%", marginTop: "3%" } + return ( +
    + +
    + + { + dataLists.map((data, index) => ( +
    +
    + + +

    所属线路

    +

    {data.route}

    +

    车辆牌照号

    +
    {data.plate}
    +     +
    +
    +
    +
    +
    +
    +
    + )) + } +     +
    +     +
    + ) } export default Right \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/heand/style.less b/web/client/src/sections/quanju/containers/heand/style.less index 13e6d2ec..14447bb7 100644 --- a/web/client/src/sections/quanju/containers/heand/style.less +++ b/web/client/src/sections/quanju/containers/heand/style.less @@ -1,29 +1,40 @@ -.tabKey-map{ - width: 12%; - height: 4.7vh; - text-align: center; - position: absolute; - top: 3vh; - a{ - color: #FFFFFF; - font-size: 2vh; - font-family: PingFangSC-Medium, PingFang SC; - line-height: 4.7vh; - font-weight: 500; - } +.tabKey-map { + width: 12%; + height: 4.7vh; + text-align: center; + position: absolute; + top: 3vh; + + a { + color: #FFFFFF; + font-size: 2vh; + font-family: PingFangSC-Medium, PingFang SC; + line-height: 4.7vh; + font-weight: 500; + } } -.notabKey{ - width:12%; - height: 4.7vh; - position: absolute; - top: 3vh; - text-align: center; - a{ - color: #6593c6; - font-size: 2vh; - font-family: PingFangSC-Medium, PingFang SC; - line-height: 4.7vh; - font-weight: 500; - } - + +.notabKey { + width: 12%; + height: 4.7vh; + position: absolute; + top: 3vh; + text-align: center; + + a { + color: #6593c6; + font-size: 2vh; + font-family: PingFangSC-Medium, PingFang SC; + line-height: 4.7vh; + font-weight: 500; + } + +} + +.amap-info-content { + padding: 0; +} + +.amap-info-sharp { + display: none; } \ No newline at end of file