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 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 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 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: 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(() => { |
|||
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; |
|||
} |
|||
|
|||
} |
|||
|
|||
.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