- <template>
- <div class="publicContainerA">
- <div class="partTitleHM">项目展示列表</div>
- <div class="ConstrucClass">
- <div class="HeadContent">
- <el-form-item>
- <el-select
- v-model="searvhDate"
- clearable
- filterable
- placeholder="请输入项目名称"
- :remote-method="blurMethod"
- @change="stationListChange"
- >
- <el-option v-for="item in listDataXm" :key="item.projectNo" :label="item.projectAbbreviation" :value="item.projectNo" />
- </el-select>
- </el-form-item>
- </div>
- <div class="ConstrucNr">
- <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.projectAbbreviation }}
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script setup>
- 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 newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
- import projectArea from '@/assets/geojson/kaifeng/projectArea.json';
- import projectArea1 from '@/assets/geojson/kaifeng/projectArea1.json';
- import projectArea2 from '@/assets/geojson/kaifeng/projectArea2.json';
-
- const emitM = defineEmits();
- const listDataXm = ref([]);
- const listActive = ref({});
- const searvhDate = ref('');
- const projectTimer = ref(null);
- 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) {
- //newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
- listDataXm.value = data;
- }
- }
- //海绵工程gis渲染
- const addProjectLayers = async () => {
- let typeList = ['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other'];
- let colorList = [
- 'rgba(187, 129, 255,1)',
- 'rgba(253, 184, 100,1)',
- 'rgba(7, 183, 32,1)',
- 'rgba(104, 176, 255,1)',
- 'rgba(234, 116, 76,1)',
- 'rgba(42, 231, 230,1)',
- 'rgba(229, 64, 50,1)',
- 'rgba(220, 220, 157,1)',
- ];
- let { data, code } = await projectInfoNew();
- let pointList = [],
- lineList = [],
- polygonList = [];
- if (code == 200) {
- data.forEach((element, index) => {
- element.fillcolor = colorList[typeList.indexOf(element.projectTypeCode)];
- if (element.projectrange) {
- let geometryToFrature = {
- type: 'Feature',
- geometry: Terraformer.WKT.parse(element.projectrange),
- properties: {
- fillcolor: element.fillcolor,
- projectNo: element.projectNo,
- name: element.projectAbbreviation,
- projectName: element.projectName,
- projectNo: element.projectNo,
- projectLocation: element.projectLocation,
- id: element.id,
- geometry: element.projectrange,
- },
- };
- if (element.projectrange.includes('POINT')) {
- pointList.push(geometryToFrature);
- } else if (element.projectrange.includes('LINESTRING')) {
- lineList.push(geometryToFrature);
- } else if (element.projectrange.includes('POLYGON')) {
- polygonList.push(geometryToFrature);
- }
- }
- });
- let pointGeojson = {
- type: 'FeatureCollection',
- features: pointList,
- };
- let lineGeojson = {
- type: 'FeatureCollection',
- features: lineList,
- };
- let polygonGeojson = {
- type: 'FeatureCollection',
- features: polygonList,
- };
- // 项目名称图层
- newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('polygonGeojson', polygonGeojson, 12);
- newfiberMapBoxVectorLayer.addGeojsonLineWithLabel('lineGeojson', lineGeojson, 5, 12);
- newfiberMapBoxVectorLayer.addGeojsonCircleWithLabel('pointGeojson', pointGeojson, 12);
- }
- };
- const AllData = reactive({
- queryParams: {},
- });
- const ProjectClick = async row => {
- listActive.value = row;
- listDataXm.value.map(i => {
- if (row.id == i.id) {
- i.checked = !i.checked;
- } else {
- i.checked = false;
- }
- });
-
- //newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
- let arr = listDataXm.value.filter(i => i.checked);
- emitM('qipaoDateMeth', arr[0], arr[0]?.checked);
- let lonlat = row.projectLocation.split(',').map(Number);
- newfiberMapbox.map.easeTo({
- center: lonlat,
- zoom: 15.5,
- pitch: 30,
- });
- };
-
- const { queryParams } = toRefs(AllData);
- function stationListChange(v) {
- projectInfoNewM({ projectNo: v });
- }
-
- projectInfoNewM();
- bus.on('getProjectList', (i, v) => {
- if (i.length > 0) projectInfoNewM({ buildStatus: i[0]?.buildStatus });
- else projectInfoNewM({ projectTypeId: i.typeId });
- });
- onMounted(() => {
- bus.emit('setIniteLayer', []);
- addProjectLayers();
-
- newfiberMapbox.map.easeTo({
- center: [114.345, 34.801],
- zoom: 13.8,
- pitch: 30,
- });
- // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea', projectArea, 20, 0.4, 0.6);
- // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea_dynamicLine', projectArea, 3, 0.8);
- // let lineWidth = 1;
- // projectTimer.value = setInterval(() => {
- // lineWidth += 0.5;
- // if (lineWidth > 10) {
- // lineWidth = 3;
- // }
- // newfiberMapbox.map.setPaintProperty('projectArea_dynamicLine', 'line-width', lineWidth);
- // });
- //项目边界
- let layer = new mapboxL7.LineLayer({
- name: 'projectArea',
- })
- .source(projectArea)
- .size(40)
- .shape('wall')
- .style({
- opacity: 1,
- sourceColor: '#1cd66c',
- targetColor: 'rbga(0,255,255, 1)',
- });
- newfiberMapbox.addLayer(layer);
-
- let layer2 = new mapboxL7.LineLayer({
- name: 'projectArea2',
- })
- .source(projectArea2)
- .size(40)
- .shape('wall')
- .style({
- opacity: 1,
- sourceColor: '#0075ff',
- targetColor: 'rbga(0,255,255, 1)',
- });
- newfiberMapbox.addLayer(layer2);
-
- let layer1 = new mapboxL7.LineLayer({
- name: 'projectArea1',
- })
- .source(projectArea1)
- .size(40)
- .shape('wall')
- .style({
- opacity: 1,
- sourceColor: '#fcc424',
- targetColor: 'rbga(0,255,255, 1)',
- });
- newfiberMapbox.addLayer(layer1);
-
- newfiberMapbox.map.on('click', ['selectPoint', 'selectPolyLine', 'selectPolygon'], e => {
- const feature = newfiberMapbox.map
- .queryRenderedFeatures([
- [e.point.x - 10 / 2, e.point.y - 10 / 2],
- [e.point.x + 10 / 2, e.point.y + 10 / 2],
- ])
- .filter(i => !!i.layer.id)[0];
- let properties = feature.properties;
- ProjectClick(properties);
- console.log('feature--', '海绵项目点击事件', properties);
- });
- newfiberMapbox.map.on('mouseenter', ['polygonGeojson', 'lineGeojson', 'pointGeojson'], e => {
- let selectPoint = {},
- selectPolyLine = {},
- selectPolygon = {};
- const feature = newfiberMapbox.map
- .queryRenderedFeatures([
- [e.point.x - 10 / 2, e.point.y - 10 / 2],
- [e.point.x + 10 / 2, e.point.y + 10 / 2],
- ])
- .filter(i => !!i.layer.id)[0];
- let properties = feature.properties;
- console.log('feature--', '海绵项目点击事件', properties);
- let geometryToFrature = {
- type: 'Feature',
- geometry: Terraformer.WKT.parse(properties.geometry),
- properties: {
- fillcolor: 'rgba(17, 87, 153,1)',
- projectNo: properties.projectNo,
- name: properties.projectAbbreviation,
- projectName: properties.projectName,
- projectNo: properties.projectNo,
- projectLocation: properties.projectLocation,
- id: properties.id,
- },
- };
- if (properties.geometry.includes('POINT')) {
- selectPoint = {
- type: 'FeatureCollection',
- features: [geometryToFrature],
- };
- } else if (properties.geometry.includes('LINESTRING')) {
- selectPolyLine = {
- type: 'FeatureCollection',
- features: [geometryToFrature],
- };
- } else if (properties.geometry.includes('POLYGON')) {
- selectPolygon = {
- type: 'FeatureCollection',
- features: [geometryToFrature],
- };
- }
- if (selectPolygon.features) {
- newfiberMapBoxVectorLayer.addGeojsonPolygon('selectPolygon', selectPolygon);
- newfiberMapbox.map.moveLayer('selectPolygon', 'polygonGeojson_label');
- }
- if (selectPolyLine.features) {
- newfiberMapBoxVectorLayer.addGeojsonLine('selectPolyLine', selectPolyLine, 5);
- newfiberMapbox.map.moveLayer('selectPolyLine', 'lineGeojson_label');
- }
- if (selectPoint.features) {
- newfiberMapBoxVectorLayer.addGeojsonCircle('selectPoint', selectPoint);
- newfiberMapbox.map.moveLayer('selectPoint', 'pointGeojson_label');
- }
- });
- newfiberMapbox.map.on('mouseleave', ['polygonGeojson', 'lineGeojson', 'pointGeojson'], e => {
- newfiberMapBoxVectorLayer.removeByIds(['selectPoint', 'selectPolyLine', 'selectPolygon']);
- });
- // newfiberMap.setCenter({
- // lng: 114.322,
- // lat: 34.602,
- // heading: 2.281299097855777,
- // zoom: 10358.12942752382,
- // pitch: -25.2508969308367,
- // roll: 0.005453465256790101,
- // });
- });
- onBeforeUnmount(() => {
- clearInterval(projectTimer.value);
- if (!newfiberMapbox) return;
- newfiberMapBoxVectorLayer.removeByIds([
- 'polygonGeojson',
- 'lineGeojson',
- 'pointGeojson',
- 'polygonGeojson_label',
- 'lineGeojson_label',
- 'pointGeojson_label',
- 'projectArea',
- 'projectArea_dynamicLine',
- ]);
- newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea'));
- newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea1'));
- newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea2'));
- });
- </script>
-
- <style lang="scss" scoped>
- .ConstrucClass {
- width: 100%;
- height: calc(100vh - 770px);
- background: #004565;
- opacity: 0.8;
- margin-top: -5px;
- .HeadContent {
- width: 100%;
- margin-top: 2px;
- }
- .ConstrucNr {
- width: 100%;
- height: 76%;
- overflow: auto;
- margin-top: -20px;
- .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>