Newer
Older
KaiFengPC / src / views / sponeScreen / longYW / index.vue
@zhangdeliang zhangdeliang on 21 Aug 3 KB update
  1. <template>
  2. <!-- 海绵综合一张图 长效运维 -->
  3. <div class="publicContainer">
  4. <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
  5. <!-- 巡查任务 -->
  6. <InspectionTasks></InspectionTasks>
  7. <!-- 污水厂进口BOD -->
  8. <SewageBOD></SewageBOD>
  9. <!-- 监测站点统计 -->
  10. <MonitoringStation></MonitoringStation>
  11. </div>
  12.  
  13. <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
  14. <!-- 公众建议 -->
  15. <PublicAdvice></PublicAdvice>
  16. <!-- 宣传培训 -->
  17. <PromotionTraining></PromotionTraining>
  18. <!-- 人工采样 -->
  19. <ManualSampling></ManualSampling>
  20. </div>
  21. </div>
  22. </template>
  23.  
  24. <script setup>
  25. const showPanel = ref(true); //面板展开收起
  26. import InspectionTasks from '@/views/sponeScreen/longYW/InspectionTasks.vue'; //建设状态
  27. import SewageBOD from '@/views/sponeScreen/longYW/SewageBOD.vue'; //建设状态
  28. import MonitoringStation from '@/views/sponeScreen/longYW/MonitoringStation.vue'; //监测站点统计
  29. import PublicAdvice from '@/views/sponeScreen/longYW/PublicAdvice.vue'; //公众建议
  30. import PromotionTraining from '@/views/sponeScreen/longYW/PromotionTraining.vue'; //宣传培训
  31. import ManualSampling from '@/views/sponeScreen/longYW/ManualSampling.vue'; //人工采样
  32. import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
  33. import track from '@/assets/geojson/kaifeng/track.json';
  34. import car from '@/assets/newImgs/car.png';
  35. import { onBeforeUnmount } from 'vue';
  36. const { proxy } = getCurrentInstance();
  37. // 面板内容展开收起控制
  38. const props = defineProps({
  39. showPanel: {
  40. type: Boolean,
  41. },
  42. });
  43. watch(
  44. () => props.showPanel,
  45. () => {
  46. showPanel.value = props.showPanel;
  47. },
  48. { immediate: true }
  49. );
  50. onMounted(() => {
  51. newfiberMapBoxVectorLayer.addDynamicRoute('dynamicRoute', track, car);
  52. let warningPointGeojson = {
  53. type: 'FeatureCollection',
  54. features: [
  55. {
  56. type: 'Feature',
  57. geometry: {
  58. type: 'Point',
  59. coordinates: [114.366855, 34.796715],
  60. },
  61. properties: { pumpName: '汴京公园管网监测点(离线)' },
  62. },
  63. {
  64. type: 'Feature',
  65. geometry: {
  66. type: 'Point',
  67. coordinates: [114.325848, 34.80415],
  68. },
  69. properties: { pumpName: '梁苑小学管网监测点(故障)' },
  70. },
  71. ],
  72. };
  73. let pointLayer2 = new mapboxL7.PointLayer({
  74. name: 'waringPoint',
  75. })
  76. .source(warningPointGeojson, {
  77. parser: {
  78. type: 'geojson',
  79. },
  80. })
  81. .shape('circle')
  82. .active(true)
  83. .animate(true)
  84. .size(50)
  85. .color('#f00');
  86. let pointLayer3 = new mapboxL7.PointLayer({
  87. name: 'waringPointLabel',
  88. })
  89. .source(warningPointGeojson, {
  90. parser: {
  91. type: 'geojson',
  92. },
  93. })
  94. .shape('pumpName', 'text')
  95. .active(true)
  96. .animate(true)
  97. .size(17)
  98. .color('#f00')
  99. .style({
  100. textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
  101. textOffset: [0, 30], // 文本相对锚点的偏移量 [水平, 垂直]
  102. spacing: 2, // 字符间距
  103. stroke: '#ffffff', // 描边颜色
  104. strokeWidth: 0.3, // 描边宽度
  105. strokeOpacity: 1.0,
  106. fontFamily: 'Times New Roman',
  107. textAllowOverlap: true,
  108. });
  109. newfiberMapbox.addLayer(pointLayer2);
  110. newfiberMapbox.addLayer(pointLayer3);
  111. newfiberMapbox.map.easeTo({
  112. center: [114.342, 34.795],
  113. zoom: 13,
  114. });
  115. });
  116. onBeforeUnmount(() => {
  117. newfiberMapBoxVectorLayer.removeByIds(['dynamicRoute', 'dynamicRoute_Symbol', 'dynamicRoute_Symbol_1']);
  118. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waringPoint'));
  119. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waringPointLabel'));
  120. clearInterval(window.routeTimer);
  121. clearInterval(window.routeTimer_1);
  122. window.routeTimer = null;
  123. window.routeTimer_1 = null;
  124. });
  125. </script>
  126.  
  127. <style lang="scss" scoped></style>