Newer
Older
KaiFengPC / src / views / project / projectIndex / index.vue
@鲁yixuan 鲁yixuan on 29 Aug 26 KB updata
  1. <template>
  2. <div class="publicContainer homeBuildMain">
  3. <div class="homeLeft">
  4. <div class="footer">
  5. <gisMap2D :initJson="`/static/libs/mapbox/style/projectIndex.json`" @map-click="clickMap"></gisMap2D>
  6. <div class="projectLegendList">
  7. <div v-for="item in legendList" :key="item.layername" class="legend_item">
  8. <div class="part" @click="changeLegend(item)">
  9. <img :src="getImageUrl(item.url, 'newImgs/layerIcon')" class="img" />
  10. <p class="title">{{ item.name }}({{ item.projectCount }}个)</p>
  11. <el-checkbox v-model="item.isCheck" size="small" class="legbox"></el-checkbox>
  12. </div>
  13. </div>
  14. <el-select
  15. v-model="searchText"
  16. placeholder="请输入关键字搜索"
  17. style="width: 180px; margin-top: 3px"
  18. filterable
  19. @change="selectStation"
  20. >
  21. <el-option v-for="item in bsType" :key="item.projectName" :label="item.projectName" :value="item.projectName" />
  22. </el-select>
  23. </div>
  24. <!-- 管控分区图例 -->
  25. <div class="arealegendList">
  26. <div class="part" v-for="item in gkfqLegendList" :key="item.layername" @click="changeAreaLegend(item)">
  27. <p class="title">{{ item.name }}</p>
  28. <div class="iconImg">
  29. <el-icon v-if="item.isCheck" size="22">
  30. <Check />
  31. </el-icon>
  32. </div>
  33. </div>
  34. <!-- <el-radio-group v-model="selectedArea" @change="changeAreaLegend">
  35. <el-radio :label="'GKFQ1'">管控分区一级</el-radio>
  36. <el-radio :label="'GKFQ2'">管控分区二级</el-radio>
  37. <el-radio :label="'GKFQ3'">管控分区三级</el-radio>
  38. </el-radio-group> -->
  39. </div>
  40. </div>
  41. <!-- 暂不做切换事件,初设需要 -->
  42. <div class="typeBtns">
  43. <!-- <el-button type="warning">项目类型</el-button>
  44. <el-button type="primary">开工年份</el-button>
  45. <el-button type="primary">竣工年份</el-button>
  46. <el-button type="primary">任务类型</el-button>
  47. <el-button type="primary">库里库外项目</el-button> -->
  48. </div>
  49. </div>
  50. <div class="homeRight">
  51. <div class="selectTitle">
  52. <div class="name">项目数量统计</div>
  53. </div>
  54. <BarEchart :echartData="projectData" :yAxisName="'个'" :refresh="refresh" style="height: 200px"></BarEchart>
  55.  
  56. <div class="selectTitle">
  57. <div class="name">项目资金投入</div>
  58. <div class="flex">
  59. <el-select v-model="projectMoney" filterable @change="changeProjectMoney" size="small" style="width: 150px">
  60. <el-option label="投资总额" value="1"></el-option>
  61. <el-option label="海绵投资额" value="2"></el-option>
  62. </el-select>
  63. </div>
  64. </div>
  65. <div class="flex flex-justcontent-center">
  66. 总投资:{{ statisticsData.homePageMoney.totalMoney }}万元,海绵总投资:{{ statisticsData.homePageMoney.spongeTotalMoney }}万元
  67. </div>
  68. <PieChart v-if="isChart1" :echartData="moneyData" :title="''" :refresh="refresh2" style="height: 200px"></PieChart>
  69.  
  70. <div class="selectTitle" style="margin-bottom: 10px">
  71. <div class="name">项目过程管控</div>
  72. <div class="flex">
  73. <el-select v-model="projectTypeGC" filterable size="small" @change="changeProjectType" style="width: 150px">
  74. <el-option :label="`施工审批(${GCGKData.constructionPermit.length})`" value="1"></el-option>
  75. <el-option :label="`质量整改(${GCGKData.qualityReformRecord.length})`" value="2"></el-option>
  76. <el-option :label="`竣工审批(${GCGKData.completionAcceptance.length})`" value="3"></el-option>
  77. </el-select>
  78. </div>
  79. </div>
  80. <el-table :data="tableData" v-loading="tableLoading" stripe height="240" @row-click="clickPipeSupervise" highlight-current-row>
  81. <el-table-column label="项目名称" prop="projectName" />
  82. <el-table-column label="提交时间" prop="createTime" width="165" />
  83. </el-table>
  84. </div>
  85. <!-- 地图点击项目查看详细信息 -->
  86. <el-dialog v-model="showDialog" title="工程项目详情" :close-on-click-modal="false" @close="closeProjectInfo" width="1000px">
  87. <detail
  88. v-if="showDialog"
  89. :cur-row="curRow"
  90. :types="projectTypes"
  91. :build-category="build_category"
  92. :project-library-type="project_library_type"
  93. :project-content-type="project_content_type"
  94. />
  95. </el-dialog>
  96. </div>
  97. <!-- 基础信息弹窗 -->
  98. <div id="rasterPopupInfo" v-show="PopupShow">
  99. <div class="title">
  100. <div class="infoTitle">{{ rasterData.name }}</div>
  101. <div class="closePopup">
  102. <el-icon :size="18" @click="closePopup">
  103. <Close />
  104. </el-icon>
  105. </div>
  106. </div>
  107. <div class="dividerLine"></div>
  108. <div class="infoContentPI" v-if="rasterData.code">
  109. <div class="infoName">分区编码:</div>
  110. <div class="infoData">{{ rasterData.code }}</div>
  111. </div>
  112. <div class="infoContentPI">
  113. <div class="infoName">分区面积:</div>
  114. <div class="infoData">{{ rasterData.area }}km²</div>
  115. </div>
  116. <div class="infoContentPI" v-if="rasterData.designrain">
  117. <div class="infoName">设计降雨量:</div>
  118. <div class="infoData">{{ rasterData.designrain }}</div>
  119. </div>
  120. <div class="infoContentPI" v-if="rasterData.flow">
  121. <div class="infoName">目标年径流总量控制率:</div>
  122. <div class="infoData">{{ rasterData.flow }}</div>
  123. </div>
  124. </div>
  125. </template>
  126. <script setup name="Index">
  127. import { getImageUrl } from '@/utils/ruoyi';
  128. import PieChart from '@/components/Echarts/pieChart.vue'; //饼图
  129. import { useDicts } from '@/hooks';
  130. import gisMap2D from '../../gisMapPage/gisMapBox1.vue';
  131. import BarEchart from '@/components/Echarts/barChart.vue'; //柱状图
  132. import detail from '@/views/project/projectInformation/details.vue'; //工程详细信息
  133. import { getHomeStatistics, getHomePageInfoByType } from '@/api/project/home';
  134. import { projectTypeList, getUndoProjectInfo } from '@/api/project/projectInformationNew';
  135. import bus from '@/bus';
  136. import axios from 'axios';
  137. import kaifengPSFQarea from '@/views/gisMapPage/addPSFQarea.js';
  138. import projectTest from './projectTest.js';
  139. import kaifengProjectLayer from './addProjectLayer.js';
  140.  
  141. const showDialog = ref(false);
  142. const curRow = shallowRef({});
  143. const projectTypeGC = ref('1');
  144. const { proxy } = getCurrentInstance();
  145. const { build_status } = proxy.useDict('build_status');
  146. const { build_category, project_library_type, project_content_type } = useDicts(proxy);
  147. const searchText = ref();
  148. const bsType = ref([]);
  149. const isChart = ref(false);
  150. const isChart1 = ref(false);
  151. const tableData = ref([]);
  152. const tableLoading = ref(false);
  153. const timer = ref(null);
  154. const timerProject = ref(null);
  155. const selectedArea = ref('GKFQ1');
  156. const projectMoney = ref('1');
  157. const projectTypes = ref([]);
  158. const selectedRaster = ref([]);
  159. const rasterData = ref({});
  160. const PopupShow = ref(false);
  161. const gkfqLegendList = ref([
  162. {
  163. layername: 'GKFQ1',
  164. name: '管控分区一级',
  165. isCheck: false,
  166. },
  167. {
  168. layername: 'GKFQ2',
  169. name: '管控分区二级',
  170. isCheck: false,
  171. },
  172. {
  173. layername: 'GKFQ3',
  174. name: '管控分区三级',
  175. isCheck: false,
  176. },
  177. ]);
  178. const projectData = ref({
  179. xAxisData: [],
  180. seriesData: [
  181. { type: 'bar', name: '项目数', barWidth: 10, data: [] },
  182. { type: 'bar', name: '竣工数', barWidth: 10, data: [] },
  183. { type: 'bar', name: '开工数', barWidth: 10, data: [] },
  184. ],
  185. });
  186. const refresh = ref(1);
  187. const refresh2 = ref(1);
  188. const moneyData = ref([
  189. { name: '已开工项目完成投资', value: 2 },
  190. { name: '已竣工项目完成投资', value: 2 },
  191. { name: '计划总投资', value: 12 },
  192. ]);
  193. const GCGKData = ref({
  194. completionAcceptance: [],
  195. constructionPermit: [],
  196. qualityReformRecord: [],
  197. });
  198. const statisticsData = reactive({
  199. accumulativeTotal: {},
  200. currentYear: {},
  201. homePageMoney: {},
  202. buildTypeStatistics: [],
  203. projectTypeStatistics: [],
  204. });
  205. const legendList = ref([
  206. {
  207. name: '海绵型建设与社区',
  208. layername: 'HMJZYSQ',
  209. url: 'orinigns.png',
  210. isCheck: false,
  211. },
  212. {
  213. name: '海绵型道路广场',
  214. layername: 'HMXDLGC',
  215. url: 'DFHZ1.png',
  216. isCheck: false,
  217. },
  218. {
  219. name: '海绵型公园与绿地',
  220. layername: 'HMXGYLD',
  221. url: 'yuanTous.png',
  222. isCheck: true,
  223. },
  224. {
  225. name: '海绵型水系',
  226. layername: 'HMXSX',
  227. url: 'KDJZWMX s.png',
  228. isCheck: false,
  229. },
  230. {
  231. name: '管网排查与修复',
  232. layername: 'GWPCYXF',
  233. url: 'paiKous.png',
  234. isCheck: false,
  235. },
  236. {
  237. name: '雨水管网及泵站',
  238. layername: 'GWJBZ',
  239. url: 'paiLaoBengs.png',
  240. isCheck: false,
  241. },
  242. {
  243. name: 'GIS平台建设与监测设施',
  244. layername: 'GIS',
  245. url: 'yiLaos.png',
  246. isCheck: false,
  247. },
  248. ]);
  249.  
  250. // 规划过程管控表格点击
  251. function clickPipeSupervise(row) {
  252. curRow.value = row;
  253. showDialog.value = true;
  254. }
  255.  
  256. // 地图标注点点击
  257. const clickMap = (point, properties) => {
  258. curRow.value = properties;
  259. showDialog.value = true;
  260. };
  261.  
  262. // 加载数据
  263. const getData = async () => {
  264. getGCGKData(); //规划管控
  265. const res = await getHomeStatistics();
  266. if (res?.code !== 200) return;
  267. const { currentYear, accumulativeTotal, projectTypeStatistics, buildTypeStatistics, homePageMoney } = res.data;
  268. statisticsData.currentYear = currentYear;
  269. statisticsData.accumulativeTotal = accumulativeTotal;
  270. statisticsData.homePageMoney = homePageMoney;
  271. statisticsData.buildTypeStatistics = buildTypeStatistics.map(item => ({
  272. typeCount: item.typeCount,
  273. typeName: build_status.value.find(it => it.value === item.typeName)?.label || '',
  274. }));
  275. statisticsData.projectTypeStatistics = projectTypeStatistics;
  276.  
  277. renderPie(statisticsData.projectTypeStatistics, 1); //项目数量统计
  278. renderPie(statisticsData.buildTypeStatistics, 2); //项目资金投入
  279. };
  280.  
  281. const renderPie = (data, type) => {
  282. let arrayX = [],
  283. arrayY = [],
  284. arrayJG = [],
  285. arrayKG = [];
  286. data.forEach(i => {
  287. arrayX.push(i.typeName);
  288. arrayY.push(i.typeCount);
  289. arrayJG.push(i.completedCount);
  290. arrayKG.push(i.openedCount);
  291. });
  292. switch (type) {
  293. case 1:
  294. //项目数量统计
  295. projectData.value.xAxisData = arrayX;
  296. projectData.value.seriesData[0].data = arrayY; //总数
  297. projectData.value.seriesData[1].data = arrayJG; //竣工数
  298. projectData.value.seriesData[2].data = arrayKG; //开工数
  299. refresh.value = Math.random();
  300. isChart.value = true;
  301. break;
  302. case 2:
  303. //项目资金投入
  304. moneyData.value[0].value = statisticsData.homePageMoney.openedTotalMoney; //已开工
  305. moneyData.value[1].value = statisticsData.homePageMoney.completedTotalMoney; //已竣工
  306. moneyData.value[2].value = statisticsData.homePageMoney.totalMoney; //总投资
  307. refresh2.value = Math.random();
  308. isChart1.value = true;
  309. break;
  310. default:
  311. break;
  312. }
  313. };
  314. // 资金切换选择
  315. function changeProjectMoney(val) {
  316. if (val == '1') {
  317. // 投资总额
  318. moneyData.value[0].value = statisticsData.homePageMoney.openedTotalMoney;
  319. moneyData.value[1].value = statisticsData.homePageMoney.completedTotalMoney;
  320. moneyData.value[2].value = statisticsData.homePageMoney.totalMoney; //总投资
  321. refresh2.value = Math.random();
  322. isChart1.value = true;
  323. } else {
  324. // 海绵投资额
  325. moneyData.value[0].value = statisticsData.homePageMoney.openedSpongeTotalMoney;
  326. moneyData.value[1].value = statisticsData.homePageMoney.completedSpongeTotalMoney;
  327. moneyData.value[2].value = statisticsData.homePageMoney.spongeTotalMoney; //总投资
  328. refresh2.value = Math.random();
  329. isChart1.value = true;
  330. }
  331. }
  332. // 项目过程管控
  333. async function getGCGKData() {
  334. tableLoading.value = true;
  335. let res = await getUndoProjectInfo();
  336. if (res && res.code == 200) {
  337. GCGKData.value = res.data;
  338. tableData.value = GCGKData.value.constructionPermit; //默认施工审批
  339. }
  340. tableLoading.value = false;
  341. }
  342. // 规划过程管控切换点击
  343. function changeProjectType(val) {
  344. if (val == '1') {
  345. tableData.value = GCGKData.value.constructionPermit;
  346. } else if (val == '2') {
  347. tableData.value = GCGKData.value.qualityReformRecord;
  348. } else {
  349. tableData.value = GCGKData.value.completionAcceptance;
  350. }
  351. }
  352.  
  353. //图例点击事件
  354. const changeLegend = item => {
  355. item.isCheck = !item.isCheck;
  356. bus.emit('setLayerVisible', item);
  357. };
  358. //选择站点触发事件
  359. const selectStation = () => {
  360. let types = ['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'];
  361. let fy = ['HMJZYSQ_1', 'HMXDLGC_1', 'HMXGYLD_1', 'HMXSX_1', 'GWPCYXF_1', 'GWJBZ_1', 'GIS_1'];
  362. let selectedStation = bsType.value.filter(item => item.projectName == searchText.value)[0];
  363. selectedStation.type = null;
  364. if (!!!selectedStation.projectLocation) {
  365. proxy.$modal.msgError('站点坐标缺失');
  366. return;
  367. }
  368. let projectWKT = `POINT(${selectedStation.projectLocation.split(',').join(' ')})`;
  369. let selectedStationJson = turf.featureCollection([{ geometry: Terraformer.WKT.parse(projectWKT), properties: selectedStation }]);
  370.  
  371. bus.emit('removeMapDatas', fy);
  372. let layerName = fy[types.indexOf(selectedStation.projectTypeCode)];
  373. bus.emit('setGeoJSON', { json: selectedStationJson, key: layerName });
  374. bus.emit('setLayerVisible', { layername: layerName, isCheck: true });
  375. newfiberMapbox.map.easeTo({
  376. center: [selectedStationJson.features[0].geometry.coordinates[0], selectedStationJson.features[0].geometry.coordinates[1]],
  377. zoom: 15,
  378. });
  379. };
  380. //取消弹窗回调
  381. const closeProjectInfo = () => {
  382. let clearSelectedFeature = [];
  383. newfiberMapbox.getLayers().forEach(feature => {
  384. if (feature.newfiberId == 'highlight_point') {
  385. clearSelectedFeature.push(feature);
  386. }
  387. });
  388. if (!!clearSelectedFeature.length) {
  389. clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
  390. }
  391. };
  392.  
  393. // 图例渲染
  394. const getHomePageInfoByTypes = async id => {
  395. let res = await getHomePageInfoByType(id);
  396. if (res?.code !== 200) return;
  397. let projectListMap = res?.data || {};
  398. console.log('接口数据', projectListMap);
  399. let mapData = Object.values(projectListMap);
  400. bsType.value = mapData.flat();
  401. let projectLegend = [];
  402. mapData.forEach(data => {
  403. let mapDataFeatures = [];
  404. data.forEach(item => {
  405. if (!!!item.projectLocation) return;
  406. let projectWKT = `POINT(${item.projectLocation.split(',').join(' ')})`;
  407. let feature = { geometry: Terraformer.WKT.parse(projectWKT), properties: item };
  408. mapDataFeatures.push(feature);
  409. });
  410. let mapDataGeojson = turf.featureCollection(mapDataFeatures);
  411. if (!mapDataGeojson.features.length) return;
  412. let legendDataList = {
  413. layername: mapDataGeojson.features[0].properties.projectTypeCode,
  414. data: mapDataGeojson,
  415. isCheck: true,
  416. projectCount: mapDataGeojson.features.length,
  417. };
  418. projectLegend.push(legendDataList);
  419. });
  420. legendList.value.forEach(item => {
  421. projectLegend.forEach(element => {
  422. if (item.layername == element.layername) {
  423. item.projectCount = element.projectCount;
  424. }
  425. });
  426. });
  427. console.log('legendList.value', projectLegend);
  428. bus.emit('setLegendData', projectLegend);
  429. timer.value = setInterval(() => {
  430. if (!!!newfiberMapbox.map.getLayer('point')) {
  431. return;
  432. } else {
  433. bus.emit('setLayerVisible', projectLegend[0]);
  434. clearInterval(timer.value);
  435. }
  436. }, 1000);
  437. };
  438.  
  439. const getProjectTypeList = async () => {
  440. const res = await projectTypeList({ status: '0' });
  441. if (res?.code !== 200) return;
  442. projectTypes.value = res?.data || [];
  443. };
  444. //管控分区图例选择
  445. let gkfqList = ['GKFQ1', 'GKFQ2', 'GKFQ3'];
  446. const changeAreaLegend = value => {
  447. closePopup();
  448. selectedArea.value = value.layername;
  449. gkfqLegendList.value.map(i => {
  450. if (value.layername == i.layername) {
  451. i.isCheck = !i.isCheck;
  452. } else {
  453. i.isCheck = false;
  454. }
  455. });
  456. if (selectedArea.value == 'GKFQ1') {
  457. if (value.isCheck) {
  458. kaifengPSFQarea.addPSFQ1(newfiberMapbox.map, 0, 24, 'visible');
  459. kaifengPSFQarea.removePSFQ2(newfiberMapbox.map);
  460. kaifengPSFQarea.removePSFQ3(newfiberMapbox.map);
  461. } else {
  462. kaifengPSFQarea.removePSFQ1(newfiberMapbox.map);
  463. }
  464. } else if (selectedArea.value == 'GKFQ2') {
  465. if (value.isCheck) {
  466. kaifengPSFQarea.addPSFQ2(newfiberMapbox.map, 0, 24, 'visible');
  467. kaifengPSFQarea.removePSFQ1(newfiberMapbox.map);
  468. kaifengPSFQarea.removePSFQ3(newfiberMapbox.map);
  469. kaifengPSFQarea.removePSFQ3(newfiberMapbox.map);
  470. } else {
  471. kaifengPSFQarea.removePSFQ2(newfiberMapbox.map);
  472. }
  473. } else {
  474. if (value.isCheck) {
  475. kaifengPSFQarea.addPSFQ3(newfiberMapbox.map, 0, 'visible');
  476. kaifengPSFQarea.removePSFQ1(newfiberMapbox.map);
  477. kaifengPSFQarea.removePSFQ2(newfiberMapbox.map);
  478. } else {
  479. kaifengPSFQarea.removePSFQ3(newfiberMapbox.map);
  480. }
  481. }
  482. // selectedRaster.value = gkfqList.filter(item => item == selectedArea.value);
  483. // let unselectedRaster = gkfqList.filter(item => item != selectedArea.value);
  484. // if (!!newfiberMapbox.map.getLayer('heighLightAreaLayer')) {
  485. // newfiberMapbox.map.removeLayer('heighLightAreaLayer');
  486. // newfiberMapbox.map.removeSource('heighLightAreaLayer');
  487. // }
  488. // unselectedRaster.forEach(item => {
  489. // if (newfiberMapbox.map.getLayer(item)) {
  490. // newfiberMapbox.map.removeLayer(item);
  491. // newfiberMapbox.map.removeSource(item);
  492. // }
  493. // });
  494. // addGuanKongLayer(selectedArea.value);
  495. };
  496. //添加管控分区三级
  497. const addGuanKongLayer = layerName => {
  498. !!!newfiberMapbox.map.getSource(layerName) &&
  499. newfiberMapbox.map.addSource(layerName, {
  500. type: 'raster',
  501. tiles: [
  502. `/geoserver/xiaoganMapServer/wms?service=WMS&version=1.1.0&request=GetMap&layers=xiaoganMapServer:${layerName}&styles=&bbox={bbox-epsg-3857}&width=768&height=556&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE`,
  503. ],
  504. tileSize: 768,
  505. });
  506. !!!newfiberMapbox.map.getLayer(layerName) &&
  507. newfiberMapbox.map.addLayer({
  508. id: layerName,
  509. type: 'raster',
  510. source: layerName,
  511. paint: {
  512. 'raster-opacity': 0.6,
  513. },
  514. });
  515. timerProject.value = setInterval(() => {
  516. if (!newfiberMapbox.map.getLayer('point')) {
  517. return;
  518. } else {
  519. newfiberMapbox.map.moveLayer(layerName, 'point');
  520.  
  521. clearInterval(timerProject.value);
  522. }
  523. }, 1000);
  524. };
  525. //地图选中高亮
  526. const mapSelectedHeighLight = geojson => {
  527. if (!!newfiberMapbox.map.getLayer('heighLightAreaLayer')) {
  528. newfiberMapbox.map.getSource('heighLightAreaLayer').setData(geojson);
  529. } else {
  530. newfiberMapbox.map.addSource('heighLightAreaLayer', { type: 'geojson', data: geojson });
  531. newfiberMapbox.map.addLayer({
  532. id: 'heighLightAreaLayer',
  533. source: 'heighLightAreaLayer',
  534. type: 'line',
  535. paint: {
  536. 'line-color': 'red',
  537. 'line-width': 8,
  538. },
  539. });
  540. }
  541. };
  542. //管控分区点击事件
  543. const rasterLayerClick = e => {
  544. if (!selectedRaster.value.length) {
  545. return;
  546. }
  547. const { lng, lat } = e.lngLat;
  548. const radius = Math.pow(2, 10);
  549. const pointM = turf.toMercator(turf.point([lng, lat]));
  550. const pointC = pointM.geometry.coordinates;
  551. const bbox = [pointC[0] - radius, pointC[1] - radius, pointC[0] + radius, pointC[1] + radius];
  552. const url =
  553. `/geoserver/xiaoganMapServer/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=${selectedRaster.value[0]}&STYLES&LAYERS=${selectedRaster.value[0]}&exceptions=application%2Fvnd.ogc.se_inimage&INFO_FORMAT=application/json&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A3857&WIDTH=101&HEIGHT=101&BBOX=` +
  554. bbox.join();
  555. axios.get(url).then(function (res) {
  556. if (!!!res.data.features.length) {
  557. if (!!newfiberMapbox.map.getLayer('heighLightAreaLayer')) {
  558. newfiberMapbox.map.removeLayer('heighLightAreaLayer');
  559. newfiberMapbox.map.removeSource('heighLightAreaLayer');
  560. }
  561. closePopup();
  562. return;
  563. } else {
  564. let selectedAreaJson = res.data;
  565. let heighLightArea = turf.toWgs84(selectedAreaJson.features[0].geometry);
  566. let poylgonToLine = {
  567. type: 'FeatureCollection',
  568. features: [
  569. {
  570. type: 'Feature',
  571. geometry: {
  572. type: 'LineString',
  573. coordinates: heighLightArea.coordinates[0][0],
  574. },
  575. },
  576. ],
  577. };
  578. rasterData.value = selectedAreaJson.features[0].properties;
  579. mapSelectedHeighLight(poylgonToLine);
  580. let layerCenter = turf.center(heighLightArea).geometry.coordinates;
  581. let rasterLayerPopupDiv = document.getElementById('rasterPopupInfo');
  582. window.rasterLayerPopup = new mapboxL7.Popup({
  583. html: rasterLayerPopupDiv,
  584. lngLat: {
  585. lng: layerCenter[0],
  586. lat: layerCenter[1],
  587. },
  588. anchor: 'center',
  589. offsets: [0, 0],
  590. autoClose: false,
  591. });
  592. newfiberMapbox.addPopup(rasterLayerPopup);
  593. PopupShow.value = true;
  594. }
  595. });
  596. };
  597. //取消弹窗
  598. const closePopup = () => {
  599. PopupShow.value = false;
  600. };
  601. //添加测试海绵项目
  602. const addTestProjectLayer = () => {
  603. let point = { type: 'FeatureCollection', features: [] };
  604. let LineString = { type: 'FeatureCollection', features: [] };
  605. let Polygon = { type: 'FeatureCollection', features: [] };
  606. projectTest.data.forEach(item => {
  607. console.log('item', item);
  608. let projectGeojson = { geometry: Terraformer.WKT.parse(item.geometry), properties: item };
  609.  
  610. if (item.geometry.includes('POLYGON')) {
  611. Polygon.features.push(projectGeojson);
  612. }
  613. if (item.geometry.includes('LINESTRING')) {
  614. LineString.features.push(projectGeojson);
  615. }
  616. if (item.geometry.includes('POINT')) {
  617. point.features.push(projectGeojson);
  618. }
  619. console.log('LineString', LineString);
  620.  
  621. //kaifengProjectLayer.addPointProject(newfiberMapbox.map, point, layerId);
  622. });
  623. // kaifengProjectLayer.addPolygonProject(newfiberMapbox.map, Polygon, 'projectPolygon', 'rgba(225, 196, 224,1)');
  624. // kaifengProjectLayer.addLineProject(newfiberMapbox.map, LineString, 'projectLine', 'green');
  625. };
  626. onMounted(() => {
  627. getData();
  628. getProjectTypeList();
  629. //getHomePageInfoByTypes(1);
  630. setTimeout(() => {
  631. addTestProjectLayer();
  632. newfiberMapbox.map.on('click', function (e) {
  633. rasterLayerClick(e);
  634. });
  635. }, 3000);
  636. });
  637. onBeforeUnmount(() => {
  638. if (timer.value) {
  639. clearInterval(timer.value);
  640. }
  641. if (timerProject.value) {
  642. clearInterval(timerProject.value);
  643. }
  644. !!newfiberMapbox.map.getLayer(selectedArea.value) && newfiberMapbox.map.removeLayer(selectedArea.value);
  645. !!newfiberMapbox.map.getSource(selectedArea.value) && newfiberMapbox.map.removeSource(selectedArea.value);
  646. });
  647. </script>
  648. <style lang="scss">
  649. @import '@/assets/styles/variables.module.scss';
  650. .homeBuildMain {
  651. height: calc(100vh - 64px);
  652. width: 100%;
  653. overflow: hidden;
  654. padding: 10px;
  655. .homeLeft,
  656. .homeRight {
  657. height: 100%;
  658. }
  659. .homeLeft {
  660. width: 100%;
  661. }
  662. .homeRight {
  663. width: 22%;
  664. height: calc(100vh - 160px);
  665. background: #00314e;
  666. position: absolute;
  667. right: 10px;
  668. top: 70px;
  669. z-index: 122;
  670. }
  671. }
  672. .center {
  673. // justify-content: space-between;
  674. // margin: 10px 0px;
  675. height: 100%;
  676. // padding: 10px 0;
  677. > div {
  678. height: calc(33.33% - 7px);
  679. box-sizing: border-box;
  680. padding: 10px;
  681. // flex: 1;
  682. background: $mainColor1;
  683. position: relative;
  684. margin-bottom: 10px;
  685. &:last-of-type {
  686. margin-bottom: 0;
  687. }
  688. }
  689. }
  690. .typeBtns {
  691. position: absolute;
  692. width: 30%;
  693. left: 5%;
  694. bottom: 50px;
  695. z-index: 122;
  696. display: flex;
  697. justify-content: space-around;
  698. }
  699. .footer {
  700. position: relative;
  701. height: calc(100vh - 90px);
  702. .arealegendList {
  703. position: absolute;
  704. background: #00314e;
  705. border: 1px solid #094065;
  706. box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.68);
  707. opacity: 0.7;
  708. border-radius: 10px;
  709. position: absolute;
  710. bottom: 30px;
  711. right: 25%;
  712. z-index: 110;
  713. padding: 10px;
  714. .part {
  715. display: flex;
  716. height: 40px;
  717. align-items: center;
  718. cursor: pointer;
  719. &:hover {
  720. background: #08596a;
  721. }
  722. .title {
  723. margin-left: 5px;
  724. font-size: 14px;
  725. height: 30px;
  726. line-height: 30px;
  727. width: 125px;
  728. }
  729. .iconImg {
  730. width: 20px;
  731. height: 20px;
  732. .el-icon {
  733. font-weight: bold;
  734. &.active {
  735. color: #00ee6f;
  736. }
  737. }
  738. }
  739. }
  740. }
  741. .projectLegendList {
  742. background: #00314e;
  743. border: 1px solid #094065;
  744. box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.68);
  745. opacity: 0.7;
  746. border-radius: 10px;
  747. position: absolute;
  748. top: 10px;
  749. left: 5px;
  750. right: 10px;
  751. z-index: 110;
  752. height: 40px;
  753. overflow: auto;
  754. display: flex;
  755. justify-content: space-around;
  756. .legend_item {
  757. display: flex;
  758. align-items: center;
  759. .part {
  760. display: flex;
  761. align-items: center;
  762. cursor: pointer;
  763. &:hover {
  764. background: #08596a;
  765. }
  766. .img {
  767. width: 20px;
  768. height: 20px;
  769. margin: 0px 0px 0px 10px;
  770. }
  771. .title {
  772. margin: 0px 5px 0px 5px;
  773. font-size: 14px;
  774. }
  775. .legbox {
  776. margin-right: 15px;
  777. }
  778. }
  779. }
  780. }
  781. }
  782.  
  783. #rasterPopupInfo {
  784. width: 350px;
  785. padding: 10px;
  786. background: rgba(0, 49, 78, 0.5);
  787. border: 1px solid #094065;
  788. z-index: 111;
  789. }
  790. .title {
  791. display: flex;
  792. .infoTitle {
  793. display: flex;
  794. align-items: center;
  795. height: 22px;
  796. font-size: 14px;
  797. font-family: PingFang SC;
  798. font-weight: 400;
  799. color: #ccf1ff;
  800. line-height: 22px;
  801. margin: 5px;
  802. width: 330px;
  803. &:before {
  804. display: block;
  805. content: '';
  806. width: 3px;
  807. height: 16px;
  808. background: #00d1ff;
  809. margin-right: 10px;
  810. }
  811. }
  812. .closePopup {
  813. margin-right: 20px;
  814. height: 22px;
  815. cursor: pointer;
  816. }
  817. }
  818. .infoContentPI {
  819. display: flex;
  820. height: 20px;
  821. font-size: 14px;
  822. font-weight: 400;
  823. line-height: 20px;
  824. color: #00d1ff;
  825. .infoName {
  826. width: 200px;
  827. margin: 3px;
  828. }
  829. .infoData {
  830. width: 40px;
  831. margin: 3px;
  832. }
  833. }
  834. .l7-popup-tip {
  835. display: none;
  836. }
  837. .l7-popup .l7-popup-content {
  838. padding: 0px;
  839. background: #033b4f;
  840. }
  841. .l7-popup .l7-popup-content .l7-popup-close-button {
  842. display: none;
  843. }
  844. .l7-popup .l7-popup-content .l7-popup-content__title {
  845. align-items: center;
  846. height: 22px;
  847. font-size: 16px;
  848. font-family: PingFang SC;
  849. font-weight: 400;
  850. color: #ccf1ff;
  851. line-height: 22px;
  852. }
  853. </style>