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