Startsida Utforska Hjälp
Registrera dig Logga in
shaoy
/
city-life-line
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Träd: 73bd217106
Grenar Taggar
city-life-line
/
src
/
views
/
subSystem
/
alarm
/
drainage
/
alarmGIS.scss

alarmGIS.scss 14 KB
Historik Rå

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 
  1. .alarm-gis-page { color: #303b4e; }
    2. 

  2. .gis-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
    3. 

  3. .gis-page-heading h1 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: .3px; }
    4. 

  4. .gis-page-heading p { margin: 0; color: #7b8799; font-size: 13px; line-height: 1.6; }
    5. 

  5. .gis-view-label { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 10px; color: #527197; background: #edf4ff; border: 1px solid #dce8f8; border-radius: 5px; font-size: 12px; }
    6. 

  6. .gis-filter-card, .gis-workspace { background: #fff; border: 1px solid #e6eaf0; border-radius: 8px; box-shadow: 0 2px 5px #273f5d03; }
    7. 

  7. .gis-filter-card { padding: 16px 20px 20px; margin-bottom: 16px; }
    8. 

  8. .gis-filters { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(140px, 180px) minmax(160px, 200px) auto; align-items: end; gap: 16px 20px; }
    9. 

  9. .gis-filters :deep(.el-form-item) { margin: 0; min-width: 0; }
    10. 

  10. .gis-filters :deep(.el-form-item__label) { height: auto; margin-bottom: 8px; font-size: 12px; font-weight: 400; color: #5f6d81; line-height: 18px; }
    11. 

  11. .gis-filters :deep(.el-select), .gis-filters :deep(.el-input) { width: 100%; }
    12. 

  12. .gis-filter-actions { display: flex; white-space: nowrap; }
    13. 

  13. .gis-level-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
    14. 

  14. .gis-level-metric { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 16px 18px; background: #fff; border: 1px solid #e6eaf0; border-radius: 8px; }
    15. 

  15. .gis-grade-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--grade-color); border-radius: 50%; background: var(--grade-tint); color: var(--grade-color); font-size: 14px; font-weight: 600; }
    16. 

  16. .gis-metric-label { min-width: 0; font-size: 13px; line-height: 1.4; }
    17. 

  17. .gis-metric-label small { display: block; margin-top: 6px; color: #8a95a5; font-size: 11px; }
    18. 

  18. @media (max-width: 680px) { .gis-metric-label small span { display: none; } }
    19. 

  19. .gis-level-metric > strong { margin-left: auto; color: #293b53; font-size: 26px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
    20. 

  20. .gis-level-metric > strong small { margin-left: 5px; font-size: 12px; font-weight: 400; color: #8a95a5; }
    21. 

  21. .gis-workspace { overflow: hidden; }
    22. 

  22. .gis-workspace-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e6eaf0; }
    23. 

  23. .gis-workspace-heading > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
    24. 

  24. .gis-workspace-heading .el-icon { color: #409eff; font-size: 18px; }
    25. 

  25. .gis-workspace-heading h2 { margin: 0; font-size: 15px; font-weight: 600; }
    26. 

  26. .gis-workspace-heading span { color: #8390a2; font-size: 12px; }
    27. 

  27. .gis-workspace-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: clamp(520px, calc(100vh - 340px), 740px); }
    28. 

  28. .gis-device-pane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #e6eaf0; background: #fff; }
    29. 

  29. .gis-list-heading { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #edf0f5; color: #7c899b; font-size: 12px; }
    30. 

  30. .gis-list-heading b { color: #3d536f; font-weight: 500; }
    31. 

  31. .gis-device-list { min-height: 0; overflow: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: #d5dfea transparent; }
    32. 

  32. .gis-device-item { padding: 14px 12px; margin-bottom: 4px; border: 1px solid transparent; border-bottom-color: #edf0f5; border-radius: 6px; transition: background .15s, border-color .15s; }
    33. 

  33. .gis-device-item:hover { background: #f8faff; }
    34. 

  34. .gis-device-item.is-selected { background: #f0f6ff; border-color: #b8d4fa; }
    35. 

  35. .gis-device-title { display: flex; align-items: flex-start; gap: 9px; }
    36. 

  36. .gis-device-title .gis-grade-badge { width: 23px; height: 23px; font-size: 12px; }
    37. 

  37. .gis-device-name { padding: 1px 0; border: 0; background: transparent; font: inherit; color: #34445c; font-size: 13px; font-weight: 600; text-align: left; line-height: 21px; overflow-wrap: anywhere; cursor: pointer; }
    38. 

  38. .gis-device-name:hover { color: #409eff; }
    39. 

  39. .gis-device-name:focus-visible, .gis-cluster-list button:focus-visible { outline: 2px solid #409eff; outline-offset: 3px; border-radius: 2px; }
    40. 

  40. .gis-device-code { margin: 8px 0; color: #8290a5; font: 11px/1.6 Consolas, monospace; overflow-wrap: anywhere; }
    41. 

  41. .gis-device-location { display: flex; align-items: flex-start; gap: 4px; color: #758297; font-size: 12px; line-height: 1.7; }
    42. 

  42. .gis-device-location .el-icon { margin-top: 4px; flex-shrink: 0; }
    43. 

  43. .gis-device-location span { overflow-wrap: anywhere; }
    44. 

  44. .gis-device-meta { display: flex; gap: 8px; margin-top: 9px; color: #8190a3; font-size: 11px; }
    45. 

  45. .gis-device-meta span:first-child { color: var(--grade-color); }
    46. 

  46. .gis-device-meta span + span::before { content: '·'; margin-right: 8px; }
    47. 

  47. .gis-device-actions { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-top: 10px; font-size: 11px; }
    48. 

  48. .gis-device-actions :deep(.el-button) { font-size: 12px; font-weight: 400; padding: 3px 0; }
    49. 

  49. .gis-device-actions :deep(.el-button + .el-button) { margin-left: 12px; }
    50. 

  50. .gis-coordinate-warning { color: #b77b28; }
    51. 

  51. .gis-coordinate-ready { display: flex; align-items: center; gap: 5px; color: #8090a3; }
    52. 

  52. .gis-coordinate-ready i { width: 5px; height: 5px; border-radius: 50%; background: #69b58c; }
    53. 

  53. .gis-map-stage { position: relative; min-width: 0; overflow: hidden; background: #f4f7fb; }
    54. 

  54. .gis-map-stage :deep(.gis-map-canvas) { min-height: 0; background: #f4f7fb; }
    55. 

  55. .gis-map-status, .gis-map-legend, .gis-map-tools :deep(.el-button) { background: #fff; border: 1px solid #e3e9f1; box-shadow: 0 2px 8px #263e5b0a; }
    56. 

  56. .gis-map-status { position: absolute; left: 16px; top: 16px; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-radius: 6px; color: #65768c; font-size: 12px; }
    57. 

  57. .gis-map-status i { width: 7px; height: 7px; border-radius: 50%; background: #dca14d; }
    58. 

  58. .gis-map-status i.is-ready { background: #52aa7a; }
    59. 

  59. .gis-map-status i.is-error { background: #e89174; }
    60. 

  60. .gis-map-tools { position: absolute; right: 16px; top: 16px; z-index: 2; display: flex; gap: 6px; }
    61. 

  61. .gis-map-tools :deep(.el-button) { width: 36px; height: 36px; padding: 0; margin: 0; border-radius: 5px; font-size: 17px; }
    62. 

  62. .gis-map-fallback { position: absolute; inset: 75px 24px 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #f4f7fb; }
    63. 

  63. .gis-fallback-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; background: #e9eff7; border-radius: 14px; color: #8194ac; font-size: 26px; }
    64. 

  64. .gis-map-fallback h3 { margin: 0 0 12px; font-size: 17px; font-weight: 500; color: #4c5f79; }
    65. 

  65. .gis-map-fallback p { max-width: 400px; margin: 0 0 20px; font-size: 13px; color: #8895a6; line-height: 1.8; overflow-wrap: anywhere; }
    66. 

  66. .gis-fallback-note { max-width: 380px; margin-top: 14px; color: #94a0b1; font-size: 11px; line-height: 1.7; }
    67. 

  67. .gis-map-bottom { position: absolute; left: 16px; right: 16px; bottom: 38px; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 10px; pointer-events: none; }
    68. 

  68. .gis-map-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 12px; border-radius: 6px; }
    69. 

  69. .gis-map-legend span { display: flex; align-items: center; gap: 5px; color: #65768b; font-size: 11px; white-space: nowrap; }
    70. 

  70. .gis-map-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--grade-color); }
    71. 

  71. .gis-map-note { padding: 7px 9px; background: #fffffff2; border-radius: 4px; color: #8b7758; font-size: 11px; }
    72. 

  72. .gis-workspace-footer { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid #e6eaf0; color: #8996a8; font-size: 12px; line-height: 1.6; }
    73. 

  73. .gis-workspace-footer span:first-child { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
    74. 

  74. .gis-workspace-footer .el-icon { flex-shrink: 0; }
    75. 

  75. .gis-workspace-footer span:last-child { flex-shrink: 0; }
    76. 

  76. :global(.alarm-gis-drawer .el-drawer__header) { margin: 0; padding: 20px 24px; border-bottom: 1px solid #e6eaf0; }
    77. 

  77. :global(.alarm-gis-drawer .el-drawer__body) { padding: 22px 24px; }
    78. 

  78. :global(.alarm-gis-drawer .el-drawer__footer) { padding: 15px 24px; border-top: 1px solid #e6eaf0; }
    79. 

  79. .gis-drawer-heading > span { display: block; margin-bottom: 7px; font-size: 11px; color: #8a97a9; }
    80. 

  80. .gis-drawer-heading h2 { margin: 0; color: #34445b; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
    81. 

  81. .gis-detail-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
    82. 

  82. .gis-detail-banner > span:last-child { color: #8a97a9; font-size: 12px; }
    83. 

  83. .gis-detail-grade { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grade-color); }
    84. 

  84. .gis-detail-grade .gis-grade-badge { width: 26px; height: 26px; font-size: 12px; }
    85. 

  85. .gis-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
    86. 

  86. .gis-detail-grid .is-wide { grid-column: 1 / -1; }
    87. 

  87. .gis-detail-grid dt { margin-bottom: 7px; color: #8794a7; font-size: 12px; font-weight: 400; }
    88. 

  88. .gis-detail-grid dd { margin: 0; color: #45556d; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
    89. 

  89. .gis-snapshot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; padding: 15px 16px; background: #f6f8fc; border: 1px solid #edf1f7; border-radius: 6px; }
    90. 

  90. .gis-snapshot span { color: #8290a3; font-size: 11px; }
    91. 

  91. .gis-snapshot strong { display: block; margin-top: 8px; color: #d66b58; font-size: 21px; font-weight: 500; overflow-wrap: anywhere; }
    92. 

  92. .gis-snapshot p { margin: 10px 0 0; color: #526581; font-size: 13px; }
    93. 

  93. .gis-detail-tabs { margin-top: 20px; }
    94. 

  94. .gis-detail-tabs :deep(.el-tabs__item) { padding: 0 18px; font-size: 13px; font-weight: 400; }
    95. 

  95. .gis-detail-tabs :deep(.el-tabs__nav-wrap::after) { height: 1px; background: #e6eaf0; }
    96. 

  96. .gis-detail-tabs :deep(.el-tabs__header) { margin-bottom: 22px; }
    97. 

  97. .gis-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
    98. 

  98. .gis-panel-heading h3, .gis-device-images h3 { margin: 0; color: #41536e; font-size: 14px; font-weight: 500; }
    99. 

  99. .gis-panel-heading > span { color: #94a0b1; font-size: 11px; }
    100. 

  100. .gis-curve-select { width: 100%; margin-bottom: 18px; }
    101. 

  101. .gis-detail-content :deep(.alarm-toolbar) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
    102. 

  102. .gis-detail-content :deep(.muted) { color: #8a97a9; font-size: 12px; line-height: 1.7; }
    103. 

  103. .gis-detail-content :deep(.el-radio-button__inner) { padding: 8px 10px; font-size: 12px; }
    104. 

  104. .gis-detail-content :deep(.alarm-chart) { height: 310px; border: 1px solid #edf1f7; border-radius: 6px; }
    105. 

  105. .gis-alarm-history { min-height: 110px; margin-left: 6px; padding-left: 20px; border-left: 1px solid #e3eaf4; }
    106. 

  106. .gis-history-item { position: relative; padding: 0 0 22px; }
    107. 

  107. .gis-history-item::before { content: ''; position: absolute; left: -25px; top: 6px; width: 7px; height: 7px; border: 1px solid var(--grade-color); background: #fff; border-radius: 50%; }
    108. 

  108. .gis-history-heading { display: flex; justify-content: space-between; gap: 12px; }
    109. 

  109. .gis-history-heading :deep(.el-tag) { border: 0; border-radius: 3px; font-weight: 400; }
    110. 

  110. .gis-history-description { margin: 10px 0; color: #526178; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
    111. 

  111. .gis-history-item dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; margin: 0; color: #8492a6; font-size: 12px; }
    112. 

  112. .gis-history-item dt { font-weight: 400; }
    113. 

  113. .gis-history-item dd { margin: 0; overflow-wrap: anywhere; }
    114. 

  114. .gis-history-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 10px; }
    115. 

  115. .gis-history-actions :deep(.el-button) { margin: 0; font-size: 12px; font-weight: 400; }
    116. 

  116. .gis-detail-content :deep(.pagination-container) { padding: 12px 0 0; }
    117. 

  117. .gis-detail-content :deep(.el-pagination) { justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
    118. 

  118. .gis-device-images { margin-top: 24px; }
    119. 

  119. .gis-device-images h3 { margin-bottom: 14px; }
    120. 

  120. .gis-drawer-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
    121. 

  121. .gis-drawer-footer > span { color: #98a3b2; font-size: 11px; }
    122. 

  122. .gis-cluster-list { display: grid; gap: 8px; }
    123. 

  123. .gis-cluster-list button { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #e7edf5; background: #f8faff; border-radius: 5px; text-align: left; color: #526581; cursor: pointer; font: inherit; font-size: 13px; }
    124. 

  124. .gis-cluster-list button span { flex: 1; }
    125. 

  125. .gis-cluster-list small { color: #95a1b2; }
    126. 

  126. @media (max-width: 1250px) { .gis-filters { grid-template-columns: minmax(200px, 1fr) 140px 170px auto; gap: 16px; } .gis-level-metric { padding: 14px 12px; gap: 8px; } .gis-workspace-body { grid-template-columns: 270px minmax(0, 1fr); } .gis-map-note { display: none; } }
    127. 

  127. @media (max-width: 1000px) { .gis-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gis-filter-actions { align-self: end; } .gis-level-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gis-workspace-hint { display: none; } .gis-map-status { top: 62px; } .gis-map-fallback { inset: 110px 18px 95px; } }
    128. 

  128. @media (max-width: 680px) { .gis-page-heading h1 { font-size: 19px; } .gis-view-label { display: none; } .gis-filter-card { padding: 14px; } .gis-search-field { grid-column: 1 / -1; } .gis-filter-actions { grid-column: 1 / -1; justify-content: flex-end; } .gis-level-metric { gap: 7px; padding: 12px 10px; } .gis-level-metric > strong { font-size: 23px; } .gis-metric-label { font-size: 12px; } .gis-metric-label small { font-size: 10px; } .gis-level-metric .gis-grade-badge { width: 25px; height: 25px; } .gis-workspace-body { display: flex; flex-direction: column; height: auto; } .gis-device-pane { height: 280px; border-right: 0; border-bottom: 1px solid #e6eaf0; } .gis-map-stage { height: 450px; } .gis-workspace-heading { padding: 14px; } .gis-workspace-footer { padding: 12px; } .gis-workspace-footer span:last-child { display: none; } .gis-detail-grid { gap: 16px; } .gis-snapshot { gap: 14px; } .gis-detail-banner { align-items: flex-start; } :global(.alarm-gis-drawer .el-drawer__body) { padding: 18px; } .gis-drawer-footer > span { max-width: 190px; line-height: 1.6; } }
    129.