Pārlūkot izejas kodu

fix:添加固定菜单,添加人员管理页面

zhaojing 1 gadu atpakaļ
vecāks
revīzija
406d592d09
100 mainītis faili ar 4852 papildinājumiem un 767 dzēšanām
  1. 15 1
      config/routes.ts
  2. 8 0
      src/assets/css/antd-reset.less
  3. BIN
      src/assets/images/air-count-empty.jpg
  4. BIN
      src/assets/images/page-equipment/air_close.png
  5. 4 9
      src/assets/images/page-equipment/aircloudblack.svg
  6. 2 2
      src/assets/images/page-equipment/aircoldblack.svg
  7. 10 9
      src/assets/images/page-equipment/airsunblack.svg
  8. BIN
      src/assets/images/page-equipment/atmLamp_small_close.png
  9. BIN
      src/assets/images/page-equipment/atmLamp_small_open.png
  10. 1 0
      src/assets/images/page-equipment/canvas/activity.svg
  11. 1 0
      src/assets/images/page-equipment/canvas/airConditioner.svg
  12. 1 0
      src/assets/images/page-equipment/canvas/airConditioner_black.svg
  13. 1 0
      src/assets/images/page-equipment/canvas/book.svg
  14. 1 0
      src/assets/images/page-equipment/canvas/cloth.svg
  15. 1 0
      src/assets/images/page-equipment/canvas/control.svg
  16. 1 0
      src/assets/images/page-equipment/canvas/curtain.svg
  17. 1 0
      src/assets/images/page-equipment/canvas/curtain_black.svg
  18. 1 0
      src/assets/images/page-equipment/canvas/detail.svg
  19. 1 0
      src/assets/images/page-equipment/canvas/device.svg
  20. 1 0
      src/assets/images/page-equipment/canvas/dining.svg
  21. 1 0
      src/assets/images/page-equipment/canvas/document.svg
  22. 1 0
      src/assets/images/page-equipment/canvas/experiment.svg
  23. 1 0
      src/assets/images/page-equipment/canvas/hover.svg
  24. BIN
      src/assets/images/page-equipment/canvas/introduce.png
  25. 1 0
      src/assets/images/page-equipment/canvas/introduce.svg
  26. 1 0
      src/assets/images/page-equipment/canvas/letter.svg
  27. 1 0
      src/assets/images/page-equipment/canvas/lift.svg
  28. 1 0
      src/assets/images/page-equipment/canvas/light.svg
  29. 1 0
      src/assets/images/page-equipment/canvas/light_black.svg
  30. 1 0
      src/assets/images/page-equipment/canvas/meeting.svg
  31. 1 0
      src/assets/images/page-equipment/canvas/office.svg
  32. 1 0
      src/assets/images/page-equipment/canvas/public.svg
  33. 1 0
      src/assets/images/page-equipment/canvas/reception.svg
  34. 1 0
      src/assets/images/page-equipment/canvas/rest.svg
  35. 1 0
      src/assets/images/page-equipment/canvas/socket.svg
  36. 1 0
      src/assets/images/page-equipment/canvas/socket_black.svg
  37. 1 0
      src/assets/images/page-equipment/canvas/sport.svg
  38. 1 0
      src/assets/images/page-equipment/canvas/stair.svg
  39. 1 0
      src/assets/images/page-equipment/canvas/swim.svg
  40. 1 0
      src/assets/images/page-equipment/canvas/walk.svg
  41. 1 0
      src/assets/images/page-equipment/canvas/washroom.svg
  42. 1 0
      src/assets/images/page-equipment/canvas/work.svg
  43. 11 0
      src/assets/images/page-equipment/curtain_close.svg
  44. 4 0
      src/assets/images/page-equipment/curtain_down.svg
  45. 551 0
      src/assets/images/page-equipment/curtain_horizon.svg
  46. 4 0
      src/assets/images/page-equipment/curtain_open.svg
  47. 4 0
      src/assets/images/page-equipment/curtain_stop.svg
  48. 4 0
      src/assets/images/page-equipment/curtain_up.svg
  49. 176 0
      src/assets/images/page-equipment/curtain_vertical.svg
  50. BIN
      src/assets/images/page-equipment/group.png
  51. 404 0
      src/assets/images/page-equipment/heatclose.svg
  52. 401 0
      src/assets/images/page-equipment/heatopen.svg
  53. 11 0
      src/assets/images/page-equipment/icon_adjust.svg
  54. BIN
      src/assets/images/page-equipment/lamp_small_close.png
  55. BIN
      src/assets/images/page-equipment/lamp_small_open.png
  56. BIN
      src/assets/images/page-equipment/openair.png
  57. 7 0
      src/assets/images/page-equipment/underfloorHeat.svg
  58. 3 0
      src/assets/images/page-equipment/wind_auto.svg
  59. 8 0
      src/assets/images/page-equipment/wind_big.svg
  60. 6 0
      src/assets/images/page-equipment/wind_small.svg
  61. 52 5
      src/config/sagacare/sagacare_image.js
  62. 3 3
      src/hooks/useMenuList.ts
  63. 30 19
      src/layouts/index.jsx
  64. 9 4
      src/layouts/index.less
  65. 2 0
      src/locales/zh-CN/menu.ts
  66. 1 1
      src/pages/Environment/components/chartModal/index.jsx
  67. 223 0
      src/pages/Equipment/components/deviceModal/Slider/index.jsx
  68. 112 0
      src/pages/Equipment/components/deviceModal/Slider/index.less
  69. 34 8
      src/pages/Equipment/components/deviceModal/airEq/index.jsx
  70. 4 3
      src/pages/Equipment/components/deviceModal/airEq/index.less
  71. 305 0
      src/pages/Equipment/components/deviceModal/airEqHand/airModal/index.jsx
  72. 251 0
      src/pages/Equipment/components/deviceModal/airEqHand/airModal/index.less
  73. 22 0
      src/pages/Equipment/components/deviceModal/airEqHand/controlButton/index.jsx
  74. 33 0
      src/pages/Equipment/components/deviceModal/airEqHand/controlButton/index.less
  75. 422 397
      src/pages/Equipment/components/deviceModal/airEqHand/index.jsx
  76. 177 94
      src/pages/Equipment/components/deviceModal/airEqHand/index.less
  77. 2 2
      src/pages/Equipment/components/deviceModal/anSwitch/index.jsx
  78. 15 3
      src/pages/Equipment/components/deviceModal/anSwitch/index.less
  79. 46 27
      src/pages/Equipment/components/deviceModal/common.less
  80. 98 31
      src/pages/Equipment/components/deviceModal/curtainEq/curtainBtn.jsx
  81. 155 0
      src/pages/Equipment/components/deviceModal/curtainEq/curtainModal/index.jsx
  82. 51 0
      src/pages/Equipment/components/deviceModal/curtainEq/curtainModal/index.less
  83. 22 0
      src/pages/Equipment/components/deviceModal/curtainEq/heatButton/index.jsx
  84. 33 0
      src/pages/Equipment/components/deviceModal/curtainEq/heatButton/index.less
  85. 123 34
      src/pages/Equipment/components/deviceModal/curtainEq/index.jsx
  86. 49 2
      src/pages/Equipment/components/deviceModal/curtainEq/index.less
  87. 33 20
      src/pages/Equipment/components/deviceModal/index.jsx
  88. 212 62
      src/pages/Equipment/components/deviceModal/lampEq/index.jsx
  89. 129 5
      src/pages/Equipment/components/deviceModal/lampEq/index.less
  90. 183 0
      src/pages/Equipment/components/deviceModal/lampEq/lampColour/index.jsx
  91. 50 0
      src/pages/Equipment/components/deviceModal/lampEq/lampColour/index.less
  92. 22 0
      src/pages/Equipment/components/deviceModal/socketEq/controlButton/index.jsx
  93. 33 0
      src/pages/Equipment/components/deviceModal/socketEq/controlButton/index.less
  94. 24 22
      src/pages/Equipment/components/deviceModal/socketEq/index.jsx
  95. 6 4
      src/pages/Equipment/components/deviceModal/socketEq/index.less
  96. 19 0
      src/pages/Equipment/components/deviceModal/underfloorHeat/heatButton/index.jsx
  97. 33 0
      src/pages/Equipment/components/deviceModal/underfloorHeat/heatButton/index.less
  98. 119 0
      src/pages/Equipment/components/deviceModal/underfloorHeat/heatModal/index.jsx
  99. 50 0
      src/pages/Equipment/components/deviceModal/underfloorHeat/heatModal/index.less
  100. 0 0
      src/pages/Equipment/components/deviceModal/underfloorHeat/index.jsx

+ 15 - 1
config/routes.ts

@@ -24,13 +24,27 @@
     routes: [
       {
         path: '/',
-        redirect: '/Equipment',
+        redirect: '/home',
       },
       {
         path: '/noAuth',
         component: './NoAuth',
       },
       {
+        path: '/home',
+        component: './Home',
+      },
+      {
+        path: '/member',
+        name: 'member',
+        component: './Member',
+      },
+      {
+        path: '/member/invalid',
+        name: 'member.invalid',
+        component: './Member/invalid',
+      },
+      {
         path: '/environment',
         name: 'environment',
         component: './Environment',

+ 8 - 0
src/assets/css/antd-reset.less

@@ -62,6 +62,10 @@
       color: #000;
     }
   }
+  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+    height: 50px;
+  }
+
   .ant-select:not(.ant-select-customize-input) .ant-select-selector {
     border: 1px solid #c4c4c4;
   }
@@ -82,6 +86,10 @@
     .ant-select-selection-placeholder {
     line-height: 48px;
   }
+  .ant-select-single .ant-select-selector .ant-select-selection-item,
+  .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+    line-height: 50px;
+  }
   .ant-select {
     color: #4f5055;
   }

BIN
src/assets/images/air-count-empty.jpg


BIN
src/assets/images/page-equipment/air_close.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 4 - 9
src/assets/images/page-equipment/aircloudblack.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 2 - 2
src/assets/images/page-equipment/aircoldblack.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 10 - 9
src/assets/images/page-equipment/airsunblack.svg


BIN
src/assets/images/page-equipment/atmLamp_small_close.png


BIN
src/assets/images/page-equipment/atmLamp_small_open.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/activity.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/airConditioner.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/airConditioner_black.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/book.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/cloth.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/control.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/curtain.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/curtain_black.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/detail.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/device.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/dining.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/document.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/experiment.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/hover.svg


BIN
src/assets/images/page-equipment/canvas/introduce.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/introduce.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/letter.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/lift.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/light.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/light_black.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/meeting.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/office.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/public.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/reception.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/rest.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/socket.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/socket_black.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/sport.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/stair.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/swim.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/walk.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/washroom.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
src/assets/images/page-equipment/canvas/work.svg


+ 11 - 0
src/assets/images/page-equipment/curtain_close.svg

@@ -0,0 +1,11 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2414_59417)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6351 5.85246C18.0256 5.46194 18.6588 5.46194 19.0493 5.85246L24.2825 11.0857C25.0636 11.8667 25.0636 13.1331 24.2825 13.9141L19.0493 19.1473C18.6588 19.5379 18.0256 19.5379 17.6351 19.1473C17.2446 18.7568 17.2446 18.1237 17.6351 17.7331L22.8683 12.4999L17.6351 7.26668C17.2446 6.87615 17.2446 6.24299 17.6351 5.85246Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.26896 6.07219C7.87844 5.68167 7.24527 5.68167 6.85475 6.07219L1.84116 11.0858C1.06011 11.8668 1.06011 13.1332 1.84116 13.9142L6.85475 18.9278C7.24527 19.3183 7.87844 19.3183 8.26896 18.9278C8.65948 18.5373 8.65948 17.9041 8.26896 17.5136L3.25537 12.5L8.26896 7.4864C8.65948 7.09588 8.65948 6.46271 8.26896 6.07219Z" fill="#626C78"/>
+</g>
+<defs>
+<clipPath id="clip0_2414_59417">
+<rect width="24" height="24" fill="white" transform="translate(0.782227)"/>
+</clipPath>
+</defs>
+</svg>

+ 4 - 0
src/assets/images/page-equipment/curtain_down.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3002 8.29027C14.5606 8.55062 14.5606 8.97273 14.3002 9.23308L9.33142 14.2019C8.81072 14.7226 7.9665 14.7226 7.4458 14.2019L2.477 9.23308C2.21665 8.97273 2.21665 8.55062 2.477 8.29027C2.73735 8.02992 3.15946 8.02992 3.41981 8.29027L8.38861 13.2591L13.3574 8.29027C13.6178 8.02992 14.0399 8.02992 14.3002 8.29027Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.32674 13.4279C7.95855 13.4279 7.66008 13.1294 7.66008 12.7612V2.99723C7.66008 2.62904 7.95855 2.33057 8.32674 2.33057C8.69493 2.33057 8.99341 2.62904 8.99341 2.99723V12.7612C8.99341 13.1294 8.69493 13.4279 8.32674 13.4279Z" fill="#626C78"/>
+</svg>

+ 551 - 0
src/assets/images/page-equipment/curtain_horizon.svg

@@ -0,0 +1,551 @@
+<svg width="165" height="100" viewBox="0 0 165 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="165" height="100" fill="white"/>
+<rect x="27" y="21" width="100" height="2" rx="1" fill="url(#paint0_linear_2320_57232)"/>
+<path d="M81 17.5C83.1389 17.5 82.9797 18.9104 84.4909 18.8867C86.0021 18.863 85.8611 17.5 88 17.5V79.5C86.0062 79.5 85.7947 78.5596 84.5 78.5596C83.2053 78.5596 82.4934 79.5 81 79.5V17.5Z" fill="url(#paint1_linear_2320_57232)"/>
+<mask id="mask0_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="81" y="17" width="7" height="63">
+<path d="M81 17.5C83.1389 17.5 82.9797 18.9104 84.4909 18.8867C86.0021 18.863 85.8611 17.5 88 17.5V79.5C86.0062 79.5 85.7947 78.5596 84.5 78.5596C83.2053 78.5596 82.4934 79.5 81 79.5V17.5Z" fill="url(#paint2_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask0_2320_57232)">
+<g filter="url(#filter0_f_2320_57232)">
+<ellipse cx="81.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-5-inside-1_2320_57232" fill="white">
+<path d="M82.7158 21.8208C82.7158 21.3789 83.074 21.0208 83.5158 21.0208H85.9158C86.3576 21.0208 86.7158 21.3789 86.7158 21.8208V22.2208C86.7158 22.6626 86.3576 23.0208 85.9158 23.0208H83.5158C83.074 23.0208 82.7158 22.6626 82.7158 22.2208V21.8208Z"/>
+</mask>
+<path d="M82.7158 21.8208C82.7158 21.3789 83.074 21.0208 83.5158 21.0208H85.9158C86.3576 21.0208 86.7158 21.3789 86.7158 21.8208V22.2208C86.7158 22.6626 86.3576 23.0208 85.9158 23.0208H83.5158C83.074 23.0208 82.7158 22.6626 82.7158 22.2208V21.8208Z" fill="url(#paint3_linear_2320_57232)"/>
+<path d="M82.7158 21.0208H86.7158H82.7158ZM86.7158 23.0208H82.7158H86.7158ZM83.5158 23.0208C82.9635 23.0208 82.5158 22.573 82.5158 22.0208C82.5158 21.4685 82.9635 21.0208 83.5158 21.0208C83.1844 21.0208 82.9158 21.3789 82.9158 21.8208V22.2208C82.9158 22.6626 83.1844 23.0208 83.5158 23.0208ZM86.7158 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-5-inside-1_2320_57232)"/>
+<path d="M88 17.5C90.1389 17.5 89.9797 18.9104 91.4909 18.8867C93.0021 18.863 92.8611 17.5 95 17.5V79.5C93.0062 79.5 92.7947 78.5596 91.5 78.5596C90.2053 78.5596 89.4934 79.5 88 79.5V17.5Z" fill="url(#paint4_linear_2320_57232)"/>
+<mask id="mask1_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="88" y="17" width="7" height="63">
+<path d="M88 17.5C90.1389 17.5 89.9797 18.9104 91.4909 18.8867C93.0021 18.863 92.8611 17.5 95 17.5V79.5C93.0062 79.5 92.7947 78.5596 91.5 78.5596C90.2053 78.5596 89.4934 79.5 88 79.5V17.5Z" fill="url(#paint5_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask1_2320_57232)">
+<g filter="url(#filter1_f_2320_57232)">
+<ellipse cx="88.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-10-inside-2_2320_57232" fill="white">
+<path d="M89.7158 21.8208C89.7158 21.3789 90.074 21.0208 90.5158 21.0208H92.9158C93.3576 21.0208 93.7158 21.3789 93.7158 21.8208V22.2208C93.7158 22.6626 93.3576 23.0208 92.9158 23.0208H90.5158C90.074 23.0208 89.7158 22.6626 89.7158 22.2208V21.8208Z"/>
+</mask>
+<path d="M89.7158 21.8208C89.7158 21.3789 90.074 21.0208 90.5158 21.0208H92.9158C93.3576 21.0208 93.7158 21.3789 93.7158 21.8208V22.2208C93.7158 22.6626 93.3576 23.0208 92.9158 23.0208H90.5158C90.074 23.0208 89.7158 22.6626 89.7158 22.2208V21.8208Z" fill="url(#paint6_linear_2320_57232)"/>
+<path d="M89.7158 21.0208H93.7158H89.7158ZM93.7158 23.0208H89.7158H93.7158ZM90.5158 23.0208C89.9635 23.0208 89.5158 22.573 89.5158 22.0208C89.5158 21.4685 89.9635 21.0208 90.5158 21.0208C90.1844 21.0208 89.9158 21.3789 89.9158 21.8208V22.2208C89.9158 22.6626 90.1844 23.0208 90.5158 23.0208ZM93.7158 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-10-inside-2_2320_57232)"/>
+<path d="M95 17.5C97.1389 17.5 96.9797 18.9104 98.4909 18.8867C100.002 18.863 99.8611 17.5 102 17.5V79.5C100.006 79.5 99.7947 78.5596 98.5 78.5596C97.2053 78.5596 96.4934 79.5 95 79.5V17.5Z" fill="url(#paint7_linear_2320_57232)"/>
+<mask id="mask2_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="95" y="17" width="7" height="63">
+<path d="M95 17.5C97.1389 17.5 96.9797 18.9104 98.4909 18.8867C100.002 18.863 99.8611 17.5 102 17.5V79.5C100.006 79.5 99.7947 78.5596 98.5 78.5596C97.2053 78.5596 96.4934 79.5 95 79.5V17.5Z" fill="url(#paint8_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask2_2320_57232)">
+<g filter="url(#filter2_f_2320_57232)">
+<ellipse cx="95.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-15-inside-3_2320_57232" fill="white">
+<path d="M96.7158 21.8208C96.7158 21.3789 97.074 21.0208 97.5158 21.0208H99.9158C100.358 21.0208 100.716 21.3789 100.716 21.8208V22.2208C100.716 22.6626 100.358 23.0208 99.9158 23.0208H97.5158C97.074 23.0208 96.7158 22.6626 96.7158 22.2208V21.8208Z"/>
+</mask>
+<path d="M96.7158 21.8208C96.7158 21.3789 97.074 21.0208 97.5158 21.0208H99.9158C100.358 21.0208 100.716 21.3789 100.716 21.8208V22.2208C100.716 22.6626 100.358 23.0208 99.9158 23.0208H97.5158C97.074 23.0208 96.7158 22.6626 96.7158 22.2208V21.8208Z" fill="url(#paint9_linear_2320_57232)"/>
+<path d="M96.7158 21.0208H100.716H96.7158ZM100.716 23.0208H96.7158H100.716ZM97.5158 23.0208C96.9635 23.0208 96.5158 22.573 96.5158 22.0208C96.5158 21.4685 96.9635 21.0208 97.5158 21.0208C97.1844 21.0208 96.9158 21.3789 96.9158 21.8208V22.2208C96.9158 22.6626 97.1844 23.0208 97.5158 23.0208ZM100.716 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-15-inside-3_2320_57232)"/>
+<path d="M102 17.5C104.139 17.5 103.98 18.9104 105.491 18.8867C107.002 18.863 106.861 17.5 109 17.5V79.5C107.006 79.5 106.795 78.5596 105.5 78.5596C104.205 78.5596 103.493 79.5 102 79.5V17.5Z" fill="url(#paint10_linear_2320_57232)"/>
+<mask id="mask3_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="102" y="17" width="7" height="63">
+<path d="M102 17.5C104.139 17.5 103.98 18.9104 105.491 18.8867C107.002 18.863 106.861 17.5 109 17.5V79.5C107.006 79.5 106.795 78.5596 105.5 78.5596C104.205 78.5596 103.493 79.5 102 79.5V17.5Z" fill="url(#paint11_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask3_2320_57232)">
+<g filter="url(#filter3_f_2320_57232)">
+<ellipse cx="102.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-20-inside-4_2320_57232" fill="white">
+<path d="M103.716 21.8208C103.716 21.3789 104.074 21.0208 104.516 21.0208H106.916C107.358 21.0208 107.716 21.3789 107.716 21.8208V22.2208C107.716 22.6626 107.358 23.0208 106.916 23.0208H104.516C104.074 23.0208 103.716 22.6626 103.716 22.2208V21.8208Z"/>
+</mask>
+<path d="M103.716 21.8208C103.716 21.3789 104.074 21.0208 104.516 21.0208H106.916C107.358 21.0208 107.716 21.3789 107.716 21.8208V22.2208C107.716 22.6626 107.358 23.0208 106.916 23.0208H104.516C104.074 23.0208 103.716 22.6626 103.716 22.2208V21.8208Z" fill="url(#paint12_linear_2320_57232)"/>
+<path d="M103.716 21.0208H107.716H103.716ZM107.716 23.0208H103.716H107.716ZM104.516 23.0208C103.964 23.0208 103.516 22.573 103.516 22.0208C103.516 21.4685 103.964 21.0208 104.516 21.0208C104.184 21.0208 103.916 21.3789 103.916 21.8208V22.2208C103.916 22.6626 104.184 23.0208 104.516 23.0208ZM107.716 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-20-inside-4_2320_57232)"/>
+<path d="M109 17.5C111.139 17.5 110.98 18.9104 112.491 18.8867C114.002 18.863 113.861 17.5 116 17.5V79.5C114.006 79.5 113.795 78.5596 112.5 78.5596C111.205 78.5596 110.493 79.5 109 79.5V17.5Z" fill="url(#paint13_linear_2320_57232)"/>
+<mask id="mask4_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="109" y="17" width="7" height="63">
+<path d="M109 17.5C111.139 17.5 110.98 18.9104 112.491 18.8867C114.002 18.863 113.861 17.5 116 17.5V79.5C114.006 79.5 113.795 78.5596 112.5 78.5596C111.205 78.5596 110.493 79.5 109 79.5V17.5Z" fill="url(#paint14_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask4_2320_57232)">
+<g filter="url(#filter4_f_2320_57232)">
+<ellipse cx="109.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-25-inside-5_2320_57232" fill="white">
+<path d="M110.716 21.8208C110.716 21.3789 111.074 21.0208 111.516 21.0208H113.916C114.358 21.0208 114.716 21.3789 114.716 21.8208V22.2208C114.716 22.6626 114.358 23.0208 113.916 23.0208H111.516C111.074 23.0208 110.716 22.6626 110.716 22.2208V21.8208Z"/>
+</mask>
+<path d="M110.716 21.8208C110.716 21.3789 111.074 21.0208 111.516 21.0208H113.916C114.358 21.0208 114.716 21.3789 114.716 21.8208V22.2208C114.716 22.6626 114.358 23.0208 113.916 23.0208H111.516C111.074 23.0208 110.716 22.6626 110.716 22.2208V21.8208Z" fill="url(#paint15_linear_2320_57232)"/>
+<path d="M110.716 21.0208H114.716H110.716ZM114.716 23.0208H110.716H114.716ZM111.516 23.0208C110.964 23.0208 110.516 22.573 110.516 22.0208C110.516 21.4685 110.964 21.0208 111.516 21.0208C111.184 21.0208 110.916 21.3789 110.916 21.8208V22.2208C110.916 22.6626 111.184 23.0208 111.516 23.0208ZM114.716 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-25-inside-5_2320_57232)"/>
+<path d="M116 17.5C118.139 17.5 117.98 18.9104 119.491 18.8867C121.002 18.863 120.861 17.5 123 17.5V79.5C121.006 79.5 120.795 78.5596 119.5 78.5596C118.205 78.5596 117.493 79.5 116 79.5V17.5Z" fill="url(#paint16_linear_2320_57232)"/>
+<mask id="mask5_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="116" y="17" width="7" height="63">
+<path d="M116 17.5C118.139 17.5 117.98 18.9104 119.491 18.8867C121.002 18.863 120.861 17.5 123 17.5V79.5C121.006 79.5 120.795 78.5596 119.5 78.5596C118.205 78.5596 117.493 79.5 116 79.5V17.5Z" fill="url(#paint17_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask5_2320_57232)">
+<g filter="url(#filter5_f_2320_57232)">
+<ellipse cx="116.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-30-inside-6_2320_57232" fill="white">
+<path d="M117.716 21.8208C117.716 21.3789 118.074 21.0208 118.516 21.0208H120.916C121.358 21.0208 121.716 21.3789 121.716 21.8208V22.2208C121.716 22.6626 121.358 23.0208 120.916 23.0208H118.516C118.074 23.0208 117.716 22.6626 117.716 22.2208V21.8208Z"/>
+</mask>
+<path d="M117.716 21.8208C117.716 21.3789 118.074 21.0208 118.516 21.0208H120.916C121.358 21.0208 121.716 21.3789 121.716 21.8208V22.2208C121.716 22.6626 121.358 23.0208 120.916 23.0208H118.516C118.074 23.0208 117.716 22.6626 117.716 22.2208V21.8208Z" fill="url(#paint18_linear_2320_57232)"/>
+<path d="M117.716 21.0208H121.716H117.716ZM121.716 23.0208H117.716H121.716ZM118.516 23.0208C117.964 23.0208 117.516 22.573 117.516 22.0208C117.516 21.4685 117.964 21.0208 118.516 21.0208C118.184 21.0208 117.916 21.3789 117.916 21.8208V22.2208C117.916 22.6626 118.184 23.0208 118.516 23.0208ZM121.716 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-30-inside-6_2320_57232)"/>
+<path d="M31 17.5C33.1389 17.5 32.9797 18.9104 34.4909 18.8867C36.0021 18.863 35.8611 17.5 38 17.5V79.5C36.0062 79.5 35.7947 78.5596 34.5 78.5596C33.2053 78.5596 32.4934 79.5 31 79.5V17.5Z" fill="url(#paint19_linear_2320_57232)"/>
+<mask id="mask6_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="31" y="17" width="7" height="63">
+<path d="M31 17.5C33.1389 17.5 32.9797 18.9104 34.4909 18.8867C36.0021 18.863 35.8611 17.5 38 17.5V79.5C36.0062 79.5 35.7947 78.5596 34.5 78.5596C33.2053 78.5596 32.4934 79.5 31 79.5V17.5Z" fill="url(#paint20_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask6_2320_57232)">
+<g filter="url(#filter6_f_2320_57232)">
+<ellipse cx="31.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-35-inside-7_2320_57232" fill="white">
+<path d="M32.7158 21.8208C32.7158 21.3789 33.074 21.0208 33.5158 21.0208H35.9158C36.3576 21.0208 36.7158 21.3789 36.7158 21.8208V22.2208C36.7158 22.6626 36.3576 23.0208 35.9158 23.0208H33.5158C33.074 23.0208 32.7158 22.6626 32.7158 22.2208V21.8208Z"/>
+</mask>
+<path d="M32.7158 21.8208C32.7158 21.3789 33.074 21.0208 33.5158 21.0208H35.9158C36.3576 21.0208 36.7158 21.3789 36.7158 21.8208V22.2208C36.7158 22.6626 36.3576 23.0208 35.9158 23.0208H33.5158C33.074 23.0208 32.7158 22.6626 32.7158 22.2208V21.8208Z" fill="url(#paint21_linear_2320_57232)"/>
+<path d="M32.7158 21.0208H36.7158H32.7158ZM36.7158 23.0208H32.7158H36.7158ZM33.5158 23.0208C32.9635 23.0208 32.5158 22.573 32.5158 22.0208C32.5158 21.4685 32.9635 21.0208 33.5158 21.0208C33.1844 21.0208 32.9158 21.3789 32.9158 21.8208V22.2208C32.9158 22.6626 33.1844 23.0208 33.5158 23.0208ZM36.7158 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-35-inside-7_2320_57232)"/>
+<path d="M38 17.5C40.1389 17.5 39.9797 18.9104 41.4909 18.8867C43.0021 18.863 42.8611 17.5 45 17.5V79.5C43.0062 79.5 42.7947 78.5596 41.5 78.5596C40.2053 78.5596 39.4934 79.5 38 79.5V17.5Z" fill="url(#paint22_linear_2320_57232)"/>
+<mask id="mask7_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="38" y="17" width="7" height="63">
+<path d="M38 17.5C40.1389 17.5 39.9797 18.9104 41.4909 18.8867C43.0021 18.863 42.8611 17.5 45 17.5V79.5C43.0062 79.5 42.7947 78.5596 41.5 78.5596C40.2053 78.5596 39.4934 79.5 38 79.5V17.5Z" fill="url(#paint23_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask7_2320_57232)">
+<g filter="url(#filter7_f_2320_57232)">
+<ellipse cx="38.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-40-inside-8_2320_57232" fill="white">
+<path d="M39.7158 21.8208C39.7158 21.3789 40.074 21.0208 40.5158 21.0208H42.9158C43.3576 21.0208 43.7158 21.3789 43.7158 21.8208V22.2208C43.7158 22.6626 43.3576 23.0208 42.9158 23.0208H40.5158C40.074 23.0208 39.7158 22.6626 39.7158 22.2208V21.8208Z"/>
+</mask>
+<path d="M39.7158 21.8208C39.7158 21.3789 40.074 21.0208 40.5158 21.0208H42.9158C43.3576 21.0208 43.7158 21.3789 43.7158 21.8208V22.2208C43.7158 22.6626 43.3576 23.0208 42.9158 23.0208H40.5158C40.074 23.0208 39.7158 22.6626 39.7158 22.2208V21.8208Z" fill="url(#paint24_linear_2320_57232)"/>
+<path d="M39.7158 21.0208H43.7158H39.7158ZM43.7158 23.0208H39.7158H43.7158ZM40.5158 23.0208C39.9635 23.0208 39.5158 22.573 39.5158 22.0208C39.5158 21.4685 39.9635 21.0208 40.5158 21.0208C40.1844 21.0208 39.9158 21.3789 39.9158 21.8208V22.2208C39.9158 22.6626 40.1844 23.0208 40.5158 23.0208ZM43.7158 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-40-inside-8_2320_57232)"/>
+<path d="M45 17.5C47.1389 17.5 46.9797 18.9104 48.4909 18.8867C50.0021 18.863 49.8611 17.5 52 17.5V79.5C50.0062 79.5 49.7947 78.5596 48.5 78.5596C47.2053 78.5596 46.4934 79.5 45 79.5V17.5Z" fill="url(#paint25_linear_2320_57232)"/>
+<mask id="mask8_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="45" y="17" width="7" height="63">
+<path d="M45 17.5C47.1389 17.5 46.9797 18.9104 48.4909 18.8867C50.0021 18.863 49.8611 17.5 52 17.5V79.5C50.0062 79.5 49.7947 78.5596 48.5 78.5596C47.2053 78.5596 46.4934 79.5 45 79.5V17.5Z" fill="url(#paint26_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask8_2320_57232)">
+<g filter="url(#filter8_f_2320_57232)">
+<ellipse cx="45.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-45-inside-9_2320_57232" fill="white">
+<path d="M46.7158 21.8208C46.7158 21.3789 47.074 21.0208 47.5158 21.0208H49.9158C50.3576 21.0208 50.7158 21.3789 50.7158 21.8208V22.2208C50.7158 22.6626 50.3576 23.0208 49.9158 23.0208H47.5158C47.074 23.0208 46.7158 22.6626 46.7158 22.2208V21.8208Z"/>
+</mask>
+<path d="M46.7158 21.8208C46.7158 21.3789 47.074 21.0208 47.5158 21.0208H49.9158C50.3576 21.0208 50.7158 21.3789 50.7158 21.8208V22.2208C50.7158 22.6626 50.3576 23.0208 49.9158 23.0208H47.5158C47.074 23.0208 46.7158 22.6626 46.7158 22.2208V21.8208Z" fill="url(#paint27_linear_2320_57232)"/>
+<path d="M46.7158 21.0208H50.7158H46.7158ZM50.7158 23.0208H46.7158H50.7158ZM47.5158 23.0208C46.9635 23.0208 46.5158 22.573 46.5158 22.0208C46.5158 21.4685 46.9635 21.0208 47.5158 21.0208C47.1844 21.0208 46.9158 21.3789 46.9158 21.8208V22.2208C46.9158 22.6626 47.1844 23.0208 47.5158 23.0208ZM50.7158 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-45-inside-9_2320_57232)"/>
+<path d="M52 17.5C54.1389 17.5 53.9797 18.9104 55.4909 18.8867C57.0021 18.863 56.8611 17.5 59 17.5V79.5C57.0062 79.5 56.7947 78.5596 55.5 78.5596C54.2053 78.5596 53.4934 79.5 52 79.5V17.5Z" fill="url(#paint28_linear_2320_57232)"/>
+<mask id="mask9_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="52" y="17" width="7" height="63">
+<path d="M52 17.5C54.1389 17.5 53.9797 18.9104 55.4909 18.8867C57.0021 18.863 56.8611 17.5 59 17.5V79.5C57.0062 79.5 56.7947 78.5596 55.5 78.5596C54.2053 78.5596 53.4934 79.5 52 79.5V17.5Z" fill="url(#paint29_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask9_2320_57232)">
+<g filter="url(#filter9_f_2320_57232)">
+<ellipse cx="52.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-50-inside-10_2320_57232" fill="white">
+<path d="M53.7158 21.8208C53.7158 21.3789 54.074 21.0208 54.5158 21.0208H56.9158C57.3576 21.0208 57.7158 21.3789 57.7158 21.8208V22.2208C57.7158 22.6626 57.3576 23.0208 56.9158 23.0208H54.5158C54.074 23.0208 53.7158 22.6626 53.7158 22.2208V21.8208Z"/>
+</mask>
+<path d="M53.7158 21.8208C53.7158 21.3789 54.074 21.0208 54.5158 21.0208H56.9158C57.3576 21.0208 57.7158 21.3789 57.7158 21.8208V22.2208C57.7158 22.6626 57.3576 23.0208 56.9158 23.0208H54.5158C54.074 23.0208 53.7158 22.6626 53.7158 22.2208V21.8208Z" fill="url(#paint30_linear_2320_57232)"/>
+<path d="M53.7158 21.0208H57.7158H53.7158ZM57.7158 23.0208H53.7158H57.7158ZM54.5158 23.0208C53.9635 23.0208 53.5158 22.573 53.5158 22.0208C53.5158 21.4685 53.9635 21.0208 54.5158 21.0208C54.1844 21.0208 53.9158 21.3789 53.9158 21.8208V22.2208C53.9158 22.6626 54.1844 23.0208 54.5158 23.0208ZM57.7158 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-50-inside-10_2320_57232)"/>
+<path d="M59 17.5C61.1389 17.5 60.9797 18.9104 62.4909 18.8867C64.0021 18.863 63.8611 17.5 66 17.5V79.5C64.0062 79.5 63.7947 78.5596 62.5 78.5596C61.2053 78.5596 60.4934 79.5 59 79.5V17.5Z" fill="url(#paint31_linear_2320_57232)"/>
+<mask id="mask10_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="59" y="17" width="7" height="63">
+<path d="M59 17.5C61.1389 17.5 60.9797 18.9104 62.4909 18.8867C64.0021 18.863 63.8611 17.5 66 17.5V79.5C64.0062 79.5 63.7947 78.5596 62.5 78.5596C61.2053 78.5596 60.4934 79.5 59 79.5V17.5Z" fill="url(#paint32_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask10_2320_57232)">
+<g filter="url(#filter10_f_2320_57232)">
+<ellipse cx="59.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-55-inside-11_2320_57232" fill="white">
+<path d="M60.7158 21.8208C60.7158 21.3789 61.074 21.0208 61.5158 21.0208H63.9158C64.3576 21.0208 64.7158 21.3789 64.7158 21.8208V22.2208C64.7158 22.6626 64.3576 23.0208 63.9158 23.0208H61.5158C61.074 23.0208 60.7158 22.6626 60.7158 22.2208V21.8208Z"/>
+</mask>
+<path d="M60.7158 21.8208C60.7158 21.3789 61.074 21.0208 61.5158 21.0208H63.9158C64.3576 21.0208 64.7158 21.3789 64.7158 21.8208V22.2208C64.7158 22.6626 64.3576 23.0208 63.9158 23.0208H61.5158C61.074 23.0208 60.7158 22.6626 60.7158 22.2208V21.8208Z" fill="url(#paint33_linear_2320_57232)"/>
+<path d="M60.7158 21.0208H64.7158H60.7158ZM64.7158 23.0208H60.7158H64.7158ZM61.5158 23.0208C60.9635 23.0208 60.5158 22.573 60.5158 22.0208C60.5158 21.4685 60.9635 21.0208 61.5158 21.0208C61.1844 21.0208 60.9158 21.3789 60.9158 21.8208V22.2208C60.9158 22.6626 61.1844 23.0208 61.5158 23.0208ZM64.7158 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-55-inside-11_2320_57232)"/>
+<path d="M66 17.5C68.1389 17.5 67.9797 18.9104 69.4909 18.8867C71.0021 18.863 70.8611 17.5 73 17.5V79.5C71.0062 79.5 70.7947 78.5596 69.5 78.5596C68.2053 78.5596 67.4934 79.5 66 79.5V17.5Z" fill="url(#paint34_linear_2320_57232)"/>
+<mask id="mask11_2320_57232" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="66" y="17" width="7" height="63">
+<path d="M66 17.5C68.1389 17.5 67.9797 18.9104 69.4909 18.8867C71.0021 18.863 70.8611 17.5 73 17.5V79.5C71.0062 79.5 70.7947 78.5596 69.5 78.5596C68.2053 78.5596 67.4934 79.5 66 79.5V17.5Z" fill="url(#paint35_linear_2320_57232)"/>
+</mask>
+<g mask="url(#mask11_2320_57232)">
+<g filter="url(#filter11_f_2320_57232)">
+<ellipse cx="66.5" cy="75.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-60-inside-12_2320_57232" fill="white">
+<path d="M67.7158 21.8208C67.7158 21.3789 68.074 21.0208 68.5158 21.0208H70.9158C71.3576 21.0208 71.7158 21.3789 71.7158 21.8208V22.2208C71.7158 22.6626 71.3576 23.0208 70.9158 23.0208H68.5158C68.074 23.0208 67.7158 22.6626 67.7158 22.2208V21.8208Z"/>
+</mask>
+<path d="M67.7158 21.8208C67.7158 21.3789 68.074 21.0208 68.5158 21.0208H70.9158C71.3576 21.0208 71.7158 21.3789 71.7158 21.8208V22.2208C71.7158 22.6626 71.3576 23.0208 70.9158 23.0208H68.5158C68.074 23.0208 67.7158 22.6626 67.7158 22.2208V21.8208Z" fill="url(#paint36_linear_2320_57232)"/>
+<path d="M67.7158 21.0208H71.7158H67.7158ZM71.7158 23.0208H67.7158H71.7158ZM68.5158 23.0208C67.9635 23.0208 67.5158 22.573 67.5158 22.0208C67.5158 21.4685 67.9635 21.0208 68.5158 21.0208C68.1844 21.0208 67.9158 21.3789 67.9158 21.8208V22.2208C67.9158 22.6626 68.1844 23.0208 68.5158 23.0208ZM71.7158 21.0208V23.0208V21.0208Z" fill="#AEAEAE" mask="url(#path-60-inside-12_2320_57232)"/>
+<defs>
+<filter id="filter0_f_2320_57232" x="52" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<filter id="filter1_f_2320_57232" x="59" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<filter id="filter2_f_2320_57232" x="66" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<filter id="filter3_f_2320_57232" x="73" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<filter id="filter4_f_2320_57232" x="80" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<filter id="filter5_f_2320_57232" x="87" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<filter id="filter6_f_2320_57232" x="2" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<filter id="filter7_f_2320_57232" x="9" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<filter id="filter8_f_2320_57232" x="16" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<filter id="filter9_f_2320_57232" x="23" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<filter id="filter10_f_2320_57232" x="30" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<filter id="filter11_f_2320_57232" x="37" y="26.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2320_57232"/>
+</filter>
+<linearGradient id="paint0_linear_2320_57232" x1="31.5833" y1="20" x2="31.5833" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2320_57232" x1="81" y1="32.0464" x2="87.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2320_57232" x1="81" y1="32.0464" x2="87.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2320_57232" x1="82.8992" y1="20.0208" x2="82.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2320_57232" x1="88" y1="32.0464" x2="94.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2320_57232" x1="88" y1="32.0464" x2="94.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint6_linear_2320_57232" x1="89.8992" y1="20.0208" x2="89.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint7_linear_2320_57232" x1="95" y1="32.0464" x2="101.758" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint8_linear_2320_57232" x1="95" y1="32.0464" x2="101.758" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint9_linear_2320_57232" x1="96.8992" y1="20.0208" x2="96.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint10_linear_2320_57232" x1="102" y1="32.0464" x2="108.758" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint11_linear_2320_57232" x1="102" y1="32.0464" x2="108.758" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint12_linear_2320_57232" x1="103.899" y1="20.0208" x2="103.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint13_linear_2320_57232" x1="109" y1="32.0464" x2="115.758" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint14_linear_2320_57232" x1="109" y1="32.0464" x2="115.758" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint15_linear_2320_57232" x1="110.899" y1="20.0208" x2="110.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint16_linear_2320_57232" x1="116" y1="32.0464" x2="122.758" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint17_linear_2320_57232" x1="116" y1="32.0464" x2="122.758" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint18_linear_2320_57232" x1="117.899" y1="20.0208" x2="117.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint19_linear_2320_57232" x1="31" y1="32.0464" x2="37.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint20_linear_2320_57232" x1="31" y1="32.0464" x2="37.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint21_linear_2320_57232" x1="32.8992" y1="20.0208" x2="32.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint22_linear_2320_57232" x1="38" y1="32.0464" x2="44.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint23_linear_2320_57232" x1="38" y1="32.0464" x2="44.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint24_linear_2320_57232" x1="39.8992" y1="20.0208" x2="39.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint25_linear_2320_57232" x1="45" y1="32.0464" x2="51.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint26_linear_2320_57232" x1="45" y1="32.0464" x2="51.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint27_linear_2320_57232" x1="46.8992" y1="20.0208" x2="46.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint28_linear_2320_57232" x1="52" y1="32.0464" x2="58.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint29_linear_2320_57232" x1="52" y1="32.0464" x2="58.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint30_linear_2320_57232" x1="53.8992" y1="20.0208" x2="53.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint31_linear_2320_57232" x1="59" y1="32.0464" x2="65.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint32_linear_2320_57232" x1="59" y1="32.0464" x2="65.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint33_linear_2320_57232" x1="60.8992" y1="20.0208" x2="60.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint34_linear_2320_57232" x1="66" y1="32.0464" x2="72.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint35_linear_2320_57232" x1="66" y1="32.0464" x2="72.7583" y2="32.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint36_linear_2320_57232" x1="67.8992" y1="20.0208" x2="67.899" y2="23.0208" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+</defs>
+</svg>

+ 4 - 0
src/assets/images/page-equipment/curtain_open.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.716 5.85246C22.3255 5.46194 21.6923 5.46194 21.3018 5.85246L16.0685 11.0857C15.2875 11.8667 15.2875 13.1331 16.0685 13.9141L21.3018 19.1473C21.6923 19.5379 22.3255 19.5379 22.716 19.1473C23.1065 18.7568 23.1065 18.1237 22.716 17.7331L17.4828 12.4999L22.716 7.26668C23.1065 6.87615 23.1065 6.24299 22.716 5.85246Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.52141 6.07219C2.91193 5.68167 3.5451 5.68167 3.93562 6.07219L8.94921 11.0858C9.73026 11.8668 9.73026 13.1332 8.94921 13.9142L3.93562 18.9278C3.5451 19.3183 2.91193 19.3183 2.52141 18.9278C2.13088 18.5373 2.13088 17.9041 2.52141 17.5136L7.535 12.5L2.52141 7.4864C2.13088 7.09588 2.13088 6.46271 2.52141 6.07219Z" fill="#626C78"/>
+</svg>

+ 4 - 0
src/assets/images/page-equipment/curtain_stop.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5.11572" y="4" width="2" height="16" rx="1" fill="#626C78"/>
+<rect x="17.1157" y="4" width="2" height="16" rx="1" fill="#626C78"/>
+</svg>

+ 4 - 0
src/assets/images/page-equipment/curtain_up.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3005 8.90907C14.5608 8.64872 14.5608 8.22661 14.3005 7.96626L9.33166 2.99746C8.81097 2.47676 7.96675 2.47676 7.44605 2.99746L2.47724 7.96626C2.21689 8.22661 2.21689 8.64872 2.47724 8.90907C2.73759 9.16942 3.1597 9.16942 3.42005 8.90907L8.38886 3.94027L13.3577 8.90907C13.618 9.16942 14.0401 9.16942 14.3005 8.90907Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.32699 3.77142C7.9588 3.77142 7.66032 4.0699 7.66032 4.43809V14.2021C7.66032 14.5703 7.9588 14.8688 8.32699 14.8688C8.69518 14.8688 8.99365 14.5703 8.99365 14.2021V4.43809C8.99365 4.0699 8.69518 3.77142 8.32699 3.77142Z" fill="#626C78"/>
+</svg>

+ 176 - 0
src/assets/images/page-equipment/curtain_vertical.svg

@@ -0,0 +1,176 @@
+<svg width="165" height="100" viewBox="0 0 165 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="165" height="100" fill="white"/>
+<rect x="46" y="16.5" width="63" height="5" fill="url(#paint0_linear_2320_57205)"/>
+<rect x="109" y="16" width="1" height="6" fill="url(#paint1_linear_2320_57205)"/>
+<rect x="45" y="16" width="1" height="6" fill="url(#paint2_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 21.5)" fill="url(#paint3_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 24.5)" fill="url(#paint4_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 27.5)" fill="url(#paint5_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 30.5)" fill="url(#paint6_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 33.5)" fill="url(#paint7_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 36.5)" fill="url(#paint8_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 39.5)" fill="url(#paint9_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 42.5)" fill="url(#paint10_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 45.5)" fill="url(#paint11_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 48.5)" fill="url(#paint12_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 51.5)" fill="url(#paint13_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 54.5)" fill="url(#paint14_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 57.5)" fill="url(#paint15_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 60.5)" fill="url(#paint16_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 63.5)" fill="url(#paint17_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 66.5)" fill="url(#paint18_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 69.5)" fill="url(#paint19_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 72.5)" fill="url(#paint20_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 75.5)" fill="url(#paint21_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 78.5)" fill="url(#paint22_linear_2320_57205)"/>
+<rect width="61" height="3" transform="translate(47 81.5)" fill="url(#paint23_linear_2320_57205)"/>
+<g filter="url(#filter0_d_2320_57205)">
+<rect x="54" y="21.5" width="0.6" height="63" fill="white"/>
+</g>
+<g filter="url(#filter1_d_2320_57205)">
+<rect x="99" y="21.5" width="0.6" height="63" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_2320_57205" x="54" y="21" width="1.6001" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2320_57205"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2320_57205" result="shape"/>
+</filter>
+<filter id="filter1_d_2320_57205" x="99" y="21" width="1.6001" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2320_57205"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2320_57205" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_2320_57205" x1="77.5" y1="16.5" x2="77.5" y2="21.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F0F0F0"/>
+<stop offset="0.238869" stop-color="#FAFAFA"/>
+<stop offset="0.514935" stop-color="#EAEAEA"/>
+<stop offset="1" stop-color="#D6D4D3"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2320_57205" x1="109" y1="17.7143" x2="110" y2="17.7143" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F3F3"/>
+<stop offset="0.57965" stop-color="#EAE9E9"/>
+<stop offset="1" stop-color="#D6D4D3"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2320_57205" x1="45" y1="17.7143" x2="46" y2="17.7143" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F3F3"/>
+<stop offset="0.57965" stop-color="#EAE9E9"/>
+<stop offset="1" stop-color="#D6D4D3"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint7_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint8_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint9_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint10_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint11_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint12_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint13_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint14_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint15_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint16_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint17_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint18_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint19_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint20_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint21_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint22_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint23_linear_2320_57205" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+</defs>
+</svg>

BIN
src/assets/images/page-equipment/group.png


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 404 - 0
src/assets/images/page-equipment/heatclose.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 401 - 0
src/assets/images/page-equipment/heatopen.svg


+ 11 - 0
src/assets/images/page-equipment/icon_adjust.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.4 10.1L5.4 21C5.4 21.4971 4.99706 21.9 4.5 21.9C4.00294 21.9 3.6 21.4971 3.6 21L3.6 10.1H5.4Z" fill="#626C78"/>
+<path d="M3.5999 6.90001L3.5999 4.00001C3.5999 3.50295 4.00284 3.10001 4.4999 3.10001C4.99695 3.10001 5.3999 3.50295 5.3999 4.00001L5.3999 6.90001H3.5999Z" fill="#626C78"/>
+<path d="M4.4998 9.90001C3.83706 9.90001 3.2998 9.36275 3.2998 8.70001C3.2998 8.03726 3.83706 7.50001 4.4998 7.50001C5.16255 7.50001 5.6998 8.03726 5.6998 8.70001C5.6998 9.36275 5.16255 9.90001 4.4998 9.90001ZM4.4998 11.4C5.99097 11.4 7.1998 10.1912 7.1998 8.70001C7.1998 7.20884 5.99097 6.00001 4.4998 6.00001C3.00864 6.00001 1.7998 7.20884 1.7998 8.70001C1.7998 10.1912 3.00864 11.4 4.4998 11.4Z" fill="#626C78"/>
+<path d="M20.3998 10.1V21C20.3998 21.4971 19.9969 21.9 19.4998 21.9C19.0027 21.9 18.5998 21.4971 18.5998 21V10.1H20.3998Z" fill="#626C78"/>
+<path d="M18.6 6.90001H20.4V4.00001C20.4 3.50295 19.9971 3.10001 19.5 3.10001C19.003 3.10001 18.6 3.50295 18.6 4.00001V6.90001Z" fill="#626C78"/>
+<path d="M19.4998 9.90001C20.1625 9.90001 20.6998 9.36275 20.6998 8.70001C20.6998 8.03726 20.1625 7.50001 19.4998 7.50001C18.8371 7.50001 18.2998 8.03726 18.2998 8.70001C18.2998 9.36275 18.8371 9.90001 19.4998 9.90001ZM19.4998 11.4C18.0086 11.4 16.7998 10.1912 16.7998 8.70001C16.7998 7.20884 18.0086 6.00001 19.4998 6.00001C20.991 6.00001 22.1998 7.20884 22.1998 8.70001C22.1998 10.1912 20.991 11.4 19.4998 11.4Z" fill="#626C78"/>
+<path d="M12.8999 16.1H11.0999V21C11.0999 21.4971 11.5028 21.9 11.9999 21.9C12.4969 21.9 12.8999 21.4971 12.8999 21V16.1Z" fill="#626C78"/>
+<path d="M11.0998 12.9H12.8998V4.00001C12.8998 3.50295 12.4969 3.10001 11.9998 3.10001C11.5027 3.10001 11.0998 3.50295 11.0998 4.00001V12.9Z" fill="#626C78"/>
+<path d="M11.9998 15.9C11.3371 15.9 10.7998 15.3627 10.7998 14.7C10.7998 14.0373 11.3371 13.5 11.9998 13.5C12.6625 13.5 13.1998 14.0373 13.1998 14.7C13.1998 15.3627 12.6625 15.9 11.9998 15.9ZM11.9998 17.4C13.491 17.4 14.6998 16.1912 14.6998 14.7C14.6998 13.2088 13.491 12 11.9998 12C10.5086 12 9.2998 13.2088 9.2998 14.7C9.2998 16.1912 10.5086 17.4 11.9998 17.4Z" fill="#626C78"/>
+</svg>

BIN
src/assets/images/page-equipment/lamp_small_close.png


BIN
src/assets/images/page-equipment/lamp_small_open.png


BIN
src/assets/images/page-equipment/openair.png


+ 7 - 0
src/assets/images/page-equipment/underfloorHeat.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.49902 8.33337H16.249C17.3996 8.33337 18.3324 9.26611 18.3324 10.4167V10.4167C18.3324 11.5673 17.3996 12.5 16.249 12.5H10.728" stroke="#F09D96" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M12.2619 12.5001H3.74935C2.59876 12.5001 1.66602 13.4328 1.66602 14.5834V14.5834C1.66602 15.734 2.59875 16.6667 3.74935 16.6667H18.3327" stroke="#F09D96" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M4.68261 2.5C4.52591 2.61478 4.22972 2.76799 4.22972 3.27141C4.22972 3.77482 4.71556 4.13013 4.71556 4.66258C4.71556 5.19503 4.43346 5.43385 4.16685 5.6129" stroke="#F09D96" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M10.2312 2.5C10.0745 2.61478 9.7783 2.76799 9.7783 3.27141C9.7783 3.77482 10.2641 4.13013 10.2641 4.66258C10.2641 5.19503 9.98204 5.43385 9.71544 5.6129" stroke="#F09D96" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M15.7797 2.5C15.623 2.61478 15.3268 2.76799 15.3268 3.27141C15.3268 3.77482 15.8127 4.13013 15.8127 4.66258C15.8127 5.19503 15.5306 5.43385 15.264 5.6129" stroke="#F09D96" stroke-width="1.2" stroke-linecap="round"/>
+</svg>

+ 3 - 0
src/assets/images/page-equipment/wind_auto.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0477 4.71997L5.42773 19H7.18773L8.70773 15H15.2677L16.7877 19H18.5677L12.9477 4.71997H11.0477ZM9.22773 13.62L11.9677 6.47997H12.0477L14.7477 13.62H9.22773Z" fill="#424C59"/>
+</svg>

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 8 - 0
src/assets/images/page-equipment/wind_big.svg


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 6 - 0
src/assets/images/page-equipment/wind_small.svg


+ 52 - 5
src/config/sagacare/sagacare_image.js

@@ -52,9 +52,19 @@ export const equipImageMap = {
   lamp_close: require('@/assets/images/page-equipment/lamp-close.png'),
   expend_down: require('@/assets/images/page-equipment/expend-down.svg'),
   expend_up: require('@/assets/images/page-equipment/expend-up.svg'),
-  curtain_open_row: require('@/assets/images/page-equipment/curtain-open-row.png'),
-  curtain_open_icon_row: require('@/assets/images/page-equipment/curtain-open-icon-row.svg'),
-  curtain_close_icon_row: require('@/assets/images/page-equipment/curtain-close-icon-row.svg'),
+
+  // curtain_open_row: require('@/assets/images/page-equipment/curtain-open-row.png'),
+  // curtain_open_icon_row: require('@/assets/images/page-equipment/curtain-open-icon-row.svg'),
+  // curtain_close_icon_row: require('@/assets/images/page-equipment/curtain-close-icon-row.svg'),
+
+  curtain_close: require('@/assets/images/page-equipment/curtain_close.svg'),
+  curtain_down: require('@/assets/images/page-equipment/curtain_down.svg'),
+  curtain_open: require('@/assets/images/page-equipment/curtain_open.svg'),
+  curtain_stop: require('@/assets/images/page-equipment/curtain_stop.svg'),
+  curtain_up: require('@/assets/images/page-equipment/curtain_up.svg'),
+  curtain_vertical: require('@/assets/images/page-equipment/curtain_vertical.svg'),
+  curtain_horizon: require('@/assets/images/page-equipment/curtain_horizon.svg'),
+
   socket_close: require('@/assets/images/page-equipment/socket_close.png'),
   socket_open: require('@/assets/images/page-equipment/socket_open.png'),
 
@@ -63,12 +73,49 @@ export const equipImageMap = {
   openair: require('@/assets/images/page-equipment/openair.png'),
   air_close: require('@/assets/images/page-equipment/air_close.png'),
 
-  wind_small: require('@/assets/images/page-equipment/wind_small.png'),
-  wind_big: require('@/assets/images/page-equipment/wind_big.png'),
+  wind_small: require('@/assets/images/page-equipment/wind_small.svg'),
+  wind_big: require('@/assets/images/page-equipment/wind_big.svg'),
+  wind_auto: require('@/assets/images/page-equipment/wind_auto.svg'),
   airsunred: require('@/assets/images/page-equipment/airsunred.svg'),
   airsunblack: require('@/assets/images/page-equipment/airsunblack.svg'),
   aircoldblue: require('@/assets/images/page-equipment/aircoldblue.svg'),
   aircoldblack: require('@/assets/images/page-equipment/aircoldblack.svg'),
   aircloudgreen: require('@/assets/images/page-equipment/aircloudgreen.svg'),
   aircloudblack: require('@/assets/images/page-equipment/aircloudblack.svg'),
+
+  bg_disable: require('@/assets/images/page-equipment/bg_disable.png'),
+  office: require('@/assets/images/page-equipment/canvas/office.svg'),
+  meeting: require('@/assets/images/page-equipment/canvas/meeting.svg'),
+  rest: require('@/assets/images/page-equipment/canvas/rest.svg'),
+  device: require('@/assets/images/page-equipment/canvas/device.svg'),
+  washroom: require('@/assets/images/page-equipment/canvas/washroom.svg'),
+  lift: require('@/assets/images/page-equipment/canvas/lift.svg'),
+  stair: require('@/assets/images/page-equipment/canvas/stair.svg'),
+  dining: require('@/assets/images/page-equipment/canvas/dining.svg'),
+  publics: require('@/assets/images/page-equipment/canvas/public.svg'),
+  sport: require('@/assets/images/page-equipment/canvas/sport.svg'),
+  reception: require('@/assets/images/page-equipment/canvas/reception.svg'),
+  activity: require('@/assets/images/page-equipment/canvas/activity.svg'),
+  control: require('@/assets/images/page-equipment/canvas/control.svg'),
+  cloth: require('@/assets/images/page-equipment/canvas/cloth.svg'),
+  book: require('@/assets/images/page-equipment/canvas/book.svg'),
+  work: require('@/assets/images/page-equipment/canvas/work.svg'),
+  airConditioner: require('@/assets/images/page-equipment/canvas/airConditioner.svg'),
+  light: require('@/assets/images/page-equipment/canvas/light.svg'),
+  socket: require('@/assets/images/page-equipment/canvas/socket.svg'),
+  curtain: require('@/assets/images/page-equipment/canvas/curtain.svg'),
+  detail: require('@/assets/images/page-equipment/canvas/detail.svg'),
+  airConditioner_black: require('@/assets/images/page-equipment/canvas/airConditioner_black.svg'),
+  light_black: require('@/assets/images/page-equipment/canvas/light_black.svg'),
+  socket_black: require('@/assets/images/page-equipment/canvas/socket_black.svg'),
+  curtain_black: require('@/assets/images/page-equipment/canvas/curtain_black.svg'),
+
+  atmLamp_small_close: require('@/assets/images/page-equipment/atmLamp_small_close.png'),
+  atmLamp_small_open: require('@/assets/images/page-equipment/atmLamp_small_open.png'),
+  lamp_small_close: require('@/assets/images/page-equipment/lamp_small_close.png'),
+  icon_adjust: require('@/assets/images/page-equipment/icon_adjust.svg'),
+  lamp_small_open: require('@/assets/images/page-equipment/lamp_small_open.png'),
+  underfloorHeat: require('@/assets/images/page-equipment/underfloorHeat.svg'),
+  heatclose: require('@/assets/images/page-equipment/heatclose.svg'),
+  heatopen: require('@/assets/images/page-equipment/heatopen.svg'),
 };

+ 3 - 3
src/hooks/useMenuList.ts

@@ -8,11 +8,11 @@ export default function () {
   const [menuList, setMenuList] = useState<menutype[]>();
   //进入时赋值
   useEffect(() => {
-    //debugger;
     setMenuList([
-      { name: '环境信息', id: 'environment' },
+      // { name: '环境信息', id: 'environment' },
       { name: '设备管理', id: 'equipment' },
-      { name: '运行时间', id: 'runtime' },
+      { name: '人员管理', id: 'member' },
+      // { name: '运行时间', id: 'runtime' },
     ]);
   }, []);
 

+ 30 - 19
src/layouts/index.jsx

@@ -1,16 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import { useModel, useLocation, useIntl } from 'umi';
+import { useModel, useLocation, history } from 'umi';
 import styles from './index.less';
 import { MenuFoldOutlined, SmileOutlined } from '@ant-design/icons';
 import Icon from '@/tenants-ui/SgIcon';
 
 import { Drawer, notification } from 'antd';
 import NavMenu from '@/sagacare_components/navMenu';
+import Head from '@/sagacare_components/head';
 
 export default (props) => {
   const { menuVisible, closeMenu, toggleMenu } = useModel('controller');
   const { initialState, setInitialState } = useModel('@@initialState');
   const { changeLastBuildId, changeLastFloorId } = useModel('sagacare_buildFloor');
+  //todo
   const [notifyList] = useState([
     {
       title: '管理员操作指南',
@@ -71,10 +73,8 @@ export default (props) => {
   };
 
   useEffect(async () => {
-    // debugger;
     // console.log('enviroment-layout', initialState);
     // const currentUser = await initialState?.fetchUser?.();
-    // debugger;
     // if (currentUser) {
     //   setInitialState((s) => {
     //     return { ...s, currentUser: currentUser };
@@ -101,28 +101,39 @@ export default (props) => {
 
   const location = useLocation();
   useEffect(() => {
-    //debugger;
-    console.log('location', location);
+    //console.log('location', location);
   }, [location]);
   return (
     <div className={styles.layout}>
       <div className={styles.header}>
-        <div className={styles.title}>之江项目</div>
-        <div className={styles.right}>
-          <div className={styles.picture}>
-            <Icon type="person" style={{ fontSize: 28 }}></Icon>
-          </div>
-          <div
-            className={styles.notify}
-            onClick={(event) => {
-              event.stopPropagation();
-              openNotification();
+        <div className={styles.title}>
+          <span
+            className={styles.project}
+            onClick={() => {
+              history.push('/home');
             }}
           >
-            <Icon className={styles.notify} type="notify" style={{ fontSize: 21 }}></Icon>
-          </div>
-          <MenuFoldOutlined style={{ fontSize: 24, display: 'none' }} onClick={showMenuClick} />
+            之江项目
+          </span>
+          <Head></Head>
         </div>
+        {location.pathname.indexOf('home') == -1 && (
+          <div className={styles.right}>
+            <div className={styles.picture}>
+              <Icon type="person" style={{ fontSize: 28 }}></Icon>
+            </div>
+            <div
+              className={styles.notify}
+              onClick={(event) => {
+                event.stopPropagation();
+                openNotification();
+              }}
+            >
+              <Icon className={styles.notify} type="notify" style={{ fontSize: 21 }}></Icon>
+            </div>
+            <MenuFoldOutlined style={{ fontSize: 24 }} onClick={showMenuClick} />
+          </div>
+        )}
       </div>
 
       {props.children}
@@ -131,7 +142,7 @@ export default (props) => {
         placement="right"
         closable={false}
         onClose={closeMenu}
-        visible={menuVisible}
+        open={menuVisible}
         drawerStyle={
           {
             //   height: 340,

+ 9 - 4
src/layouts/index.less

@@ -31,9 +31,14 @@
   height: 75px;
   padding: 15px 0 20px 0;
   .title {
-    color: #000;
-    font-weight: 600;
-    font-size: 24px;
+    display: flex;
+    align-items: baseline;
+    .project {
+      color: #000;
+      font-weight: 600;
+      font-size: 24px;
+      cursor: pointer;
+    }
   }
   .right {
     display: flex;
@@ -46,7 +51,7 @@
       //   border-radius: 40px;
     }
     .notify {
-      margin-right: 24px;
+      margin-right: 30px;
       cursor: pointer;
       :global {
         .ant-notification-notice-message {

+ 2 - 0
src/locales/zh-CN/menu.ts

@@ -3,6 +3,8 @@ export default {
   'menu.equipment': '设备管理',
   'menu.runtime': '运行时间',
   'menu.recordList': '加班记录',
+  'menu.member': '人员管理',
+  'menu.member.invalid': '已作废',
   'menu.welcome': '欢迎',
   'menu.more-blocks': '更多区块',
   'menu.home': '首页',

+ 1 - 1
src/pages/Environment/components/chartModal/index.jsx

@@ -97,7 +97,7 @@ export default ({ onClose, showSpace, selNav }) => {
     <>
       <Modal
         width={550}
-        visible
+        open
         maskClosable={false}
         closable={false}
         footer={null}

+ 223 - 0
src/pages/Equipment/components/deviceModal/Slider/index.jsx

@@ -0,0 +1,223 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Spin } from 'antd';
+import styles from './index.less';
+import cx from 'classnames';
+
+export default ({
+  minValue,
+  maxValue,
+  typeName,
+  type,
+  typeValue,
+  onlyLine,
+  silderPercentValue,
+  silderMouseEnd,
+  silderMouseStart,
+}) => {
+  const [buttonLeft, setButtonLeft] = useState(0);
+  const [precentValue, setPrecentValue] = useState(0);
+  const [minWidth] = useState(0);
+  const [maxWidth, setMaxWidth] = useState(0);
+  const [startPoint, setStartPoint] = useState({});
+  const [movesign, setMovesign] = useState(false);
+  var barRef = useRef();
+  useEffect(() => {
+    //underfloorHeat 是地暖
+    if (
+      (type == 'underfloorHeat' || type == 'air' || type == 'oneair') &&
+      (!typeValue || !maxValue || !minValue)
+    )
+      return;
+    var barWidth = (barRef.current || {}).clientWidth || 0;
+    var barmax = barWidth - 28;
+    var buttonLeftT;
+    if (type == 'underfloorHeat' || type == 'air' || type == 'oneair') {
+      buttonLeftT = parseInt(((typeValue - minValue) / (maxValue - minValue)) * barmax);
+    } else {
+      buttonLeftT = parseInt((typeValue / 100) * barmax);
+    }
+
+    if (buttonLeftT > barmax) {
+      // 滑动位置大于进度条最大宽度的时候让它为最大宽度
+      buttonLeftT = barmax;
+    }
+    if (buttonLeftT < minWidth) {
+      // 滑动位置小于进度条最大宽度的时候让它为最小宽度
+      buttonLeftT = minWidth;
+    }
+    setButtonLeft(buttonLeftT);
+    setPrecentValue(typeValue);
+    setMaxWidth(barmax);
+  }, [typeValue, maxValue, minValue]);
+
+  const touchstart = (ev) => {
+    setMovesign(true);
+    setStartPoint(ev);
+    silderMouseStart && silderMouseStart();
+  };
+  const touchmove = (ev) => {
+    //console.log('touchmove', ev);
+    if (!movesign) return;
+
+    var endPoint = ev;
+    var translateX = endPoint.clientX - (startPoint.clientX || 0);
+    setStartPoint(endPoint);
+
+    var buttonLeftT = buttonLeft + translateX;
+
+    if (buttonLeftT > maxWidth) {
+      // 滑动位置大于进度条最大宽度的时候让它为最大宽度
+      buttonLeftT = maxWidth;
+    }
+    if (buttonLeftT < minWidth) {
+      // 滑动位置小于进度条最大宽度的时候让它为最小宽度
+      buttonLeftT = minWidth;
+    }
+
+    setButtonLeft(buttonLeftT);
+    if (type == 'underfloorHeat' || type == 'air' || type == 'oneair') {
+      var value =
+        Math.floor((buttonLeftT / maxWidth) * ((maxValue - minValue) * 2 + 1)) * 0.5 + minValue;
+      if (value > maxValue) {
+        value = maxValue;
+      }
+      if (value < minValue) {
+        value = minValue;
+      }
+    } else {
+      var value = parseInt((buttonLeftT / maxWidth) * 100);
+    }
+
+    setPrecentValue(value);
+    silderPercentValue && silderPercentValue({ value: value, type: type });
+  };
+
+  const barClick = useCallback(
+    (e) => {
+      var pageX = Number(e.pageX); // 页面触点Y坐标
+      var barRefCurrent = barRef.current || {};
+
+      var barDomLeft = barRefCurrent.getBoundingClientRect()?.left || 0;
+      var moveX = pageX - barDomLeft - 8;
+
+      var transX2 = moveX;
+
+      if (transX2 < 0) {
+        // transX只能是正的
+        transX2 = 0;
+      }
+      if (transX2 > maxWidth) {
+        transX2 = maxWidth;
+      }
+
+      setButtonLeft(transX2);
+      if (type == 'underfloorHeat' || type == 'air' || type == 'oneair') {
+        var value =
+          Math.floor((transX2 / maxWidth) * ((maxValue - minValue) * 2 + 1)) * 0.5 + minValue;
+        if (value > maxValue) {
+          value = maxValue;
+        }
+        if (value < minValue) {
+          value = minValue;
+        }
+      } else {
+        var value = parseInt((transX2 / maxWidth) * 100);
+      }
+
+      setPrecentValue(value);
+      silderMouseEnd && silderMouseEnd({ value: value, type: type });
+    },
+    [maxWidth, precentValue, type],
+  );
+
+  const touchend = useCallback(() => {
+    if (!movesign) return;
+    setMovesign(false);
+
+    silderMouseEnd && silderMouseEnd({ value: precentValue, type: type });
+  }, [precentValue, type, movesign]);
+
+  const changeMoveSign = () => {
+    setMovesign(false);
+  };
+  useEffect(() => {
+    document.addEventListener('mouseup', changeMoveSign);
+    return () => {
+      document.removeEventListener('mouseup', changeMoveSign);
+    };
+  }, []);
+  return (
+    <div
+      className={cx(styles.slider, {
+        [styles.heatSlider]: type == 'underfloorHeat',
+        [styles.curtainSlider]: type == 'curtain',
+      })}
+      onMouseDown={(event) => {
+        event.stopPropagation();
+      }}
+      onMouseUp={(event) => {
+        touchend();
+      }}
+      onMouseMove={(event) => {
+        touchmove(event);
+      }}
+    >
+      {type != 'underfloorHeat' && type != 'air' && type != 'oneair' && (
+        <div className={styles.textBox}>
+          <div className={styles.text}>{typeName}</div>
+          <div className={styles.textNum}>{precentValue}%</div>
+        </div>
+      )}
+      {type == 'oneair' && (
+        <div className={styles.textBox}>
+          <div className={styles.text}>{typeName}</div>
+          <div className={styles.textNum}>{precentValue}℃</div>
+        </div>
+      )}
+      <div
+        className={styles.box}
+        onMouseDown={(event) => {
+          event.stopPropagation();
+        }}
+      >
+        <div
+          className={cx(styles.line, { [styles.lineBg]: !onlyLine })}
+          ref={barRef}
+          onClick={(event) => {
+            barClick(event);
+          }}
+        >
+          <div>{minValue}</div>
+          <div>{maxValue}</div>
+        </div>
+        {!onlyLine && (
+          <div
+            className={styles.activeLine}
+            onClick={(event) => {
+              barClick(event);
+            }}
+            style={{ width: buttonLeft + 19 }}
+          ></div>
+        )}
+        {type == 'curtain' && (
+          <div className={styles.curtainLine}>
+            <span>关</span>
+            <span></span>开
+          </div>
+        )}
+        <div
+          className={styles.btn}
+          style={{ left: buttonLeft }}
+          onMouseDown={(event) => {
+            event.stopPropagation();
+            touchstart(event);
+          }}
+        >
+          {(type == 'underfloorHeat' || type == 'air') && (
+            <div className={styles.value}>{precentValue}℃</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

+ 112 - 0
src/pages/Equipment/components/deviceModal/Slider/index.less

@@ -0,0 +1,112 @@
+.slider {
+  padding-right: 20px;
+  padding-bottom: 30px;
+  padding-left: 20px;
+  .box {
+    position: relative;
+  }
+  .line {
+    // position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // width: 272px;
+    height: 22px;
+    padding: 0 8px 0 8px;
+    background: linear-gradient(270deg, #ffbab6 0%, #ffe7d1 29.05%, #f1efff 62%, #c8d6ff 100%);
+    //background: linear-gradient(90deg, #ffc079 0%, #ffe7d1 43.1%, #f1efff 74.36%, #c8d6ff 100%);
+    border-radius: 16px;
+    cursor: pointer;
+  }
+  .lineBg {
+    background: rgba(232, 236, 240, 1);
+  }
+  .activeLine {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+    height: 22px;
+    background: rgba(255, 227, 153, 1);
+    border-radius: 16px 0 0 16px;
+    cursor: pointer;
+  }
+  .curtainLine {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 22px;
+    padding: 0 8px;
+  }
+  .btn {
+    position: absolute;
+    top: -5px;
+    left: 0px;
+    z-index: 3;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    white-space: nowrap;
+    background: #f6f9fe;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 0px 8px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    .value {
+      position: absolute;
+      top: -12px;
+      left: 0px;
+      width: 100%;
+      line-height: 0;
+      white-space: nowrap;
+    }
+  }
+  .textBox {
+    display: flex;
+    align-items: center;
+    // justify-content: space-between;
+    padding-bottom: 14px;
+  }
+  .text {
+    padding-right: 12px;
+    color: rgba(27, 33, 41, 1);
+    font-weight: 600;
+    font-size: 16px;
+    font-family: PingFang SC;
+    line-height: 25px;
+    border-right: 1px solid #e1e5eb;
+  }
+  .textNum {
+    padding-left: 12px;
+    color: rgba(27, 33, 41, 1);
+    font-weight: 400;
+    font-size: 16px;
+    font-family: Persagy;
+    line-height: 24px;
+  }
+}
+.heatSlider {
+  padding: 38px 20px 30px 20px;
+  .line {
+    height: 22px;
+    color: #626c78;
+    font-size: 12px;
+    background: linear-gradient(270deg, #ffbab6 0%, #ffe7d1 29.05%, #f1efff 62%, #c8d6ff 100%);
+  }
+  .btn {
+    top: -7px;
+  }
+}
+.curtainSlider {
+  .textBox {
+    justify-content: left;
+  }
+  .textNum {
+    margin-left: 12px;
+  }
+}

+ 34 - 8
src/pages/Equipment/components/deviceModal/airEq/index.jsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { message, Spin } from 'antd';
+import { message, Spin, notification, Button } from 'antd';
 import styles from './index.less';
 import commonStyles from '../common.less';
 import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
 import AnSwitch from '../anSwitch';
 import { getFeedbackDocumentsHttp, changeAirHttp } from '@/services/sagacare_service/equipment';
 import { LoadingOutlined } from '@ant-design/icons';
+import { projectObj } from '@/config/api.js';
 
-export default ({ spaceId, projectId }) => {
+export default ({ spaceId, projectId, inTime }) => {
   const {
     airOpen,
     airClose,
@@ -29,6 +30,7 @@ export default ({ spaceId, projectId }) => {
   let airLoadingTimer = useRef(null);
   const [spaceStatus, setStatusText] = useState('null');
   let [changeLoading, setChangeLoading] = useState({ 4: false, 2: false, 5: false, 6: false });
+  let divBox = useRef(null);
 
   const airExpend = [
     {
@@ -68,7 +70,7 @@ export default ({ spaceId, projectId }) => {
   function timerGetAirInfo(timeLong) {
     clearTimeout(timer.current);
     timer.current = setTimeout(() => {
-      getAirInfo(); // 获取空调状态
+      divBox.current && getAirInfo(); // 获取空调状态
     }, timeLong);
   }
 
@@ -101,6 +103,7 @@ export default ({ spaceId, projectId }) => {
     };
     getFeedbackDocumentsHttp(paramsObj)
       .then((res) => {
+        if (!divBox.current) return;
         const val = res.icon == 7 ? false : true;
         if (firstLoading.current) {
           setIsLoading(false);
@@ -116,12 +119,35 @@ export default ({ spaceId, projectId }) => {
       .catch(() => {
         timerGetAirInfo(3000);
         firstLoading.current = false;
-        // setIsLoading(false);
       });
-  }, []);
-
+  }, [spaceId]);
+  const key = 'warnnotification2';
+  const btn = (
+    <Button type="default" size="middle" onClick={() => notification.close(key)}>
+      隐藏
+    </Button>
+  );
   const changeAir = useCallback(
     (itemId) => {
+      if (!inTime && itemId == 12 && projectObj.projectId == 'Pj1101020007') {
+        //开启
+        setIsLoading(false);
+        notification.warning({
+          placement: 'top',
+          key,
+          message: '空调无法开启',
+          description: '如需开启空调,请移步至环境控制小程序。选择空间”预约时间“后可开启空调。',
+          top: 200,
+          duration: 5,
+          style: {
+            width: 310,
+          },
+          maxCount: 2,
+          btn,
+          // rtl: true,
+        });
+        return;
+      }
       if (changeLoading[itemId]) {
         return;
       }
@@ -157,10 +183,10 @@ export default ({ spaceId, projectId }) => {
     return () => {
       clearTimeout(timer.current);
     };
-  }, []);
+  }, [spaceId]);
 
   return (
-    <div className={styles.box}>
+    <div className={styles.box} ref={divBox}>
       <div className={styles.content}>
         <div className={styles.env}>
           <div className={styles.envLeft}>

+ 4 - 3
src/pages/Equipment/components/deviceModal/airEq/index.less

@@ -4,13 +4,14 @@
   background: hsl(0, 0%, 100%);
   border-radius: 25px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.07), 0 4px 10px rgba(0, 0, 0, 0.05);
+  overflow:hidden;
   .content {
     .env {
       position: relative;
       display: flex;
       .envLeft {
         flex: 1 1 auto;
-        height: 140px;
+        height: 156px;
         padding-top: 24px;
         padding-left: 30px;
         // .envnum {
@@ -36,10 +37,10 @@
       }
       .envRight {
         width: 165px;
-        height: 140px;
+        height: 156px;
         .roomAirImg {
           width: 165px;
-          height: 140px;
+          height: 156px;
         }
       }
     }

+ 305 - 0
src/pages/Equipment/components/deviceModal/airEqHand/airModal/index.jsx

@@ -0,0 +1,305 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Modal } from 'antd';
+import styles from './index.less';
+import Draggable from 'react-draggable';
+import Slider from '../../Slider';
+import Icon from '@/tenants-ui/SgIcon';
+import { changeManualTempHttp } from '@/services/sagacare_service/equipment';
+import { message } from 'antd';
+import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
+import cx from 'classnames';
+
+export default ({ projectId, hideModal, changeDeviceObj, deviceObj, minValue, maxValue }) => {
+  const {
+    up_Arrow,
+    down_Arrow,
+    openair,
+    air_close,
+    wind_small,
+    wind_big,
+    wind_auto,
+    airsunred,
+    airsunblack,
+    aircoldblue,
+    aircoldblack,
+    aircloudgreen,
+    aircloudblack,
+    icon_adjust,
+  } = equipImageMap;
+
+  const [disabled, setDisabled] = useState(false);
+  const [bounds, setBounds] = useState({
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+  });
+  const windGearArr = [0, 1, 2, 3]; // 风量3/5个档位
+  // 滑动停止
+  const mouseEnd = (obj) => {
+    deviceObj.tempSet2 = obj.value;
+    deviceObj.nowTemp2 = obj.value;
+
+    changeOneAir('temp', obj.value);
+  };
+  // useEffect(() => {
+  //   console.log('deviceObj', deviceObj);
+  // }, [deviceObj]);
+
+  function changeOneAir(btnType, value) {
+    if (!deviceObj.open) return;
+    var deviceObjCopy = { ...deviceObj };
+    var nowairGear = deviceObj.airGear2;
+    var nowAutoGear = deviceObj.isAutoGear2;
+    if (btnType == 'gear' && value == 'windLow') {
+      //降挡
+      if (nowairGear > 1) {
+        nowairGear = nowairGear - 1;
+        nowAutoGear = 0;
+        deviceObjCopy.airGear2 = nowairGear;
+        deviceObjCopy.isAutoGear2 = nowAutoGear;
+      } else {
+        return;
+      }
+    }
+    if (btnType == 'gear' && value == 'windUp') {
+      //升档
+      if (nowairGear < 3) {
+        nowairGear = nowairGear + 1;
+        nowAutoGear = 0;
+        deviceObjCopy.airGear2 = nowairGear;
+        deviceObjCopy.isAutoGear2 = nowAutoGear;
+      } else {
+        return;
+      }
+    }
+
+    if (btnType == 'gear' && value == 'auto') {
+      nowAutoGear = deviceObj.isAutoGear2 == 1 ? 0 : 1;
+      deviceObjCopy.isAutoGear2 = nowAutoGear;
+    }
+    var rval;
+    if (btnType == 'mode') {
+      deviceObjCopy.airMode2 = value;
+      rval = value;
+    }
+    if (btnType == 'gear') {
+      rval = nowAutoGear == 1 ? 4 : nowairGear;
+    }
+    if (btnType == 'temp') {
+      rval = value;
+    }
+    var nowModel = deviceObj.allModel.find((item) => {
+      return item.id == btnType;
+    });
+
+    const paramArr = [
+      {
+        id: deviceObj.id,
+        code: nowModel.code,
+        value: rval,
+      },
+    ];
+
+    //  下达指令
+    changeManualTempHttp(paramArr)
+      .then((res) => {
+        changeDeviceObj(deviceObjCopy);
+      })
+      .catch(() => {
+        //wx.hideLoading();
+      });
+  }
+
+  const draggleRef = useRef(null);
+  const onStart = (_event, uiData) => {
+    _event.stopPropagation();
+    const { clientWidth, clientHeight } = window.document.documentElement;
+    const targetRect = draggleRef.current?.getBoundingClientRect();
+    if (!targetRect) {
+      return;
+    }
+    setBounds({
+      left: -targetRect.left + uiData.x,
+      right: clientWidth - (targetRect.right - uiData.x),
+      top: -targetRect.top + uiData.y,
+      bottom: clientHeight - (targetRect.bottom - uiData.y),
+    });
+  };
+
+  return (
+    <Modal
+      open
+      mask={false}
+      centered
+      footer={null}
+      style={{
+        width: '100%',
+      }}
+      modalRender={(modal) => (
+        <Draggable
+          disabled={disabled}
+          bounds={bounds}
+          onStart={(event, uiData) => onStart(event, uiData)}
+        >
+          <div ref={draggleRef}>{modal}</div>
+        </Draggable>
+      )}
+      closable={false}
+    >
+      <div
+        className={styles.heatModal}
+        // onClick={(event) => {
+        //   event.stopPropagation();
+        //   event.preventDefault();
+        // }}
+        // onMouseDown={(event) => {
+        //   event.stopPropagation();
+        //   event.preventDefault();
+        // }}
+      >
+        <div
+          className={styles.closeIcon}
+          onClick={(event) => {
+            hideModal();
+          }}
+        >
+          <Icon type="close" />
+        </div>
+        <div className={styles.modalTitle}>{deviceObj.name}</div>
+        <div className={styles.modalCont}>
+          {deviceObj?.boundPoint?.tempSetBound && (
+            <div className={styles.sliderItem}>
+              <Slider
+                onlyLine={true}
+                typeValue={deviceObj.nowTemp2 || minValue}
+                minValue={minValue}
+                maxValue={maxValue}
+                type={'oneair'}
+                typeName={'温度调节'}
+                silderMouseEnd={mouseEnd}
+              ></Slider>
+            </div>
+          )}
+          {deviceObj?.boundPoint?.gearSetBound && (
+            <div className={cx(styles.airControlItem)}>
+              <div className={styles.airControlItemBox}>
+                <div className={cx(styles.airCommonText)}>风速</div>
+                <div className={cx(styles.envnumCommon, styles.airEnvnumComon)}>
+                  {windGearArr.map(function (item, index) {
+                    return (
+                      <span
+                        className={cx(styles.envnumCommonWind, {
+                          [styles.windBlack]: item == deviceObj.airGear2,
+                        })}
+                        key={index + 'wind'}
+                      >
+                        {item}
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+              <div className={styles.airCommonSwitch}>
+                <div>
+                  <div
+                    className={cx(styles.switch, {
+                      [styles.disabled]: deviceObj.airGear2 <= 1 || !deviceObj.open,
+                    })}
+                    onClick={() => {
+                      changeOneAir('gear', 'windLow');
+                    }}
+                  >
+                    <img className={styles.wimg} src={wind_small} />
+                  </div>
+                  <div className={styles.switchName}>调小</div>
+                </div>
+                <div>
+                  <div
+                    className={cx(styles.switch, {
+                      [styles.disabled]: deviceObj.airGear2 >= 3 || !deviceObj.open,
+                    })}
+                    onClick={() => {
+                      changeOneAir('gear', 'windUp');
+                    }}
+                  >
+                    <img className={styles.wimg} src={wind_big} />
+                  </div>
+                  <div className={styles.switchName}>调大</div>
+                </div>
+                <div>
+                  <div
+                    className={cx(styles.switch, {
+                      [styles.yell]: deviceObj.isAutoGear2 == 1,
+                      [styles.disabled]: !deviceObj.open,
+                    })}
+                    onClick={() => {
+                      changeOneAir('gear', 'auto');
+                    }}
+                  >
+                    <img className={styles.wimg} src={wind_auto} />
+                  </div>
+                  <div className={styles.switchName}>自动</div>
+                </div>
+              </div>
+            </div>
+          )}
+          {deviceObj?.boundPoint?.modeSetBound && (
+            <div className={cx(styles.airControlItem)}>
+              <div className={styles.airControlItemBox}>
+                <div className={cx(styles.airCommonText)}>模式</div>
+                <div className={cx(styles.envnumCommon, styles.airEnvnumComon)}>
+                  {deviceObj.airMode2 == 2 ? '制热' : deviceObj.airMode2 == 1 ? '制冷' : '通风'}
+                </div>
+              </div>
+              <div className={styles.airCommonSwitch}>
+                <div>
+                  <div
+                    className={cx(styles.switch, {
+                      [styles.yell]: deviceObj.airMode2 == 1,
+                      [styles.disabled]: !deviceObj.open,
+                    })}
+                    onClick={() => {
+                      changeOneAir('mode', 1);
+                    }}
+                  >
+                    <img className={styles.wimg} src={aircoldblack} />
+                  </div>
+                  <div className={styles.switchName}>制冷</div>
+                </div>
+                <div>
+                  <div
+                    className={cx(styles.switch, {
+                      [styles.yell]: deviceObj.airMode2 == 2,
+                      [styles.disabled]: !deviceObj.open,
+                    })}
+                    onClick={() => {
+                      changeOneAir('mode', 2);
+                    }}
+                  >
+                    <img className={styles.wimg} src={airsunblack} />
+                  </div>
+                  <div className={styles.switchName}>制热</div>
+                </div>
+                <div>
+                  <div
+                    className={cx(styles.switch, {
+                      [styles.yell]: deviceObj.airMode2 == 3,
+                      [styles.disabled]: !deviceObj.open,
+                    })}
+                    onClick={() => {
+                      changeOneAir('mode', 3);
+                    }}
+                  >
+                    <img className={styles.wimg} src={aircloudblack} />
+                  </div>
+                  <div className={styles.switchName}>通风</div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+};

+ 251 - 0
src/pages/Equipment/components/deviceModal/airEqHand/airModal/index.less

@@ -0,0 +1,251 @@
+.heatModal {
+  position: relative;
+  box-sizing: border-box;
+  width: 340px;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0px 20px 30px rgba(27, 33, 41, 0.15);
+  cursor: move;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+
+  .closeIcon {
+    position: absolute;
+    top: 32px;
+    right: 32px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: #c4c4c4;
+    font-size: 20px;
+    border-radius: 100%;
+    cursor: pointer;
+    transition: background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
+    &:hover {
+      background-color: #fff;
+    }
+  }
+
+  .modalTitle {
+    padding-top: 32px;
+    padding-right: 32px;
+    padding-bottom: 36px;
+    padding-left: 32px;
+    color: rgba(0, 0, 0, 1);
+    font-weight: 500;
+    font-size: 24px;
+    font-family: PingFang SC;
+    line-height: 1;
+  }
+  .modalCont {
+    padding-bottom: 30px;
+    .sliderItem{
+      padding:0 12px 8px 12px;
+    }
+  }
+  .airControlItem {
+    box-sizing: border-box;
+    padding: 0px 32px 36px 32px;
+    &.temp-item {
+      cursor: default;
+    }
+    &.itemFlex {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .temp-wrap {
+      display: flex;
+      align-items: center;
+      height: 20px;
+      padding-top: 26px;
+      padding-bottom: 5px;
+
+      .minVal {
+        flex-grow: 0;
+        margin-right: 8px;
+        color: #c4c4c4;
+        font-size: 12px;
+      }
+
+      .maxVal {
+        flex-grow: 0;
+        margin-left: 8px;
+        color: #c4c4c4;
+        font-size: 12px;
+      }
+
+      .tempBar {
+        position: relative;
+        display: flex;
+        flex-grow: 1;
+        //background: red;
+        height: 10px;
+        border-radius: 10px;
+        cursor: pointer;
+
+        .circle {
+          position: absolute;
+          top: -5px;
+          left: 0px;
+          z-index: 1;
+          width: 19px;
+          height: 19px;
+          background: #ffffff;
+          border-radius: 21px;
+          box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 4px 10px rgba(0, 0, 0, 0.07);
+
+          .tvalue {
+            position: relative;
+            top: -26px;
+            color: #1f2429;
+            font-size: 12px;
+            white-space: nowrap;
+            text-align: center;
+          }
+
+          &.disable {
+            opacity: 0.6;
+          }
+        }
+
+        .eachBlock {
+          width: 20%;
+          background: red;
+
+          &:nth-child(1) {
+            background: #5e8bcf;
+            border-top-left-radius: 10px;
+            border-bottom-left-radius: 10px;
+          }
+
+          &:nth-child(2) {
+            background: #9fb7cd;
+          }
+
+          &:nth-child(3) {
+            background: #f3f3f3;
+          }
+
+          &:nth-child(4) {
+            background: #ff9882;
+          }
+
+          &:nth-child(5) {
+            background: #e5574f;
+            border-top-right-radius: 10px;
+            border-bottom-right-radius: 10px;
+          }
+        }
+      }
+    }
+    .airCommonText {
+      padding-top: 2px;
+      padding-right: 12px;
+      color: #1b2129;
+      font-weight: 600;
+      font-size: 16px;
+      font-family: PingFang SC;
+      line-height: 15px;
+      border-right: 1px solid #e1e5eb;
+    }
+
+    .airControlItemBox {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+      //flex-direction: column;
+    }
+
+    .envnumCommon {
+      padding-left: 12px;
+      color: rgba(77, 82, 98, 1);
+      font-size: 16px;
+      font-family: Montserrat;
+      line-height: 24px;
+      &.airEnvnumComon {
+        display: flex;
+        align-items: center;
+      }
+
+      .envnumCommonWind {
+        margin-right: 7px;
+        color: rgba(196, 196, 196, 1);
+        font-weight: 500;
+        font-family: Montserrat;
+
+        &.windBlack {
+          color: #1b2129;
+          font-weight: 500;
+        }
+      }
+
+      &.colorRed {
+        color: red;
+      }
+
+      &.colorBlue {
+        color: rgba(94, 139, 207, 1);
+      }
+
+      &.colorBlack {
+        color: rgba(77, 82, 98, 1);
+      }
+
+      label {
+        color: rgba(196, 196, 196, 1);
+        font-size: 11px;
+        line-height: 13px;
+        vertical-align: top;
+      }
+    }
+
+    .airCommonSwitch {
+      display: flex;
+      justify-content: space-around;
+    }
+
+    .switch:last-child {
+      margin-right: 0px;
+    }
+
+    .switch {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      margin-right: 8px;
+      font-size: 20px;
+      color:#424C59;
+      background: #f1f4f6;
+      border-radius: 50%;
+      cursor: pointer;
+
+      .wimg {
+        width: 24px;
+        height: 24px;
+      }
+
+      &.yell {
+        background: #ffe823;
+      }
+    }
+    .switchName {
+      width: 48px;
+      margin-top: 8px;
+      color: #626c78;
+      text-align: center;
+    }
+    .disabled {
+      opacity: 0.4;
+    }
+  }
+}

+ 22 - 0
src/pages/Equipment/components/deviceModal/airEqHand/controlButton/index.jsx

@@ -0,0 +1,22 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Modal } from 'antd';
+import styles from './index.less';
+import Icon from '@/tenants-ui/SgIcon';
+import cx from 'classnames';
+
+export default ({ isAll, changeIsAll }) => {
+  return (
+    <div
+      className={styles.changeBox}
+      onClick={(event) => {
+        event.stopPropagation();
+        changeIsAll();
+      }}
+    >
+      <div className={styles.firBox}>总控制</div> <div className={styles.firBox}>子设备</div>
+      <div className={cx(styles.upBox, { [styles.rightBox]: !isAll })}>
+        {isAll ? '总控制' : '子设备'}
+      </div>
+    </div>
+  );
+};

+ 33 - 0
src/pages/Equipment/components/deviceModal/airEqHand/controlButton/index.less

@@ -0,0 +1,33 @@
+.changeBox {
+  position: relative;
+  display: flex;
+  width: 116px;
+  height: 28px;
+  color: #424c59;
+  font-size: 14px;
+  background: #f1f4f6;
+  border-radius: 21px;
+  cursor: pointer;
+  .firBox {
+    width: 58px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+  }
+  .upBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 58px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    background: #ffffff;
+    border: 1px solid #e1e5eb;
+    border-radius: 21px;
+    transition: left 0.5s;
+  }
+  .rightBox {
+    left: 50%;
+  }
+}

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 422 - 397
src/pages/Equipment/components/deviceModal/airEqHand/index.jsx


+ 177 - 94
src/pages/Equipment/components/deviceModal/airEqHand/index.less

@@ -1,5 +1,8 @@
 .air-adjust {
   position: relative;
+  box-sizing: border-box;
+  width: 331px;
+  min-height: 156px;
   margin-bottom: 15px;
   background: hsl(0, 0%, 100%);
   border-radius: 25px;
@@ -7,18 +10,18 @@
   user-select: none;
   .allAir {
     display: flex;
-    box-sizing: border-box;
-    padding: 0px 5px 0px 5px;
     flex-wrap: wrap;
+    box-sizing: border-box;
+    padding: 6px 0 16px 12px;
 
     .eachAir {
       position: relative;
-      width: 50%;
-      box-sizing: border-box;
       flex-shrink: 0;
+      box-sizing: border-box;
+      width: 50%;
+      padding: 20px 0px 20px 0px;
       // border-right: 1px solid rgba(196, 196, 196, 0.4);
       border-top: 1px solid rgba(196, 196, 196, 0.4);
-      padding: 20px 0px 20px 0px;
 
       &:nth-child(odd) {
         border-right: 1px solid rgba(196, 196, 196, 0.4);
@@ -39,27 +42,27 @@
         right: 15px;
         width: 25px;
         height: 8px;
-        cursor:pointer;
+        cursor: pointer;
 
         .openBack {
           width: 25px;
           height: 8px;
-          border-radius: 12px;
           background: rgba(196, 196, 196, 0.2);
+          border-radius: 12px;
         }
 
         .openCircle {
           position: absolute;
           top: -3px;
           left: -4px;
-          width: 12px;
-          height: 12px;
           display: flex;
           align-items: center;
           justify-content: center;
-          border-radius: 12px;
+          width: 12px;
+          height: 12px;
           background: #ffffff;
           border: 1px solid #c4c4c4;
+          border-radius: 12px;
           box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.03);
         }
 
@@ -75,26 +78,26 @@
       }
 
       .airName {
-        padding: 0px 0px 10px 15px;
-        width: calc(100% - 55px);
         box-sizing: border-box;
+        width: calc(100% - 55px);
+        padding: 0px 0px 10px 15px;
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        color: #4d5262;
         font-weight: 600;
         font-size: 15px;
-        color: #4d5262;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
 
       .airBox {
         display: flex;
 
         .adjustBox {
-          width: 33.333%;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
+          width: 33.333%;
 
           .valueBox {
             height: 50px;
@@ -106,26 +109,26 @@
 
               // transform: translateY(0px);
               .value {
-                width: 100%;
-                height: 50px;
                 display: flex;
                 align-items: center;
                 //font-weight: 600;
                 justify-content: center;
-                text-align: center;
+                width: 100%;
+                height: 50px;
                 font-size: 14px;
+                text-align: center;
               }
             }
           }
 
           .arrow {
+            display: flex;
+            justify-content: center;
             width: 100%;
             height: 18px;
-            font-size: 16px;
             color: #405292;
-            display: flex;
-            justify-content: center;
-            cursor:pointer;
+            font-size: 16px;
+            cursor: pointer;
 
             &.disable {
               color: rgba(196, 196, 196, 0.8);
@@ -133,9 +136,9 @@
           }
 
           .adjustName {
+            padding-top: 8px;
             color: #1f2429;
             font-size: 12px;
-            padding-top: 8px;
           }
 
           &.disable {
@@ -157,51 +160,53 @@
   }
 
   .air-text {
-    padding-bottom: 7px;
+    padding-bottom: 25px;
   }
 
   .air-content {
-    padding: 24px 15px 10px 30px;
-    box-sizing: border-box;
     position: relative;
+    box-sizing: border-box;
+    padding: 24px 15px 22px 30px;
   }
 
   .air-switch {
     position: absolute;
-    bottom: 5px;
     right: 15px;
+    bottom: 22px;
   }
 
   .air-adjust-env {
     .envname {
-      font-family: PingFang SC;
       color: rgba(77, 82, 98, 1);
-      font-size: 16px;
       font-weight: 600;
+      font-size: 16px;
+      font-family: PingFang SC;
       line-height: 22px;
     }
 
     .envnum {
-      font-family: Montserrat;
-      font-size: 23px;
+      padding-top: 4px;
+      color: #1b144e;
       font-weight: 400;
+      font-size: 32px;
+      font-family: Montserrat;
       line-height: 32px;
-      padding-top: 16px;
-      color: #1b144e;
 
       .unit {
-        padding-left: 3px;
+        top: -17px;
+        padding-left: 5px;
+        color: #c4c4c4;
         font-size: 14px;
       }
 
       label {
-        font-family: Mulish;
+        margin-left: 3px;
+        color: #c4c4c4;
         font-weight: 800;
         font-size: 12px;
-        margin-left: 3px;
+        font-family: Mulish;
         line-height: 15px;
         vertical-align: top;
-        color: #c4c4c4;
       }
     }
   }
@@ -211,20 +216,19 @@
 
     .airImg {
       position: absolute;
-      top: 0;
-      right: 0;
-      width: 157px;
-      height: 110px;
+      top: 16px;
+      right: 22px;
+      width: 132px;
     }
   }
 
   .air-common-text {
     padding-top: 2px;
-    font-family: PingFang SC;
-    font-size: 13px;
+    color: rgba(196, 196, 196, 1);
     font-weight: 400;
+    font-size: 13px;
+    font-family: PingFang SC;
     line-height: 15px;
-    color: rgba(196, 196, 196, 1);
 
     &.change-text {
       font-size: 12px;
@@ -233,11 +237,10 @@
   }
 
   .office-card {
-    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07),
-      0px 4px 10px rgba(0, 0, 0, 0.05);
-    border-radius: 25px;
-    background: #ffffff;
     margin-bottom: 15px;
+    background: #ffffff;
+    border-radius: 25px;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
   }
 
   .air-show-all {
@@ -262,22 +265,26 @@
   }
 
   .air-show-all-cont {
-    font-family: PingFang SC;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 25px;
-    color: rgba(196, 196, 196, 1);
     display: flex;
     align-items: center;
-    width:90px;
-    cursor:pointer;
+    width: 90px;
+    color: rgba(196, 196, 196, 1);
+    font-weight: 400;
+    font-size: 14px;
+    font-family: PingFang SC;
+    line-height: 25px;
+    cursor: pointer;
   }
-
-  .air-control-item {
-    padding: 11px 14px 11px 21px;
+  .air-slider {
     box-sizing: border-box;
+    padding-top: 32px;
     border-top: 1px solid rgba(196, 196, 196, 0.4);
-    &.temp-item{
+  }
+  .air-control-item {
+    box-sizing: border-box;
+    padding: 11px 20px 16px 20px;
+    // border-top: 1px solid rgba(196, 196, 196, 0.4);
+    &.temp-item {
       cursor: default;
     }
     &.item-flex {
@@ -287,53 +294,52 @@
 
     .temp-wrap {
       display: flex;
+      align-items: center;
+      height: 20px;
       padding-top: 26px;
       padding-bottom: 5px;
-      height: 20px;
-      align-items: center;
 
       .minVal {
-        color: #c4c4c4;
-        font-size: 12px;
         flex-grow: 0;
         margin-right: 8px;
+        color: #c4c4c4;
+        font-size: 12px;
       }
 
       .maxVal {
-        color: #c4c4c4;
-        font-size: 12px;
         flex-grow: 0;
         margin-left: 8px;
+        color: #c4c4c4;
+        font-size: 12px;
       }
 
       .tempBar {
-        //background: red;
-        height: 10px;
-        flex-grow: 1;
         position: relative;
         display: flex;
+        flex-grow: 1;
+        //background: red;
+        height: 10px;
         border-radius: 10px;
-        cursor:pointer;
+        cursor: pointer;
 
         .circle {
           position: absolute;
+          top: -5px;
+          left: 0px;
+          z-index: 1;
           width: 19px;
           height: 19px;
-          left: 0px;
-          top: -5px;
           background: #ffffff;
-          box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
-            0px 4px 10px rgba(0, 0, 0, 0.07);
           border-radius: 21px;
-          z-index: 1;
+          box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 4px 10px rgba(0, 0, 0, 0.07);
 
           .tvalue {
             position: relative;
             top: -26px;
-            text-align: center;
             color: #1f2429;
             font-size: 12px;
             white-space: nowrap;
+            text-align: center;
           }
 
           &.disable {
@@ -379,11 +385,10 @@
     }
 
     .envnum-common {
+      color: #1b2129;
+      font-size: 16px;
       font-family: Montserrat;
-      font-weight: 500;
       line-height: 24px;
-      font-size: 14px;
-      color: rgba(77, 82, 98, 1);
 
       &.air-envnum-comon {
         display: flex;
@@ -391,18 +396,17 @@
       }
 
       .envnum-common-wind {
-        font-family: Montserrat;
-        font-size: 12px;
-        font-weight: 500;
-        line-height: 15px;
         margin-right: 7px;
         color: rgba(196, 196, 196, 1);
+        font-weight: 500;
+        font-size: 12px;
+        font-family: Montserrat;
+        line-height: 15px;
 
         &.windBlack {
-          font-size: 20px;
-          font-weight: 500;
+          color: #1b2129;
+          font-size: 18px;
           line-height: 24px;
-          color: rgba(77, 82, 98, 1);
         }
       }
 
@@ -419,9 +423,9 @@
       }
 
       label {
+        color: rgba(196, 196, 196, 1);
         font-size: 11px;
         line-height: 13px;
-        color: rgba(196, 196, 196, 1);
         vertical-align: top;
       }
     }
@@ -436,16 +440,16 @@
 
     .switch {
       display: flex;
-      justify-content: center;
       align-items: center;
-      height: 40px;
+      justify-content: center;
       width: 40px;
-      font-size: 12px;
-      margin-right: 18px;
-      //background: #c4c4c433;
+      height: 40px;
+      margin-right: 8px;
+      color: #424c59;
+      font-size: 20px;
       background: rgba(196, 196, 196, 0.2);
       border-radius: 50%;
-      cursor:pointer;
+      cursor: pointer;
 
       .wimg {
         width: 20px;
@@ -462,4 +466,83 @@
     opacity: 0.4;
   }
 
-}
+  .lamp-item {
+    border-top: 1px solid #e8ecf0;
+    .unite {
+      color: #c4c4c4;
+      font-size: 12px;
+    }
+    .item-box {
+      position: relative;
+      width: 148px;
+      height: 116px;
+      margin-top: 12px;
+      background: #f7f9fa;
+      border-radius: 16px;
+    }
+    .item-box:nth-child(2n-1) {
+      margin-right: 11px;
+    }
+    .lamp-basic-name {
+      width: calc(100% - 23px);
+      overflow: hidden;
+      color: rgba(77, 82, 98, 1);
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 22px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .bg {
+    background: #f1f4f6;
+  }
+
+  .dplCenter {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .adjustBox {
+      opacity: 0.3;
+      img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    .adjustActive {
+      cursor: pointer;
+      opacity: 1;
+    }
+  }
+
+  .small-img-card {
+    box-sizing: border-box;
+    height: 80px;
+    padding-top: 12px;
+    padding-left: 16px;
+    .value {
+      margin-bottom: 4px;
+      color: #1b144e;
+      font-size: 22px;
+      line-height: 1;
+    }
+    .status {
+      display: flex;
+      align-items: center;
+      color: #c4c9cf;
+      font-size: 12px;
+      img {
+        width: 14px;
+        height: 14px;
+        margin-right: 3px;
+        opacity: 0.6;
+      }
+    }
+  }
+  .small-sw-card {
+    position: absolute;
+    top: 16px;
+    right: 12px;
+  }
+}

+ 2 - 2
src/pages/Equipment/components/deviceModal/anSwitch/index.jsx

@@ -12,9 +12,9 @@ const antIcon = (
 );
 import './index.less';
 
-export default ({ isOpen, isAir, isLoading }) => {
+export default ({ isOpen, isAir, isLoading ,isSmall}) => {
   return (
-    <div className="box">
+    <div className={`switchBox ${isSmall?'small':''}`}>
       {isAir && isLoading ? (
         <Spin indicator={antIcon} className={`box-loading ${isOpen ? '' : 'box-close-loading'}`} />
       ) : null}

+ 15 - 3
src/pages/Equipment/components/deviceModal/anSwitch/index.less

@@ -1,11 +1,10 @@
-.box {
+.switchBox {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 54px;
-  height: 30px;
-
+  // height: 30px;
   .box-loading {
     position: absolute;
     top: 50%;
@@ -54,3 +53,16 @@
     }
   }
 }
+
+.small {
+  width: 32px;
+  height: 16px;
+  .content {
+    width: 32px;
+    height: 16px;
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}

+ 46 - 27
src/pages/Equipment/components/deviceModal/common.less

@@ -4,22 +4,23 @@
   background: hsl(0, 0%, 100%);
   border-radius: 25px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.07), 0 4px 10px rgba(0, 0, 0, 0.05);
+  overflow:hidden;
   .content {
     .env {
       position: relative;
       display: flex;
       .envLeft {
         flex: 1 1 auto;
-        height: 140px;
+        height: 156px;
         padding-top: 24px;
-        padding-left: 30px;
+        padding-left: 20px;
       }
       .envRight {
         width: 165px;
-        height: 140px;
+        height: 156px;
         .roomEqImg {
           width: 165px;
-          height: 140px;
+          height: 156px;
         }
       }
     }
@@ -40,12 +41,14 @@
   text-align: left;
 }
 .eqStatus {
+  box-sizing: border-box;
+  height: 32px;
   padding-top: 5px;
   color: rgba(196, 196, 196, 1);
   font-weight: 400;
   font-size: 14px;
   font-family: PingFang SC;
-  line-height: 20px;
+  line-height: 1;
 }
 
 .eqBtn {
@@ -77,48 +80,64 @@
 }
 
 .pdt10 {
-  padding-top: 10px;
+  padding-top: 8px;
 }
 
 .dsflex {
   display: flex;
 }
 
-.eqCirculBtn {
-  position: absolute;
-  top: 86px;
-  right: 15px;
-  display: flex;
-}
 .eqSocketBtn {
   position: absolute;
-  top: 103px;
+  top: 108px;
   right: 15px;
   display: flex;
 }
 
+// .eqCirculBtn {
+//   position: absolute;
+//   top: 95px;
+//   right: 15px;
+//   display: flex;
+// }
 
 .mgr20 {
   margin-right: 20px;
 }
-
+.mgr8 {
+  margin-right: 8px;
+}
 .circulBtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: rgba(196, 196, 196, 0.2);
-  border-radius: 50%;
   cursor: pointer;
-  &:hover {
-    background: rgba(196, 196, 196, 0.3);
-  }
-  &.yell {
-    background: #ffe823;
-  }
+
   .btnIcon {
     width: 20px;
     height: 20px;
   }
+  .controlBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: rgba(196, 196, 196, 0.2);
+    border-radius: 50%;
+    &:hover {
+      background: rgba(196, 196, 196, 0.3);
+    }
+    &.yell {
+      background: #ffe823;
+    }
+  }
+  .stopBtn{
+    &:active{
+      background: #ffe823;
+    }
+  }
+  .controlTxt {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 12px;
+  }
 }

+ 98 - 31
src/pages/Equipment/components/deviceModal/curtainEq/curtainBtn.jsx

@@ -1,53 +1,69 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import commonStyles from '../common.less';
+import styles from './index.less';
 import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
 import { setEquipeHttp } from '@/services/sagacare_service/equipment';
+import cx from 'classnames';
+import { message } from 'antd';
 
-const { curtain_close_icon_row, curtain_open_icon_row } = equipImageMap;
+const { curtain_close, curtain_open, curtain_down, curtain_stop, curtain_up, icon_adjust } =
+  equipImageMap;
 
 export default ({
-  id,
+  modalButton,
+  citem,
   isTotal,
   preTime,
   changePreTime,
   changeCurtainTex,
   curtainArr,
   projectId,
+  isVertical,
+  showModal,
 }) => {
   const [downFlag, setDownFlag] = useState(false);
   const [upFlag, setUpFlag] = useState(false);
   const [count, setCount] = useState();
   let setTimer = useRef(null);
-  const sendData = (setType, id) => {
+  const sendData = (setType) => {
     let arr = [];
     if (isTotal) {
       curtainArr.forEach((item) => {
         arr.push({
-          equipmentCategory: 'CFSSES',
-          infoCode: setType,
-          value: 1,
-          objectId: item.id,
+          code: 'EquipSwitchSet',
+          value: setType == 'on' ? 1 : setType == 'off' ? 0 : 2,
+          id: item.equipId,
         });
       });
     } else {
       const params = {
         projectId: projectId,
-        objectId: id, // 设备ID/窗帘组ID
-        equipmentCategory: 'CFSSES', // 设备编码 窗帘:CFSSES
-        infoCode: setType, // 窗帘开设定:EquipOnSet 窗帘关设定:EquipOffSet
-        value: 1, // 窗帘 1 移动/停止
+        id: citem.equipId, // 设备ID/窗帘组ID
+        code: 'EquipSwitchSet', // 设备编码 窗帘:CFSSES
+        value: setType == 'on' ? 1 : setType == 'off' ? 0 : 2, // 窗帘 1 移动/停止
       };
       arr.push(params);
     }
     return arr;
   };
-  const handleCurtain = (setType, id, index) => {
-    const nowTime = Date.now();
-    if (nowTime - preTime <= 2000) return; // 请求间隔 2秒
-    changePreTime(Date.now());
-    const paramsArr = sendData(setType, id);
+  const stopCurtain = () => {
+    changeCurtainTex('');
+    setDownFlag(false);
+    setUpFlag(false);
+    clearInterval(setTimer.current);
+
+    const paramsArr = sendData();
     setEquipeHttp(paramsArr);
-    if (setType == 'EquipOffSet') {
+  };
+  const handleCurtain = (setType) => {
+    //const nowTime = Date.now();
+    // if (nowTime - preTime <= 2000) return; // 请求间隔 2秒
+    // changePreTime(Date.now());
+    const paramsArr = sendData(setType);
+    setEquipeHttp(paramsArr).then((res) => {
+      message.success('指令已经下发');
+    });
+    if (setType == 'off') {
       setDownFlag(true);
       setUpFlag(false);
     } else {
@@ -73,28 +89,79 @@ export default ({
     }
   }, [count]);
   return (
-    <>
+    <div className={cx(commonStyles.dsflex, { [styles.modalButton]: modalButton })}>
+      {showModal && citem?.isOpenSet == 1 && (
+        <div
+          className={`${commonStyles.circulBtn}  ${commonStyles.mgr8}`}
+          onClick={(event) => {
+            event.stopPropagation();
+            showModal && showModal(citem);
+          }}
+        >
+          <div className={commonStyles.controlBtn}>
+            <img className={commonStyles.btnIcon} src={icon_adjust}></img>
+          </div>
+        </div>
+      )}
       <div
-        onClick={() => {
-          handleCurtain('EquipOffSet', id, 1);
+        onClick={(event) => {
+          event.stopPropagation();
+          handleCurtain('off');
         }}
-        className={`${commonStyles.circulBtn} ${commonStyles.mgr20} ${
-          downFlag ? commonStyles.yell : ''
-        }`}
+        className={`${commonStyles.circulBtn} ${commonStyles.mgr8}`}
       >
-        {downFlag && <div>{count}</div>}
-        {!downFlag && <img className={commonStyles.btnIcon} src={curtain_close_icon_row}></img>}
+        <div className={cx(commonStyles.controlBtn, { [commonStyles.yell]: downFlag })}>
+          {downFlag && <div>{count}</div>}
+          {!downFlag && (
+            <img
+              className={commonStyles.btnIcon}
+              src={
+                citem?.equipmentType == 1 || citem?.equipmentType == 2 || citem?.equipmentType == 3
+                  ? curtain_close
+                  : curtain_down
+              }
+            ></img>
+          )}
+        </div>
+        {modalButton && <div className={commonStyles.controlTxt}>关闭</div>}
       </div>
+      {citem?.stopSet == 1 && (
+        <div
+          className={`${commonStyles.circulBtn}  ${commonStyles.mgr8}`}
+          onClick={(event) => {
+            event.stopPropagation();
+            stopCurtain();
+          }}
+        >
+          <div className={cx(commonStyles.controlBtn,commonStyles.stopBtn)}>
+            <img className={commonStyles.btnIcon} src={curtain_stop}></img>
+          </div>
+          {modalButton && <div className={commonStyles.controlTxt}>暂停</div>}
+        </div>
+      )}
 
       <div
-        onClick={() => {
-          handleCurtain('EquipOnSet', id, 2);
+        onClick={(event) => {
+          event.stopPropagation();
+          handleCurtain('on');
         }}
-        className={`${commonStyles.circulBtn}  ${upFlag ? commonStyles.yell : ''}`}
+        className={`${commonStyles.circulBtn}`}
       >
-        {upFlag && <div>{count}</div>}
-        {!upFlag && <img className={commonStyles.btnIcon} src={curtain_open_icon_row}></img>}
+        <div className={cx(commonStyles.controlBtn, { [commonStyles.yell]: upFlag })}>
+          {upFlag && <div>{count}</div>}
+          {!upFlag && (
+            <img
+              className={commonStyles.btnIcon}
+              src={
+                citem?.equipmentType == 1 || citem?.equipmentType == 2 || citem?.equipmentType == 3
+                  ? curtain_open
+                  : curtain_up
+              }
+            ></img>
+          )}
+        </div>
+        {modalButton && <div className={commonStyles.controlTxt}>打开</div>}
       </div>
-    </>
+    </div>
   );
 };

+ 155 - 0
src/pages/Equipment/components/deviceModal/curtainEq/curtainModal/index.jsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Modal } from 'antd';
+import styles from './index.less';
+import Draggable from 'react-draggable';
+import Slider from '../../Slider';
+import Icon from '@/tenants-ui/SgIcon';
+import { setEquipeHttp } from '@/services/sagacare_service/equipment';
+import CurtainBtn from '../curtainBtn';
+import { message } from 'antd';
+
+export default ({
+  isAll,
+  hideModal,
+  modalObj,
+  isVertical,
+  changeCurtainTex,
+  curtainArr,
+  projectId,
+  changeCurtainItem,
+}) => {
+  const [startTime, setStartTime] = useState(0);
+  const [renew, setRenew] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+  const [bounds, setBounds] = useState({
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+  });
+
+  // 下发开度指令
+  const setCurtainOrder = (vobj) => {
+    var paramsArr = [];
+    if (isAll) {
+      curtainArr.forEach((item) => {
+        paramsArr.push({
+          code: 'EquipOpeningSet',
+          value: vobj.value,
+          id: item.equipId,
+        });
+      });
+    } else {
+      paramsArr.push({
+        code: 'EquipOpeningSet',
+        value: vobj.value,
+        id: modalObj.equipId,
+      });
+    }
+
+    changeCurtainItem();
+    setEquipeHttp(paramsArr).then((res) => {
+      // getHeat(); //todo
+      message.success('指令已经下发');
+    });
+  };
+
+  // // 滑动
+  // const silderVal = (obj) => {
+  //   const endTime = Date.parse(new Date());
+  //   const dx = endTime - startTime;
+  //   if (dx === 1000) {
+  //     setStartTime(endTime);
+  //     setCurtainOrder(obj);
+  //   }
+  // };
+  // // 滑动开始
+  // const mouseStart = () => {
+  //   let nowTime = Date.parse(new Date());
+  //   setStartTime(nowTime);
+  //   setRenew(false);
+  // };
+
+  // 滑动停止
+  const mouseEnd = (obj) => {
+    setCurtainOrder(obj);
+  };
+
+  const draggleRef = useRef(null);
+  const onStart = (_event, uiData) => {
+    _event.stopPropagation();
+    const { clientWidth, clientHeight } = window.document.documentElement;
+    const targetRect = draggleRef.current?.getBoundingClientRect();
+    if (!targetRect) {
+      return;
+    }
+    setBounds({
+      left: -targetRect.left + uiData.x,
+      right: clientWidth - (targetRect.right - uiData.x),
+      top: -targetRect.top + uiData.y,
+      bottom: clientHeight - (targetRect.bottom - uiData.y),
+    });
+  };
+
+  return (
+    <Modal
+      open
+      mask={false}
+      centered
+      footer={null}
+      style={{
+        width: '100%',
+      }}
+      modalRender={(modal) => (
+        <Draggable
+          disabled={disabled}
+          bounds={bounds}
+          onStart={(event, uiData) => onStart(event, uiData)}
+        >
+          <div ref={draggleRef}>{modal}</div>
+        </Draggable>
+      )}
+      closable={false}
+    >
+      <div
+        className={styles.heatModal}
+        onClick={(event) => {
+          event.stopPropagation();
+          event.preventDefault();
+        }}
+        onMouseDown={(event) => {
+          event.stopPropagation();
+          event.preventDefault();
+        }}
+      >
+        <div
+          className={styles.closeIcon}
+          onClick={(event) => {
+            hideModal();
+          }}
+        >
+          <Icon type="close" />
+        </div>
+        <div className={styles.modalTitle}>{isAll ? '窗帘' : modalObj.name}</div>
+        <div className={styles.modalCont}>
+          <Slider
+            onlyLine={false}
+            type={'curtain'}
+            typeValue={0}
+            typeName={'设定开度'}
+            silderMouseEnd={mouseEnd}
+          ></Slider>
+          <CurtainBtn
+            modalButton={true}
+            citem={modalObj}
+            isVertical={isVertical}
+            isTotal={isAll}
+            changeCurtainTex={changeCurtainTex}
+            curtainArr={curtainArr}
+            projectId={projectId}
+          ></CurtainBtn>
+        </div>
+      </div>
+    </Modal>
+  );
+};

+ 51 - 0
src/pages/Equipment/components/deviceModal/curtainEq/curtainModal/index.less

@@ -0,0 +1,51 @@
+.heatModal {
+  position: relative;
+  box-sizing: border-box;
+  width: 340px;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0px 20px 30px rgba(27, 33, 41, 0.15);
+  cursor: move;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+
+  .closeIcon {
+    position: absolute;
+    top: 17px;
+    right: 32px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    color: #c4c4c4;
+    font-size: 20px;
+    border-radius: 100%;
+    cursor: pointer;
+    transition: background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
+    &:hover {
+      background-color: #fff;
+    }
+  }
+
+  .modalTitle {
+    padding-top: 26px;
+    padding-right: 32px;
+    padding-bottom: 36px;
+    padding-left: 32px;
+    color: rgba(0, 0, 0, 1);
+    font-weight: 500;
+    font-size: 24px;
+    font-family: PingFang SC;
+    line-height: 1;
+  }
+  .modalCont {
+    padding-bottom: 30px;
+  }
+
+}

+ 22 - 0
src/pages/Equipment/components/deviceModal/curtainEq/heatButton/index.jsx

@@ -0,0 +1,22 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Modal } from 'antd';
+import styles from './index.less';
+import Icon from '@/tenants-ui/SgIcon';
+import cx from 'classnames';
+
+export default ({ isAll, changeIsAll }) => {
+  return (
+    <div
+      className={styles.changeBox}
+      onClick={(event) => {
+        event.stopPropagation();
+        changeIsAll();
+      }}
+    >
+      <div className={styles.firBox}>总控制</div> <div className={styles.firBox}>子设备</div>
+      <div className={cx(styles.upBox, { [styles.rightBox]: !isAll })}>
+        {isAll ? '总控制' : '子设备'}
+      </div>
+    </div>
+  );
+};

+ 33 - 0
src/pages/Equipment/components/deviceModal/curtainEq/heatButton/index.less

@@ -0,0 +1,33 @@
+.changeBox {
+  position: relative;
+  display: flex;
+  width: 116px;
+  height: 28px;
+  color: #424c59;
+  font-size: 14px;
+  background: #f1f4f6;
+  border-radius: 21px;
+  cursor: pointer;
+  .firBox {
+    width: 58px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+  }
+  .upBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 58px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    background: #ffffff;
+    border: 1px solid #e1e5eb;
+    border-radius: 21px;
+    transition: left 0.5s;
+  }
+  .rightBox {
+    left: 50%;
+  }
+}

+ 123 - 34
src/pages/Equipment/components/deviceModal/curtainEq/index.jsx

@@ -4,12 +4,24 @@ import commonStyles from '../common.less';
 import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
 import CurtainBtn from './curtainBtn';
 import { getObjectDataEqpGroupHttp } from '@/services/sagacare_service/equipment';
+import HeatButton from './heatButton';
+import CurtainModal from './curtainModal';
 
-const { curtain_open_row, expend_down, expend_up } = equipImageMap;
+const {
+  curtain_close,
+  curtain_down,
+  curtain_horizon,
+  curtain_open,
+  curtain_stop,
+  curtain_up,
+  curtain_vertical,
+} = equipImageMap; //expend_down, expend_up
 
 export default ({ spaceId, projectId }) => {
+  const [isVertical, setIsVertical] = useState(true); // 是不是垂直窗帘
   const [isMore, setIsMore] = useState(false); // 可以展开
-  const [flagSvg, setFlagSvg] = useState(false); // 箭头方向
+  const [isAll, setIsAll] = useState(true); // 箭头方向
+  const [modalFlag, setModalFlag] = useState(false); // 箭头方向
   const [suspendDownFlag, setSuspendDownFlag] = useState(true); // 总向下暂停
   const [suspendUpFlag, setSuspendUpFlag] = useState(false); // 总向下暂停
   const [count, setCount] = useState(2); // 倒计时
@@ -17,8 +29,10 @@ export default ({ spaceId, projectId }) => {
   const [curtainArr, setCurtainArr] = useState([]); // 窗帘数据
   const [preTime, setPreTime] = useState(Date.now());
   const [curtainText, setCurtainText] = useState('');
+  const [modalObj, setModalObj] = useState({});
+
   function handleExpend() {
-    setFlagSvg(!flagSvg);
+    setIsAll(!isAll);
   }
   const changePreTime = useCallback((val) => {
     setPreTime(val);
@@ -26,7 +40,7 @@ export default ({ spaceId, projectId }) => {
   const changeCurtainTex = useCallback((val) => {
     setCurtainText(val);
   });
-  useEffect(() => {
+  const queryCurtain = () => {
     const params = {
       criteria: {
         projectId: projectId,
@@ -44,32 +58,69 @@ export default ({ spaceId, projectId }) => {
       }
       setCurtainArr(arr);
     });
-  }, []);
+  };
+  useEffect(() => {
+    queryCurtain();
+    return () => {
+      //debugger;
+      setCurtainArr([]);
+    };
+  }, [spaceId]);
 
+  const showModal = useCallback((item) => {
+    setModalFlag(true);
+    setModalObj(item || {});
+  }, []);
+  const hideModal = useCallback(() => {
+    setModalFlag(false);
+  }, []);
+  const changeCurtainItem = useCallback(() => {
+    queryCurtain();
+    // setCurtainArr((arr) => {
+    //   var arr2 = arr.map((item) => {
+    //     if (item.id == modalObj.id) {
+    //       item.openValue = value;
+    //     }
+    //     return item;
+    //   });
+    //   return arr2;
+    // });
+  });
   return (
     <div className={commonStyles.box}>
       <div className={commonStyles.content}>
         <div className={commonStyles.env}>
           <div className={commonStyles.envLeft}>
-            <span className={commonStyles.eqTitle}>{isMore ? '窗帘' : curtainArr[0]?.name}</span>
+            <span className={commonStyles.eqTitle}>
+              {curtainArr.length > 1 ? '窗帘' : curtainArr?.[0]?.name}
+            </span>
             <div className={`${commonStyles.eqStatus} ${commonStyles.pdt10}`}>
               <span>{curtainText}</span>
             </div>
-            {isMore && (
-              <div className={commonStyles.showAll} onClick={handleExpend}>
-                <img className={commonStyles.showImg} src={flagSvg ? expend_up : expend_down}></img>
-                <div className={commonStyles.showAllText}>显示全部</div>
+            {curtainArr.length > 1 && (
+              <div className={styles.showAll}>
+                <HeatButton changeIsAll={handleExpend} isAll={isAll}></HeatButton>
               </div>
             )}
           </div>
           <div className={commonStyles.envRight}>
-            <img className={commonStyles.roomEqImg} src={curtain_open_row} />
+            <img
+              src={
+                curtainArr?.[0]?.equipmentType == 1 ||
+                curtainArr?.[0]?.equipmentType == 2 ||
+                curtainArr?.[0]?.equipmentType == 3
+                  ? curtain_horizon
+                  : curtain_vertical
+              }
+            />
           </div>
-          {!flagSvg && (
-            <div className={commonStyles.eqCirculBtn}>
+          {curtainArr.length == 1 && (
+            <div className={styles.eqCirculBtn}>
               <CurtainBtn
-                id=""
-                isTotal={true}
+                citem={curtainArr?.[0]}
+                isVertical={isVertical}
+                isTotal={false}
+                showModal={showModal}
                 preTime={preTime}
                 changePreTime={changePreTime}
                 changeCurtainTex={changeCurtainTex}
@@ -80,26 +131,64 @@ export default ({ spaceId, projectId }) => {
           )}
         </div>
       </div>
-      {curtainArr.map((item, idx) => {
-        if (flagSvg) {
-          return (
-            <div className={`${styles.lampChild} ${commonStyles.flexBetween}`} key={item.id}>
-              <div className={commonStyles.eqTitle}>{item.name}</div>
-              <div className={commonStyles.dsflex}>
-                <CurtainBtn
-                  id={item.id}
-                  isTotal={false}
-                  preTime={preTime}
-                  changePreTime={changePreTime}
-                  changeCurtainTex={changeCurtainTex}
-                  curtainArr={curtainArr}
-                  projectId={projectId}
-                ></CurtainBtn>
+      {!isAll && (
+        <>
+          {curtainArr.map((item, idx) => {
+            return (
+              <div className={`${styles.lampChild} ${commonStyles.flexBetween}`} key={item.id}>
+                <div className={styles.leftflex}>
+                  <div className={styles.eqTitle}>{item.name}</div>
+                  {item?.isOpenSet == 1 && (
+                    <div className={styles.opening}>开度{item.openValue}%</div>
+                  )}
+                </div>
+                <div>
+                  <CurtainBtn
+                    citem={item}
+                    isVertical={isVertical}
+                    isTotal={false}
+                    showModal={showModal}
+                    preTime={preTime}
+                    changePreTime={changePreTime}
+                    changeCurtainTex={changeCurtainTex}
+                    curtainArr={curtainArr}
+                    projectId={projectId}
+                  ></CurtainBtn>
+                </div>
               </div>
-            </div>
-          );
-        }
-      })}
+            );
+          })}
+        </>
+      )}
+      {isAll && (
+        <div className={styles.controlDiv}>
+          <CurtainBtn
+            citem={curtainArr?.[0]}
+            isVertical={isVertical}
+            isTotal={true}
+            preTime={preTime}
+            changePreTime={changePreTime}
+            changeCurtainTex={changeCurtainTex}
+            curtainArr={curtainArr}
+            showModal={showModal}
+            projectId={projectId}
+          ></CurtainBtn>
+        </div>
+      )}
+      {modalFlag && (
+        <CurtainModal
+          hideModal={hideModal}
+          modalObj={modalObj}
+          isVertical={isVertical}
+          preTime={preTime}
+          changePreTime={changePreTime}
+          changeCurtainTex={changeCurtainTex}
+          curtainArr={curtainArr}
+          projectId={projectId}
+          isAll={isAll}
+          changeCurtainItem={changeCurtainItem}
+        ></CurtainModal>
+      )}
     </div>
   );
 };

+ 49 - 2
src/pages/Equipment/components/deviceModal/curtainEq/index.less

@@ -1,6 +1,53 @@
 .lampChild {
-  height: 60px;
+  height: 72px;
+  padding-top: 10px;
   padding-right: 12px;
-  padding-left: 30px;
+  padding-bottom: 10px;
+  padding-left: 20px;
   border-top: 1px solid rgba(196, 196, 196, 0.4);
+  .leftflex {
+    padding-right: 8px;
+    overflow: hidden;
+    font-family: 'PingFang SC';
+    .eqTitle {
+      overflow: hidden;
+      color: #4d5262;
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 22px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .opening {
+      overflow: hidden;
+      color: #c4c4c4;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+.showAll {
+  padding-top: 26px;
+}
+
+.eqCirculBtn {
+  position: absolute;
+  right: 15px;
+  bottom: 18px;
+}
+.controlDiv {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  height: 72px;
+  padding-right: 20px;
+  border-top: 1px solid rgba(196, 196, 196, 0.4);
+}
+.modalButton {
+  display: flex;
+  justify-content: space-around;
+  padding: 0 40px;
 }

+ 33 - 20
src/pages/Equipment/components/deviceModal/index.jsx

@@ -9,12 +9,14 @@ import AirEqHand from './airEqHand';
 import LampEq from './lampEq';
 import SocketEq from './socketEq';
 import CurtainEq from './curtainEq';
+import UnderfloorHeat from './underfloorHeat';
+
 import { getSpaceAdjustList } from '@/services/sagacare_service/equipment';
 import { useRef } from 'react';
 import { useModel } from 'umi';
 import { projectObj } from '@/config/api.js';
 
-export default ({ onClose, showSpace }) => {
+export default ({ onClose, showSpace, inTime }) => {
   const envArr = [
     {
       name: '温度',
@@ -101,6 +103,7 @@ export default ({ onClose, showSpace }) => {
   }
 
   const getData = () => {
+    if (!showSpace.spaceId) return;
     const paramsObj = {
       criteria: {
         spaceId: showSpace.spaceId,
@@ -221,15 +224,16 @@ export default ({ onClose, showSpace }) => {
     return { workTime: workTime, runTimeStatus: runTimeStatus, timeArr: timeArr };
   }, [showSpace]);
 
+  let divBox = useRef(null);
   useEffect(() => {
     getData();
-    timer = setInterval(() => {
-      getData();
+    timer.current = setInterval(() => {
+      divBox.current && getData();
     }, 1000 * 60 * 5);
     return () => {
-      clearInterval(timer);
+      clearInterval(timer.current);
     };
-  }, []);
+  }, [showSpace]);
   //   拖拽
   const [disabled, setDisabled] = useState(false);
   const [bounds, setBounds] = useState({
@@ -263,7 +267,7 @@ export default ({ onClose, showSpace }) => {
     <>
       <Modal
         width={810}
-        visible
+        open
         style={{
           width: '100%',
           cursor: 'move',
@@ -283,21 +287,17 @@ export default ({ onClose, showSpace }) => {
       >
         <div
           className={styles.main}
-          onMouseDown={(e) => {
-            e.preventDefault();
+          onClick={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+          }}
+          onMouseDown={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
           }}
+          ref={divBox}
         >
-          <div
-            className={styles.header}
-            // onMouseOver={() => {
-            //   if (disabled) {
-            //     setDisabled(false);
-            //   }
-            // }}
-            // onMouseOut={() => {
-            //   setDisabled(true);
-            // }}
-          >
+          <div className={styles.header}>
             <div className={styles.show}>
               <div className={styles.tileline}>
                 <img src={officeImg} className={styles.titleIcon}></img>
@@ -362,7 +362,11 @@ export default ({ onClose, showSpace }) => {
               <Row gutter={[12, 18]}>
                 {showEqCard('airConditioner') && controlMode == 0 && (
                   <Col span={12}>
-                    <AirEq spaceId={showSpace.spaceId} projectId={projectObj.projectId}></AirEq>
+                    <AirEq
+                      spaceId={showSpace.spaceId}
+                      projectId={projectObj.projectId}
+                      inTime={inTime}
+                    ></AirEq>
                   </Col>
                 )}
                 {showEqCard('airConditioner') && controlMode == 1 && (
@@ -370,6 +374,7 @@ export default ({ onClose, showSpace }) => {
                     <AirEqHand
                       spaceId={showSpace.spaceId}
                       projectId={projectObj.projectId}
+                      inTime={inTime}
                     ></AirEqHand>
                   </Col>
                 )}
@@ -378,6 +383,14 @@ export default ({ onClose, showSpace }) => {
                     <LampEq spaceId={showSpace.spaceId} projectId={projectObj.projectId}></LampEq>
                   </Col>
                 )}
+                {showEqCard('floorHeating') && (
+                  <Col span={12}>
+                    <UnderfloorHeat
+                      spaceId={showSpace.spaceId}
+                      projectId={projectObj.projectId}
+                    ></UnderfloorHeat>
+                  </Col>
+                )}
                 {showEqCard('curtain') && (
                   <Col span={12}>
                     <CurtainEq

+ 212 - 62
src/pages/Equipment/components/deviceModal/lampEq/index.jsx

@@ -1,61 +1,100 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { message } from 'antd';
-import styles from './index.less';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { message, Modal } from 'antd';
+import './index.less';
 import commonStyles from '../common.less';
 import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
 import AnSwitch from '../anSwitch';
 import { getLampHttp, getStatusHttp, setallLampHttp } from '@/services/sagacare_service/equipment';
 import { setallLamps } from '@/pages/Equipment/checLampStatus.js';
-const { lamp_open, lamp_close, expend_down, expend_up } = equipImageMap;
+import LampColour from './lampColour';
+import Request from 'umi-request';
+import cx from 'classnames';
+
+const {
+  lamp_open,
+  lamp_close,
+  expend_down,
+  expend_up,
+  icon_adjust,
+  lamp_small_open,
+  atmLamp_small_close,
+  atmLamp_small_open,
+  lamp_small_close,
+} = equipImageMap;
+
 export default ({ spaceId }) => {
   const [isMore, setIsMore] = useState(false);
   const [isOpen, setIsOpen] = useState(false); // 12 开, 10关
+  const [showLamps, setShowLamps] = useState(false);
+  const [colourFlag, setColourFlag] = useState(false); //打开色温调节弹窗
+  const [colourObj, setColourObj] = useState({});
   const [lampArr, setLampArr] = useState([]);
+  //const [lampShowList, setlampShowList] = useState([]);
   let startLightsStatusTimer = useRef(null);
-  //   let waitSetResultFlag = useRef(false); // 等待开关接口
-  const getLamp = useCallback(() => {
-    getLampHttp(spaceId).then(
+  let divBox = useRef(null);
+  const CancelToken = Request.CancelToken;
+  const { token, cancel } = CancelToken.source();
+
+  const getLamp = () => {
+    //console.log('spaceId111', spaceIdParam, spaceId, spaceIdRef.current);
+    getLampHttp({ token: token, spaceId: spaceId }).then(
       (res) => {
         // if (res.result != 'success' && waitSetResultFlag.current) return;
+        if (!divBox.current) return;
+        //console.log('spaceId2222', spaceIdParam, spaceId, spaceIdRef.current);
         const arr = res.content || [];
         if (arr.length > 1) {
           setIsMore(true);
-          let totalIsOpen = false;
-          arr.forEach((item) => {
+        }
+        let totalIsOpen = false;
+        arr.forEach((item) => {
+          if (item.runStatus) {
+            totalIsOpen = true;
+          }
+          if (item.lightType === 1) {
             if (item.runStatus) {
-              totalIsOpen = true;
+              item.lampImg = lamp_small_open;
+            } else {
+              item.lampImg = lamp_small_close;
             }
-          });
-          setIsOpen(totalIsOpen);
-        } else {
-          arr.forEach((item) => {
+          } else {
             if (item.runStatus) {
-              setIsOpen(true);
+              item.lampImg = atmLamp_small_open;
             } else {
-              setIsOpen(false);
+              item.lampImg = atmLamp_small_close;
             }
-          });
-        }
+          }
+        });
+        setIsOpen(totalIsOpen);
         setLampArr(arr);
+        getLampTimer();
+      },
+      (e) => {
+        if (Request.isCancel(e)) {
+          console.log('Request canceled', e);
+        }
+        getLampTimer();
       },
-      (e) => {},
     );
-  }, []);
+  };
 
   function getLampTimer() {
-    clearInterval(startLightsStatusTimer.current);
-    startLightsStatusTimer.current = setInterval(() => {
-      getLamp(); // 灯设备状态
+    clearTimeout(startLightsStatusTimer.current);
+    startLightsStatusTimer.current = setTimeout(() => {
+      divBox.current && getLamp(); // 灯设备状态
     }, 3000);
   }
 
   useEffect(() => {
+    //console.log('spaceId33333', spaceId);
+    //setLampArr([]);
     getLamp();
-    getLampTimer();
     return () => {
-      clearInterval(startLightsStatusTimer.current);
+      //setLampArr([]);
+      cancel && cancel();
+      clearTimeout(startLightsStatusTimer.current);
     };
-  }, []);
+  }, [spaceId]);
 
   const [flagSvg, setFlagSvg] = useState(false);
   function handleExpend() {
@@ -63,7 +102,7 @@ export default ({ spaceId }) => {
   }
   const changeSwitch = (val, type, id) => {
     //  开关操作
-    clearInterval(startLightsStatusTimer.current);
+    clearTimeout(startLightsStatusTimer.current);
     let paramsArr = [];
     if (type == 'total') {
       lampArr.forEach((item) => {
@@ -89,57 +128,168 @@ export default ({ spaceId }) => {
       setLampArr([...lampArr]);
     }, 500);
     setallLampHttp(paramsArr).then((res) => {
-      getLampTimer();
+      getLamp(); //todo
     });
-    // setallLamps(paramsArr, getLamp, waitSetResultFlag);
   };
+
+  const handleShow = () => {
+    if (!lampArr.length) return;
+    setShowLamps(!showLamps);
+  };
+
+  const lampShowList = useMemo(() => {
+    let arr = [];
+    const len = lampArr.length;
+    if (len < 3) {
+      arr = lampArr;
+    } else {
+      if (!showLamps) {
+        arr.push(lampArr[0]);
+        arr.push(lampArr[1]);
+      } else {
+        arr = lampArr;
+      }
+    }
+    return arr;
+  }, [showLamps, lampArr]);
+
+  const showColourModal = useCallback((item) => {
+    if (item?.runStatus) {
+      setColourFlag(true);
+      setColourObj(item);
+    }
+  }, []);
+  const hideColour = useCallback(() => {
+    setColourFlag(false);
+  }, []);
   return (
-    <div className={commonStyles.box}>
-      <div className={commonStyles.content}>
-        <div className={commonStyles.env}>
-          <div className={commonStyles.envLeft}>
-            <span className={commonStyles.eqTitle}>{isMore ? '光照' : lampArr[0]?.localName}</span>
-            <div className={`${commonStyles.eqStatus} ${commonStyles.pdt10}`}>
-              <span>{isOpen ? '照明已开启' : '照明已关闭'}</span>
-            </div>
-            {isMore && (
-              <div className={commonStyles.showAll} onClick={handleExpend}>
-                <img className={commonStyles.showImg} src={flagSvg ? expend_up : expend_down}></img>
-                <div className={commonStyles.showAllText}>显示全部</div>
+    <div className={commonStyles.box} ref={divBox}>
+      <div className={cx(commonStyles.content, `lampContent`)}>
+        {lampArr.length == 1 && (
+          <div className={commonStyles.env}>
+            <div className={commonStyles.envLeft}>
+              <span className={commonStyles.eqTitle}>{lampArr[0]?.localName}</span>
+              <div className={`${commonStyles.eqStatus} ${commonStyles.pdt10}`}>
+                <span>{isOpen ? '照明已开启' : '照明已关闭'}</span>
               </div>
-            )}
-          </div>
-          <div className={commonStyles.envRight}>
-            <img className={commonStyles.roomEqImg} src={isOpen ? lamp_open : lamp_close} />
-          </div>
-          {!flagSvg && (
+              <div className="showAll">
+                {(lampArr[0]?.bright || lampArr[0]?.colorTemperature) && (
+                  <div
+                    className={`adjustBox  bg ${lampArr[0]?.runStatus ? 'adjustActive' : ''}`}
+                    style={{}}
+                    onClick={() => {
+                      showColourModal(lampArr[0]);
+                    }}
+                  >
+                    <img className="iconAdjust" src={icon_adjust} />
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className={commonStyles.envRight}>
+              <img className={commonStyles.roomEqImg} src={isOpen ? lamp_open : lamp_close} />
+            </div>
             <div
               className={commonStyles.eqBtn}
               onClick={() => {
-                changeSwitch(!isOpen, 'total');
+                changeSwitch(!isOpen, 'child', lampArr[0]?.id);
               }}
             >
               <AnSwitch isOpen={isOpen} />
             </div>
-          )}
-        </div>
-      </div>
-      {lampArr.map((item, idx) => {
-        if (flagSvg) {
-          return (
-            <div className={`${styles.lampChild} ${commonStyles.flexBetween}`} key={item.id}>
-              <div className={commonStyles.eqTitle}>{item.localName}</div>
+          </div>
+        )}
+        {lampArr.length > 1 && (
+          <div className="lamp-basic">
+            <div className="dplCenter" style={{ marginLeft: '30px', marginRight: '16px' }}>
+              <div>
+                <span className="lamp-basic-name">光照</span>
+                <div className="lamp-status lamp-status-padding">
+                  {isOpen ? '照明已开启' : '照明已关闭'}
+                </div>
+              </div>
+              <div className="dplCenter">
+                <div
+                  className="all-btn"
+                  onClick={() => {
+                    changeSwitch(true, 'total');
+                  }}
+                >
+                  <span className="btn-text">全开</span>
+                </div>
+                <div
+                  className="all-btn"
+                  onClick={() => {
+                    changeSwitch(false, 'total');
+                  }}
+                >
+                  <span className="btn-text">全关</span>
+                </div>
+              </div>
+            </div>
+            <div className="lamp-item">
+              {lampShowList.map((item, index) => {
+                return (
+                  <div className="item-box" key={'lamp' + index}>
+                    <div className="small-img-card">
+                      <img
+                        className="small-lamp-img"
+                        src={
+                          item.lightType === 1
+                            ? item.runStatus
+                              ? lamp_small_open
+                              : lamp_small_close
+                            : item.runStatus
+                            ? atmLamp_small_open
+                            : atmLamp_small_close
+                        }
+                      />
+                    </div>
+                    <div
+                      className="small-sw-card"
+                      onClick={() => {
+                        changeSwitch(!item.runStatus, 'child', item.id);
+                      }}
+                    >
+                      <AnSwitch isOpen={item.runStatus} isSmall={true}></AnSwitch>
+                    </div>
+                    <div
+                      className="dplCenter"
+                      style={{ paddingRight: '14px', paddingLeft: '16px' }}
+                    >
+                      <div className="lamp-basic-name">
+                        <span>{item.localName}</span>
+                      </div>
+                      {(item.bright || item.colorTemperature) && (
+                        <div
+                          className={`adjustBox ${item.runStatus ? 'adjustActive' : ''}`}
+                          onClick={() => {
+                            showColourModal(item);
+                          }}
+                        >
+                          <img className="iconAdjust" src={icon_adjust} />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            {lampArr.length > 2 && (
               <div
+                className="lamp-spread"
                 onClick={() => {
-                  changeSwitch(!item.runStatus, 'child', item.id);
+                  handleShow();
                 }}
               >
-                <AnSwitch isOpen={item.runStatus}></AnSwitch>
+                <img className="lamp-basic-allow" src={showLamps ? expend_up : expend_down} />
+                <span className="lamp-status">{showLamps ? '收起' : '展开'}更多</span>
               </div>
-            </div>
-          );
-        }
-      })}
+            )}
+          </div>
+        )}
+      </div>
+      {colourFlag && <LampColour hideColour={hideColour} colourObj={colourObj}></LampColour>}
     </div>
   );
 };

+ 129 - 5
src/pages/Equipment/components/deviceModal/lampEq/index.less

@@ -1,6 +1,130 @@
-.lampChild {
-  height: 44px;
-  padding-right: 12px;
-  padding-left: 30px;
-  border-top: 1px solid rgba(196, 196, 196, 0.4);
+.lampContent {
+  min-height: 140px;
+  .iconAdjust {
+    width: 20px;
+    height: 20px;
+  }
+  .showAll {
+    padding-top: 20px;
+    .adjustBox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      opacity: 0.3;
+    }
+    .bg {
+      background: #f1f4f6;
+    }
+    .adjustActive {
+      cursor: pointer;
+      opacity: 1;
+    }
+  }
+  .lamp-basic {
+    padding-top: 24px;
+    padding-bottom: 13px;
+    font-family: PingFang SC;
+    .adjustBox {
+      opacity: 0.3;
+    }
+    .adjustActive {
+      cursor: pointer;
+      opacity: 1;
+    }
+    .lamp-basic-name {
+      color: rgba(77, 82, 98, 1);
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 22px;
+    }
+    .lamp-status {
+      color: rgba(196, 196, 196, 1);
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      &.lamp-status-padding {
+        padding-top: 10px;
+      }
+    }
+
+    .lamp-item {
+      display: flex;
+      flex-wrap: wrap;
+      padding-top: 26px;
+      padding-right: 12px;
+      padding-left: 12px;
+      .item-box {
+        position: relative;
+        width: 148px;
+        height: 116px;
+        margin-top: 12px;
+        background: #f7f9fa;
+        border-radius: 16px;
+      }
+      .item-box:nth-child(2n-1) {
+        margin-right: 11px;
+      }
+    }
+
+    .bg {
+      background: #f1f4f6;
+    }
+
+    .dplCenter {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .all-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 32px;
+      margin-left: 12px;
+      background: #f1f4f6;
+      border-radius: 21px;
+      cursor: pointer;
+      &:hover {
+        background: #e8ecf0;
+      }
+      .btn-text {
+        color: #2e3742;
+        font-weight: 400;
+        font-size: 14px;
+        font-family: PingFang SC;
+        line-height: 20px;
+      }
+    }
+
+    .small-img-card {
+      .small-lamp-img {
+        width: 80px;
+        height: 70px;
+      }
+    }
+    .small-sw-card {
+      position: absolute;
+      top: 16px;
+      right: 12px;
+    }
+
+    .lamp-spread {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-top: 10px;
+      cursor: pointer;
+      .lamp-basic-allow {
+        width: 25px;
+        height: 18px;
+      }
+    }
+    .cellhoverstyle {
+      background: #e8ecf0;
+    }
+  }
 }

+ 183 - 0
src/pages/Equipment/components/deviceModal/lampEq/lampColour/index.jsx

@@ -0,0 +1,183 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Modal } from 'antd';
+import './index.less';
+import Draggable from 'react-draggable';
+import Slider from '../../Slider';
+import Icon from '@/tenants-ui/SgIcon';
+import { changeManualTempHttp } from '@/services/sagacare_service/equipment';
+
+export default ({ hideColour, colourObj }) => {
+  const [startTime, setStartTime] = useState(0);
+  //const [colourItem, setColourItem] = useState({});
+  const [renew, setRenew] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+  const [bounds, setBounds] = useState({
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+  });
+
+  const colourItem = useMemo(() => {
+    // 开始滑动了 就不再更新父级数据
+
+    if (renew && colourObj) {
+      var colourVal = JSON.parse(JSON.stringify(colourObj));
+      if (colourVal.brightValue === colourVal.brightMinValue) {
+        colourVal.brightValue = 0;
+        colourVal.brightPercent = 0;
+      } else {
+        const brightPercent =
+          (colourVal.brightValue / (colourVal.brightMaxValue - colourVal.brightMinValue + 1)) * 100;
+        colourVal.brightPercent = Math.round(brightPercent);
+      }
+      if (colourVal.colorTempValue === colourVal.colorTempMinValue) {
+        colourVal.colorTempValue = 0;
+        colourVal.tempPercent = 0;
+      } else {
+        const tempPercent =
+          (colourVal.colorTempValue /
+            (colourVal.colorTempMaxValue - colourVal.colorTempMinValue + 1)) *
+          100;
+        colourVal.tempPercent = Math.round(tempPercent);
+      }
+      return JSON.parse(JSON.stringify(colourVal));
+    }
+    return {};
+  }, [colourObj]);
+
+  // 下发色温指令
+  const setColourOrder = (obj) => {
+    let paramsObj = JSON.parse(JSON.stringify(obj));
+    paramsObj.id = colourItem.id;
+    paramsObj.code = obj.type;
+    delete paramsObj.type;
+    const arr = [paramsObj];
+    changeManualTempHttp(arr);
+  };
+  //转化为后台需要的数据
+  const countValFunc = useCallback(
+    (obj) => {
+      let dxValue = 0;
+      if (obj.type === 'brightSet') {
+        if (obj.value < colourItem.brightMinValue) {
+          obj.value = colourItem.brightMinValue;
+          return obj;
+        }
+        dxValue = colourItem.brightMaxValue - colourItem.brightMinValue + 1;
+      } else {
+        if (obj.value < colourItem.colorTempMinValue) {
+          obj.value = colourItem.brightMinValue;
+          return obj;
+        }
+        dxValue = colourItem.colorTempMaxValue - colourItem.colorTempMinValue + 1;
+      }
+
+      obj.value = Math.round((obj.value / 100) * dxValue);
+      return obj;
+    },
+    [colourItem],
+  );
+  // 滑动
+  const silderVal = (obj) => {
+    // 值  obj.value  色温还是亮度 obj.type
+    obj = countValFunc(obj);
+    const endTime = Date.parse(new Date());
+    const dx = endTime - startTime;
+    if (dx === 1000) {
+      setStartTime(endTime);
+      setColourOrder(obj);
+    }
+  };
+  // 滑动开始
+  const mouseStart = () => {
+    let nowTime = Date.parse(new Date());
+    setStartTime(nowTime);
+    setRenew(false);
+  };
+  // 滑动停止
+  const mouseEnd = (obj) => {
+    obj = countValFunc(obj);
+
+    setColourOrder(obj);
+  };
+
+  const draggleRef = useRef(null);
+  const onStart = (_event, uiData) => {
+    _event.stopPropagation();
+    const { clientWidth, clientHeight } = window.document.documentElement;
+    const targetRect = draggleRef.current?.getBoundingClientRect();
+
+    if (!targetRect) {
+      return;
+    }
+    setBounds({
+      left: -targetRect.left + uiData.x,
+      right: clientWidth - (targetRect.right - uiData.x),
+      top: -targetRect.top + uiData.y,
+      bottom: clientHeight - (targetRect.bottom - uiData.y),
+    });
+  };
+
+  return (
+    <Modal
+      open
+      mask={false}
+      centered
+      footer={null}
+      style={{
+        width: '100%',
+      }}
+      modalRender={(modal) => (
+        <Draggable
+          disabled={disabled}
+          bounds={bounds}
+          onStart={(event, uiData) => onStart(event, uiData)}
+        >
+          <div ref={draggleRef}>{modal}</div>
+        </Draggable>
+      )}
+      closable={false}
+    >
+      <div className="colourModal">
+        <div className="colourClose">
+          <div
+            className="closeIcon"
+            onClick={() => {
+              hideColour();
+            }}
+          >
+            <Icon type="close" />
+          </div>
+        </div>
+        <div className="lampTitle">{colourItem.localName}</div>
+        {colourItem.bright && (
+          <div>
+            <Slider
+              onlyLine={false}
+              typeValue={colourItem.brightPercent}
+              typeName={'亮度'}
+              type={'brightSet'}
+              silderPercentValue={silderVal}
+              silderMouseEnd={mouseEnd}
+              silderMouseStart={mouseStart}
+            ></Slider>
+          </div>
+        )}
+        {colourItem.colorTemperature && (
+          <div>
+            <Slider
+              onlyLine={true}
+              typeValue={colourItem.tempPercent}
+              typeName={'色温'}
+              type={'colorTemperatureSet'}
+              silderPercentValue={silderVal}
+              silderMouseEnd={mouseEnd}
+              silderMouseStart={mouseStart}
+            ></Slider>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};

+ 50 - 0
src/pages/Equipment/components/deviceModal/lampEq/lampColour/index.less

@@ -0,0 +1,50 @@
+.colourModal {
+  box-sizing: border-box;
+  width: 340px;
+  height: 330px;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0px 20px 30px rgba(27, 33, 41, 0.15);
+  cursor: move;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+
+  .colourClose {
+    position: relative;
+    height: 47px;
+
+    .closeIcon {
+      position: absolute;
+      top: 15px;
+      right: 32px;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      color: #c4c4c4;
+      font-size: 20px;
+      border-radius: 100%;
+      cursor: pointer;
+      transition: background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
+      &:hover {
+        background-color: #fff;
+      }
+    }
+  }
+  .lampTitle {
+    padding-right: 32px;
+    padding-bottom: 36px;
+    padding-left: 32px;
+    color: rgba(0, 0, 0, 1);
+    font-weight: 500;
+    font-size: 24px;
+    font-family: PingFang SC;
+    line-height: 1;
+  }
+}

+ 22 - 0
src/pages/Equipment/components/deviceModal/socketEq/controlButton/index.jsx

@@ -0,0 +1,22 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Modal } from 'antd';
+import styles from './index.less';
+import Icon from '@/tenants-ui/SgIcon';
+import cx from 'classnames';
+
+export default ({ isAll, changeIsAll }) => {
+  return (
+    <div
+      className={styles.changeBox}
+      onClick={(event) => {
+        event.stopPropagation();
+        changeIsAll();
+      }}
+    >
+      <div className={styles.firBox}>总控制</div> <div className={styles.firBox}>子设备</div>
+      <div className={cx(styles.upBox, { [styles.rightBox]: !isAll })}>
+        {isAll ? '总控制' : '子设备'}
+      </div>
+    </div>
+  );
+};

+ 33 - 0
src/pages/Equipment/components/deviceModal/socketEq/controlButton/index.less

@@ -0,0 +1,33 @@
+.changeBox {
+  position: relative;
+  display: flex;
+  width: 116px;
+  height: 28px;
+  color: #424c59;
+  font-size: 14px;
+  background: #f1f4f6;
+  border-radius: 21px;
+  cursor: pointer;
+  .firBox {
+    width: 58px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+  }
+  .upBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 58px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    background: #ffffff;
+    border: 1px solid #e1e5eb;
+    border-radius: 21px;
+    transition: left 0.5s;
+  }
+  .rightBox {
+    left: 50%;
+  }
+}

+ 24 - 22
src/pages/Equipment/components/deviceModal/socketEq/index.jsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import styles from './index.less';
 import commonStyles from '../common.less';
 import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
 import AnSwitch from '../anSwitch';
 import { getSocketHttp, setSocketHttp } from '@/services/sagacare_service/equipment';
+import ControlButton from './controlButton';
 
 const { socket_close, socket_open, expend_down, expend_up } = equipImageMap;
 
@@ -14,6 +15,7 @@ export default ({ spaceId, projectId }) => {
   const [isOpen, setIsOpen] = useState(false); // 1 开, 10关
   const [isLoading, setIsLoading] = useState(false);
   let timer = useRef(null);
+  let divBox = useRef(null);
 
   function handleExpend() {
     setFlagSvg(!flagSvg);
@@ -43,67 +45,67 @@ export default ({ spaceId, projectId }) => {
     });
   }
 
-  function getData() {
+  const getData = useCallback(() => {
     const params = {
       spaceId: spaceId,
       equipType: 'socket',
     };
+
     setIsLoading(false);
     getSocketHttp(params).then((res) => {
+      if (!divBox.current) return;
       let arr = res.data.equipList || [];
       let flag = false;
-      for(let i=0;i<arr.length;i++){
+      for (let i = 0; i < arr.length; i++) {
         const item = arr[i];
         // 有开 则总开
         if (item.runStatus) {
-            setIsOpen(true);
-            flag = true;
-        };
+          setIsOpen(true);
+          flag = true;
+        }
       }
       if (arr.length > 1) {
         setIsMore(true);
-      }else{
-        setIsMore(false); 
+      } else {
+        setIsMore(false);
       }
       // 都没有开 则总关
       if (!flag) setIsOpen(false);
       setsocketArr(arr);
     });
-  }
+  }, [spaceId]);
 
-  function timerGet(params) {
+  function timerGet() {
     getData();
     clearInterval(timer.current);
     timer.current = null;
     timer.current = setInterval(() => {
-      getData();
+      divBox.current && getData();
     }, 1000 * 8);
   }
+
   useEffect(() => {
     timerGet();
     return () => {
       clearInterval(timer.current);
       timer.current = null;
     };
-  }, []);
+  }, [spaceId]);
 
   return (
-    <div className={commonStyles.box}>
+    <div className={commonStyles.box} ref={divBox}>
       <div className={commonStyles.content}>
         <div className={commonStyles.env}>
           <div className={commonStyles.envLeft}>
-            <span className={commonStyles.eqTitle}>
-              {isMore ? '智能插座' : socketArr[0]?.localName}
-            </span>
+            <span className={commonStyles.eqTitle}>智能插座</span>
             <div className={`${commonStyles.eqStatus} ${commonStyles.pdt10}`}>
               <span>{isOpen ? '插座已开启' : '插座已关闭'}</span>
             </div>
-            {isMore && (
-              <div className={commonStyles.showAll} onClick={handleExpend}>
-                <img className={commonStyles.showImg} src={flagSvg ? expend_up : expend_down}></img>
-                <div className={commonStyles.showAllText}>显示全部</div>
-              </div>
-            )}
+            <div className={styles.controlButton}>
+              {isMore && (
+                <ControlButton changeIsAll={handleExpend} isAll={!flagSvg}></ControlButton>
+              )}
+            </div>
           </div>
           <div className={styles.imgPos}>
             <img className={styles.roomEqImg} src={isOpen ? socket_open : socket_close} />

+ 6 - 4
src/pages/Equipment/components/deviceModal/socketEq/index.less

@@ -1,5 +1,5 @@
 .lampChild {
-  height: 60px;
+  height: 55px;
   padding-right: 12px;
   padding-left: 30px;
   border-top: 1px solid rgba(196, 196, 196, 0.4);
@@ -7,13 +7,15 @@
 
 .imgPos {
   position: relative;
-  width: 165px;
-  height: 100px;
   top: 0px;
   right: 0px;
-
+  width: 165px;
+  height: 100px;
 }
 .roomEqImg {
   width: 100%;
   height: 100%;
 }
+.controlButton {
+  margin-top: 25px;
+}

+ 19 - 0
src/pages/Equipment/components/deviceModal/underfloorHeat/heatButton/index.jsx

@@ -0,0 +1,19 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Modal } from 'antd';
+import './index.less';
+import Icon from '@/tenants-ui/SgIcon';
+
+export default ({isAll,changeIsAll}) => {
+
+  return (
+    <div
+      className="changeBox"
+      onClick={() => {
+        changeIsAll();
+      }}
+    >
+      <div className="firBox">总控制</div> <div className="firBox">子设备</div>
+      <div className={`upBox ${isAll ? '' : 'rightBox'}`}>{isAll ? '总控制' : '子设备'}</div>
+    </div>
+  );
+};

+ 33 - 0
src/pages/Equipment/components/deviceModal/underfloorHeat/heatButton/index.less

@@ -0,0 +1,33 @@
+.changeBox {
+  position: relative;
+  display: flex;
+  width: 116px;
+  height: 28px;
+  color: #424c59;
+  font-size: 14px;
+  background: #f1f4f6;
+  border-radius: 21px;
+  cursor: pointer;
+  .firBox {
+    width: 58px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+  }
+  .upBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 58px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    background: #ffffff;
+    border: 1px solid #e1e5eb;
+    border-radius: 21px;
+    transition: left 0.5s;
+  }
+  .rightBox {
+    left: 50%;
+  }
+}

+ 119 - 0
src/pages/Equipment/components/deviceModal/underfloorHeat/heatModal/index.jsx

@@ -0,0 +1,119 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Modal } from 'antd';
+import './index.less';
+import Draggable from 'react-draggable';
+import Slider from '../../Slider';
+import Icon from '@/tenants-ui/SgIcon';
+import { changeManualTempHttp } from '@/services/sagacare_service/equipment';
+
+export default ({ hideColour, colourObj }) => {
+  const [startTime, setStartTime] = useState(0);
+  const [renew, setRenew] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+  const [bounds, setBounds] = useState({
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+  });
+
+  // useEffect(() => {
+  //   console.log('colourObj', colourObj);
+  // }, [colourObj]);
+
+  // 下发色温指令
+  const setHeatOrder = (vobj) => {
+    var paramsArr = [];
+    paramsArr.push({
+      id: colourObj.id,
+      code: colourObj.tempSetCode,
+      value: vobj.value,
+    });
+    console.log('每个温度请求参数', paramsArr);
+    // changeManualTempHttp(paramsArr).then((res) => {
+    //   getHeat(); //todo
+    // });
+  };
+
+  // 滑动
+  const silderVal = (obj) => {
+    const endTime = Date.parse(new Date());
+    const dx = endTime - startTime;
+    if (dx === 1000) {
+      setStartTime(endTime);
+      setHeatOrder(obj);
+    }
+  };
+  // 滑动开始
+  const mouseStart = () => {
+    let nowTime = Date.parse(new Date());
+    setStartTime(nowTime);
+    setRenew(false);
+  };
+  // 滑动停止
+  const mouseEnd = (obj) => {
+    setHeatOrder(obj);
+  };
+
+  const draggleRef = useRef(null);
+  const onStart = (_event, uiData) => {
+    _event.stopPropagation();
+    const { clientWidth, clientHeight } = window.document.documentElement;
+    const targetRect = draggleRef.current?.getBoundingClientRect();
+    if (!targetRect) {
+      return;
+    }
+    setBounds({
+      left: -targetRect.left + uiData.x,
+      right: clientWidth - (targetRect.right - uiData.x),
+      top: -targetRect.top + uiData.y,
+      bottom: clientHeight - (targetRect.bottom - uiData.y),
+    });
+  };
+
+  return (
+    <Modal
+      open
+      mask={false}
+      centered
+      footer={null}
+      style={{
+        width: '100%',
+      }}
+      modalRender={(modal) => (
+        <Draggable
+          disabled={disabled}
+          bounds={bounds}
+          onStart={(event, uiData) => onStart(event, uiData)}
+        >
+          <div ref={draggleRef}>{modal}</div>
+        </Draggable>
+      )}
+      closable={false}
+    >
+      <div className="heatModal">
+        <div
+          className="closeIcon"
+          onClick={() => {
+            hideColour();
+          }}
+        >
+          <Icon type="close" />
+        </div>
+        <div className="modalTitle">{colourObj.localName}</div>
+        <div className="modalCont">
+          <Slider
+            onlyLine={true}
+            typeValue={colourObj.tempSet || colourObj.minTempSet}
+            minValue={colourObj.minTempSet}
+            maxValue={colourObj.maxTempSet}
+            type={'underfloorHeat'}
+            silderPercentValue={silderVal}
+            silderMouseEnd={mouseEnd}
+            silderMouseStart={mouseStart}
+          ></Slider>
+        </div>
+      </div>
+    </Modal>
+  );
+};

+ 50 - 0
src/pages/Equipment/components/deviceModal/underfloorHeat/heatModal/index.less

@@ -0,0 +1,50 @@
+.heatModal {
+  position: relative;
+  box-sizing: border-box;
+  width: 340px;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0px 20px 30px rgba(27, 33, 41, 0.15);
+  cursor: move;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+
+  .closeIcon {
+    position: absolute;
+    top: 15px;
+    right: 32px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    color: #c4c4c4;
+    font-size: 20px;
+    border-radius: 100%;
+    cursor: pointer;
+    transition: background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
+    &:hover {
+      background-color: #fff;
+    }
+  }
+
+  .modalTitle {
+    padding-top: 36px;
+    padding-right: 32px;
+    padding-bottom: 16px;
+    padding-left: 32px;
+    color: rgba(0, 0, 0, 1);
+    font-weight: 500;
+    font-size: 24px;
+    font-family: PingFang SC;
+    line-height: 1;
+  }
+  .modalCont {
+    padding-bottom: 16px;
+  }
+}

+ 0 - 0
src/pages/Equipment/components/deviceModal/underfloorHeat/index.jsx


Daži faili netika attēloti, jo izmaiņu fails ir pārāk liels