- <template>
- <!-- 项目类型 -->
- <div class="partTitleHM">项目类型</div>
- <div class="ConstrucClass">
- <div class="ConstruList">
- <div
- class="ConstruListA"
- :class="{ activeConstruListA: listActive.typeName == item.typeName }"
- v-for="item in list"
- @click="ProjectClick(item)"
- >
- <div class="ConstruIcon">
- <img class="Icon_zp" :src="getIcon(item.typeName)" alt="" />
- </div>
- <div class="ConstruNr">
- <p class="ellipsis" :title="item.typeName">{{ item.typeName }}</p>
- <p class="NumA">{{ item.typeCount }}</p>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script setup>
- import bus from '@/bus';
- import { getProjectStatistics } from '@/api/sponeScreen/gcpjApi.js';
- import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
- import drainage from '@/assets/newImgs/HMScreen/drainage_icon.png';
- import else_icon from '@/assets/newImgs/HMScreen/else_icon.png';
- import GIS_icon from '@/assets/newImgs/HMScreen/GIS_icon.png';
- import park from '@/assets/newImgs/HMScreen/park_icon.png';
- import pipe from '@/assets/newImgs/HMScreen/pipe_icon.png';
- import pipepumping from '@/assets/newImgs/HMScreen/pipepumping_icon.png';
- import road from '@/assets/newImgs/HMScreen/road_icon.png';
- const list = ref([]);
- const listActive = ref([]);
- const obj = {
- 海绵建筑与社区: Architectural,
- 海绵型道路广场: road,
- 海绵型公园绿地: park,
- 海绵型水系: drainage,
- 管网排查与修复: pipe,
- 管网及泵站: pipepumping,
- GIS平台建设与监测设施: GIS_icon,
- 全部: else_icon,
- 其他: else_icon,
- };
- const getIcon = name => {
- return obj[name];
- };
- async function getProjectStatisticsM() {
- let {
- data: { projectTypeCount },
- code,
- } = await getProjectStatistics();
- if (code == 200) {
- const typeCount = projectTypeCount.reduce((n, v) => {
- return n + v.typeCount;
- }, 0);
- list.value = projectTypeCount;
- list.value.unshift({ typeName: '全部', typeCount, all: 1 });
- }
- }
- const ProjectClick = i => {
- listActive.value = i;
- bus.emit('getProjectList', i);
- };
- getProjectStatisticsM();
- </script>
-
- <style lang="scss" scoped>
- .ConstrucClass {
- width: 460px;
- background: #004565;
- opacity: 0.8;
- padding-bottom: 10px;
-
- .ConstruList {
- width: 95%;
- margin: auto;
- display: flex;
- flex-flow: row wrap;
-
- .ConstruListA {
- margin-left: 10px;
- width: 45%;
- height: 45px;
- background: url('@/assets/newImgs/HMScreen/1452.png') no-repeat;
- background-size: 100% 100%;
- margin-top: 10px;
- display: flex;
- }
- }
- .ConstruIcon {
- width: 30%;
- height: 45px;
- .Icon_zp {
- width: 35px;
- height: 35px;
- margin: 5px 10px;
- }
- }
- .ConstruNr {
- width: 70%;
- height: 45px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .ellipsis {
- padding: 5px;
- width: 80%;
- }
- .NumA {
- width: 20%;
- font-size: 20px;
- color: #48fff0;
- }
- }
- .activeConstruListA {
- color: #cbc05a;
- border: 1px solid #cbc05a;
- }
- }
- </style>