<template> <div class="publicContainerA"> <div class="partTitleHM">项目展示列表</div> <div class="ConstrucClass"> <div class="HeadContent"> <el-form-item style="width: 95%; margin: auto"> <el-select v-model="searvhDate" clearable filterable remote placeholder="请输入项目名称" :remote-method="blurMethod" @change="stationListChange" style="width: 95%" > <el-option v-for="item in listDataXm" :key="item.projectNo" :label="item.projectName" :value="item.projectNo" /> </el-select> </el-form-item> </div> <div class="ConstrucNr"> <Vue3SeamlessScroll :list="listDataXm" :singleHeight="55" :singleWaitTime="1500" :hover="true" class="scroll"> <div class="listXm" v-for="item in listDataXm" :title="item.projectName" @click="ProjectClick(item)"> <img class="Icon_zp" :src="getIcon(item.projectTypeName)" alt="" /> <div :class="{ activeConstruListA: listActive.projectNo == item.projectNo }" class="XmName ellipsis"> {{ item.projectName }} </div> </div> </Vue3SeamlessScroll> </div> </div> </div> </template> <script setup> import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'; import { projectInfoNew } from '@/api/sponeScreen/gcpjApi.js'; import bus from '@/bus'; import dlgc from '@/assets/images/zonglan/2.png'; import gyld from '@/assets/images/zonglan/3.png'; import hmsx from '@/assets/images/zonglan/8.png'; import gwpc from '@/assets/images/zonglan/5.png'; import gwpz from '@/assets/images/zonglan/4.png'; import ptss from '@/assets/images/zonglan/1.png'; import jzsq from '@/assets/images/zonglan/6.png'; import qt from '@/assets/images/zonglan/7.png'; import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png'; import newfiberVectorLayer from '@/views/sponeScreen/gisMF/newfiberVectorLayer.js'; import { nextTick, onMounted } from 'vue'; const emitM = defineEmits(); const listDataXm = ref([]); const listActive = ref({}); const searvhDate = ref(''); const obj = { 海绵建筑与社区: jzsq, 海绵型道路广场: dlgc, 海绵型公园绿地: gyld, 海绵型水系: hmsx, 管网排查与修复: gwpc, 管网及泵站: gwpz, GIS平台建设与监测设施: ptss, 其他: qt, }; const getIcon = name => { return obj[name]; }; let layerList = ['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS']; async function projectInfoNewM(p) { console.log('ppppp---', p); let { data, code } = await projectInfoNew(p); if (code == 200) { listDataXm.value = data; console.log(typeof p); if (!p || !p.projectTypeId) { newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], true); //全部 } else if (p.projectTypeId == '1701128641279070210') { newfiberMap.setLayersVisible(['HMJZYSQ'], true); newfiberMap.setLayersVisible(['HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //社区 } else if (p.projectTypeId == '1701128777853997058') { newfiberMap.setLayersVisible(['HMXDLGC'], true); newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //道路 } else if (p.projectTypeId == '1701128863459741697') { newfiberMap.setLayersVisible(['HMXGYLD'], true); newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //绿地 } else if (p.projectTypeId == '1701128943340261378') { newfiberMap.setLayersVisible(['HMXSX'], true); newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //水系 } else if (p.projectTypeId == '1701129031496142849') { newfiberMap.setLayersVisible(['GWPCYXF'], true); newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWJBZ', 'GIS'], false); //管网排查 } else if (p.projectTypeId == '1701129103495565313') { newfiberMap.setLayersVisible(['GWJBZ'], true); newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GIS'], false); //管网泵站 } else if (p.projectTypeId == '1701129308194377729') { newfiberMap.setLayersVisible(['GIS'], true); newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ'], false); //GIS } } } //海绵工程gis渲染 const addProjectLayers = async () => { let { data, code } = await projectInfoNew(); if (code == 200) { let projectList = [ { layerLabel: '海绵建筑与社区', layerName: 'HMJZYSQ', data: [], }, { layerLabel: '海绵型道路广场', layerName: 'HMXDLGC', data: [], }, { layerLabel: '海绵型公园绿地', layerName: 'HMXGYLD', data: [], }, { layerLabel: '海绵型水系', layerName: 'HMXSX', data: [], }, { layerLabel: '管网排查与修复', layerName: 'GWPCYXF', data: [], }, { layerLabel: '管网及泵站', layerName: 'GWJBZ', data: [], }, { layerLabel: 'GIS平台建设与监测设施', layerName: 'GIS', data: [], }, ]; //海绵工程数据分类 projectList.forEach(projectItem => { data.forEach(item => { if (item.projectTypeCode == projectItem.layerName) projectItem.data.push(item); }); }); //海绵工程上图 projectList.forEach(projectItem => { let mapDataFeatures = []; let mapDataGeojson = {}; projectItem.data.forEach((item, index) => { if (!!!item.projectLocation) return; let projectWKT = `POINT(${item.projectLocation.split(',').join(' ')})`; let feature = { type: 'Feature', geometry: Terraformer.WKT.parse(projectWKT), properties: item }; mapDataFeatures.push(feature); }); mapDataGeojson = { type: 'FeatureCollection', features: mapDataFeatures, }; if (!mapDataGeojson.features.length) return; newfiberVectorLayer.addGeojsonPoint(newfiberMap, mapDataGeojson, getIcon(projectItem.layerLabel), projectItem.layerName); }); } }; const AllData = reactive({ queryParams: {}, }); const ProjectClick = row => { listActive.value = row; listDataXm.value.map(i => { if (row.id == i.id) { i.checked = !i.checked; } else { i.checked = false; } }); let arr = listDataXm.value.filter(i => i.checked); emitM('qipaoDateMeth', arr[0], arr[0]?.checked); }; const { queryParams } = toRefs(AllData); function stationListChange(v) { projectInfoNewM({ projectNo: v }); } projectInfoNewM(); bus.on('getProjectList', i => { projectInfoNewM({ projectTypeId: i.typeId }); }); onMounted(() => { addProjectLayers(); }); </script> <style lang="scss" scoped> .publicContainerA { margin-top: 10px; } .ConstrucClass { width: 100%; height: calc(100vh - 530px); background: #003b6d; opacity: 0.8; .HeadContent { width: 100%; height: 65px; // background: red; align-items: center; line-height: 25px; margin-top: 2px; } .ConstrucNr { width: 100%; height: calc(100% - 17%); // background: #2790fb; .scroll { width: 95%; height: calc(100% - 1%); overflow: hidden; // display: inline-block; // background: red; margin: auto; } .listXm { position: relative; width: 95%; height: 50px; background: url('@/assets/newImgs/HMScreen/ujnasf.png') no-repeat; background-size: 100% 100%; display: flex; margin: 5px auto; .Icon_zp { width: 32px; height: 32px; position: relative; top: 9px; left: 20px; // background: red; } .XmName { position: relative; left: 70px; top: 15px; width: 315px; height: 50px; // background: red; overflow: hidden; white-space: nowrap; /* 防止文字换行 */ text-overflow: ellipsis; } } } } :deep(.el-input__inner) { background: #11559b !important; // box-shadow: 0 0 0 0.00521rem #066592 inset !important; color: #fff !important; width: 390px !important; } :deep(.el-input__wrapper, .el-textarea__inner) { background: #11559b !important; // box-shadow: 0 0 0 0.00521rem inset !important; color: #fff !important; } :deep(.el-form-item__content) { margin: 10px; } .activeConstruListA { color: #cbc05a; } :deep(.scroll > div > :nth-child(2)) { display: none !important; } </style>