Newer
Older
KaiFengPC / src / views / sponeScreen / projectHM / ProjectYype.vue
@zhangdeliang zhangdeliang on 7 Aug 3 KB update
  1. <template>
  2. <!-- 项目类型 -->
  3. <div class="partTitleHM">项目类型</div>
  4. <div class="ConstrucClass">
  5. <div class="ConstruList">
  6. <div
  7. class="ConstruListA"
  8. :class="{ activeConstruListA: listActive.typeName == item.typeName }"
  9. v-for="item in list"
  10. @click="ProjectClick(item)"
  11. >
  12. <div class="ConstruIcon">
  13. <img class="Icon_zp" :src="getIcon(item.typeName)" alt="" />
  14. </div>
  15. <div class="ConstruNr">
  16. <p class="ellipsis" :title="item.typeName">{{ item.typeName }}</p>
  17. <p class="NumA">{{ item.typeCount }}</p>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script setup>
  24. import bus from '@/bus';
  25. import { getProjectStatistics } from '@/api/sponeScreen/gcpjApi.js';
  26. import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
  27. import drainage from '@/assets/newImgs/HMScreen/drainage_icon.png';
  28. import else_icon from '@/assets/newImgs/HMScreen/else_icon.png';
  29. import GIS_icon from '@/assets/newImgs/HMScreen/GIS_icon.png';
  30. import park from '@/assets/newImgs/HMScreen/park_icon.png';
  31. import pipe from '@/assets/newImgs/HMScreen/pipe_icon.png';
  32. import pipepumping from '@/assets/newImgs/HMScreen/pipepumping_icon.png';
  33. import road from '@/assets/newImgs/HMScreen/road_icon.png';
  34. const list = ref([]);
  35. const listActive = ref([]);
  36. const obj = {
  37. 海绵建筑与社区: Architectural,
  38. 海绵型道路广场: road,
  39. 海绵型公园绿地: park,
  40. 海绵型水系: drainage,
  41. 管网排查与修复: pipe,
  42. 管网及泵站: pipepumping,
  43. GIS平台建设与监测设施: GIS_icon,
  44. 全部: else_icon,
  45. 其他: else_icon,
  46. };
  47. const getIcon = name => {
  48. return obj[name];
  49. };
  50. async function getProjectStatisticsM() {
  51. let {
  52. data: { projectTypeCount },
  53. code,
  54. } = await getProjectStatistics();
  55. if (code == 200) {
  56. const typeCount = projectTypeCount.reduce((n, v) => {
  57. return n + v.typeCount;
  58. }, 0);
  59. list.value = projectTypeCount;
  60. list.value.unshift({ typeName: '全部', typeCount, all: 1 });
  61. }
  62. }
  63. const ProjectClick = i => {
  64. listActive.value = i;
  65. bus.emit('getProjectList', i);
  66. };
  67. getProjectStatisticsM();
  68. </script>
  69.  
  70. <style lang="scss" scoped>
  71. .ConstrucClass {
  72. width: 460px;
  73. background: #004565;
  74. opacity: 0.8;
  75. padding-bottom: 10px;
  76.  
  77. .ConstruList {
  78. width: 95%;
  79. margin: auto;
  80. display: flex;
  81. flex-flow: row wrap;
  82.  
  83. .ConstruListA {
  84. margin-left: 10px;
  85. width: 45%;
  86. height: 45px;
  87. background: url('@/assets/newImgs/HMScreen/1452.png') no-repeat;
  88. background-size: 100% 100%;
  89. margin-top: 10px;
  90. display: flex;
  91. }
  92. }
  93. .ConstruIcon {
  94. width: 30%;
  95. height: 45px;
  96. .Icon_zp {
  97. width: 35px;
  98. height: 35px;
  99. margin: 5px 10px;
  100. }
  101. }
  102. .ConstruNr {
  103. width: 70%;
  104. height: 45px;
  105. display: flex;
  106. align-items: center;
  107. justify-content: space-between;
  108. .ellipsis {
  109. padding: 5px;
  110. width: 80%;
  111. }
  112. .NumA {
  113. width: 20%;
  114. font-size: 20px;
  115. color: #48fff0;
  116. }
  117. }
  118. .activeConstruListA {
  119. color: #cbc05a;
  120. border: 1px solid #cbc05a;
  121. }
  122. }
  123. </style>