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 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: ` |
|||
<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.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 ( |
|||
<div style={{ position: 'absolute', width: '100%', height: '100%' }}> |
|||
<div id={MAPID} style={{ width: '100%', height: '100%',}} /> |
|||
{mapObj ? <Bounds map={mapObj} /> : ''} |
|||
</div > |
|||
) |
|||
}; |
|||
|
|||
return ( |
|||
<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 './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 ( |
|||
<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> |
|||
|
|||
|
|||
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%", backgroundColor: "red", 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> |
|||
{value[1]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "#fff", position: "absolute", left: "45%", 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[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[1]?.name ? <div style={{ width: "45%", height: "40%", backgroundImage: `url(${value[1].img})`, backgroundSize: 'cover', position: "absolute", left: "45%", 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[1]?.name} |
|||
</div> |
|||
</div> |
|||
</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%" }}> |
|||
<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%", backgroundImage: `url(${value[3].img})`, backgroundSize: 'cover', 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[3].name}</div> */} |
|||
</li> |
|||
) |
|||
}) |
|||
} |
|||
</ul> |
|||
{/* <ul className="dots" style={{ width: this.state.imgs.length * 20 + 'px' }}> |
|||
</li> |
|||
) |
|||
}) |
|||
} |
|||
</ul> |
|||
{/* <ul className="dots" style={{ width: this.state.imgs.length * 20 + 'px' }}> |
|||
{ |
|||
this.state.imgs.map((value, index) => { |
|||
return ( |
|||
<li key={index} |
|||
className={index === this.state.showIndex ? 'active' : ''} |
|||
onClick={() => { this.change(index) }}> |
|||
</li>) |
|||
</li> |
|||
) |
|||
}) |
|||
} |
|||
|
|||
</ul> */} |
|||
<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) }}> |
|||
<img src='/assets/images/leadership/zuofanye.png' style={{ width: "100%", height: "100%" }} /> |
|||
</span> |
|||
<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%" }} /> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<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) }}> |
|||
<img src='/assets/images/leadership/zuofanye.png' style={{ width: "100%", height: "100%" }} /> |
|||
</span> |
|||
<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%" }} /> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
componentDidMount() { //一开始自动播放
|
|||
this.start(); |
|||
} |
|||
</div> |
|||
) |
|||
} |
|||
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; |
|||
@ -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 ( |
|||
<div style={{ position:'absolute',right:0, width: "23%", height: "100%", marginRight: "1%", }}> |
|||
<Module style={style} customize={true} title={"车辆视频监控"}> |
|||
<div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}> |
|||
{/* <Carousel |
|||
autoplay |
|||
infinite |
|||
autoplaySpeed={300000} |
|||
vertical={true} |
|||
slidesToShow={4} |
|||
> |
|||
{ |
|||
dataLists.map((data, index) => ( |
|||
<div key={index} style={{width:'100%',height:'40%'}}> |
|||
<div className='busInformation'> |
|||
<img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display:'block',float:'left' }} /> |
|||
<span> |
|||
<h3>所属线路</h3> |
|||
<h4>{data.route}</h4> |
|||
<h3>车辆牌照号</h3> |
|||
<h5>{data.plate}</h5> |
|||
</span> |
|||
</div> |
|||
<div className='busVideo'> |
|||
<div style={{ |
|||
width:'98%',margin:'1% 1%',height:152,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE', |
|||
border:'1px solid #1C60FE' |
|||
}}><img src='/assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div> |
|||
<div style={{ |
|||
width:'48%',margin:'1% 1%',height:100,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE', |
|||
border:'1px solid #1C60FE' |
|||
}}><img src='/assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div> |
|||
<div style={{ |
|||
width:'48%',margin:'1% 1%',height:100,display:'block',float:'left',boxShadow: '0px 1px 5px 0px #1C60FE', |
|||
border:'1px solid #1C60FE' |
|||
}}><img src='/assets/images/quanju/busVideo.png' style={{width:'100%',height:'100%'}} /></div> |
|||
</div> |
|||
</div> |
|||
)) |
|||
} |
|||
</Carousel> */} |
|||
</div> |
|||
</Module> |
|||
</div> |
|||
) |
|||
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 ( |
|||
<div style={{ position: 'absolute', right: 0, width: "23%", height: "100%", marginRight: "1%", }}> |
|||
<Module style={style} customize={true} title={"车辆视频监控"}> |
|||
<div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}> |
|||
<Carousel |
|||
autoplay |
|||
infinite |
|||
autoplaySpeed={300000} |
|||
vertical={true} |
|||
slidesToShow={4} |
|||
> |
|||
{ |
|||
dataLists.map((data, index) => ( |
|||
<div key={index} style={{ width: '100%', height: '40%' }}> |
|||
<div className='busInformation'> |
|||
<img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} /> |
|||
<span> |
|||
<h3>所属线路</h3> |
|||
<h4>{data.route}</h4> |
|||
<h3>车辆牌照号</h3> |
|||
<h5>{data.plate}</h5> |
|||
</span> |
|||
</div> |
|||
<div className='busVideo'> |
|||
<div style={{ |
|||
width: '98%', margin: '1% 1%', height: 152, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
|||
border: '1px solid #1C60FE' |
|||
}}><img src='/assets/images/quanju/fake/gj1.png' style={{ width: '100%', height: '100%' }} /></div> |
|||
<div style={{ |
|||
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
|||
border: '1px solid #1C60FE' |
|||
}}><img src='/assets/images/quanju/fake/gj2.png' style={{ width: '100%', height: '100%' }} /></div> |
|||
<div style={{ |
|||
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
|||
border: '1px solid #1C60FE' |
|||
}}><img src='/assets/images/quanju/fake/gj3.png' style={{ width: '100%', height: '100%' }} /></div> |
|||
</div> |
|||
</div> |
|||
)) |
|||
} |
|||
</Carousel> |
|||
</div> |
|||
</Module> |
|||
</div> |
|||
) |
|||
} |
|||
export default Right |
|||
@ -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; |
|||
} |
|||
Loading…
Reference in new issue