21 changed files with 1052 additions and 535 deletions
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 960 KiB |
|
After Width: | Height: | Size: 383 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 187 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 231 KiB |
|
After Width: | Height: | Size: 260 KiB |
|
After Width: | Height: | Size: 214 KiB |
@ -1,52 +1,568 @@ |
|||||
import React, { useEffect, useState } from 'react'; |
import React, { useEffect, useState, useRef } from 'react'; |
||||
import { connect } from 'react-redux'; |
import { connect } from 'react-redux'; |
||||
import Bounds from './bounds'; |
import Bounds from './bounds'; |
||||
|
|
||||
const MAPID = 'screenGis' |
const markerArr = { |
||||
const Gis = (props) => { |
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(() => { |
useEffect(() => { |
||||
if (AMap) loadMap(); |
if (mapObj) { |
||||
return () => { |
if (markers.length) { |
||||
if (window.local_) { |
mapObj.remove(markers) |
||||
window.local_ = null |
} |
||||
|
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: ` |
||||
|
<div style="min-height:120px; width:300px; background-color:#002785; border: 2px solid #0171f69e; color: #fff"> |
||||
|
<div style="height:24px; border-bottom: 2px solid #0171f69e; padding-left: 12px"> |
||||
|
${mk.title} |
||||
|
</div> |
||||
|
<div style="padding: 8px 12px; font-weight: bold"> |
||||
|
${mk.data.map(t => { |
||||
|
return `<p style="display:inline-block; width:25%; text-align-last:justify; text-align:justify">${t.title}</p> : <p style="display:inline-block; width:50%">${t.value}</p>` |
||||
|
})} |
||||
|
</div> |
||||
|
</div> |
||||
|
` //传入 dom 对象，或者 html 字符串
|
||||
|
}); |
||||
|
infoWindow.open(mapObj, [mk.longitude, mk.latitude]); |
||||
|
curInfoWindow.current = infoWindow |
||||
|
}) |
||||
|
return marker |
||||
|
}) |
||||
|
mapObj.add(nextMarkers); |
||||
|
serMarkers(nextMarkers) |
||||
|
} |
||||
} |
} |
||||
if (mapObj) |
}, [mapObj, tabKey]) |
||||
mapObj.clearMap(); |
|
||||
} |
const loadMap = () => { |
||||
}, [true]) |
const map = new AMap.Map(MAPID, { |
||||
|
resizeEnable: true, |
||||
const loadMap = () => { |
center: [115.99255, 28.503617],//地图中心点，初始定位加载显示楼块
|
||||
const map = new AMap.Map(MAPID, { |
zoom: 8,//地图显示的缩放级别
|
||||
resizeEnable: true, |
zooms: [8, 18], |
||||
center: [115.99255, 28.503617],//地图中心点，初始定位加载显示楼块
|
pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
|
||||
zoom: 8,//地图显示的缩放级别
|
viewMode: '3D', // 地图模式
|
||||
zooms: [8, 18], |
mapStyle: 'amap://styles/fb26776387242721c2fc32e2cb1daccc', |
||||
pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
|
}); |
||||
viewMode: '3D', // 地图模式
|
|
||||
mapStyle: 'amap://styles/fb26776387242721c2fc32e2cb1daccc', |
let windowOnload = false; |
||||
}); |
map.on('complete', function () { |
||||
|
if (!window.local_) { |
||||
let windowOnload = false; |
window.local_ = new Loca.Container({ map }); |
||||
map.on('complete', function () { |
setMapObj(map); |
||||
if (!window.local_) { |
} |
||||
window.local_ = new Loca.Container({ map }); |
|
||||
setMapObj(map); |
}); |
||||
|
window.onload = function () { |
||||
|
windowOnload = true; |
||||
} |
} |
||||
}); |
}; |
||||
window.onload = function () { |
|
||||
windowOnload = true; |
return ( |
||||
} |
<div style={{ position: 'absolute', width: '100%', height: '100%' }}> |
||||
}; |
<div id={MAPID} style={{ width: '100%', height: '100%', }} /> |
||||
|
{mapObj ? <Bounds map={mapObj} /> : ''} |
||||
return ( |
</div > |
||||
<div style={{ position: 'absolute', width: '100%', height: '100%' }}> |
) |
||||
<div id={MAPID} style={{ width: '100%', height: '100%',}} /> |
|
||||
{mapObj ? <Bounds map={mapObj} /> : ''} |
|
||||
</div > |
|
||||
) |
|
||||
} |
} |
||||
|
|
||||
|
|
||||
|
|||||
@ -1,184 +1,182 @@ |
|||||
import React, { Component } from 'react'; |
import React, { Component } from 'react'; |
||||
import './left.less'; |
import './left.less'; |
||||
class ReactCarousel extends Component { |
class ReactCarousel extends Component { |
||||
chunk(arr, size) { |
chunk (arr, size) { |
||||
var arr1 = new Array(); |
var arr1 = new Array(); |
||||
for (var i = 0; i < Math.ceil(arr.length / size); i++) { |
for (var i = 0; i < Math.ceil(arr.length / size); i++) { |
||||
arr1[i] = new Array(); |
arr1[i] = new Array(); |
||||
} |
} |
||||
var j = 0; |
var j = 0; |
||||
var x = 0; |
var x = 0; |
||||
for (var i = 0; i < arr.length; i++) { |
for (var i = 0; i < arr.length; i++) { |
||||
if (!((i % size == 0) && (i != 0))) { |
if (!((i % size == 0) && (i != 0))) { |
||||
arr1[j][x] = arr[i]; |
arr1[j][x] = arr[i]; |
||||
x++; |
x++; |
||||
// console.log("j=" + j + " " + "x=" + x);
|
} else { |
||||
} else { |
j++; |
||||
j++; |
x = 0; |
||||
x = 0; |
arr1[j][x] = arr[i]; |
||||
// console.log("else:" + "j=" + j + " " + "x=" + x);
|
x++; |
||||
arr1[j][x] = arr[i]; |
} |
||||
// console.log(arr1);
|
} |
||||
x++; |
return arr1; |
||||
} |
} |
||||
} |
|
||||
return arr1; |
|
||||
} |
|
||||
|
|
||||
constructor() { |
constructor() { |
||||
super(); |
super(); |
||||
this.state = { |
this.state = { |
||||
shuzu: [{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
shuzu: [ |
||||
{ name: "南昌县迎宾大道管制路段2", images: "/assets/images/leadership/shiyantu.png" }, |
{ name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" }, |
||||
{ name: "南昌县迎宾大道管制路段3", images: "/assets/images/leadership/shiyantu.png" }, |
{ name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" }, |
||||
{ name: "南昌县迎宾大道管制路段4", images: "/assets/images/leadership/shiyantu.png" }, |
{ name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" }, |
||||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
{ name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" }, |
||||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
{ name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" }, |
||||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
{ name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" }, |
||||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
{ name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" }, |
||||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }], |
{ name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" }, |
||||
imgs: [], |
{ name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" }, |
||||
showIndex: 0, //显示第几个图片
|
{ name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" }, |
||||
timer: null, // 定时器
|
], |
||||
show: false, // 前后按钮显示
|
imgs: [], |
||||
// arr1: ""
|
showIndex: 0, //显示第几个图片
|
||||
} |
timer: null, // 定时器
|
||||
// console.log(this.state.imgs);
|
show: false, // 前后按钮显示
|
||||
this.state.imgs = this.chunk((this.state.shuzu), 4) |
// arr1: ""
|
||||
} |
} |
||||
|
// console.log(this.state.imgs);
|
||||
|
this.state.imgs = 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 style={{ position: "relative", left: "8%", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''} |
||||
|
key={index} |
||||
|
> |
||||
|
<div style={{ width: "45%", height: "40%", backgroundImage: `url(${value[0].img})`, backgroundSize: 'cover', position: "absolute", left: "-3%", top: "5%" }}> |
||||
|
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
||||
|
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
||||
|
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
||||
|
{value[0]?.name} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
render() { |
{value[1]?.name ? <div style={{ width: "45%", height: "40%", backgroundImage: `url(${value[1].img})`, backgroundSize: 'cover', position: "absolute", left: "45%", top: "5%" }}> |
||||
return ( |
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
||||
<div className="ReactCarousel" style={{ width: "100%", height: "100%" }}> |
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
||||
<div className="contain" |
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
||||
onMouseEnter={() => { this.stop() }} //鼠标进入停止自动播放
|
{value[1]?.name} |
||||
onMouseLeave={() => { this.start() }} //鼠标退出自动播放
|
</div> |
||||
> |
</div> |
||||
<ul className="ul"> |
</div> : ""} |
||||
{ |
{value[2]?.name ? <div style={{ width: "45%", height: "40%", backgroundImage: `url(${value[0].img})`, backgroundSize: 'cover', position: "absolute", left: "-3%", top: "49%" }}> |
||||
|
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
||||
this.state.imgs.map((value, index) => { |
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
||||
return ( |
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
||||
<li style={{ position: "relative", left: "8%", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''} |
{value[2]?.name} |
||||
key={index} |
</div> |
||||
> |
</div> |
||||
<div style={{ width: "45%", height: "40%", backgroundColor: "red", position: "absolute", left: "-3%", top: "5%" }}> |
</div> : ""} |
||||
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
{value[3]?.name ? <div style={{ width: "45%", height: "40%", backgroundImage: `url(${value[3].img})`, backgroundSize: 'cover', position: "absolute", left: "45%", top: "49%" }}> |
||||
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
||||
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
||||
{value[0]?.name} |
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
||||
</div> |
{value[3]?.name} |
||||
</div> |
</div> |
||||
|
</div> |
||||
</div> |
</div> : ""} |
||||
{value[1]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "#fff", position: "absolute", left: "45%", top: "5%" }}> |
{/* <div>{value[1].name}</div> |
||||
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
|
||||
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
|
||||
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
|
||||
{value[1]?.name} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> : ""} |
|
||||
{value[2]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "bule", position: "absolute", left: "-3%", top: "49%" }}> |
|
||||
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
|
||||
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
|
||||
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
|
||||
{value[2]?.name} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> : ""} |
|
||||
{value[3]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "pink", position: "absolute", left: "45%", top: "49%" }}> |
|
||||
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
|
||||
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
|
||||
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
|
||||
{value[3]?.name} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> : ""} |
|
||||
{/* <div>{value[1].name}</div> |
|
||||
<div>{value[2].name}</div> |
<div>{value[2].name}</div> |
||||
<div>{value[3].name}</div> */} |
<div>{value[3].name}</div> */} |
||||
</li> |
</li> |
||||
) |
) |
||||
}) |
}) |
||||
} |
} |
||||
</ul> |
</ul> |
||||
{/* <ul className="dots" style={{ width: this.state.imgs.length * 20 + 'px' }}> |
{/* <ul className="dots" style={{ width: this.state.imgs.length * 20 + 'px' }}> |
||||
{ |
{ |
||||
this.state.imgs.map((value, index) => { |
this.state.imgs.map((value, index) => { |
||||
return ( |
return ( |
||||
<li key={index} |
<li key={index} |
||||
className={index === this.state.showIndex ? 'active' : ''} |
className={index === this.state.showIndex ? 'active' : ''} |
||||
onClick={() => { this.change(index) }}> |
onClick={() => { this.change(index) }}> |
||||
</li>) |
</li> |
||||
|
) |
||||
}) |
}) |
||||
} |
} |
||||
|
|
||||
</ul> */} |
</ul> */} |
||||
<div className="control" style={{ width: "100%", height: "10%" }}> |
<div className="control" style={{ width: "100%", height: "10%" }}> |
||||
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%" }} className="left" onClick={(e) => { this.previous(e) }}> |
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%" }} className="left" onClick={(e) => { this.previous(e) }}> |
||||
<img src='/assets/images/leadership/zuofanye.png' style={{ width: "100%", height: "100%" }} /> |
<img src='/assets/images/leadership/zuofanye.png' style={{ width: "100%", height: "100%" }} /> |
||||
</span> |
</span> |
||||
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%", right: "6%" }} className="right" onClick={(e) => { this.next(e) }}> |
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%", right: "6%" }} className="right" onClick={(e) => { this.next(e) }}> |
||||
<img src='/assets/images/leadership/youofanye.png' style={{ width: "100%", height: "100%" }} /> |
<img src='/assets/images/leadership/youofanye.png' style={{ width: "100%", height: "100%" }} /> |
||||
</span> |
</span> |
||||
</div> |
</div> |
||||
</div> |
|
||||
</div> |
</div> |
||||
) |
</div> |
||||
} |
) |
||||
componentDidMount() { //一开始自动播放
|
} |
||||
this.start(); |
componentDidMount () { //一开始自动播放
|
||||
} |
this.start(); |
||||
|
} |
||||
|
|
||||
componentWillUnmount() { //销毁前清除定时器
|
componentWillUnmount () { //销毁前清除定时器
|
||||
this.stop(); |
this.stop(); |
||||
} |
} |
||||
stop = () => { //暂停
|
stop = () => { //暂停
|
||||
let { timer } = this.state; |
let { timer } = this.state; |
||||
clearInterval(timer); |
clearInterval(timer); |
||||
} |
} |
||||
start = () => { //开始
|
start = () => { //开始
|
||||
let { timer } = this.state; |
let { timer } = this.state; |
||||
timer = setInterval(() => { |
timer = setInterval(() => { |
||||
this.next(); |
this.next(); |
||||
}, 300000); |
}, 300000); |
||||
this.setState({ |
this.setState({ |
||||
timer |
timer |
||||
}) |
}) |
||||
} |
} |
||||
change = (index) => { //点击下面的按钮切换当前显示的图片
|
change = (index) => { //点击下面的按钮切换当前显示的图片
|
||||
let { showIndex } = this.state; |
let { showIndex } = this.state; |
||||
showIndex = index; |
showIndex = index; |
||||
this.setState({ |
this.setState({ |
||||
showIndex |
showIndex |
||||
}) |
}) |
||||
} |
} |
||||
previous = (e) => { //上一张
|
previous = (e) => { //上一张
|
||||
let ev = e || window.event; |
let ev = e || window.event; |
||||
let { showIndex, imgs } = this.state; |
let { showIndex, imgs } = this.state; |
||||
if (showIndex <= 0) { |
if (showIndex <= 0) { |
||||
showIndex = imgs.length - 1; |
showIndex = imgs.length - 1; |
||||
} else { |
} else { |
||||
showIndex--; |
showIndex--; |
||||
} |
} |
||||
this.setState({ |
this.setState({ |
||||
showIndex |
showIndex |
||||
}) |
}) |
||||
} |
} |
||||
next = (e) => { //下一张
|
next = (e) => { //下一张
|
||||
let ev = e || window.event; |
let ev = e || window.event; |
||||
let { showIndex, imgs } = this.state; |
let { showIndex, imgs } = this.state; |
||||
if (showIndex >= imgs.length - 1) { |
if (showIndex >= imgs.length - 1) { |
||||
showIndex = 0; |
showIndex = 0; |
||||
} else { |
} else { |
||||
showIndex++; |
showIndex++; |
||||
} |
} |
||||
this.setState({ |
this.setState({ |
||||
showIndex |
showIndex |
||||
}) |
}) |
||||
} |
} |
||||
} |
} |
||||
export default ReactCarousel; |
export default ReactCarousel; |
||||
@ -1,71 +1,71 @@ |
|||||
import React, { useState } from 'react' |
import React, { useState } from 'react' |
||||
// import { Carousel } from 'antd';
|
import { Carousel } from 'antd'; |
||||
import Module from '../../public/module' |
import Module from '../../public/module' |
||||
|
|
||||
const Right = () => { |
const Right = () => { |
||||
// const [dataLists, setDataList] = useState([
|
const [dataLists, setDataList] = useState([ |
||||
// {
|
{ |
||||
// route: '147',
|
route: '147', |
||||
// plate: '赣APJ090'
|
plate: '赣APJ090' |
||||
// }, {
|
}, { |
||||
// route: '166',
|
route: '166', |
||||
// plate: '赣APJ087'
|
plate: '赣APJ087' |
||||
// }, {
|
}, { |
||||
// route: '171',
|
route: '171', |
||||
// plate: '赣APJ184'
|
plate: '赣APJ184' |
||||
// }, {
|
}, { |
||||
// route: '186',
|
route: '186', |
||||
// plate: '赣APJ241'
|
plate: '赣APJ241' |
||||
// }, {
|
}, { |
||||
// route: '199',
|
route: '199', |
||||
// plate: '赣APJ337'
|
plate: '赣APJ337' |
||||
// }
|
} |
||||
// ])
|
]) |
||||
const style = { height: "97%", marginTop: "3%" } |
const style = { height: "97%", marginTop: "3%" } |
||||
return ( |
return ( |
||||
<div style={{ position:'absolute',right:0, width: "23%", height: "100%", marginRight: "1%", }}> |
<div style={{ position: 'absolute', right: 0, width: "23%", height: "100%", marginRight: "1%", }}> |
||||
<Module style={style} customize={true} title={"车辆视频监控"}> |
<Module style={style} customize={true} title={"车辆视频监控"}> |
||||
<div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}> |
<div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}> |
||||
{/* <Carousel |
<Carousel |
||||
autoplay |
autoplay |
||||
infinite |
infinite |
||||
autoplaySpeed={300000} |
autoplaySpeed={300000} |
||||
vertical={true} |
vertical={true} |
||||
slidesToShow={4} |
slidesToShow={4} |
||||
> |
> |
||||
{ |
{ |
||||
dataLists.map((data, index) => ( |
dataLists.map((data, index) => ( |
||||
<div key={index} style={{width:'100%',height:'40%'}}> |
<div key={index} style={{ width: '100%', height: '40%' }}> |
||||
<div className='busInformation'> |
<div className='busInformation'> |
||||
<img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display:'block',float:'left' }} /> |
<img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} /> |
||||
<span> |
<span> |
||||
<h3>所属线路</h3> |
<h3>所属线路</h3> |
||||
<h4>{data.route}</h4> |
<h4>{data.route}</h4> |
||||
<h3>车辆牌照号</h3> |
<h3>车辆牌照号</h3> |
||||
<h5>{data.plate}</h5> |
<h5>{data.plate}</h5> |
||||
</span> |
</span> |
||||
</div> |
</div> |
||||
<div className='busVideo'> |
<div className='busVideo'> |
||||
<div style={{ |
<div style={{ |
||||
width:'98%',margin:'1% 1%',height:152,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE', |
width: '98%', margin: '1% 1%', height: 152, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
||||
border:'1px solid #1C60FE' |
border: '1px solid #1C60FE' |
||||
}}><img src='/assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div> |
}}><img src='/assets/images/quanju/fake/gj1.png' style={{ width: '100%', height: '100%' }} /></div> |
||||
<div style={{ |
<div style={{ |
||||
width:'48%',margin:'1% 1%',height:100,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE', |
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
||||
border:'1px solid #1C60FE' |
border: '1px solid #1C60FE' |
||||
}}><img src='/assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div> |
}}><img src='/assets/images/quanju/fake/gj2.png' style={{ width: '100%', height: '100%' }} /></div> |
||||
<div style={{ |
<div style={{ |
||||
width:'48%',margin:'1% 1%',height:100,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE', |
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
||||
border:'1px solid #1C60FE' |
border: '1px solid #1C60FE' |
||||
}}><img src='/assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div> |
}}><img src='/assets/images/quanju/fake/gj3.png' style={{ width: '100%', height: '100%' }} /></div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
)) |
)) |
||||
} |
} |
||||
</Carousel> */} |
</Carousel> |
||||
</div> |
</div> |
||||
</Module> |
</Module> |
||||
</div> |
</div> |
||||
) |
) |
||||
} |
} |
||||
export default Right |
export default Right |
||||
@ -1,29 +1,40 @@ |
|||||
.tabKey-map{ |
.tabKey-map { |
||||
width: 12%; |
width: 12%; |
||||
height: 4.7vh; |
height: 4.7vh; |
||||
text-align: center; |
text-align: center; |
||||
position: absolute; |
position: absolute; |
||||
top: 3vh; |
top: 3vh; |
||||
a{ |
|
||||
color: #FFFFFF; |
a { |
||||
font-size: 2vh; |
color: #FFFFFF; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
font-size: 2vh; |
||||
line-height: 4.7vh; |
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
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; |
||||
} |
} |
||||
.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-sharp { |
||||
|
display: none; |
||||
} |
} |
||||
Loading…
Reference in new issue