Browse Source

(*)社区大屏提交

master
peng.peng 1 year ago
parent
commit
0acc6b6441
  1. BIN
      super-screen/client/assets/images/homepage/communtity/alarm1.png
  2. BIN
      super-screen/client/assets/images/homepage/communtity/alarm2.png
  3. BIN
      super-screen/client/assets/images/homepage/communtity/alarmbg.png
  4. BIN
      super-screen/client/assets/images/homepage/communtity/alarmbutton.png
  5. BIN
      super-screen/client/assets/images/homepage/communtity/alarmcancel.png
  6. BIN
      super-screen/client/assets/images/homepage/communtity/alarmicon.png
  7. BIN
      super-screen/client/assets/images/homepage/communtity/alarminfowindow.png
  8. BIN
      super-screen/client/assets/images/homepage/communtity/czicon.png
  9. BIN
      super-screen/client/assets/images/homepage/communtity/cztotal.png
  10. BIN
      super-screen/client/assets/images/homepage/communtity/devicebutton.png
  11. BIN
      super-screen/client/assets/images/homepage/communtity/devicebuttonselect.png
  12. BIN
      super-screen/client/assets/images/homepage/communtity/devicemarker.png
  13. BIN
      super-screen/client/assets/images/homepage/communtity/exit.png
  14. BIN
      super-screen/client/assets/images/homepage/communtity/exitalarm.png
  15. BIN
      super-screen/client/assets/images/homepage/communtity/home.png
  16. BIN
      super-screen/client/assets/images/homepage/communtity/homeselect.png
  17. BIN
      super-screen/client/assets/images/homepage/communtity/hqicon.png
  18. BIN
      super-screen/client/assets/images/homepage/communtity/hqtotal.png
  19. BIN
      super-screen/client/assets/images/homepage/communtity/infowindowbg.png
  20. BIN
      super-screen/client/assets/images/homepage/communtity/lzicon.png
  21. BIN
      super-screen/client/assets/images/homepage/communtity/lztotal.png
  22. BIN
      super-screen/client/assets/images/homepage/communtity/markeralarm.png
  23. BIN
      super-screen/client/assets/images/homepage/communtity/markerblue.png
  24. BIN
      super-screen/client/assets/images/homepage/communtity/markerbluebig.png
  25. BIN
      super-screen/client/assets/images/homepage/communtity/markergreen.png
  26. BIN
      super-screen/client/assets/images/homepage/communtity/markergreenbig.png
  27. BIN
      super-screen/client/assets/images/homepage/communtity/markeryellow.png
  28. BIN
      super-screen/client/assets/images/homepage/communtity/markeryellowbig.png
  29. BIN
      super-screen/client/assets/images/homepage/communtity/personbutton.png
  30. BIN
      super-screen/client/assets/images/homepage/communtity/personbuttonselect.png
  31. BIN
      super-screen/client/assets/images/homepage/communtity/rankcontent.png
  32. BIN
      super-screen/client/assets/images/homepage/communtity/ranktitle.png
  33. BIN
      super-screen/client/assets/images/homepage/communtity/top1.png
  34. BIN
      super-screen/client/assets/images/homepage/communtity/top2.png
  35. BIN
      super-screen/client/assets/images/homepage/communtity/top3.png
  36. BIN
      super-screen/client/assets/images/homepage/communtity/total.png
  37. 36
      super-screen/client/assets/images/map.svg
  38. 2
      super-screen/client/index.ejs
  39. 2
      super-screen/client/index.html
  40. 33
      super-screen/client/src/sections/community-safty/components/city-safty.js
  41. 194
      super-screen/client/src/sections/community-safty/components/style.less
  42. 22
      super-screen/client/src/sections/community-safty/components/traffic-ranking.js
  43. 955
      super-screen/client/src/sections/community-safty/containers/data.js
  44. 424
      super-screen/client/src/sections/community-safty/containers/gis.js
  45. 408
      super-screen/client/src/sections/community-safty/containers/gis.less
  46. 6
      super-screen/client/src/sections/homePage/containers/homePage.js
  47. 4
      super-screen/client/src/sections/homePage/containers/style.less

BIN
super-screen/client/assets/images/homepage/communtity/alarm1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
super-screen/client/assets/images/homepage/communtity/alarm2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
super-screen/client/assets/images/homepage/communtity/alarmbg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 563 B

BIN
super-screen/client/assets/images/homepage/communtity/alarmbutton.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
super-screen/client/assets/images/homepage/communtity/alarmcancel.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
super-screen/client/assets/images/homepage/communtity/alarmicon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 504 B

BIN
super-screen/client/assets/images/homepage/communtity/alarminfowindow.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

BIN
super-screen/client/assets/images/homepage/communtity/czicon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 557 B

BIN
super-screen/client/assets/images/homepage/communtity/cztotal.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
super-screen/client/assets/images/homepage/communtity/devicebutton.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
super-screen/client/assets/images/homepage/communtity/devicebuttonselect.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
super-screen/client/assets/images/homepage/communtity/devicemarker.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1004 B

BIN
super-screen/client/assets/images/homepage/communtity/exit.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
super-screen/client/assets/images/homepage/communtity/exitalarm.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
super-screen/client/assets/images/homepage/communtity/home.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
super-screen/client/assets/images/homepage/communtity/homeselect.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
super-screen/client/assets/images/homepage/communtity/hqicon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 606 B

BIN
super-screen/client/assets/images/homepage/communtity/hqtotal.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
super-screen/client/assets/images/homepage/communtity/infowindowbg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

BIN
super-screen/client/assets/images/homepage/communtity/lzicon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 593 B

BIN
super-screen/client/assets/images/homepage/communtity/lztotal.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
super-screen/client/assets/images/homepage/communtity/markeralarm.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
super-screen/client/assets/images/homepage/communtity/markerblue.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
super-screen/client/assets/images/homepage/communtity/markerbluebig.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
super-screen/client/assets/images/homepage/communtity/markergreen.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
super-screen/client/assets/images/homepage/communtity/markergreenbig.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
super-screen/client/assets/images/homepage/communtity/markeryellow.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
super-screen/client/assets/images/homepage/communtity/markeryellowbig.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
super-screen/client/assets/images/homepage/communtity/personbutton.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
super-screen/client/assets/images/homepage/communtity/personbuttonselect.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
super-screen/client/assets/images/homepage/communtity/rankcontent.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
super-screen/client/assets/images/homepage/communtity/ranktitle.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
super-screen/client/assets/images/homepage/communtity/top1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
super-screen/client/assets/images/homepage/communtity/top2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 927 B

BIN
super-screen/client/assets/images/homepage/communtity/top3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 939 B

BIN
super-screen/client/assets/images/homepage/communtity/total.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

36
super-screen/client/assets/images/map.svg

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="692px" height="805px" viewBox="0 0 692 805" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>南昌县</title>
<defs>
<polygon id="path-1" points="219.026316 652.689655 216.5 662.344828 224.078947 679.724138 231.657895 693.241379 251.868421 710.62069 259.447368 731.862069 234.184211 797.517241 269.552632 824.551724 274.605263 832.275862 279.657895 851.586207 289.763158 867.034483 289.763158 882.482759 282.184211 897.931034 299.868421 913.37931 309.973684 930.758621 320.078947 926.896552 345.342105 897.931034 350.394737 901.793103 352.921053 913.37931 363.026316 909.517241 360.5 907.586207 365.552632 899.862069 373.131579 899.862069 383.236842 909.517241 385.763158 907.586207 408.5 917.241379 411.026316 915.310345 416.078947 924.965517 411.026316 930.758621 405.973684 930.758621 400.921053 938.482759 403.447368 940.413793 423.657895 944.275862 433.763158 940.413793 443.868421 924.965517 459.026316 930.758621 466.605263 940.413793 476.710526 940.413793 479.236842 934.62069 489.342105 936.551724 504.5 932.689655 512.078947 924.965517 522.184211 921.103448 562.605263 928.827586 572.710526 942.344828 592.921053 952 585.342105 924.965517 590.394737 917.241379 597.973684 913.37931 595.447368 907.586207 572.710526 905.655172 562.605263 899.862069 562.605263 884.413793 547.447368 886.344828 542.394737 882.482759 544.921053 865.103448 524.710526 859.310345 507.026316 841.931034 501.973684 832.275862 504.5 812.965517 514.605263 801.37931 514.605263 776.275862 504.5 760.827586 504.5 749.241379 514.605263 747.310345 524.710526 726.068966 537.342105 726.068966 547.447368 729.931034 557.552632 722.206897 572.710526 724.137931 570.184211 728 592.921053 733.793103 618.184211 747.310345 625.763158 747.310345 635.868421 741.517241 648.5 726.068966 656.078947 706.758621 656.078947 673.931034 663.657895 658.482759 729.342105 623.724138 764.710526 590.896552 769.763158 577.37931 777.342105 575.448276 782.394737 567.724138 782.394737 561.931034 800.078947 558.068966 820.289474 561.931034 843.026316 552.275862 850.605263 529.103448 832.921053 529.103448 830.394737 521.37931 820.289474 517.517241 812.710526 502.068966 843.026316 478.896552 855.657895 459.586207 845.552632 442.206897 848.078947 438.344828 865.763158 426.758621 880.921053 422.896552 888.5 407.448276 883.447368 386.206897 868.289474 376.551724 860.710526 366.896552 840.5 364.965517 822.815789 351.448276 797.552632 353.37931 789.973684 351.448276 784.921053 345.655172 779.868421 322.482759 787.447368 314.758621 787.447368 303.172414 777.342105 293.517241 782.394737 278.068966 792.5 272.275862 805.131579 270.344828 830.394737 276.137931 860.710526 272.275862 837.973684 239.448276 815.236842 231.724138 812.710526 225.931034 820.289474 212.413793 807.657895 173.793103 787.447368 168 779.868421 171.862069 774.815789 183.448276 754.605263 191.172414 739.447368 191.172414 704.078947 200.827586 683.868421 243.310345 663.657895 256.827586 648.5 252.965517 638.394737 241.37931 597.973684 258.758621 587.868421 258.758621 555.026316 245.241379 544.921053 249.103448 512.078947 278.068966 507.026316 310.896552 496.921053 312.827586 469.131579 307.034483 418.605263 339.862069 413.552632 347.586207 413.552632 357.241379 426.184211 363.034483 441.342105 364.965517 448.921053 372.689655 436.289474 380.413793 423.657895 393.931034 400.921053 403.586207 380.710526 428.689655 385.763158 434.482759 413.552632 424.827586 426.184211 424.827586 464.078947 436.413793 496.921053 436.413793 496.921053 440.275862 501.973684 440.275862 489.342105 448 481.763158 459.586207 481.763158 463.448276 489.342105 465.37931 474.184211 475.034483 461.552632 504 471.657895 505.931034 491.868421 529.103448 501.973684 532.965517 512.078947 529.103448 524.710526 515.586207 524.710526 534.896552 534.815789 542.62069 539.868421 552.275862 522.184211 569.655172 519.657895 577.37931 509.552632 579.310345 489.342105 594.758621 481.763158 596.689655 474.184211 596.689655 469.131579 588.965517 461.552632 594.758621 453.973684 588.965517 438.815789 594.758621 408.5 583.172414 390.815789 587.034483 365.552632 581.241379 355.447368 585.103448 350.394737 596.689655 345.342105 596.689655 342.815789 587.034483 325.131579 577.37931 327.657895 573.517241 322.605263 565.793103 317.552632 569.655172 282.184211 561.931034 269.552632 567.724138 259.447368 560 249.342105 558.068966 234.184211 583.172414 231.657895 619.862069 221.552632 650.758621"></polygon>
<filter x="-2.2%" y="-1.9%" width="104.5%" height="103.8%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feMorphology radius="2" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
<feOffset dx="0" dy="0" in="shadowInner" result="shadowInner"></feOffset>
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.784313725 0 0 0 0 0.901960784 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-3.0%" y="-2.6%" width="106.0%" height="105.1%" filterUnits="objectBoundingBox" id="filter-3">
<feMorphology radius="7" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="5" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="-3" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.541176471 0 0 0 0 1 0 0 0 0.704326923 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="社区" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="社区安全-集合" transform="translate(-542.000000, -129.000000)">
<g id="编组" transform="translate(-3.000000, -1.000000)">
<g id="背景-灰大素材" transform="translate(3.000000, 0.000000)">
<g id="南昌县" transform="translate(335.500000, -28.000000)">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use stroke="#F0F8FF" stroke-width="2" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.9 KiB

2
super-screen/client/index.ejs

@ -32,7 +32,7 @@
}
</style>
<body style="background: transparent">
<body style="background: #000000">
<div id='App'></div>
</body>

2
super-screen/client/index.html

@ -33,7 +33,7 @@
}
</style>
<body style="background: #0F1C2A;">
<body style="background: #000000;">
<div id='App'></div>
<script type="text/javascript" src="http://localhost:5501/client/build/vendor.js"></script>
<script type="text/javascript" src="http://localhost:5501/client/build/app.js"></script>

33
super-screen/client/src/sections/community-safty/components/city-safty.js

@ -5,7 +5,38 @@ import './style.less';
function CitySafty(props) {
return <Box title={"城市安全"} >
城市安全
<div className='_city_safty'>
<div className='alarm_handle'>
<div className='handle_img' />
<div className='alarm_content'>
<div className='alarm_bg'>
<div className='alarm_title1'>2023-06-20 170000</div>
<div className='alarm_title2'>已处理</div>
</div>
<div className='alarm_text'>萌萌小区25栋305等等等等等发生等等火灾扥大哥大呢个</div>
</div>
</div>
<div className='alarm_unhandle'>
<div className='handle_img' />
<div className='alarm_content'>
<div className='alarm_bg'>
<div className='alarm_title1'>2023-06-20 170000</div>
<div className='alarm_title2' style={{ color: '#24DCF7' }}>处理中</div>
</div>
<div className='alarm_text'>萌萌小区25栋305等等等等等发生等等火灾扥大哥大呢个</div>
</div>
</div>
<div className='alarm_unhandle'>
<div className='handle_img' />
<div className='alarm_content'>
<div className='alarm_bg'>
<div className='alarm_title1'>2023-06-20 170000</div>
<div className='alarm_title2' style={{ color: '#24DCF7' }}>处理中</div>
</div>
<div className='alarm_text'>萌萌小区25栋305等等等等等发生等等火灾扥大哥大呢个</div>
</div>
</div>
</div>
</Box>
}

194
super-screen/client/src/sections/community-safty/components/style.less

@ -244,6 +244,7 @@
}
}
//特殊人群统计
._special {
height: 100%;
padding-left: 16px;
@ -284,3 +285,196 @@
background-size: 100% 100%;
}
}
//小区人流量排名
._traffic_ranking {
height: 100%;
overflow: auto;
._rank_title {
height: 34.64px;
background: url('/assets/images/homePage/communtity/ranktitle.png');
background-repeat: no-repeat;
background-size: 100% 100%;
color: #FFFFFF;
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-around;
._rank_item1 {
text-align: center;
width: 20%;
}
._rank_item2 {
text-align: center;
width: 50%;
}
._rank_item3 {
text-align: center;
width: 30%;
}
}
._rank_content {
height: 34.64px;
background: url('/assets/images/homePage/communtity/rankcontent.png');
background-repeat: no-repeat;
background-size: 100% 100%;
color: #E2F8FF;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-around;
._rank_item1 {
text-align: center;
width: 20%;
}
._rank_item2 {
text-align: center;
width: 50%;
}
._rank_item3 {
text-align: center;
width: 30%;
}
}
.topbg1 {
width: 28px;
height: 10px;
background: url('/assets/images/homePage/communtity/top1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
}
.topbg2 {
width: 28px;
height: 10px;
background: url('/assets/images/homePage/communtity/top2.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
}
.topbg3 {
width: 28px;
height: 10px;
background: url('/assets/images/homePage/communtity/top3.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
}
}
._traffic_ranking::-webkit-scrollbar {
width: 0 !important
}
//城市安全
._city_safty {
font-family: SourceHanSansCN-Regular;
font-weight: 400;
font-size: 14px;
color: #E2F8FF;
letter-spacing: 1.17px;
line-height: 19px;
padding: 20px 14px 0px 14px;
overflow: auto;
height: 100%;
.alarm_handle {
display: flex;
height: 89px;
margin-bottom: 10px;
.handle_img {
width: 101px;
height: 89px;
background: url('/assets/images/homePage/communtity/alarm2.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.alarm_content {
width: calc(100% - 120px);
display: flex;
flex-direction: column;
justify-content: center;
.alarm_text {
padding-left: 16px;
padding-right: 16px;
}
}
}
.alarm_unhandle {
display: flex;
height: 89px;
margin-bottom: 10px;
.handle_img {
width: 101px;
height: 89px;
background: url('/assets/images/homePage/communtity/alarm1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.alarm_content {
width: calc(100% - 120px);
display: flex;
flex-direction: column;
justify-content: center;
.alarm_text {
padding-left: 16px;
padding-right: 16px;
}
}
}
.alarm_bg {
height: 17px;
width: 100%;
background: url('/assets/images/homePage/communtity/alarmbg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 7px;
padding-left: 7px;
padding-right: 16px;
.alarm_title1 {
float: left;
margin-top: -10px;
font-family: D-DIN-Italic;
font-weight: Italic;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 0;
}
.alarm_title2 {
float: right;
margin-top: -10px;
font-family: YouSheBiaoTiHei;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 0;
}
}
}
._city_safty::-webkit-scrollbar {
width: 0 !important
}

22
super-screen/client/src/sections/community-safty/components/traffic-ranking.js

@ -2,11 +2,31 @@ import React, { useEffect, useState } from 'react'
import Box from './public/table-card';
import './style.less';
function DataTop5(props) {
return <Box title={"小区人流量排名"} bodyPaddingTop={1} >
小区人流量排名
<div className='_traffic_ranking'>
<div className='_rank_title'>
<div className='_rank_item1'>排名</div>
<div className='_rank_item2'>小区名称</div>
<div className='_rank_item3'>人流量<span style={{ fontSize: 14 }}>/</span></div>
</div>
{[1, 2, 3, 4, 5, 6, 7, 8].map(s => {
return <div className='_rank_content'>
<div className={`_rank_item1`}>
<div className={`topbg${s}`}>
<div style={{ marginTop: -9 }}>{s}</div>
</div>
</div>
<div className='_rank_item2'>小区名称{s}</div>
<div className='_rank_item3'>{1400 - s}</div>
</div>
})}
</div>
</Box>
}

955
super-screen/client/src/sections/community-safty/containers/data.js

@ -0,0 +1,955 @@
'use strict';
export const data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.882756, 28.515483
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.876061, 28.534185
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.897176, 28.545646
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.940155, 28.559386
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.874271, 28.412145
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.866911, 28.416826
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.835812, 28.597065
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.853493, 28.596462
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.965947, 28.445532
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.908495, 28.521435
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.861763, 28.530276
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.871634, 28.534348
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
115.90219, 28.55938
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
116.168147, 28.649128
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
116.16584, 28.648912
]
}
},
{
"type": "Feature",
"properties": {
"count": 1
},
"geometry": {
"type": "Point",
"coordinates": [
116.169467, 28.646074
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.92344, 28.561176
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.870911, 28.536749
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.876233, 28.512466
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.920693, 28.499945
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.958459, 28.511712
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.955369, 28.508393
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.954296, 28.560894
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.943288, 28.560309
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.868006, 28.41507
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.861397, 28.411485
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.840533, 28.595369
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.852592, 28.597178
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.970474, 28.448221
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.9688, 28.447702
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.865064, 28.557025
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.879959, 28.526732
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.881762, 28.562395
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.923647, 28.558626
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.856614, 28.595408
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.9484, 28.504994
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.941405, 28.502354
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.954022, 28.511066
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.953078, 28.520191
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
115.929474, 28.506013
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
116.070607, 28.798914
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
116.068397, 28.798176
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
116.143577, 28.657257
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
116.136303, 28.654546
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
116.110161, 28.654753
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
116.151446, 28.650158
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.939748, 28.551979
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.949189, 28.572182
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.92344, 28.561176
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.930306, 28.541122
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.949146, 28.559932
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.940155, 28.559386
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.864508, 28.41843
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.840533, 28.595369
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.860016, 28.61029
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.971493, 28.449494
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.881887, 28.559889
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.874334, 28.541946
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.864549, 28.553104
]
}
},
{
"type": "Feature",
"properties": {
"count": 3
},
"geometry": {
"type": "Point",
"coordinates": [
115.908495, 28.521435
]
}
},
{
"type": "Feature",
"properties": {
"count": 4
},
"geometry": {
"type": "Point",
"coordinates": [
115.950219, 28.55605
]
}
},
{
"type": "Feature",
"properties": {
"count": 4
},
"geometry": {
"type": "Point",
"coordinates": [
115.836713, 28.606522
]
}
},
{
"type": "Feature",
"properties": {
"count": 4
},
"geometry": {
"type": "Point",
"coordinates": [
115.899053, 28.538176
]
}
},
{
"type": "Feature",
"properties": {
"count": 4
},
"geometry": {
"type": "Point",
"coordinates": [
115.89871, 28.556874
]
}
},
{
"type": "Feature",
"properties": {
"count": 4
},
"geometry": {
"type": "Point",
"coordinates": [
115.884337, 28.522433
]
}
},
{
"type": "Feature",
"properties": {
"count": 4
},
"geometry": {
"type": "Point",
"coordinates": [
115.868287, 28.524017
]
}
},
{
"type": "Feature",
"properties": {
"count": 4
},
"geometry": {
"type": "Point",
"coordinates": [
115.868287, 28.524017
]
}
},
{
"type": "Feature",
"properties": {
"count": 5
},
"geometry": {
"type": "Point",
"coordinates": [
115.945584, 28.573991
]
}
},
{
"type": "Feature",
"properties": {
"count": 5
},
"geometry": {
"type": "Point",
"coordinates": [
115.896661, 28.520309
]
}
},
{
"type": "Feature",
"properties": {
"count": 5
},
"geometry": {
"type": "Point",
"coordinates": [
115.844304, 28.577308
]
}
},
{
"type": "Feature",
"properties": {
"count": 5
},
"geometry": {
"type": "Point",
"coordinates": [
115.927045, 28.540217
]
}
},
{
"type": "Feature",
"properties": {
"count": 5
},
"geometry": {
"type": "Point",
"coordinates": [
115.901982, 28.539614
]
}
},
{
"type": "Feature",
"properties": {
"count": 5
},
"geometry": {
"type": "Point",
"coordinates": [
115.949575, 28.558726
]
}
},
{
"type": "Feature",
"properties": {
"count": 5
},
"geometry": {
"type": "Point",
"coordinates": [
115.845039, 28.601888
]
}
},
{
"type": "Feature",
"properties": {
"count": 5
},
"geometry": {
"type": "Point",
"coordinates": [
115.851047, 28.605317
]
}
},
{
"type": "Feature",
"properties": {
"count": 5
},
"geometry": {
"type": "Point",
"coordinates": [
115.867527, 28.595181
]
}
},
{
"type": "Feature",
"properties": {
"count": 5
},
"geometry": {
"type": "Point",
"coordinates": [
115.857828, 28.594503
]
}
},
{
"type": "Feature",
"properties": {
"count": 2
},
"geometry": {
"type": "Point",
"coordinates": [
116.072222, 28.799295
]
}
},
{
"type": "Feature",
"properties": {
"count": 5
},
"geometry": {
"type": "Point",
"coordinates": [
115.857007, 28.607604
]
}
},
]
}

424
super-screen/client/src/sections/community-safty/containers/gis.js

@ -1,30 +1,74 @@
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { render } from 'react-dom';
import { data as heatmapData } from './data'
import './gis.less'
const MAPDOMID = 'fs-amap-container';
let map = null;
let heatmap = null;
let loca = null;
let interval = null;
const MARKER_IMG_NAME = {
markergreen: '回迁房',
markerblue: '城中村',
markeryellow: '廉租房',
}
function Map(props) {
const [delay, setDelay] = useState(true)
const [tab, setTab] = useState('home')
// 地图初始化
const loadMap = () => {
// 图片图层 实现瓦片地图中国地图样式 bounds 第一个点为左下角 第二个点为右上角
const imageLayer = new AMap.ImageLayer({
url: '/assets/images/map.svg',
bounds: new AMap.Bounds(
[115.800221, 28.265659],
[116.334849, 28.973298],
),
zooms: [3, 14],
});
map = new AMap.Map(MAPDOMID, {
center: [115.89, 28.68],
center: [116.054664, 28.538966],
zoomEnable: true,
dragEnable: true,
viewMode: '3D',
pitch: 30,
pitch: 22.9,
labelzIndex: 130,
zoom: 18,
zoom: 10.3,
cursor: 'pointer',
mapStyle: 'amap://styles/4eb48d1ef0a024c73376fd2256d0b5a5',
layers: [
AMap.createDefaultLayer(),
imageLayer,
],
});
map.on('complete', () => {
setTimeout(() => {
setDelay(false)
}, 1000);
});
map.on('click', (e) => {
if (!e && !e.lnglat) {
return
}
const zoom = map.getZoom();
const pitch = map.getPitch();
const center = map.getCenter();
const Rotation = map.getRotation();
console.log('zoom' + zoom)
console.log('pitch' + pitch)
console.log('center' + center)
console.log('Rotation' + Rotation)
console.log('e.lnglat' + e.lnglat)
})
loca = new Loca.Container({ map: map })
};
@ -33,14 +77,386 @@ function Map(props) {
loadMap();
}, []);
const renderMarkers = () => {
map.clearMap();
map.setZoom(10.3)
map.setCenter([116.054664, 28.538966])
map.setPitch(22.9)
map.setRotation(1.7000)
if (loca && heatmap) loca.remove(heatmap)
if (tab == 'person') {
var geo = new Loca.GeoJSONSource({
data: heatmapData
});
heatmap = new Loca.HeatMapLayer({
// loca,
zIndex: 10,
opacity: 1,
visible: true,
zooms: [2, 22],
});
heatmap.setSource(geo, {
radius: 20,
unit: 'px',
height: 10,
// radius: 10,
// unit: 'px',
// height: 10,
gradient: {
0.1: 'rgba(50,48,118,1)',
0.2: 'rgba(127,60,255,1)',
0.4: 'rgba(166,53,219,1)',
0.6: 'rgba(254,64,95,1)',
0.8: 'rgba(255,98,4,1)',
1: 'rgba(236,220,79,1)',
},
value: function (index, feature) {
return feature.properties.count;
},
min: 0,
max: 10, //4.6
heightBezier: [0, .53, .37, .98],
});
loca.add(heatmap);
map.on('click', (e) => {
const feat = heatmap.queryFeature(e.pixel.toArray());
const random = Math.random()
if (feat) {
let infowindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: `<div id="map-content" class="gis-infowindow">
<div style="height:${330}px;" id="contentidheatmap${random}"></div></div>`,
offset: new AMap.Pixel(133, 260)
});
let position = map.getCenter();
infowindow.open(map, position);
setTimeout(() => {
if (document.getElementById(`contentidheatmap${random}`)) {
render(<div>
<div className='gis_exit' onClick={() => {
map.clearInfoWindow();
}} />
<div className='gis_item'>
<span className='gis_title'>小区名称</span>
<span className='gis_text'>小区名称</span>
</div>
<div className='gis_item'>
<span className='gis_title'>人口</span>
<span className='gis_text'>2344</span>
</div>
<div className='gis_item'>
<span className='gis_title'>新生儿</span>
<span className='gis_text'>23</span>
</div>
<div className='gis_item'>
<span className='gis_title'>老人</span>
<span className='gis_text'>342</span>
</div>
</div>,
document.getElementById(`contentidheatmap${random}`));
}
}, 50)
}
});
} else {
//初始层级 zoom14以下显示聚合点
const data = [
{ lng: 116.117906, lat: 28.678096, type: 'home', name: '廉租房1', kind: 'markergreen' },
{ lng: 116.195238, lat: 28.842114, type: 'home', name: '廉租房2', kind: 'markerblue' },
{ lng: 116.037227, lat: 28.558811, type: 'home', name: '廉租房3', kind: 'markeryellow' },
{ lng: 115.925856, lat: 28.558811, type: 'home', name: '廉租房4', kind: 'markergreen' },
{ lng: 115.989847, lat: 28.484411, type: 'home', name: '廉租房5', kind: 'markergreen' },
{ lng: 116.054664, lat: 28.538966, type: 'device', name: '廉租房1', kind: 'markergreen' },
{ lng: 116.074711, lat: 28.746745, type: 'device', name: '廉租房2', kind: 'markerblue' },
{ lng: 116.111632, lat: 28.56532, type: 'device', name: '廉租房3', kind: 'markeryellow' },
{ lng: 115.978519, lat: 28.56532, type: 'device', name: '廉租房4', kind: 'markergreen' },
{ lng: 115.95792, lat: 28.417395, type: 'device', name: '廉租房5', kind: 'markergreen' },
]
//zoom14以上显示详情
const databig = [
{ lng: 115.924246, lat: 28.554835, type: 'device', name: '廉租房1', kind: 'markergreenbig' },
{ lng: 115.921495, lat: 28.553053, type: 'device', name: '廉租房2', kind: 'markerbluebig' },
{ lng: 115.919115, lat: 28.557256, type: 'device', name: '廉租房3', kind: 'markeryellowbig' },
]
//初始点位显示
data.filter(s => s.type == tab).map((x, index) => {
var marker = new AMap.Marker({
position: new AMap.LngLat(x.lng, x.lat),
// 将一张图片的地址设置为 icon
icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
zooms: [3, 14],
});
marker.setTitle(x.name);
map.add(marker);
marker.on('click', () => {
map.setZoom(17.4)
map.setCenter([115.922069, 28.554867])
map.setPitch(47.30)
map.setRotation(1.7000)
})
})
//下钻点位显示
databig.map((x, index) => {
var marker = new AMap.Marker({
position: new AMap.LngLat(x.lng, x.lat),
// 将一张图片的地址设置为 icon
icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
zooms: [15, 19],
});
marker.setTitle(x.name);
map.add(marker);
let infowindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: `<div id="map-content" class="gis-infowindow">
<div style="height:${360}px;" id="contentid${x.name}"></div></div>`,
offset: new AMap.Pixel(233, 260)
});
marker.on('click', () => {
let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
infowindow.open(map, position);
map.setCenter(position)
setTimeout(() => {
if (document.getElementById(`contentid${x.name}`)) {
render(<div>
<div className='gis_exit' onClick={() => {
map.setCenter([115.922069, 28.554867])
map.clearInfoWindow();
}} />
<div className='gis_item'>
<span className='gis_title'>小区名称</span>
<span className='gis_text'>{x.name}</span>
</div>
<div className='gis_item'>
<span className='gis_title'>人流量</span>
<span className='gis_text'>123</span>
<span className='gis_title' style={{ marginLeft: 20 }}>房龄</span>
<span className='gis_text'>9</span>
</div>
<div className='gis_item'>
<span className='gis_title'>租赁中房屋</span>
<span className='gis_text'>165</span>
</div>
<div className='gis_item'>
<span className='gis_title'>网格员</span>
<span className='gis_text'>张三</span>
</div>
<div className='gis_item'>
<span className='gis_title'>手机号码</span>
<span className='gis_text'>15765845845</span>
</div>
</div>,
document.getElementById(`contentid${x.name}`));
}
}, 50)
})
})
if (tab == 'device') {
const data = [
{ lng: 115.921895, lat: 28.556351, type: 'device', name: '廉租房1', kind: 'devicemarker' },
{ lng: 115.920839, lat: 28.555323, type: 'device', name: '廉租房2', kind: 'devicemarker' },
{ lng: 115.918329, lat: 28.55445, type: 'device', name: '廉租房3', kind: 'devicemarker' },
{ lng: 115.919309, lat: 28.553166, type: 'device', name: '廉租房1', kind: 'devicemarker' },
{ lng: 115.921585, lat: 28.553925, type: 'device', name: '廉租房2', kind: 'devicemarker' },
{ lng: 115.92565, lat: 28.556996, type: 'device', name: '廉租房3', kind: 'devicemarker' },
{ lng: 115.922671, lat: 28.558769, type: 'device', name: '廉租房1', kind: 'devicemarker' },
]
data.filter(s => s.type == tab).map((x, index) => {
var marker = new AMap.Marker({
position: new AMap.LngLat(x.lng, x.lat),
// 将一张图片的地址设置为 icon
icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
zooms: [15, 19],
});
marker.setTitle(x.name);
map.add(marker);
})
}
}
}
const renderAlarms = () => {
if (tab == 'person') {
return;
}
const alarms = [
{ lng: 115.92365, lat: 28.557404, type: 'device', name: '廉租房1', kind: 'markeralarm' },
]
alarms.map((x, index) => {
var marker = new AMap.Marker({
position: new AMap.LngLat(x.lng, x.lat),
// 将一张图片的地址设置为 icon
icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
zooms: [15, 19],
});
marker.setTitle(x.name);
map.add(marker);
let infowindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: `<div id="map-content" class="gis-infowindow gis-infowindow-alarm">
<div style="height:${360}px;" id="alarmcontentid${x.name}"></div></div>`,
offset: new AMap.Pixel(233, 260)
});
let alarmOk = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
// content: `<div id="map-content" class="gis-infowindow gis-infowindow-alarm">
// <div style="height:${360}px;" id="contentid${x.name}"></div></div>`,
offset: new AMap.Pixel(233, 440)
});
marker.on('click', () => {
let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
infowindow.open(map, position);
map.setCenter(position)
setTimeout(() => {
if (document.getElementById(`alarmcontentid${x.name}`)) {
render(<div>
<div className='gis_exit' onClick={() => {
map.setCenter([115.922069, 28.554867])
map.clearInfoWindow();
}} />
<div className='gis_item'>
<span className='gis_title'>小区名称</span>
<span className='gis_text'>{x.name}</span>
</div>
<div className='gis_item'>
<span className='gis_title'>人流量</span>
<span className='gis_text'>123</span>
<span className='gis_title' style={{ marginLeft: 20 }}>房龄</span>
<span className='gis_text'>9</span>
</div>
<div className='gis_item'>
<span className='gis_title'>租赁中房屋</span>
<span className='gis_text'>165</span>
</div>
<div className='gis_item'>
<span className='gis_title'>网格员</span>
<span className='gis_text'>张三</span>
</div>
<div className='gis_item'>
<span className='gis_title'>手机号码</span>
<span className='gis_text'>15765845845</span>
</div>
<div><span className='confirm_text'>人流量较大确认是否安装消防设施</span></div>
<div className='alarm_confirm'>
<div className='alarm_cancel'></div>
<div className='alarm_ok'></div>
</div>
</div>,
document.getElementById(`alarmcontentid${x.name}`));
}
}, 50)
})
})
}
const renderLeftTop = () => {
return tab == 'person' ?
<div className='home_left'>
<div className='hometotalbg'>区域总人数</div>
<div className='home_total_number'>455 <span style={{ fontSize: 12 }}></span></div>
<div className='hqtotal'>新生儿总数</div>
<div className='home_total_number'>45<span style={{ fontSize: 12 }}></span></div>
<div className='cztotal'>老人总数</div>
<div className='home_total_number'>45<span style={{ fontSize: 12 }}></span></div>
</div> :
<div className='home_left'>
<div className='hometotalbg'>租赁房屋总数</div>
<div className='home_total_number'>4556</div>
<div className='hqtotal'>回迁房总数</div>
<div className='home_total_number'>4556</div>
<div className='cztotal'>城中村总数</div>
<div className='home_total_number'>4556</div>
<div className='lztotal'>廉租房</div>
<div className='home_total_number'>4556</div>
</div>
}
const renderRightBottom = () => {
return <div className='home_right'>
<div className='_lz'>
<div className='_icon' />
<span>廉租房</span>
</div>
<div className='_hq'>
<div className='_icon' />
<span>回迁房</span>
</div>
<div className='_cz'>
<div className='_icon' />
<span>城中村</span>
</div>
</div>
}
return (
<>
{/* 延缓加载遮罩 */}
{delay && <div style={{
width: '100%', height: '100%', left: 0, top: 0, zIndex: 1000, background: '#02152f', position: 'absolute',
display: 'flex', alignItems: 'center', justifyContent: 'center'
}}>
</div>}
{/* 地图容器 */}
<div className="gis" id={MAPDOMID} />
{map && renderMarkers()}
{map && renderAlarms()}
{/* 底部按钮 */}
{!delay && [
{ name: '房屋分布', tab: 'home' },
{ name: '人口分布', tab: 'person' },
{ name: '基础设施', tab: 'device' }
].map((s, index) => {
return <div className={'gis-button' + (index + 1)}
onClick={() => { setTab(s.tab) }}
>
<div className={`button_img ${tab == s.tab ? 'button_img_select' : ''}`} />
<div>{s.name}</div>
</div>
})
}
{/* 左上角图例 */}
{renderLeftTop()}
{renderRightBottom()}
{/* 四周遮罩 */}
<div className='gis-left'></div>
<div className='gis-right'></div>
<div className='gis-top'></div>
<div className='gis-bottom'></div>
</>
);
}

408
super-screen/client/src/sections/community-safty/containers/gis.less

@ -0,0 +1,408 @@
.gis-left {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 20%;
background: linear-gradient(270deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
}
.gis-right {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20%;
background: linear-gradient(90deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
}
.gis-top {
position: absolute;
left: 0;
top: 0;
height: 10%;
width: 100%;
background: linear-gradient(0deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
}
.gis-bottom {
position: absolute;
left: 0;
bottom: 0;
height: 10%;
width: 100%;
background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%);
}
.gis-button1 {
position: absolute;
left: 39%;
bottom: -5%;
font-family: YouSheBiaoTiHei;
font-size: 12px;
color: #ECF7FF;
letter-spacing: 0;
width: 76.95px;
text-align: center;
cursor: pointer;
z-index: 999;
.button_img {
background: url('/assets/images/homePage/communtity/home.png');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 76.95px;
height: 64px;
}
.button_img_select {
background: url('/assets/images/homePage/communtity/homeselect.png');
}
}
.gis-button2 {
position: absolute;
left: 48%;
bottom: -3%;
font-family: YouSheBiaoTiHei;
font-size: 12px;
color: #ECF7FF;
letter-spacing: 0;
width: 76.95px;
text-align: center;
cursor: pointer;
z-index: 999;
.button_img {
background: url('/assets/images/homePage/communtity/personbutton.png');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 76.95px;
height: 64px;
}
.button_img_select {
background: url('/assets/images/homePage/communtity/personbuttonselect.png');
}
}
.gis-button3 {
position: absolute;
left: 57%;
bottom: -5%;
font-family: YouSheBiaoTiHei;
font-size: 12px;
color: #ECF7FF;
letter-spacing: 0;
width: 76.95px;
text-align: center;
cursor: pointer;
z-index: 999;
.button_img {
background: url('/assets/images/homePage/communtity/devicebutton.png');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 76.95px;
height: 64px;
}
.button_img_select {
background: url('/assets/images/homePage/communtity/devicebuttonselect.png');
}
}
.gis-infowindow {
width: 302px;
height: 420px;
background: url('/assets/images/homepage/communtity/infowindowbg.png') no-repeat;
background-size: 100% 100%;
opacity: 0.8;
padding-left: 69px;
padding-left: 22px;
padding-top: 157px;
color: #fff;
.gis_exit {
cursor: pointer;
position: absolute;
right: 9px;
top: 42px;
width: 30.75px;
height: 23px;
background: url('/assets/images/homepage/communtity/exit.png') no-repeat;
background-size: 100% 100%;
}
.gis_item {
height: 35px;
background-image: linear-gradient(180deg, #0555a791 0%, #022a6f91 100%);
width: 93%;
display: flex;
align-items: center;
padding-left: 20px;
.gis_title {
font-family: SourceHanSansCN-Regular;
font-weight: 400;
font-size: 14px;
color: #C3E6FF;
letter-spacing: 0;
margin-right: 12px;
}
.gis_text {
font-family: SourceHanSansCN-Regular;
font-weight: 400;
font-size: 14px;
color: #FFFFFF;
letter-spacing: 0;
line-height: 21px;
}
}
}
.gis-infowindow-alarm {
background: url('/assets/images/homepage/communtity/alarminfowindow.png') no-repeat;
height: 432px;
width: 311px;
padding-top: 107px;
.gis_exit {
cursor: pointer;
position: absolute;
right: 2px;
top: 15px;
width: 30.75px;
height: 23px;
background: url('/assets/images/homepage/communtity/exitalarm.png') no-repeat;
background-size: 100% 100%;
}
.gis_item {
margin-bottom: 10px;
height: 35px;
background-image: linear-gradient(180deg, #a7050591 0%, #48010191 100%);
;
}
.confirm_text {
font-family: SourceHanSansCN-Medium;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 0;
line-height: 21px;
}
.alarm_confirm {
width: 100%;
display: flex;
justify-content: space-around;
margin-top: 15px;
.alarm_cancel {
width: 81px;
height: 30px;
background-image: linear-gradient(180deg, #C50000 1%, #b600006e 52%, #C50000 100%);
box-shadow: inset 0 1px 14px 0 #ff2b2b59;
border-radius: 4px;
font-family: SourceHanSansCN-Medium;
font-weight: 500;
font-size: 14px;
color: #FFE8E8;
text-align: center;
line-height: 30px;
background: url('/assets/images/homepage/communtity/alarmcancel.png') no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.alarm_ok {
text-align: center;
line-height: 30px;
width: 81px;
height: 30px;
background-image: linear-gradient(180deg, #C50000 1%, #b600006e 52%, #C50000 100%);
box-shadow: inset 0 1px 14px 0 #ff2b2b59;
border-radius: 4px;
font-family: SourceHanSansCN-Medium;
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
cursor: pointer;
}
}
.alarm_button {
width: 103px;
height: 30px;
margin-top: 24px;
display: flex;
align-items: center;
justify-content: center;
font-family: SourceHanSansCN-Medium;
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
letter-spacing: 0;
background: url('/assets/images/homepage/communtity/alarmbutton.png') no-repeat;
background-size: 100% 100%;
margin-left: 89px;
cursor: pointer;
.alarm_icon {
width: 18px;
height: 18px;
background: url('/assets/images/homepage/communtity/alarmicon.png') no-repeat;
background-size: 100% 100%;
}
}
}
.home_left {
position: absolute;
left: 26%;
top: 3%;
z-index: 999;
font-family: YouSheBiaoTiHei;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 1.33px;
text-shadow: -2px 0 0 #0C5FA6;
.hometotalbg {
width: 126.45px;
height: 26.23px;
padding-left: 24px;
background: url('/assets/images/homepage/communtity/total.png') no-repeat;
background-size: 100% 100%;
}
.home_total_number {
font-family: D-DIN-Italic;
font-weight: Italic;
font-size: 28px;
color: #EAF2FF;
letter-spacing: 0;
margin-left: 40px;
}
.hqtotal {
width: 126.45px;
height: 26.23px;
padding-left: 24px;
background: url('/assets/images/homepage/communtity/hqtotal.png') no-repeat;
background-size: 100% 100%;
}
.cztotal {
width: 126.45px;
height: 26.23px;
padding-left: 24px;
background: url('/assets/images/homepage/communtity/cztotal.png') no-repeat;
background-size: 100% 100%;
}
.lztotal {
width: 126.45px;
height: 26.23px;
padding-left: 24px;
background: url('/assets/images/homepage/communtity/lztotal.png') no-repeat;
background-size: 100% 100%;
}
}
.home_right {
position: absolute;
right: 26%;
bottom: 7%;
z-index: 999;
font-family: YouSheBiaoTiHei;
font-size: 14px;
background: #021d33ad;
// border: 1px solid rgba(2, 29, 51, 0.68);
padding: 7px 14px 7px 14px;
border: 1px solid;
border-image: linear-gradient(133deg, rgba(0, 197, 255, 0.53) 0%, rgba(0, 138, 255, 0.62)) 1;
._lz {
display: flex;
align-items: center;
._icon {
display: inline-block;
width: 15px;
height: 15px;
background: url('/assets/images/homepage/communtity/lzicon.png') no-repeat;
background-size: 100% 100%;
margin-right: 4px;
}
span {
font-family: YouSheBiaoTiHei;
font-size: 14px;
letter-spacing: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(250, 196, 110, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
._hq {
display: flex;
align-items: center;
margin-top: 10px;
._icon {
display: inline-block;
width: 15px;
height: 15px;
background: url('/assets/images/homepage/communtity/hqicon.png') no-repeat;
background-size: 100% 100%;
margin-right: 4px;
}
span {
font-family: YouSheBiaoTiHei;
font-size: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(36, 220, 247, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0;
}
}
._cz {
display: flex;
align-items: center;
margin-top: 10px;
._icon {
display: inline-block;
width: 15px;
height: 15px;
background: url('/assets/images/homepage/communtity/czicon.png') no-repeat;
background-size: 100% 100%;
margin-right: 4px;
}
span {
font-family: YouSheBiaoTiHei;
font-size: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(1, 140, 255, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0;
}
}
}

6
super-screen/client/src/sections/homePage/containers/homePage.js

@ -8,13 +8,15 @@ function homePage(props) {
const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
const cardHeight = document.body.clientHeight * 0.896 * 0.32
const cardContentHeight = cardHeight - 42 - 13
return <div className='homepage'>
return <div className='enter_homepage'>
<div className='_enter_title'></div>
<div className='_enter_row1'>
<div className='_row1_item'></div>
</div>
<div className='_enter_row2'>
<div className='_row2_item1' onClick={() => { dispatch(push('/waterprevention')) }}></div>
<div className='_row2_item1' onClick={() => {
// dispatch(push('/waterprevention'))
}}></div>
<div className='_row2_item2' onClick={() => { dispatch(push('/communitysafty')) }}></div>
<div className='_row2_item3'></div>
</div>

4
super-screen/client/src/sections/homePage/containers/style.less

@ -1,10 +1,10 @@
.homepage {
.enter_homepage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url('/assets/images/homePage/enter/bg.png');
background: url('/assets/images/homePage/enter/bg.png') !important;
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;

Loading…
Cancel
Save