dengyinhuan
2 years ago
26 changed files with 1114 additions and 632 deletions
@ -1,14 +1,29 @@ |
|||||
|
|
||||
|
FROM registry.cn-hangzhou.aliyuncs.com/fs-devops/node:12-dev as builder |
||||
|
COPY . /var/app |
||||
|
WORKDIR /var/app |
||||
|
EXPOSE 8080 |
||||
|
RUN npm config set registry=http://10.8.30.22:7000 |
||||
|
RUN echo "{\"time\":\"$BUILD_TIMESTAMP\",\"build\": \"$BUILD_NUMBER\",\"revision\": \"$SVN_REVISION_1\",\"URL\":\"$SVN_URL_1\"}" > version.json |
||||
|
RUN npm cache clean -f |
||||
|
RUN rm -rf package-lock.json |
||||
|
RUN npm install --registry http://10.8.30.22:7000 |
||||
|
FROM registry.cn-hangzhou.aliyuncs.com/fs-devops/node:12 |
||||
|
COPY --from=builder --chown=node /var/app /home/node/app |
||||
|
WORKDIR /home/node/app |
||||
|
CMD ["node", "server.js"] |
||||
|
|
||||
# FROM node:8-alpine |
# FROM node:8-alpine |
||||
FROM repository.anxinyun.cn/base-images/nodejs12:20.10.12.2 |
# FROM repository.anxinyun.cn/base-images/nodejs12:20.10.12.2 |
||||
|
|
||||
MAINTAINER liuxinyi "liu.xinyi@free-sun.com.cn" |
# MAINTAINER liuxinyi "liu.xinyi@free-sun.com.cn" |
||||
|
|
||||
COPY . /var/app |
# COPY . /var/app |
||||
|
|
||||
WORKDIR /var/app |
# WORKDIR /var/app |
||||
|
|
||||
EXPOSE 8080 |
# EXPOSE 8080 |
||||
|
|
||||
CMD ["-a", "http://10.8.30.35:19084", "-e", "iota-n1:9200,iota-n2:9200,iota-n3:9200,iota-n4:9200"] |
# CMD ["-a", "http://10.8.30.35:19084", "-e", "iota-n1:9200,iota-n2:9200,iota-n3:9200,iota-n4:9200"] |
||||
|
|
||||
ENTRYPOINT [ "node", "server.js" ] |
# ENTRYPOINT [ "node", "server.js" ] |
||||
@ -1,76 +0,0 @@ |
|||||
[33m2adac9cb[m[33m ([m[1;36mHEAD -> [m[1;32mdev[m[33m)[m HEAD@{0}: reset: moving to HEAD^^^ |
|
||||
[33me5135673[m[33m ([m[1;31morigin/dev_backup[m[33m)[m HEAD@{1}: reset: moving to HEAD^^ |
|
||||
[33m020d4eda[m[33m ([m[1;31morigin/dev[m[33m)[m HEAD@{2}: reset: moving to HEAD |
|
||||
[33m020d4eda[m[33m ([m[1;31morigin/dev[m[33m)[m HEAD@{3}: reset: moving to HEAD |
|
||||
[33m020d4eda[m[33m ([m[1;31morigin/dev[m[33m)[m HEAD@{4}: commit: 12151 |
|
||||
[33md13b52a9[m HEAD@{5}: reset: moving to HEAD |
|
||||
[33md13b52a9[m HEAD@{6}: pull --tags origin dev: Fast-forward |
|
||||
[33m2d649d8e[m HEAD@{9}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33m1a9dd433[m HEAD@{10}: commit: 清除log |
|
||||
[33ma9d12cd8[m HEAD@{11}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33m8573588e[m HEAD@{12}: commit: 五分钟刷新 |
|
||||
[33m39b8e12b[m HEAD@{13}: pull --tags origin dev: Fast-forward |
|
||||
[33m6aba4d7a[m HEAD@{14}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33m2e6dc29a[m HEAD@{15}: commit: 提交 |
|
||||
[33m283a16ae[m HEAD@{16}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33m590ec5dd[m HEAD@{17}: commit: 提交 |
|
||||
[33m8eb418ae[m HEAD@{19}: commit: 日期去掉了日，加上了百分号 |
|
||||
[33mbf01c153[m HEAD@{20}: commit: 提交 |
|
||||
[33m76ad089b[m HEAD@{21}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33m45f58fda[m HEAD@{22}: commit: 代码提交 |
|
||||
[33md9079d38[m HEAD@{23}: commit: 提交日期处理 |
|
||||
[33m8e0048ac[m HEAD@{24}: pull --tags origin dev: Fast-forward |
|
||||
[33mc1607d94[m HEAD@{25}: pull --tags origin dev: Fast-forward |
|
||||
[33m670dcf18[m HEAD@{26}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33mec02aeb9[m HEAD@{27}: commit: nan优化 |
|
||||
[33m974e3c67[m HEAD@{28}: commit: 换成定位了 |
|
||||
[33ma61dc4e9[m HEAD@{29}: pull --tags origin dev: Fast-forward |
|
||||
[33md77627f9[m HEAD@{30}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33m01ef6b5a[m HEAD@{31}: commit: 柱体问题解决 |
|
||||
[33me9424d3e[m HEAD@{32}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33mc276432d[m HEAD@{33}: commit: 样式和颜色提交 |
|
||||
[33m45c415e6[m[33m ([m[1;31morigin/release_0.0.4[m[33m)[m HEAD@{34}: pull --tags origin dev: Fast-forward |
|
||||
[33m79723f61[m HEAD@{35}: commit: 线条 |
|
||||
[33m9c81764c[m HEAD@{36}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33m3f398ea2[m HEAD@{37}: commit: 提交bug |
|
||||
[33m502b068d[m HEAD@{38}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33m7a5b8b64[m HEAD@{39}: commit: 提交 |
|
||||
[33maeff1fe5[m HEAD@{40}: commit: 路由修改 |
|
||||
[33m11da9451[m HEAD@{41}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33med7ab5a8[m HEAD@{42}: commit: 完成 |
|
||||
[33m06063067[m HEAD@{43}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33m755a333f[m HEAD@{44}: commit: 接口调用 |
|
||||
[33m2b153823[m HEAD@{45}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33mf0558530[m HEAD@{46}: commit: 路政统计 |
|
||||
[33m50eb042e[m HEAD@{47}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33ma1dfeddb[m HEAD@{48}: commit: 提交鼠标移出事件 |
|
||||
[33m5469d9df[m HEAD@{49}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
|
||||
[33m49a0b5d7[m HEAD@{50}: commit: 提交 |
|
||||
[33m11279671[m HEAD@{51}: commit: 提交领导驾驶舱 |
|
||||
[33m3919e2c3[m HEAD@{52}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33mb9302fdf[m HEAD@{53}: commit: 提交代码 |
|
||||
[33m79328f49[m HEAD@{54}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
|
||||
[33mc6a3b352[m HEAD@{55}: commit: 提交样式 |
|
||||
[33m14ed5747[m HEAD@{56}: pull --tags origin dev: Fast-forward |
|
||||
[33m80e11974[m HEAD@{57}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33ma561e62b[m HEAD@{58}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
|
||||
[33m163ce6c1[m HEAD@{59}: commit: 提交left.less的更改 |
|
||||
[33m4de26fc7[m HEAD@{60}: pull: Fast-forward |
|
||||
[33m4a1ae175[m HEAD@{61}: pull --tags origin dev: Fast-forward |
|
||||
[33me7a01d52[m HEAD@{62}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
|
||||
[33mc7e7cd4c[m HEAD@{63}: commit: 提交领导驾驶舱 |
|
||||
[33mfc3f2a92[m HEAD@{64}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
|
||||
[33mf166aa29[m HEAD@{65}: commit: 领导驾驶舱提交代码 |
|
||||
[33me6030bcf[m HEAD@{66}: commit: 上传 |
|
||||
[33mb299cd97[m HEAD@{67}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33m69e7f3b6[m HEAD@{68}: commit: 删除冗余，提交 |
|
||||
[33ma74afb8f[m HEAD@{69}: commit: 文件 |
|
||||
[33m68c13e99[m HEAD@{70}: commit: 文件上传 |
|
||||
[33mdacf49b4[m HEAD@{71}: commit: 文件上传 |
|
||||
[33m1190cc0d[m HEAD@{72}: commit (merge): Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev |
|
||||
[33m0c57a227[m HEAD@{73}: commit: 头部样式完成 |
|
||||
[33m8ab4f5f2[m HEAD@{74}: pull --tags origin dev: Merge made by the 'ort' strategy. |
|
||||
[33m50714cbf[m HEAD@{75}: commit: 公共组件图标样式修改 |
|
||||
[33m34413ac0[m HEAD@{76}: commit: test |
|
||||
[33meee5aedf[m HEAD@{77}: commit: test |
|
||||
[33mcbdfefa3[m[33m ([m[1;32mmaster[m[33m)[m HEAD@{79}: clone: from https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good.git |
|
||||
@ -1,12 +1,30 @@ |
|||||
|
FROM registry.cn-hangzhou.aliyuncs.com/fs-devops/node:12-dev as builder |
||||
|
COPY . /var/app |
||||
|
WORKDIR /var/app |
||||
|
EXPOSE 8080 |
||||
|
RUN npm config set registry=http://10.8.30.22:7000 |
||||
|
RUN echo "{\"time\":\"$BUILD_TIMESTAMP\",\"build\": \"$BUILD_NUMBER\",\"revision\": \"$SVN_REVISION_1\",\"URL\":\"$SVN_URL_1\"}" > version.json |
||||
|
RUN npm cache clean -f |
||||
|
RUN npm install --registry http://10.8.30.22:7000 |
||||
|
RUN npm run build |
||||
|
RUN rm -rf client/src |
||||
|
RUN rm -rf node_modules |
||||
|
RUN npm install --production --force --registry http://10.8.30.22:7000 |
||||
|
FROM registry.cn-hangzhou.aliyuncs.com/fs-devops/node-16:7.22-06-20 |
||||
|
COPY --from=builder --chown=node /var/app /home/node/app |
||||
|
WORKDIR /home/node/app |
||||
|
CMD ["node", "server.js"] |
||||
|
|
||||
|
|
||||
#FROM node:12-alpine |
#FROM node:12-alpine |
||||
FROM repository.anxinyun.cn/base-images/nodejs12:20.10.12.2 |
# FROM repository.anxinyun.cn/base-images/nodejs12:20.10.12.2 |
||||
|
|
||||
MAINTAINER liuxinyi "liu.xinyi@free-sun.com.cn" |
# MAINTAINER liuxinyi "liu.xinyi@free-sun.com.cn" |
||||
|
|
||||
COPY . /var/app |
# COPY . /var/app |
||||
|
|
||||
WORKDIR /var/app |
# WORKDIR /var/app |
||||
|
|
||||
EXPOSE 5000 |
# EXPOSE 5000 |
||||
|
|
||||
ENTRYPOINT [ "node", "server.js" ] |
# ENTRYPOINT [ "node", "server.js" ] |
||||
|
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,578 @@ |
|||||
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: 115.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%; |
.notabKey { |
||||
height: 4.7vh; |
width: 12%; |
||||
position: absolute; |
height: 4.7vh; |
||||
top: 3vh; |
position: absolute; |
||||
text-align: center; |
top: 3vh; |
||||
a{ |
text-align: center; |
||||
color: #6593c6; |
|
||||
font-size: 2vh; |
a { |
||||
font-family: PingFangSC-Medium, PingFang SC; |
color: #6593c6; |
||||
line-height: 4.7vh; |
font-size: 2vh; |
||||
font-weight: 500; |
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