Newer
Older
KaiFengPC / src / views / sponeScreen / projectHM / index.vue
@jimengfei jimengfei on 30 Oct 2 KB updata
  1. <template>
  2. <!-- 海绵综合一张图 项目建设 -->
  3. <div class="publicContainer">
  4. <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
  5. <!-- 建设状态 -->
  6. <ConstructionStatus></ConstructionStatus>
  7. <!-- 降雨日历 -->
  8. <CaldarRain class="mt-5"></CaldarRain>
  9. <!-- 项目展示-->
  10. <ProjectDisplay @qipaoDateMeth="qipaoDateMeth" class="mt-5"></ProjectDisplay>
  11. </div>
  12. <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
  13. <!--项目评估 -->
  14. <ProjectEvaluation></ProjectEvaluation>
  15. </div>
  16. </div>
  17.  
  18. <!-- 项目详情 -->
  19. <qipao v-if="visibleqipao" @closed="closed" :allDateList="allDate"></qipao>
  20.  
  21. <!-- 管网监测点详情 -->
  22. <el-dialog v-model="showPipe" title="管网监测详情" width="1000px" append-to-body>
  23. <PipeDetail v-if="showPipe" :pipeParams="pipeParams" :ifReal="false"></PipeDetail>
  24. </el-dialog>
  25. </template>
  26. <script setup>
  27. import CaldarRain from '@/views/sponeScreen/waterFlood/rainCaldar.vue'; //降雨日历
  28. import ConstructionStatus from '@/views/sponeScreen/projectHM/ConstructionStatus.vue'; //建设状态
  29. import ProjectYype from '@/views/sponeScreen/projectHM/ProjectYype.vue'; //建设状态
  30. import ProjectDisplay from '@/views/sponeScreen/projectHM/ProjectDisplay.vue'; //项目展示
  31. import ProjectEvaluation from '@/views/sponeScreen/projectHM/ProjectEvaluation.vue'; //项目评估
  32. import qipao from '@/views/sponeScreen/projectHM/gongchenkanbani_comp/qipao.vue';
  33. import bus from '@/bus/index';
  34. import PipeDetail from '@/views/sponeScreen/waterFlood/pipeDetail.vue'; //管网监测点详情
  35.  
  36.  
  37. const { proxy } = getCurrentInstance();
  38. const showPanel = ref(true); //面板展开收起
  39. const visibleqipao = ref(false);
  40. const allDate = ref({});
  41. const showPipe = ref(false);
  42. const pipeParams = ref({});
  43.  
  44. // 面板内容展开收起控制
  45. const props = defineProps({
  46. showPanel: {
  47. type: Boolean,
  48. },
  49. });
  50. watch(
  51. () => props.showPanel,
  52. () => {
  53. showPanel.value = props.showPanel;
  54. },
  55. { immediate: true }
  56. );
  57. function qipaoDateMeth(v, isShow) {
  58. visibleqipao.value = false;
  59. allDate.value = v;
  60. setTimeout(() => {
  61. if (isShow) {
  62. visibleqipao.value = true;
  63. }
  64. }, 10);
  65. }
  66. function closed(v) {
  67. visibleqipao.value = v;
  68. newfiberMapbox.map.easeTo({
  69. center: [114.345, 34.801],
  70. zoom: 13.8,
  71. pitch: 30,
  72. });
  73. }
  74.  
  75. onMounted(() => {
  76. // 管网监测点
  77. bus.on('pipeMonitorBus', params => {
  78. pipeParams.value = params;
  79. showPipe.value = true;
  80. });
  81. });
  82. onBeforeUnmount(() => {
  83. bus.off('pipeMonitorBus');
  84. bus.emit('removeMapDatas', ['warning_monitor']);
  85. bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
  86. });
  87. </script>
  88.  
  89. <style lang="scss" scoped>
  90. .publicContainer {
  91. position: relative;
  92. }
  93. </style>