Newer
Older
KaiFengPC / src / views / sponeScreen / projectHM / ProjectDisplay.vue
@jimengfei jimengfei on 29 Aug 11 KB updata
  1. <template>
  2. <div class="publicContainerA">
  3. <div class="partTitleHM">项目展示列表</div>
  4. <div class="ConstrucClass">
  5. <div class="HeadContent">
  6. <el-form-item>
  7. <el-select
  8. v-model="searvhDate"
  9. clearable
  10. filterable
  11. placeholder="请输入项目名称"
  12. :remote-method="blurMethod"
  13. @change="stationListChange"
  14. >
  15. <el-option v-for="item in listDataXm" :key="item.projectNo" :label="item.projectAbbreviation" :value="item.projectNo" />
  16. </el-select>
  17. </el-form-item>
  18. </div>
  19. <div class="ConstrucNr">
  20. <div class="listXm" v-for="item in listDataXm" :title="item.projectName" @click="ProjectClick(item)">
  21. <img class="Icon_zp" :src="getIcon(item.projectTypeName)" alt="" />
  22. <div :class="{ activeConstruListA: listActive.projectNo == item.projectNo }" class="XmName ellipsis">
  23. {{ item.projectAbbreviation }}
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. </template>
  30.  
  31. <script setup>
  32. import { projectInfoNew } from '@/api/sponeScreen/gcpjApi.js';
  33. import bus from '@/bus';
  34. import dlgc from '@/assets/images/zonglan/2.png';
  35. import gyld from '@/assets/images/zonglan/3.png';
  36. import hmsx from '@/assets/images/zonglan/8.png';
  37. import gwpc from '@/assets/images/zonglan/5.png';
  38. import gwpz from '@/assets/images/zonglan/4.png';
  39. import ptss from '@/assets/images/zonglan/1.png';
  40. import jzsq from '@/assets/images/zonglan/6.png';
  41. import qt from '@/assets/images/zonglan/7.png';
  42. import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
  43. import projectArea from '@/assets/geojson/kaifeng/projectArea.json';
  44. import projectArea1 from '@/assets/geojson/kaifeng/projectArea1.json';
  45. import projectArea2 from '@/assets/geojson/kaifeng/projectArea2.json';
  46.  
  47. const emitM = defineEmits();
  48. const listDataXm = ref([]);
  49. const listActive = ref({});
  50. const searvhDate = ref('');
  51. const projectTimer = ref(null);
  52. const obj = {
  53. 海绵建筑与社区: jzsq,
  54. 海绵型道路广场: dlgc,
  55. 海绵型公园绿地: gyld,
  56. 海绵型水系: hmsx,
  57. 管网排查与修复: gwpc,
  58. 管网及泵站: gwpz,
  59. GIS平台建设与监测设施: ptss,
  60. 其他: qt,
  61. };
  62.  
  63. const getIcon = name => {
  64. return obj[name];
  65. };
  66. let layerList = ['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'];
  67. async function projectInfoNewM(p) {
  68. console.log('ppppp---', p);
  69. let { data, code } = await projectInfoNew(p);
  70. if (code == 200) {
  71. //newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
  72. listDataXm.value = data;
  73. }
  74. }
  75. //海绵工程gis渲染
  76. const addProjectLayers = async () => {
  77. let typeList = ['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other'];
  78. let colorList = [
  79. 'rgba(187, 129, 255,1)',
  80. 'rgba(253, 184, 100,1)',
  81. 'rgba(7, 183, 32,1)',
  82. 'rgba(104, 176, 255,1)',
  83. 'rgba(234, 116, 76,1)',
  84. 'rgba(42, 231, 230,1)',
  85. 'rgba(229, 64, 50,1)',
  86. 'rgba(220, 220, 157,1)',
  87. ];
  88. let { data, code } = await projectInfoNew();
  89. let pointList = [],
  90. lineList = [],
  91. polygonList = [];
  92. if (code == 200) {
  93. data.forEach((element, index) => {
  94. element.fillcolor = colorList[typeList.indexOf(element.projectTypeCode)];
  95. if (element.projectrange) {
  96. let geometryToFrature = {
  97. type: 'Feature',
  98. geometry: Terraformer.WKT.parse(element.projectrange),
  99. properties: {
  100. fillcolor: element.fillcolor,
  101. projectNo: element.projectNo,
  102. name: element.projectAbbreviation,
  103. projectName: element.projectName,
  104. projectNo: element.projectNo,
  105. projectLocation: element.projectLocation,
  106. id: element.id,
  107. geometry: element.projectrange,
  108. },
  109. };
  110. if (element.projectrange.includes('POINT')) {
  111. pointList.push(geometryToFrature);
  112. } else if (element.projectrange.includes('LINESTRING')) {
  113. lineList.push(geometryToFrature);
  114. } else if (element.projectrange.includes('POLYGON')) {
  115. polygonList.push(geometryToFrature);
  116. }
  117. }
  118. });
  119. let pointGeojson = {
  120. type: 'FeatureCollection',
  121. features: pointList,
  122. };
  123. let lineGeojson = {
  124. type: 'FeatureCollection',
  125. features: lineList,
  126. };
  127. let polygonGeojson = {
  128. type: 'FeatureCollection',
  129. features: polygonList,
  130. };
  131. // 项目名称图层
  132. newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('polygonGeojson', polygonGeojson, 12);
  133. newfiberMapBoxVectorLayer.addGeojsonLineWithLabel('lineGeojson', lineGeojson, 5, 12);
  134. newfiberMapBoxVectorLayer.addGeojsonCircleWithLabel('pointGeojson', pointGeojson, 12);
  135. }
  136. };
  137. const AllData = reactive({
  138. queryParams: {},
  139. });
  140. const ProjectClick = async row => {
  141. listActive.value = row;
  142. listDataXm.value.map(i => {
  143. if (row.id == i.id) {
  144. i.checked = !i.checked;
  145. } else {
  146. i.checked = false;
  147. }
  148. });
  149.  
  150. //newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
  151. let arr = listDataXm.value.filter(i => i.checked);
  152. emitM('qipaoDateMeth', arr[0], arr[0]?.checked);
  153. let lonlat = row.projectLocation.split(',').map(Number);
  154. newfiberMapbox.map.easeTo({
  155. center: lonlat,
  156. zoom: 15.5,
  157. pitch: 30,
  158. });
  159. };
  160.  
  161. const { queryParams } = toRefs(AllData);
  162. function stationListChange(v) {
  163. projectInfoNewM({ projectNo: v });
  164. }
  165.  
  166. projectInfoNewM();
  167. bus.on('getProjectList', (i, v) => {
  168. if (i.length > 0) projectInfoNewM({ buildStatus: i[0]?.buildStatus });
  169. else projectInfoNewM({ projectTypeId: i.typeId });
  170. });
  171. onMounted(() => {
  172. bus.emit('setIniteLayer', []);
  173. addProjectLayers();
  174.  
  175. newfiberMapbox.map.easeTo({
  176. center: [114.345, 34.801],
  177. zoom: 13.8,
  178. pitch: 30,
  179. });
  180. // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea', projectArea, 20, 0.4, 0.6);
  181. // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea_dynamicLine', projectArea, 3, 0.8);
  182. // let lineWidth = 1;
  183. // projectTimer.value = setInterval(() => {
  184. // lineWidth += 0.5;
  185. // if (lineWidth > 10) {
  186. // lineWidth = 3;
  187. // }
  188. // newfiberMapbox.map.setPaintProperty('projectArea_dynamicLine', 'line-width', lineWidth);
  189. // });
  190. //项目边界
  191. let layer = new mapboxL7.LineLayer({
  192. name: 'projectArea',
  193. })
  194. .source(projectArea)
  195. .size(40)
  196. .shape('wall')
  197. .style({
  198. opacity: 1,
  199. sourceColor: '#1cd66c',
  200. targetColor: 'rbga(0,255,255, 1)',
  201. });
  202. newfiberMapbox.addLayer(layer);
  203.  
  204. let layer2 = new mapboxL7.LineLayer({
  205. name: 'projectArea2',
  206. })
  207. .source(projectArea2)
  208. .size(40)
  209. .shape('wall')
  210. .style({
  211. opacity: 1,
  212. sourceColor: '#0075ff',
  213. targetColor: 'rbga(0,255,255, 1)',
  214. });
  215. newfiberMapbox.addLayer(layer2);
  216.  
  217. let layer1 = new mapboxL7.LineLayer({
  218. name: 'projectArea1',
  219. })
  220. .source(projectArea1)
  221. .size(40)
  222. .shape('wall')
  223. .style({
  224. opacity: 1,
  225. sourceColor: '#fcc424',
  226. targetColor: 'rbga(0,255,255, 1)',
  227. });
  228. newfiberMapbox.addLayer(layer1);
  229.  
  230. newfiberMapbox.map.on('click', ['selectPoint', 'selectPolyLine', 'selectPolygon'], e => {
  231. const feature = newfiberMapbox.map
  232. .queryRenderedFeatures([
  233. [e.point.x - 10 / 2, e.point.y - 10 / 2],
  234. [e.point.x + 10 / 2, e.point.y + 10 / 2],
  235. ])
  236. .filter(i => !!i.layer.id)[0];
  237. let properties = feature.properties;
  238. ProjectClick(properties);
  239. console.log('feature--', '海绵项目点击事件', properties);
  240. });
  241. newfiberMapbox.map.on('mouseenter', ['polygonGeojson', 'lineGeojson', 'pointGeojson'], e => {
  242. let selectPoint = {},
  243. selectPolyLine = {},
  244. selectPolygon = {};
  245. const feature = newfiberMapbox.map
  246. .queryRenderedFeatures([
  247. [e.point.x - 10 / 2, e.point.y - 10 / 2],
  248. [e.point.x + 10 / 2, e.point.y + 10 / 2],
  249. ])
  250. .filter(i => !!i.layer.id)[0];
  251. let properties = feature.properties;
  252. console.log('feature--', '海绵项目点击事件', properties);
  253. let geometryToFrature = {
  254. type: 'Feature',
  255. geometry: Terraformer.WKT.parse(properties.geometry),
  256. properties: {
  257. fillcolor: 'rgba(17, 87, 153,1)',
  258. projectNo: properties.projectNo,
  259. name: properties.projectAbbreviation,
  260. projectName: properties.projectName,
  261. projectNo: properties.projectNo,
  262. projectLocation: properties.projectLocation,
  263. id: properties.id,
  264. },
  265. };
  266. if (properties.geometry.includes('POINT')) {
  267. selectPoint = {
  268. type: 'FeatureCollection',
  269. features: [geometryToFrature],
  270. };
  271. } else if (properties.geometry.includes('LINESTRING')) {
  272. selectPolyLine = {
  273. type: 'FeatureCollection',
  274. features: [geometryToFrature],
  275. };
  276. } else if (properties.geometry.includes('POLYGON')) {
  277. selectPolygon = {
  278. type: 'FeatureCollection',
  279. features: [geometryToFrature],
  280. };
  281. }
  282. if (selectPolygon.features) {
  283. newfiberMapBoxVectorLayer.addGeojsonPolygon('selectPolygon', selectPolygon);
  284. newfiberMapbox.map.moveLayer('selectPolygon', 'polygonGeojson_label');
  285. }
  286. if (selectPolyLine.features) {
  287. newfiberMapBoxVectorLayer.addGeojsonLine('selectPolyLine', selectPolyLine, 5);
  288. newfiberMapbox.map.moveLayer('selectPolyLine', 'lineGeojson_label');
  289. }
  290. if (selectPoint.features) {
  291. newfiberMapBoxVectorLayer.addGeojsonCircle('selectPoint', selectPoint);
  292. newfiberMapbox.map.moveLayer('selectPoint', 'pointGeojson_label');
  293. }
  294. });
  295. newfiberMapbox.map.on('mouseleave', ['polygonGeojson', 'lineGeojson', 'pointGeojson'], e => {
  296. newfiberMapBoxVectorLayer.removeByIds(['selectPoint', 'selectPolyLine', 'selectPolygon']);
  297. });
  298. // newfiberMap.setCenter({
  299. // lng: 114.322,
  300. // lat: 34.602,
  301. // heading: 2.281299097855777,
  302. // zoom: 10358.12942752382,
  303. // pitch: -25.2508969308367,
  304. // roll: 0.005453465256790101,
  305. // });
  306. });
  307. onBeforeUnmount(() => {
  308. clearInterval(projectTimer.value);
  309. if (!newfiberMapbox) return;
  310. newfiberMapBoxVectorLayer.removeByIds([
  311. 'polygonGeojson',
  312. 'lineGeojson',
  313. 'pointGeojson',
  314. 'polygonGeojson_label',
  315. 'lineGeojson_label',
  316. 'pointGeojson_label',
  317. 'projectArea',
  318. 'projectArea_dynamicLine',
  319. ]);
  320. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea'));
  321. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea1'));
  322. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea2'));
  323. });
  324. </script>
  325.  
  326. <style lang="scss" scoped>
  327. .ConstrucClass {
  328. width: 100%;
  329. height: calc(100vh - 770px);
  330. background: #004565;
  331. opacity: 0.8;
  332. margin-top: -5px;
  333. .HeadContent {
  334. width: 100%;
  335. margin-top: 2px;
  336. }
  337. .ConstrucNr {
  338. width: 100%;
  339. height: 76%;
  340. overflow: auto;
  341. margin-top: -20px;
  342. .listXm {
  343. position: relative;
  344. width: 95%;
  345. height: 50px;
  346. background: url('@/assets/newImgs/HMScreen/ujnasf.png') no-repeat;
  347. background-size: 100% 100%;
  348. display: flex;
  349. margin: 5px auto;
  350. .Icon_zp {
  351. width: 32px;
  352. height: 32px;
  353. position: relative;
  354. top: 9px;
  355. left: 20px;
  356. // background: red;
  357. }
  358. .XmName {
  359. position: relative;
  360. left: 70px;
  361. top: 15px;
  362. width: 315px;
  363. height: 50px;
  364. // background: red;
  365. overflow: hidden;
  366. white-space: nowrap; /* 防止文字换行 */
  367. text-overflow: ellipsis;
  368. }
  369. }
  370. }
  371. }
  372.  
  373. :deep(.el-input__inner) {
  374. background: #11559b !important;
  375. // box-shadow: 0 0 0 0.00521rem #066592 inset !important;
  376. color: #fff !important;
  377. width: 390px !important;
  378. }
  379. :deep(.el-input__wrapper, .el-textarea__inner) {
  380. background: #11559b !important;
  381. // box-shadow: 0 0 0 0.00521rem inset !important;
  382. color: #fff !important;
  383. }
  384. :deep(.el-form-item__content) {
  385. margin: 10px;
  386. }
  387. .activeConstruListA {
  388. color: #cbc05a;
  389. }
  390. :deep(.scroll > div > :nth-child(2)) {
  391. display: none !important;
  392. }
  393. </style>