Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / bengzhandanganfenxi.vue
@zhangqy zhangqy on 29 Nov 3 KB first commit
  1. <template>
  2. <!-- 泵站档案信息 -->
  3. <div id="bengzhandanganfenxi" v-loading="loading"
  4. element-loading-background="rgba(11, 18, 52, 0.3)">
  5. <div class="flex flex-justcontent-spacebetween">
  6. <div class="eachInfo">
  7. <div class="name">泵站名称:</div>
  8. <div class="text">{{listData.name}}</div>
  9. </div>
  10. <div class="eachInfo">
  11. <div class="name">流域:</div>
  12. <div class="text">{{listData.waterRegionName}}</div>
  13. </div>
  14. </div>
  15. <div class="flex flex-justcontent-spacebetween">
  16. <div class="eachInfo">
  17. <div class="name">影响区域:</div>
  18. <div class="text">{{listData.discharge}}&nbsp;&nbsp;{{listData.elevation}}</div>
  19. </div>
  20. <div class="eachInfo">
  21. <div class="name">排出方向:</div>
  22. <div class="text">{{listData.discharge}}</div>
  23. </div>
  24. </div>
  25. <div class="eachInfo">
  26. <div class="name">泵站工艺:</div>
  27. <div class="text">{{listData.plan}}</div>
  28. </div>
  29. <div class="eachInfo">
  30. <div class="name">泵站介绍:</div>
  31. <div class="text">{{listData.description}}</div>
  32. </div>
  33. <div class="eachInfo">
  34. <div class="name">防汛专班联系人:</div>
  35. <div class="text">{{listData.dutyPerson}} {{listData.dutyPersonPhone}}</div>
  36. </div>
  37. <div class="eachInfo">
  38. <div class="name">泵站图纸:</div>
  39. <div>
  40. <el-image v-if="listData.imgArr?.length>0"
  41. style="width: 80px; height: 80px"
  42. :zoom-rate="1.2"
  43. :max-scale="7"
  44. :min-scale="0.2"
  45. :src="listData.imgArr[0]"
  46. fit="cover"
  47. :preview-src-list="listData.imgArr"
  48. :preview-teleported="true"
  49. ></el-image>
  50. </div>
  51. </div>
  52. </div>
  53. </template>
  54.  
  55. <script setup name="bengzhandanganfenxi">
  56. const { proxy } = getCurrentInstance();
  57. import {
  58. rainWaterPumpStationInfo,
  59. } from '@/api/FloodControlAndDrainage.js';
  60. const props = defineProps({
  61. // 数据id
  62. dataID: {
  63. type: String,
  64. },
  65. dataCode: {
  66. type: String,
  67. },
  68. arrstcode: {
  69. type: Array,
  70. },
  71. arrid: {
  72. type: Array,
  73. },
  74. Getproperties:{
  75. type: Object,
  76. }
  77. });
  78. // 获取数据
  79. const loading=ref(false)
  80. const listData=ref({})
  81.  
  82. function gitDataFun() {
  83. loading.value=true
  84. rainWaterPumpStationInfo(props.Getproperties.id).then(res => {
  85. console.log('渍水风险详情数据', res);
  86. loading.value=false
  87. if (res && res.code == 200) {
  88. listData.value=res.data
  89. listData.value.imgArr=listData.value.fileUrl?listData.value.fileUrl.split(','):[]
  90. }
  91. },(error)=>{
  92. loading.value=false
  93. });
  94. }
  95.  
  96.  
  97. onMounted(() => {
  98.  
  99. console.log('Getproperties123',props.Getproperties.dataId);
  100. gitDataFun()
  101.  
  102. });
  103. </script>
  104.  
  105. <style lang="scss" scoped>
  106. #bengzhandanganfenxi {
  107. width: 100%;
  108. height: 100%;
  109. color: #ccefff;
  110. padding: 20px 30px;
  111. overflow-y: auto;
  112. .eachInfo {
  113. display: flex;
  114. align-items: center;
  115. font-weight: bold;
  116. font-size: 14px;
  117. margin-bottom: 20px;
  118. .name {
  119. color: #ccdfff;
  120. min-width: 120px;
  121. text-align: right;
  122. padding-right: 10px;
  123. }
  124. .text {
  125. min-height: 37px;
  126. flex: 1;
  127. min-width: 300px;
  128. color: #8fbffe;
  129. background: #0d2359;
  130. border-radius: 6px;
  131. border: 1px solid #0b9bff;
  132. padding: 7px 12px;
  133. }
  134. }
  135. }
  136. </style>
  137.