Browse Source

首页样式

master
liujiangyong 2 years ago
parent
commit
0f3836f1cd
  1. 9
      web/client/assets/images/homePage/rank.svg
  2. 46
      web/client/assets/images/homePage/today_alarm.svg
  3. 64
      web/client/assets/images/homePage/today_event.svg
  4. 33
      web/client/assets/images/homePage/today_inspection.svg
  5. 2
      web/client/src/layout/containers/layout/index.js
  6. 62
      web/client/src/sections/shouye/components/alarm/alarmStatistics.js
  7. 43
      web/client/src/sections/shouye/components/alarm/alarmStatistics.less
  8. 24
      web/client/src/sections/shouye/components/charts/column.js
  9. 36
      web/client/src/sections/shouye/components/charts/stackColumn.js
  10. 24
      web/client/src/sections/shouye/components/charts/style.less
  11. 26
      web/client/src/sections/shouye/components/charts/xColumn.js
  12. 164
      web/client/src/sections/shouye/containers/shouye.js
  13. 144
      web/client/src/sections/shouye/style.less

9
web/client/assets/images/homePage/rank.svg

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 16" class="design-iconfont">
<defs>
<path id="q0cn0u75p__b61gv11hva" d="M0 3H24V19H0z"/>
<mask id="q0cn0u75p__tub1dek66b" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="24" height="16" fill="#fff">
<use xlink:href="#q0cn0u75p__b61gv11hva"/>
</mask>
</defs>
<use mask="url(#q0cn0u75p__tub1dek66b)" xlink:href="#q0cn0u75p__b61gv11hva" transform="translate(0 -3)" fill="#FF7734" stroke="#FF7734" fill-rule="evenodd" fill-opacity=".1" stroke-dasharray="0,0"/>
</svg>

After

Width:  |  Height:  |  Size: 622 B

46
web/client/assets/images/homePage/today_alarm.svg

@ -0,0 +1,46 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 135" class="design-iconfont">
<defs>
<linearGradient x1="20.7281266%" y1="65.9377474%" x2="74.0654352%" y2="70.2326168%" id="xgwu4n8xl__qhbc55nvza">
<stop stop-color="#FF9595" offset="0%"/>
<stop stop-color="#FFC9C9" offset="58.4889232%"/>
<stop stop-color="#FF9595" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="xgwu4n8xl__4hjl6ztlab">
<stop stop-color="#F66" offset="0%"/>
<stop stop-color="#FFC1C1" offset="100%"/>
</linearGradient>
<linearGradient x1="70.636432%" y1="12.3836732%" x2="35.5144539%" y2="88.1879995%" id="xgwu4n8xl__sqbs6y5ssc">
<stop stop-color="#F66" offset="0%"/>
<stop stop-color="#FFB4B4" offset="100%"/>
</linearGradient>
<linearGradient x1="57.8795207%" y1="12.3836732%" x2="44.4690458%" y2="88.1879995%" id="xgwu4n8xl__ymvnmmmc8d">
<stop stop-color="#FB7D7D" offset="0%"/>
<stop stop-color="#FFB4B4" offset="100%"/>
</linearGradient>
<linearGradient x1="86.0282035%" y1="43.0479834%" x2="24.710347%" y2="57.0576696%" id="xgwu4n8xl__qgtxa9s8xe">
<stop stop-color="#F66" offset="0%"/>
<stop stop-color="#FFB4B4" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M26.0666763,49.8088251 C31.0306933,47.1852682 61.5584474,35.7828583 117.649939,15.6015954 C165.058629,-1.45566643 206.885789,-4.52636918 243.131419,6.38948716 L243.131243,6.39006988 C257.09979,10.5979061 266.961089,23.0716793 267.831717,37.6342404 C268.610591,50.6669615 269,63.0694338 269,74.841654 C269,86.4324635 268.6225,98.6232449 267.8675,111.413998 C267.118888,124.098405 256.61347,134.00117 243.906991,134 L27.299275,134 C19.7776334,134.00025 12.6909178,130.474235 8.15456024,124.474522 C2.71818675,117.284384 0,106.896414 0,93.310611 C0,71.806572 8.33924068,57.4715256 25.017722,50.3054718 L25.0188174,50.3080224 C25.3744429,50.1552971 25.7237667,49.9882965 26.0659376,49.8074275 Z" fill="#FFF1F1" transform="translate(.553794 .954571)"/>
<path d="M0,32.3386049 L12.799,32.3378089 L45.0748919,10.1304683 C46.1380998,9.39892238 47.8619002,9.39892238 48.9251081,10.1304683 L81.2,32.3378089 L94,32.3386049 L94,41.9204138 C94,42.3998178 93.734198,42.8792219 93.2025941,43.2449948 L48.9251081,73.7103592 C47.8619002,74.4419052 46.1380998,74.4419052 45.0748919,73.7103592 L0.797405879,43.2449948 C0.26580196,42.8792219 -5.55111512e-17,42.3998178 -2.77555756e-17,41.9204138 L0,32.3386049 Z" fill="url(#xgwu4n8xl__qhbc55nvza)" transform="translate(14.553794 37.695552)"/>
<path d="M0.797405879,31.0140238 L45.0748919,0.54865944 C46.1380998,-0.18288648 47.8619002,-0.18288648 48.9251081,0.54865944 L93.2025941,31.0140238 C94.265802,31.7455698 94.265802,32.93164 93.2025941,33.663186 L48.9251081,64.1285504 C47.8619002,64.8600963 46.1380998,64.8600963 45.0748919,64.1285504 L0.797405879,33.663186 C-0.26580196,32.93164 -0.26580196,31.7455698 0.797405879,31.0140238 Z" fill="#FFE7E7" transform="translate(14.553794 37.695552)"/>
<path d="M9.17247062,12.8136668 C9.74759228,12.396714 10.434005,12.18072 11.2317088,12.1656849 C12.0294125,12.1506498 12.7088352,12.3465409 13.2699767,12.7533584 L21.3633637,18.6209177 C21.9245052,19.0277352 22.2001022,19.524216 22.1901548,20.1103603 C22.1802073,20.6965045 21.8876728,21.198053 21.3125511,21.6150058 L13.0175271,27.6287484 C12.4424054,28.0457012 11.7561271,28.2537743 10.9586922,28.25297 C10.1612572,28.2521611 9.48196907,28.048349 8.92082757,27.6415316 L0.827440562,21.7739722 C0.266299069,21.3671548 -0.0094323992,20.8785948 0.000246157598,20.3082923 C0.0099247144,19.7379898 0.302324868,19.2443622 0.877446552,18.8274094 L9.17247062,12.8136668 Z M25.3592446,24.5487855 C25.9343663,24.1318327 26.620779,23.9158387 27.4184828,23.9008036 C28.2161865,23.8857685 28.8956092,24.0816596 29.4567507,24.4884771 L37.5825113,30.3795067 C38.1436528,30.7863241 38.4138542,31.2788933 38.3931156,31.8572141 C38.372377,32.4355349 38.0744469,32.9331717 37.4993252,33.3501245 L29.2043011,39.3638671 C28.6291795,39.7808199 27.9482968,39.9928047 27.161653,39.9998215 C26.3750093,40.0068383 25.7011167,39.806938 25.1399752,39.4001205 L17.0142146,33.5090909 C16.4530731,33.1022735 16.1773416,32.6137135 16.1870202,32.043411 C16.1966987,31.4731085 16.4890989,30.9794809 17.0642206,30.5625281 L25.3592446,24.5487855 Z M41.9824729,12.4972454 C42.5575946,12.0802926 43.2384773,11.8683077 44.025121,11.8612909 C44.8117648,11.8542741 45.4856573,12.0541745 46.0467989,12.4609919 L54.1725594,18.3520215 C54.7337009,18.758839 55.0094324,19.2473989 54.9997538,19.8177014 C54.9900753,20.3880039 54.6976751,20.8816316 54.1225534,21.2985844 L45.8275294,27.312327 C45.2524077,27.7292798 44.565995,27.9452738 43.7682912,27.9603089 C42.9705875,27.975344 42.2911648,27.7794528 41.7300233,27.3726354 L33.6042628,21.4816058 C33.0431213,21.0747883 32.7729198,20.5822192 32.7936584,20.0038984 C32.814397,19.4255775 33.1123272,18.9279407 33.6874488,18.5109879 L41.9824729,12.4972454 Z M33.9688225,0.000211910303 C34.8428711,-0.00758452812 35.5712573,0.199749391 36.1539812,0.622213666 C36.7367051,1.04467794 37.0118988,1.56492139 36.9795625,2.182944 L36.8295445,11.0226326 C36.8187906,11.656302 36.5203227,12.1856223 35.934141,12.6105935 C35.3479593,13.0355646 34.6178442,13.2519484 33.7437956,13.2597448 L21.5508178,13.3685052 C20.7204716,13.3759118 20.0139366,13.1683829 19.4312127,12.7459187 C18.8484888,12.3234544 18.5514439,11.8034059 18.5400778,11.1857731 L18.6900958,2.34608445 C18.7224321,1.72806184 19.0316911,1.20656496 19.6178728,0.781593821 C20.2040545,0.356622681 20.9233785,0.132415483 21.7758447,0.108972228 L33.9688225,0.000211910303 Z" transform="translate(34 48.999999)" fill="#FFCDCD" fill-rule="nonzero"/>
<g>
<path fill="#D8D8D8" transform="matrix(-1 0 0 1 58.004882 7)" d="M21.5024412 0.223983437L43.0048823 30.618157 34.7916806 55.0165963 8.21320168 39.7014874 0 5.83779035z"/>
<path fill="url(#xgwu4n8xl__4hjl6ztlab)" transform="matrix(-1 0 0 1 69.995118 7)" d="M27.4975588 6.20738712L49 36.6015607 40.7867983 61 14.2083194 42.6848911 5.99511768 11.821194z"/>
<g fill="#FFC8C8" fill-rule="nonzero">
<path d="M9.48493718,22.3397875 C8.99990142,22.619823 8.60670225,22.3955422 8.60670225,21.8388423 L8.60670225,10.9928227 C8.60670225,10.4361228 8.99990142,9.7578147 9.48493718,9.47777918 C9.96604912,9.21073435 10.3538275,9.43192314 10.3631721,9.97872439 L10.3631721,20.824744 C10.3631721,21.3443306 10.0206519,21.9698514 9.58063055,22.2786242 L9.48493718,22.3397875 Z" transform="translate(33.885626 27.04394)"/>
<path d="M9.48493718,11.4937679 C8.99990142,11.8740095 8.5359264,11.7718241 8.44861997,11.2655306 C8.36131353,10.759237 8.68373685,10.0405584 9.1687726,9.66031688 L16.5108166,2.19580379 C16.8082881,1.86183428 17.1598347,1.70130095 17.4213958,1.77998884 C17.6829569,1.85867674 17.810563,2.16335807 17.7519222,2.56917727 C17.6932814,2.97499647 17.4582516,3.41373347 17.1431457,3.70559795 L9.87136054,11.2706663 C9.77044953,11.3629771 9.66441399,11.4310067 9.56145317,11.4700213 L9.48493718,11.4937679 Z" transform="translate(33.885626 27.04394)"/>
<path d="M9.48493718,11.4937679 C9.38099074,11.582077 9.27271905,11.6445877 9.1687726,11.6763056 L2.17802261,12.4465152 C1.86291675,12.5185037 1.62788691,12.3511558 1.56924613,12.0130491 C1.51060535,11.6749424 1.63821141,11.2229143 1.89977254,10.8422016 C2.13227133,10.5037904 2.43586971,10.2722947 2.70938942,10.2183422 L9.73084296,9.33580541 C10.2158787,9.13370788 10.55403,9.45295182 10.486125,10.0488567 C10.41822,10.6447616 9.96997293,11.2916704 9.48493718,11.4937679 Z" transform="translate(33.885626 27.04394)"/>
<path d="M0,12.6153632 C0,13.9959791 0.975133938,14.5521955 2.17802261,13.8577074 C3.38091128,13.1632193 4.35604522,11.4810152 4.35604522,10.1003994 C4.35604522,8.71978354 3.38091128,8.16356713 2.17802261,8.85805523 C1.02139889,9.52583224 0.0753472182,11.1068082 0.00428499476,12.4547964 L0,12.6153632 Z" transform="translate(33.885626 27.04394)"/>
<path d="M7.51769095,22.4877432 C7.51769095,23.868359 8.49282489,24.4245754 9.69571356,23.7300873 C10.8986022,23.0355992 11.8737362,21.3533951 11.8737362,19.9727793 C11.8737362,18.5921635 10.8986022,18.0359471 9.69571356,18.7304352 C8.53908984,19.3982122 7.59303817,20.9791882 7.52197594,22.3271763 L7.51769095,22.4877432 Z" transform="translate(33.885626 27.04394)"/>
<path d="M14.8246055,4.05637326 C14.8246055,5.43698907 15.7997395,5.99320549 17.0026281,5.29871739 C18.2055168,4.60422929 19.1806507,2.92202519 19.1806507,1.54140937 C19.1806507,0.160793557 18.2055168,-0.395422857 17.0026281,0.299065242 C15.7997395,0.993553341 14.8246055,2.67575744 14.8246055,4.05637326 Z" transform="translate(33.885626 27.04394)"/>
</g>
<path fill="url(#xgwu4n8xl__sqbs6y5ssc)" d="M21.4174916 0L27.7010101 6.22194854 5.99511768 36.6015607 3.64051444e-13 30.618157z" transform="translate(15 7)"/>
<path fill="url(#xgwu4n8xl__ymvnmmmc8d)" d="M0 30.618157L5.99511768 36.6015607 14.2083194 61 8.21320168 55.0165963z" transform="translate(15 7)"/>
<path fill="url(#xgwu4n8xl__qgtxa9s8xe)" d="M21.5024412 0L27.7219808 6.20738712 49 11.821194 43.0048823 5.83779035z" transform="translate(15 7)"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.1 KiB

64
web/client/assets/images/homePage/today_event.svg

@ -0,0 +1,64 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 135" class="design-iconfont">
<defs>
<linearGradient x1="20.7281266%" y1="65.9377474%" x2="74.0654352%" y2="70.2326168%" id="l0ug50x81__lj5zltj3la">
<stop stop-color="#49BAC7" offset="0%"/>
<stop stop-color="#12C1DF" offset="59.0679015%"/>
<stop stop-color="#49BAC7" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.4231964%" id="l0ug50x81__gmo7sjj4ub">
<stop stop-color="#7CC4CC" offset="0%"/>
<stop stop-color="#E2FCFF" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="l0ug50x81__8cmolsjq3c">
<stop stop-color="#ABEBFF" offset="0%"/>
<stop stop-color="#49BAC7" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="l0ug50x81__coqgu9shqd">
<stop stop-color="#ABEBFF" offset="0%"/>
<stop stop-color="#49BAC7" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.4231964%" id="l0ug50x81__3vzj4a904e">
<stop stop-color="#7CC4CC" offset="0%"/>
<stop stop-color="#E2FCFF" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="l0ug50x81__m10vk4j02f">
<stop stop-color="#ABEBFF" offset="0%"/>
<stop stop-color="#49BAC7" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="l0ug50x81__uzz2it9bvg">
<stop stop-color="#ABEBFF" offset="0%"/>
<stop stop-color="#49BAC7" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.4231964%" id="l0ug50x81__pkcfops04h">
<stop stop-color="#7CC4CC" offset="0%"/>
<stop stop-color="#E2FCFF" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="l0ug50x81__qhky1lzg9i">
<stop stop-color="#ABEBFF" offset="0%"/>
<stop stop-color="#49BAC7" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="l0ug50x81__pvfdn4h1gj">
<stop stop-color="#ABEBFF" offset="0%"/>
<stop stop-color="#49BAC7" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M26.0666763,49.8088251 C31.0306933,47.1852682 61.5584474,35.7828583 117.649939,15.6015954 C165.058629,-1.45566643 206.885789,-4.52636918 243.131419,6.38948716 L243.131243,6.39006988 C257.09979,10.5979061 266.961089,23.0716793 267.831717,37.6342404 C268.610591,50.6669615 269,63.0694338 269,74.841654 C269,86.4324635 268.6225,98.6232449 267.8675,111.413998 C267.118888,124.098405 256.61347,134.00117 243.906991,134 L27.299275,134 C19.7776334,134.00025 12.6909178,130.474235 8.15456024,124.474522 C2.71818675,117.284384 0,106.896414 0,93.310611 C0,71.806572 8.33924068,57.4715256 25.017722,50.3054718 L25.0188174,50.3080224 C25.3744429,50.1552971 25.7237667,49.9882965 26.0659376,49.8074275 Z" fill="#EFF9FF" transform="translate(.553794 .954571)"/>
<path d="M0,31.3386049 L12.799,31.3378089 L45.0748919,9.1304683 C46.1380998,8.39892238 47.8619002,8.39892238 48.9251081,9.1304683 L81.2,31.3378089 L94,31.3386049 L94,40.9204138 C94,41.3998178 93.734198,41.8792219 93.2025941,42.2449948 L48.9251081,72.7103592 C47.8619002,73.4419052 46.1380998,73.4419052 45.0748919,72.7103592 L0.797405879,42.2449948 C0.26580196,41.8792219 -5.55111512e-17,41.3998178 -2.77555756e-17,40.9204138 L0,31.3386049 Z" fill="url(#l0ug50x81__lj5zltj3la)" transform="translate(14.553794 38.695552)"/>
<path d="M0.797405879,31.0140238 L45.0748919,0.54865944 C46.1380998,-0.18288648 47.8619002,-0.18288648 48.9251081,0.54865944 L93.2025941,31.0140238 C94.265802,31.7455698 94.265802,32.93164 93.2025941,33.663186 L48.9251081,64.1285504 C47.8619002,64.8600963 46.1380998,64.8600963 45.0748919,64.1285504 L0.797405879,33.663186 C-0.26580196,32.93164 -0.26580196,31.7455698 0.797405879,31.0140238 Z" fill="#DAF4FE" transform="translate(14.553794 38.695552)"/>
<path d="M26.3305228,19.7626354 L25.4451939,27 L19,22.5649819 L19.7790894,14.2797834 L20.1686341,14.3041516 L32.7403035,14.9620939 L32.3153457,0 L39.3979764,0.487364621 L40,20.5911552 L39.6458685,20.4936823 L26.3305228,19.7626354 Z M52.9096244,13.9406308 C53.3630673,13.6351268 53.8881064,13.401979 54.4847418,13.2411874 C55.0813772,13.0803958 55.6780125,13 56.2746479,13 C56.8712833,13 57.4619523,13.076376 58.0466549,13.229128 C58.6313576,13.38188 59.1504304,13.611008 59.6038732,13.9165121 C60.0811815,14.2380952 60.4331964,14.5958565 60.6599178,14.9897959 C60.8866393,15.3837353 61,15.7816945 61,16.1836735 C61,16.5856524 60.8806729,16.9876314 60.6420188,17.3896104 C60.4033646,17.7915894 60.0573161,18.1453309 59.6038732,18.4508349 L30.5,38.0593692 C30.0226917,38.3809524 29.4916862,38.61812 28.9069836,38.770872 C28.3222809,38.923624 27.7316119,39 27.1349765,39 C26.5383412,39 25.9476721,38.923624 25.3629695,38.770872 C24.7782668,38.61812 24.2472613,38.3809524 23.7699531,38.0593692 L1.39612676,22.9851577 C0.942683881,22.6796537 0.596635368,22.3259122 0.357981221,21.9239332 C0.119327074,21.5219542 0,21.1199753 0,20.7179963 C0,20.3160173 0.11336072,19.9180581 0.34008216,19.5241187 C0.566803599,19.1301793 0.918818466,18.7724181 1.39612676,18.4508349 C1.84956964,18.1453309 2.37460876,17.9121831 2.97124413,17.7513915 C3.5678795,17.5905999 4.16451487,17.5102041 4.76115023,17.5102041 C5.3577856,17.5102041 5.95442097,17.5905999 6.55105634,17.7513915 C7.14769171,17.9121831 7.67273083,18.1453309 8.12617371,18.4508349 L27.1707746,31.2820037 L52.9096244,13.9406308 Z" transform="translate(33 54.999999)" fill="#AEE5ED" fill-rule="nonzero"/>
<path fill="url(#l0ug50x81__gmo7sjj4ub)" d="M0 5.10447851L9.59233235 0 19.2820513 5.10447851 9.81933475 10.9580012z" transform="translate(51.912768 14.954571)"/>
<path fill="url(#l0ug50x81__8cmolsjq3c)" d="M0 5.10447851L9.59233235 10.5848176 9.59233235 40.7226877 0 35.2423486z" transform="translate(51.912768 14.954571)"/>
<path fill="url(#l0ug50x81__coqgu9shqd)" transform="matrix(1 0 0 -1 51.912768 60.781737)" d="M9.59233235 5.10447851L19.2820513 10.5848176 19.2820513 40.7226877 9.59233235 35.2423486z"/>
<g>
<path fill="url(#l0ug50x81__3vzj4a904e)" d="M0 5.07010668L9.59233235 0 19.2820513 5.07010668 9.81933475 10.8842137z" transform="translate(35.040973 30.52501)"/>
<path fill="url(#l0ug50x81__m10vk4j02f)" d="M0 5.07010668L9.59233235 10.513543 9.59233235 34.7340571 0 29.2906208z" transform="translate(35.040973 30.52501)"/>
<path fill="url(#l0ug50x81__uzz2it9bvg)" transform="matrix(1 0 0 -1 35.040973 70.329174)" d="M9.59233235 5.07010668L19.2820513 10.513543 19.2820513 34.7340571 9.59233235 29.2906208z"/>
</g>
<g>
<path fill="url(#l0ug50x81__pkcfops04h)" d="M0 5.19261595L9.59233235 0 19.2820513 5.19261595 9.81933475 11.1472096z" transform="translate(20.579435 48.490902)"/>
<path fill="url(#l0ug50x81__qhky1lzg9i)" d="M0 5.19261595L9.59233235 10.7675823 9.59233235 28.7454266 0 23.1704602z" transform="translate(20.579435 48.490902)"/>
<path fill="url(#l0ug50x81__pvfdn4h1gj)" transform="matrix(1 0 0 -1 20.579435 82.428944)" d="M9.59233235 5.19261595L19.2820513 10.7675823 19.2820513 28.7454266 9.59233235 23.1704602z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

33
web/client/assets/images/homePage/today_inspection.svg

@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 135" class="design-iconfont">
<defs>
<linearGradient x1="20.7281266%" y1="65.8457744%" x2="74.0654352%" y2="70.1158591%" id="cfts88ubp__cw03yttpva">
<stop stop-color="#5786DC" offset="0%"/>
<stop stop-color="#0F7EFB" offset="59.0679015%"/>
<stop stop-color="#5786DC" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="cfts88ubp__zgabs8txnb">
<stop stop-color="#0F7EFB" offset="0%"/>
<stop stop-color="#95C6FD" offset="69.5279208%"/>
<stop stop-color="#FFF" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M26.0666763,49.8088251 C31.0306933,47.1852682 61.5584474,35.7828583 117.649939,15.6015954 C165.058629,-1.45566643 206.885789,-4.52636918 243.131419,6.38948716 L243.131243,6.39006988 C257.09979,10.5979061 266.961089,23.0716793 267.831717,37.6342404 C268.610591,50.6669615 269,63.0694338 269,74.841654 C269,86.4324635 268.6225,98.6232449 267.8675,111.413998 C267.118888,124.098405 256.61347,134.00117 243.906991,134 L27.299275,134 C19.7776334,134.00025 12.6909178,130.474235 8.15456024,124.474522 C2.71818675,117.284384 0,106.896414 0,93.310611 C0,71.806572 8.33924068,57.4715256 25.017722,50.3054718 L25.0188174,50.3080224 C25.3744429,50.1552971 25.7237667,49.9882965 26.0659376,49.8074275 Z" fill="#F2F6FE" transform="translate(.553794 .954571)"/>
<path d="M0,32.2451607 L12.797,32.2451217 L45.0748919,10.1011957 C46.1380998,9.37176366 47.8619002,9.37176366 48.9251081,10.1011957 L81.202,32.2451217 L94,32.2451607 L94,41.7992823 C94,42.2773011 93.734198,42.7553199 93.2025941,43.1200359 L48.9251081,73.4973689 C47.8619002,74.226801 46.1380998,74.226801 45.0748919,73.4973689 L0.797405879,43.1200359 C0.26580196,42.7553199 -5.55111512e-17,42.2773011 -2.77555756e-17,41.7992823 L0,32.2451607 Z" fill="url(#cfts88ubp__cw03yttpva)" transform="translate(14.553794 37.910128)"/>
<path d="M0.797405879,30.924407 L45.0748919,0.547074057 C46.1380998,-0.182358019 47.8619002,-0.182358019 48.9251081,0.547074057 L93.2025941,30.924407 C94.265802,31.6538391 94.265802,32.8364822 93.2025941,33.5659143 L48.9251081,63.9432472 C47.8619002,64.6726793 46.1380998,64.6726793 45.0748919,63.9432472 L0.797405879,33.5659143 C-0.26580196,32.8364822 -0.26580196,31.6538391 0.797405879,30.924407 Z" fill="#EEF3FF" transform="translate(14.553794 37.910128)"/>
<g fill="#C1DEFF" fill-rule="nonzero">
<path d="M27.8585279,15.5254477 L47,4.6301194 C47,4.6301194 29.007352,-5.68012519 8.43589744,4.47008397" transform="translate(31.775519 51.062814)"/>
<path d="M46.1483429,10.9073763 C56.8136538,16.9428903 56.9408488,26.6579714 46.4284289,32.6069641 C35.9170187,38.5553856 18.7481382,38.4842177 8.08282742,32.4487037 C-2.58377803,26.4124571 -2.70931923,16.6969286 7.80230358,10.7483869 L27.1157978,21.6779197 L46.1483429,10.9073763 Z" transform="translate(31.775519 51.062814)"/>
</g>
<g>
<path d="M22.3704115,3.61728871 L37.428,13.7860746 L41,13.786296 L41,16.6850499 L40.8982359,16.6846126 C40.9826323,17.2046101 40.7296605,17.7448452 40.1393206,18.1435213 L22.3704115,30.1434525 C21.3374117,30.8410714 19.6625883,30.8410714 18.6295885,30.1434525 L0.8606794,18.1435213 C0.34436824,17.7948393 0.08611834,17.3378753 0.0859296988,16.8808717 L0.0859295953,16.8803706 L0,13.786296 L3.571,13.7860746 L18.6295885,3.61728871 C19.6625883,2.91966987 21.3374117,2.91966987 22.3704115,3.61728871 Z" fill="#0F7EFB" transform="translate(19.553794 38.287904)"/>
<path d="M0.8606794,12.5231454 L18.6295885,0.523214134 C19.6625883,-0.174404711 21.3374117,-0.174404711 22.3704115,0.523214134 L40.1393206,12.5231454 C41.1723203,13.2207642 41.1723203,14.3518279 40.1393206,15.0494467 L22.3704115,27.049378 C21.3374117,27.7469968 19.6625883,27.7469968 18.6295885,27.049378 L0.8606794,15.0494467 C-0.17232034,14.3518279 -0.17232034,13.2207642 0.8606794,12.5231454 Z" fill="url(#cfts88ubp__zgabs8txnb)" transform="translate(19.553794 38.287904)"/>
<path d="M22.3704115,3.61728871 L37.428,13.7860746 L41,13.786296 L41,16.6850499 L40.8982359,16.6846126 C40.9826323,17.2046101 40.7296605,17.7448452 40.1393206,18.1435213 L22.3704115,30.1434525 C21.3374117,30.8410714 19.6625883,30.8410714 18.6295885,30.1434525 L0.8606794,18.1435213 C0.34436824,17.7948393 0.08611834,17.3378753 0.0859296988,16.8808717 L0.0859295953,16.8803706 L0,13.786296 L3.571,13.7860746 L18.6295885,3.61728871 C19.6625883,2.91966987 21.3374117,2.91966987 22.3704115,3.61728871 Z" fill="#0F7EFB" transform="translate(19.553794 29.621238)"/>
<path d="M0.8606794,12.5231454 L18.6295885,0.523214134 C19.6625883,-0.174404711 21.3374117,-0.174404711 22.3704115,0.523214134 L40.1393206,12.5231454 C41.1723203,13.2207642 41.1723203,14.3518279 40.1393206,15.0494467 L22.3704115,27.049378 C21.3374117,27.7469968 19.6625883,27.7469968 18.6295885,27.049378 L0.8606794,15.0494467 C-0.17232034,14.3518279 -0.17232034,13.2207642 0.8606794,12.5231454 Z" fill="url(#cfts88ubp__zgabs8txnb)" transform="translate(19.553794 29.621238)"/>
<g>
<path d="M22.3704115,3.61728871 L37.428,13.7860746 L41,13.786296 L41,16.6850499 L40.8982359,16.6846126 C40.9826323,17.2046101 40.7296605,17.7448452 40.1393206,18.1435213 L22.3704115,30.1434525 C21.3374117,30.8410714 19.6625883,30.8410714 18.6295885,30.1434525 L0.8606794,18.1435213 C0.34436824,17.7948393 0.08611834,17.3378753 0.0859296988,16.8808717 L0.0859295953,16.8803706 L0,13.786296 L3.571,13.7860746 L18.6295885,3.61728871 C19.6625883,2.91966987 21.3374117,2.91966987 22.3704115,3.61728871 Z" fill="#0F7EFB" transform="translate(19.553794 18.954571)"/>
<path d="M0.8606794,12.5231454 L18.6295885,0.523214134 C19.6625883,-0.174404711 21.3374117,-0.174404711 22.3704115,0.523214134 L40.1393206,12.5231454 C41.1723203,13.2207642 41.1723203,14.3518279 40.1393206,15.0494467 L22.3704115,27.049378 C21.3374117,27.7469968 19.6625883,27.7469968 18.6295885,27.049378 L0.8606794,15.0494467 C-0.17232034,14.3518279 -0.17232034,13.2207642 0.8606794,12.5231454 Z" fill="url(#cfts88ubp__zgabs8txnb)" transform="translate(19.553794 18.954571)"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.0 KiB

2
web/client/src/layout/containers/layout/index.js

@ -97,7 +97,7 @@ const LayoutContainer = props => {
margin: '12px 12px 0px',
padding: '8px',
height: clientHeight,
background: '#fff'
background: '#F2F3F5'
}}>
<div style={{ minWidth: 520 }}>
<div style={{ padding: '0px 16px 4px', borderBottom: '1px solid #e8e8e8' }}>

62
web/client/src/sections/shouye/components/alarm/alarmStatistics.js

@ -4,6 +4,7 @@ import { Row, Col, Tooltip } from 'antd';
import { connect } from 'react-redux';
import AutoRollComponent from './autorollcomponent'
import moment from 'moment';
import './alarmStatistics.less'
class AlarmStatistics extends Component {
constructor(props) {
super(props);
@ -22,38 +23,38 @@ class AlarmStatistics extends Component {
]
}
}
async componentDidMount(){
const { dispatch, user,actions,depUser} = this.props;
async componentDidMount() {
const { dispatch, user, actions, depUser } = this.props;
const { patrolManage } = actions
const times = [moment().subtract(70, 'years').format(format), moment().format(format)];
const format = 'YYYY-MM-DD HH:mm:ss';
const res = await dispatch(patrolManage.records(`patrolRecord/all/${times[0]}/${times[1]}/true/null`));
const data = res?.payload?.data?.filter(i=>{
return i?.patrolRecordIssueHandles[0]?.isgaojing===true&&i?.patrolRecordIssueHandles[0]?.yujingafchishu===null
})
const res = await dispatch(patrolManage.records(`patrolRecord/all/${times[0]}/${times[1]}/true/null`));
const data = res?.payload?.data?.filter(i => {
return i?.patrolRecordIssueHandles[0]?.isgaojing === true && i?.patrolRecordIssueHandles[0]?.yujingafchishu === null
})
const obj = {};
data.map((i)=>{
if(obj[i.pointId]){
obj[i.pointId] = {name:i.points.itemData.name,count:obj[i.pointId].count+1}
data.map((i) => {
if (obj[i.pointId]) {
obj[i.pointId] = { name: i.points.itemData.name, count: obj[i.pointId].count + 1 }
// return ({name:i.points.itemData.name,count:obj[i.pointId].count+1})
}
else{
obj[i.pointId] = {name:i.points.itemData.name,count:1}
else {
obj[i.pointId] = { name: i.points.itemData.name, count: 1 }
}
})
console.log(data,'data')
const dd= Object.keys(obj).map(i=>{
return ({item:obj[i].name,count:obj[i].count})
console.log(data, 'data')
const dd = Object.keys(obj).map(i => {
return ({ item: obj[i].name, count: obj[i].count })
})
console.log(obj,'obj')
console.log(obj, 'obj')
this.setState({
alarmList:dd.sort((x,y)=>y?.count-x?.count)
alarmList: dd.sort((x, y) => y?.count - x?.count)
})
}
render() {
const { height } = this.props;
const { alarmList } = this.state;
@ -64,20 +65,27 @@ class AlarmStatistics extends Component {
content = <div style={{ padding: '0px 10px 30px 30px' }}>
{
alarmList.map((wd, i) => {
let cls = i < 3 ? 'alarm-row rank1' : 'alarm-row rank2';
// let cls = i < 3 ? 'alarm-row rank1' : 'alarm-row rank2';
return <Row style={{ marginBottom: 15 }}>
<Col offset={1} span={3}><span className={cls}>No.{i + 1}</span></Col>
<Col offset={1} span={15}>{wd.item}</Col>
<Col span={4}>{wd.count}</Col>
<Col offset={1} span={3}><span className='alarm-row rank'>{i + 1}</span></Col>
<Col offset={1} span={15} className='alarm-text'>{wd.item}</Col>
<Col span={4} className='alarm-text'>{wd.count}</Col>
</Row>
})
}
</div>
return (
<div>
<div style={{ fontWeight: 'bold', fontSize: 18, marginLeft: 6 }}>
告警统计
<div className='title'>
<span className='line'></span>
<span className='cn'>告警统计</span>
<span className='en'>&nbsp;ALARM STATISTICS</span>
</div>
<Row style={{ marginBottom: 15, marginLeft: 30, background: '#e7f0fd' }}>
<Col offset={1} span={3}><span style={{ color: '#159AFF' }}>#</span></Col>
<Col offset={1} span={15} style={{ color: '#159AFF' }}>点位名称</Col>
<Col span={4} style={{ color: '#159AFF' }}>告警次数</Col>
</Row>
<div style={{ marginTop: 20 }}>
{
content ? <AutoRollComponent content={content} divHeight={height} divId={"type-list"} />
@ -90,8 +98,8 @@ class AlarmStatistics extends Component {
);
}
}
function mapStateToProps (state) {
const { auth, global ,depUser} = state
function mapStateToProps(state) {
const { auth, global, depUser } = state
return {
user: auth.user,
actions: global.actions,

43
web/client/src/sections/shouye/components/alarm/alarmStatistics.less

@ -0,0 +1,43 @@
.title {
background-color: #fff;
.line {
display: inline-block;
width: 3px;
height: 20px;
background: #006BE3;
}
.cn {
font-family: YouSheBiaoTiHei;
font-size: 24px;
color: #101531;
margin-left: 11px;
}
.en {
font-family: D-DINExp-Italic;
font-weight: Italic;
font-size: 12px;
color: #969799;
}
}
.alarm-row {
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0px 8px 0px 8px;
color: #FF7734;
}
.rank {
background-image: url('/assets/images/homePage/rank.svg');
}
.alarm-text {
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 14px;
color: #4A4A4A;
letter-spacing: 1px;
}

24
web/client/src/sections/shouye/components/charts/column.js

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import * as echarts from 'echarts';
import './style.less';
class ColumnChart extends Component {
constructor(props) {
super(props);
@ -41,9 +42,9 @@ class ColumnChart extends Component {
getOption = (xAxis, yAxis) => {
let option = {
title: {
text: '成本分析'
},
// title: {
// text: '成本分析'
// },
legend: {},
grid: {
left: '3%',
@ -64,7 +65,13 @@ class ColumnChart extends Component {
{
data: yAxis,
type: 'bar',
barMaxWidth: 30,//柱子最大宽度
barMaxWidth: 24,//柱子最大宽度
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#32DCFF' },
{ offset: 1, color: '#16B6FF' }
]),
},
}
]
}
@ -73,7 +80,14 @@ class ColumnChart extends Component {
render() {
const { domId, width, height } = this.props;
return <div id={domId} style={{ height: height, width: width || '100%', margin: '0px auto' }} />;
return <>
<div className='title'>
<span className='line'></span>
<span className='cn'>成本分析</span>
<span className='en'>&nbsp;COST ANALYSIS</span>
</div>
<div id={domId} style={{ height: height, width: width || '100%', margin: '0px auto' }} />
</>;
}
}

36
web/client/src/sections/shouye/components/charts/stackColumn.js

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import * as echarts from 'echarts';
import './style.less';
class StackColumn extends Component {
constructor(props) {
super(props);
@ -48,9 +49,9 @@ class StackColumn extends Component {
}
};
let option = {
title: {
text: '设备维修分析'
},
// title: {
// text: '设备维修分析'
// },
legend: {
data: ['异常数', '维修数'],
left: '40%'
@ -75,18 +76,30 @@ class StackColumn extends Component {
{
name: '异常数',
type: 'bar',
stack: 'one',
// stack: 'one',
emphasis: emphasisStyle,
data: yAxis1,
barMaxWidth: 30,//柱子最大宽度
barMaxWidth: 20,//柱子最大宽度
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00A4F3' },
{ offset: 1, color: '#006BE3' }
]),
},
},
{
name: '维修数',
type: 'bar',
stack: 'one',
// stack: 'one',
emphasis: emphasisStyle,
data: yAxis2,
barMaxWidth: 30,//柱子最大宽度
barMaxWidth: 20,//柱子最大宽度
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#29E2F1' },
{ offset: 1, color: '#12C1DF' }
]),
},
}
]
}
@ -95,7 +108,14 @@ class StackColumn extends Component {
render() {
const { domId, width, height } = this.props;
return <div id={domId} style={{ height: height, width: width || '100%', margin: '0px auto' }} />;
return <>
<div className='title'>
<span className='line'></span>
<span className='cn'>设备维修分析</span>
<span className='en'>&nbsp;DATA ANALYSIS</span>
</div>
<div id={domId} style={{ height: height, width: width || '100%', margin: '0px auto' }} />
</>;
}
}

24
web/client/src/sections/shouye/components/charts/style.less

@ -0,0 +1,24 @@
.title {
background-color: #fff;
.line {
display: inline-block;
width: 3px;
height: 20px;
background: #006BE3;
}
.cn {
font-family: YouSheBiaoTiHei;
font-size: 24px;
color: #101531;
margin-left: 11px;
}
.en {
font-family: D-DINExp-Italic;
font-weight: Italic;
font-size: 12px;
color: #969799;
}
}

26
web/client/src/sections/shouye/components/charts/xColumn.js

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import * as echarts from 'echarts';
import './style.less';
class XColumn extends Component {
constructor(props) {
super(props);
@ -38,12 +39,11 @@ class XColumn extends Component {
this.chart.dispose();
}
};
getOption = (xAxis, yAxis) => {
let option = {
title: {
text: '实时故障点位分析'
},
// title: {
// text: '实时故障点位分析'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
@ -70,7 +70,14 @@ class XColumn extends Component {
name: '异常数',
type: 'bar',
data: xAxis,
barMaxWidth: 30,//柱子最大宽度
barMaxWidth: 14,//柱子最大宽度
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#006be380' },
{ offset: 1, color: '#00A4F3' }
]),
barBorderRadius: [0, 14, 14, 0]
},
}
]
};
@ -79,7 +86,14 @@ class XColumn extends Component {
render() {
const { domId, width, height } = this.props;
return <div id={domId} style={{ height: height, width: width || '100%', margin: '0px auto' }} />;
return <>
<div className='title'>
<span className='line'></span>
<span className='cn'>实时故障点位分析</span>
<span className='en'>&nbsp;DATA ANALYSIS</span>
</div>
<div id={domId} style={{ height: height, width: width || '100%', margin: '0px auto' }} />
</>;
}
}

164
web/client/src/sections/shouye/containers/shouye.js

@ -5,7 +5,7 @@ import moment from "moment";
import '../style.less';
import { push } from 'react-router-redux';
import { Model } from 'echarts';
import {getPatrolPlan} from '../../patrolManage/actions/plan'
import { getPatrolPlan } from '../../patrolManage/actions/plan'
import XColumn from '../components/charts/xColumn'
import StackColumn from '../components/charts/stackColumn'
import AlarmStatistics from '../components/alarm/alarmStatistics'
@ -14,70 +14,69 @@ import Column from '../components/charts/column'
const Information = (props) => {
const { dispatch, actions, user, loading, clientHeight } = props
const { patrolManage, issueHandle } = actions
const [planedata,setplandata] = useState([])
const [xunjiandata,setxunjiandata] = useState([])
const [shijiandata,setshijiandata] = useState([])
const [planedata, setplandata] = useState([])
const [xunjiandata, setxunjiandata] = useState([])
const [shijiandata, setshijiandata] = useState([])
const [chartData1, setChartData1] = useState([])
const [chartData2, setChartData2] = useState([])
const [chartData3, setChartData3] = useState([])
const [chartData4, setChartData4] = useState([])
const topdata =[]
const topdata = []
const format = 'YYYY-MM-DD HH:mm:ss'
const times = [moment().subtract(70, 'years').format(format), moment().format(format)]
useEffect(()=>{
dispatch(getPatrolPlan()).then(async (res)=>{
const res2 = await dispatch(patrolManage.records(`patrolRecord/all/${times[0]}/${times[1]}/null/null`))
console.log(res2,'res2')
useEffect(() => {
dispatch(getPatrolPlan()).then(async (res) => {
const res2 = await dispatch(patrolManage.records(`patrolRecord/all/${times[0]}/${times[1]}/null/null`))
console.log(res2, 'res2')
setshijiandata(res2?.payload?.data)
setxunjiandata(res2?.payload?.data.filter(i=>parseInt(moment().format('YYYYMMDD'))=== parseInt(moment(i.inspectionTime ).format('YYYYMMDD'))))
let num = 0
res?.payload?.data?.rows?.map(i=>{
setxunjiandata(res2?.payload?.data.filter(i => parseInt(moment().format('YYYYMMDD')) === parseInt(moment(i.inspectionTime).format('YYYYMMDD'))))
let num = 0
res?.payload?.data?.rows?.map(i => {
// console.log(i?.frequency?.match(/^[0-9]*$/),'jjj')
if(i?.frequency.split('/')[i?.frequency.split('/').length-1]==='天' && parseInt(moment().format('YYYYMMDD'))<=parseInt(moment(i.endTime).format('YYYYMMDD'))){
if (i?.frequency.split('/')[i?.frequency.split('/').length - 1] === '天' && parseInt(moment().format('YYYYMMDD')) <= parseInt(moment(i.endTime).format('YYYYMMDD'))) {
// console.log(i?.frequency?.match(/[\d.]/g).join(''),'jjj')
num = num + parseInt(i?.frequency?.match(/[\d.]/g).join(''))
// return parseInt(moment().format('YYYYMMDD'))<=parseInt(moment(i.endTime).format('YYYYMMDD'))
// console.log('是的',i?.frequency.split('/')[i?.frequency.split('/').length-1])
}else if(i?.frequency.split('/')[i?.frequency.split('/').length-1]==='周'){
if(parseInt(moment().format('YYYYMMDD'))<=parseInt(moment(i.endTime).format('YYYYMMDD'))&&res2?.payload?.data?.filter(j=>j.patrolPlanId===i.id
&&moment(j.inspectionTim).week()===moment().week()).length<parseInt(i?.frequency?.match(/[\d.]/g).join(''))){
num = num + (parseInt(i?.frequency?.match(/[\d.]/g).join('')) - res2?.payload?.data?.filter(j=>j.patrolPlanId===i.id
&&moment(j.inspectionTim).week()===moment().week()).length)
}
} else if (i?.frequency.split('/')[i?.frequency.split('/').length - 1] === '周') {
if (parseInt(moment().format('YYYYMMDD')) <= parseInt(moment(i.endTime).format('YYYYMMDD')) && res2?.payload?.data?.filter(j => j.patrolPlanId === i.id
&& moment(j.inspectionTim).week() === moment().week()).length < parseInt(i?.frequency?.match(/[\d.]/g).join(''))) {
num = num + (parseInt(i?.frequency?.match(/[\d.]/g).join('')) - res2?.payload?.data?.filter(j => j.patrolPlanId === i.id
&& moment(j.inspectionTim).week() === moment().week()).length)
}
// console.log(i?.frequency?.match(/^[0-9]*$/),'jjj')
// return parseInt(moment().format('YYYYMMDD'))<=parseInt(moment(i.endTime).format('YYYYMMDD'))&&res2?.payload?.data?.filter(j=>j.patrolPlanId===i.id
// &&moment(j.inspectionTim).week()===moment().week()).length<parseInt(i?.frequency?.match(/[\d.]/g).join(''))
}
else if(i?.frequency.split('/')[i?.frequency.split('/').length-1]==='月'){
if(parseInt(moment().format('YYYYMMDD'))<=parseInt(moment(i.endTime).format('YYYYMMDD'))&&res2?.payload?.data?.filter(j=>j.patrolPlanId===i.id
&&moment(j.inspectionTim).month()===moment().month()).length<parseInt(i?.frequency?.match(/[\d.]/g).join(''))){
num = num+ (parseInt(i?.frequency?.match(/[\d.]/g).join('')) - res2?.payload?.data?.filter(j=>j.patrolPlanId===i.id
&&moment(j.inspectionTim).month()===moment().month()).length)
}
else if (i?.frequency.split('/')[i?.frequency.split('/').length - 1] === '月') {
if (parseInt(moment().format('YYYYMMDD')) <= parseInt(moment(i.endTime).format('YYYYMMDD')) && res2?.payload?.data?.filter(j => j.patrolPlanId === i.id
&& moment(j.inspectionTim).month() === moment().month()).length < parseInt(i?.frequency?.match(/[\d.]/g).join(''))) {
num = num + (parseInt(i?.frequency?.match(/[\d.]/g).join('')) - res2?.payload?.data?.filter(j => j.patrolPlanId === i.id
&& moment(j.inspectionTim).month() === moment().month()).length)
}
// console.log(i?.frequency?.match(/^[0-9]*$/),'jjj')
// num = num+
// return parseInt(moment().format('YYYYMMDD'))<=parseInt(moment(i.endTime).format('YYYYMMDD'))&&res2?.payload?.data?.filter(j=>j.patrolPlanId===i.id
// &&moment(j.inspectionTim).month()===moment().month()).length<parseInt(i?.frequency?.match(/[\d.]/g).join(''))
}
})
console.log(num,'count')
console.log(num, 'count')
setplandata(num)
console.log(res,'res')
console.log(res, 'res')
calcChartData(res2?.payload?.data)
})
},[])
console.log(xunjiandata,'xunjiandata')
}, [])
console.log(xunjiandata, 'xunjiandata')
const calcChartData = (data) => {
let arr1 = [], arr2 = [], arr4 = []
data.filter(d => d.alarm).forEach(l => {
let repairOk = l.patrolRecordIssueHandles.length && l.patrolRecordIssueHandles[0]?.state === 6;//验收通过
if(!repairOk){//没修||没修好
if (!repairOk) {//没修||没修好
let ext1 = arr1.find(a => a?.name === l?.point?.name);
if (ext1) {
ext1.value++;
@ -98,8 +97,8 @@ const Information = (props) => {
let ext2 = arr2.find(a => a?.name === l?.point?.name);
if (ext2) {
ext2.num++;
if(repairOk){
ext2.repairNum ++;
if (repairOk) {
ext2.repairNum++;
}
} else {
let repairNum = repairOk ? 1 : 0;
@ -118,62 +117,83 @@ const Information = (props) => {
return (
<>
<div className='shouye-title'>
<span className='line'></span>
<span className='cn'>今日信息处理</span>
<span className='en'>&nbsp;TODAY'S INFORMATION PROCESSING</span>
</div>
<div className='shouyetop'>
<div className='shouyetopitem'>
<div className='shouyetopitem-left' >
<div>今日巡检</div>
<div>{planedata}</div>
<div className='shouyetopitem-left'>
<div>
<span className='key'>完成巡检</span>
<span className='value'>{xunjiandata.length}</span>
</div>
<div>
<span className='key'>巡检上报</span>
<span className='value'>{xunjiandata.filter(i => i?.alarm === true).length}</span>
</div>
</div>
<div className='shouyetopitem-right'>
<div>完成巡检{xunjiandata.length}</div>
<div>巡检上报{xunjiandata.filter(i=>i?.alarm===true).length}</div>
<div className='shouyetopitem-right inspection'>
<div className='right'>
<div><span className='title'>今日巡检</span><span className='unit'>()</span></div>
<div className='value'>{planedata}</div>
</div>
</div>
</div>
<div className='shouyetopitem'>
<div className='shouyetopitem-left' >
<div>今日事件</div>
<div>{xunjiandata.filter(i=>i?.alarm===true).length}</div>
<div className='shouyetopitem-left'>
<div>
<span className='key'>已处理</span>
<span className='value'>{shijiandata.filter(i => i?.patrolRecordIssueHandles[0]?.yanshoushijian && parseInt(moment(i?.patrolRecordIssueHandles[0]?.yanshoushijian).format('YYYYMMDD')) === parseInt(moment().format('YYYYMMDD'))).length}</span>
</div>
<div>
<span className='key'>未处理</span>
<span className='value'>{shijiandata.filter(i => i?.alarm === true && (i?.patrolRecordIssueHandles[0]?.state === 1 || i?.patrolRecordIssueHandles.length == 0)).length}</span>
</div>
</div>
<div className='shouyetopitem-right'>
<div>已处理{shijiandata.filter(i => i?.patrolRecordIssueHandles[0]?.yanshoushijian && parseInt(moment(i?.patrolRecordIssueHandles[0]?.yanshoushijian).format('YYYYMMDD')) === parseInt(moment().format('YYYYMMDD'))).length}</div>
<div>未处理{shijiandata.filter(i => i?.alarm === true && (i?.patrolRecordIssueHandles[0]?.state === 1 ||i?.patrolRecordIssueHandles.length==0)).length}</div>
<div className='shouyetopitem-right event'>
<div className='right'>
<div className='title'>今日事件</div>
<div className='value'>{xunjiandata.filter(i => i?.alarm === true).length}</div>
</div>
</div>
</div>
<div className='shouyetopitem'>
<div className='shouyetopitem-left' >
<div>今日预警</div>
<div>{shijiandata.filter(i=>{
return i?.patrolRecordIssueHandles[0]?.yanshoucishu>2&&moment(i?.patrolRecordIssueHandles[0]?.yujingshijian).format('YYYYMMDD') === moment().format('YYYYMMDD')
&&res?.payload?.data?.filter(j=>j?.pointId===i?.pointId&&j?.points?.project?.id===i?.points?.project?.id
&&moment(i?.patrolRecordIssueHandles[0].yanshoushijian).valueOf()<moment(j?.patrolRecordIssueHandles[0]?.yanshoushijian).valueOf()
).length===0
}).length }</div>
<div className='shouyetopitem-left'>
<div><span className='key'>已下发</span>
<span className='value'>{shijiandata.filter(i => {
return i?.patrolRecordIssueHandles[0]?.isgaojing === true && i?.patrolRecordIssueHandles[0]?.yujingafchishu === null
&& i?.patrolRecordIssueHandles[0]?.yujingshijian
&& moment(i?.patrolRecordIssueHandles[0]?.yujingshijian).format
('YYYYMMDD') === moment().format('YYYYMMDD')
}).length}</span></div>
</div>
<div className='shouyetopitem-right'>
<div>已下发{shijiandata.filter(i=>{
return i?.patrolRecordIssueHandles[0]?.isgaojing===true&&i?.patrolRecordIssueHandles[0]?.yujingafchishu===null
&&i?.patrolRecordIssueHandles[0]?.yujingshijian
&&moment(i?.patrolRecordIssueHandles[0]?.yujingshijian).format
('YYYYMMDD') === moment().format('YYYYMMDD')
}).length}</div>
<div className='shouyetopitem-right alarm' >
<div className='right'>
<div className='title'>今日预警</div>
<div className='value'>{shijiandata.filter(i => {
return i?.patrolRecordIssueHandles[0]?.yanshoucishu > 2 && moment(i?.patrolRecordIssueHandles[0]?.yujingshijian).format('YYYYMMDD') === moment().format('YYYYMMDD')
&& res?.payload?.data?.filter(j => j?.pointId === i?.pointId && j?.points?.project?.id === i?.points?.project?.id
&& moment(i?.patrolRecordIssueHandles[0].yanshoushijian).valueOf() < moment(j?.patrolRecordIssueHandles[0]?.yanshoushijian).valueOf()
).length === 0
}).length}</div>
</div>
</div>
</div>
</div>
<Card className='shouye-chart-card'>
<div className='shouye-chart-card'>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div style={{ width: '45%' }}>
<div style={{ width: '40%', background: '#fff', padding: '16px 25px' }}>
<XColumn
domId={'column-chart-1'}
height={clientHeight * 0.32}
xAxis={chartData1.map(cd => cd.value).reverse()}
yAxis={chartData1.map(cd => cd.name).reverse()} />
</div>
<div style={{ width: '45%' }}>
<div style={{ width: '59%', background: '#fff', padding: '16px 25px' }}>
<StackColumn
domId={'column-chart-2'}
height={clientHeight * 0.32}
@ -182,11 +202,11 @@ const Information = (props) => {
yAxis2={chartData2.map(cd => cd.repairNum)} />
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop : 12 }}>
<div style={{ width: '45%' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12 }}>
<div style={{ width: '40%', background: '#fff', padding: '16px 25px' }}>
<AlarmStatistics height={clientHeight * 0.23} />
</div>
<div style={{ width: '45%' }}>
<div style={{ width: '59%', background: '#fff', padding: '16px 25px' }}>
<Column
domId={'column-chart-3'}
height={clientHeight * 0.32}
@ -194,12 +214,12 @@ const Information = (props) => {
yAxis={chartData4.map(cd => (cd.cost).toFixed(2))} />
</div>
</div>
</Card>
</div>
</>
)
}
function mapStateToProps (state) {
function mapStateToProps(state) {
const { auth, global } = state;
return {
user: auth.user,

144
web/client/src/sections/shouye/style.less

@ -1,44 +1,120 @@
.shouyetop{
.shouye-title {
background-color: #fff;
padding-top: 1rem;
padding-left: 1.125rem;
.line {
display: inline-block;
width: 3px;
height: 20px;
background: #006BE3;
}
.cn {
font-family: YouSheBiaoTiHei;
font-size: 24px;
color: #101531;
margin-left: 11px;
}
.en {
font-family: D-DINExp-Italic;
font-weight: Italic;
font-size: 12px;
color: #969799;
}
}
.shouyetop {
background-color: #fff;
display: flex;
justify-content: space-between;
padding: 0 1.875rem;
.shouyetopitem{
width: 31%;
justify-content: flex-start;
padding: 0 1.875rem 1rem;
.shouyetopitem {
display: flex;
padding: 0 2%;
align-items: center;
justify-content: space-between;
box-shadow: 0 0 10px #F0F2F5;
border:1px solid #F0F2F5;
color: rgba(0, 0, 0, 0.45);
font-size: 1.875rem;
height: 7.125rem;
.shouyetopitem-left{
width: 50%;
// display: flex;
// flex-direction: column;
// // align-items: center;
// justify-content: center;
justify-content: flex-start;
font-size: 1rem;
height: 7.125rem;
width: 30%;
.shouyetopitem-left {
width: 40%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
font-size: 1rem;
.key {
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 14px;
color: #969799;
}
.value {
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 16px;
color: #4A4A4A;
}
}
.shouyetopitem-right {
width: 60%;
height: 100%;
background-size: auto;
background-repeat: no-repeat;
.right {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
left: 123px;
.title {
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 14px;
color: #4A4A4A;
background: none;
}
.unit {
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 11px;
color: #4A4A4A;
margin-left: 5px;
}
.value {
font-family: YouSheBiaoTiHei;
font-size: 32px;
color: #0F7EFB;
}
}
}
.shouyetopitem-right{
width: 50%;
font-size: 1.5625rem;
.inspection {
background-image: url('/assets/images/homePage/today_inspection.svg');
}
.event {
background-image: url('/assets/images/homePage/today_event.svg');
}
.alarm {
background-image: url('/assets/images/homePage/today_alarm.svg');
}
}
}
.shouye-chart-card {
margin: 0 1.875rem;
margin-top: 20px;
}
.alarm-row {
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0px 14px 0px 8px;
color: #fff;
}
.rank1 {
background-image: url('/assets/images/homePage/rank1.png');
}
.rank2 {
background-image: url('/assets/images/homePage/rank2.png');
}
Loading…
Cancel
Save