Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / difangbeiliaoinfo.vue
@zhangqy zhangqy on 29 Nov 5 KB first commit
  1. <template>
  2. <!-- 堤防备料点详情 -->
  3. <div class="difangbeiliaoinfo">
  4. <div class="dialog-detail-box">
  5. <div class="dialog-form-detail flex flex-r flex-wrap">
  6. <div class="flex flex-r">
  7. <div class="detail-label flex flex-align-center">堤防</div>
  8. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.dikeName">
  9. {{ dialogFormDetail.dikeName }}
  10. </div>
  11. </div>
  12. <div class="flex flex-r">
  13. <div class="detail-label flex flex-align-center">小计</div>
  14. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.subtotal">
  15. {{ dialogFormDetail.subtotal }}
  16. </div>
  17. </div>
  18. <div class="flex flex-r">
  19. <div class="detail-label flex flex-align-center">分口</div>
  20. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.splitter">
  21. {{ dialogFormDetail.splitter }}
  22. </div>
  23. </div>
  24. <div class="flex flex-r">
  25. <div class="detail-label flex flex-align-center">瓜米</div>
  26. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.meter">
  27. {{ dialogFormDetail.meter }}
  28. </div>
  29. </div>
  30. <div class="flex flex-r">
  31. <div class="detail-label flex flex-align-center">片石</div>
  32. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.flag">
  33. {{ dialogFormDetail.flag }}
  34. </div>
  35. </div>
  36. <div class="flex flex-r">
  37. <div class="detail-label flex flex-align-center">黄砂</div>
  38. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.ground">
  39. {{ dialogFormDetail.ground }}
  40. </div>
  41. </div>
  42. <div class="flex flex-r">
  43. <div class="detail-label flex flex-align-center">黄土</div>
  44. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.loess">
  45. {{ dialogFormDetail.loess }}
  46. </div>
  47. </div>
  48. <div class="flex flex-r">
  49. <div class="detail-label flex flex-align-center">桩号</div>
  50. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.stakeMark">
  51. {{ dialogFormDetail.stakeMark }}
  52. </div>
  53. </div>
  54.  
  55. <div class="flex flex-r">
  56. <div class="detail-label flex flex-align-center">权属</div>
  57. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.district">
  58. <dict-tag :options="levee_preparation_area" :value="dialogFormDetail.district" />
  59. </div>
  60. </div>
  61. <div class="flex flex-r">
  62. <div class="detail-label flex flex-align-center">位置</div>
  63. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.seat">
  64. {{ dialogFormDetail.seat }}
  65. </div>
  66. </div>
  67. <div class="flex flex-r">
  68. <div class="detail-label flex flex-align-center">备注</div>
  69. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.remark">
  70. {{ dialogFormDetail.remark }}
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </template>
  77. <script setup name="difangbeiliaoinfo">
  78. import { ref, reactive, onMounted } from 'vue';
  79. import { infoListallDFFXBL } from '@/api/MonitorAssetsOnMap';
  80.  
  81. const { proxy } = getCurrentInstance();
  82. const { levee_preparation_area } = proxy.useDict('levee_preparation_area');
  83.  
  84. const props = defineProps({
  85. // 数据id
  86. dataID: {
  87. type: [String, Number],
  88. },
  89. dataCode: {
  90. type: String,
  91. },
  92. // 默认打开tabs的key
  93. RefreshName: {
  94. type: String,
  95. },
  96. tabsType: {
  97. type: String,
  98. },
  99. typeName: {
  100. type: String,
  101. },
  102. });
  103. const dialogFormDetail = ref({});
  104.  
  105. function getDetailBycodeAndDataid() {
  106. let parmas = {
  107. id: props.dataID,
  108. };
  109. infoListallDFFXBL(parmas).then(res => {
  110. // 详情接口数据不全,所以调的列表接口
  111. dialogFormDetail.value = res.data[0] || [];
  112. });
  113. }
  114.  
  115. onMounted(() => {
  116. getDetailBycodeAndDataid();
  117. });
  118. </script>
  119. <style lang="scss" scoped>
  120. .difangbeiliaoinfo {
  121. width: 100%;
  122. height: 100%;
  123.  
  124. .dialog-detail-box {
  125. width: 100%;
  126. height: 100%;
  127. display: flex;
  128. padding: 0 10px;
  129. flex-wrap: wrap;
  130. overflow: hidden;
  131. overflow-y: auto;
  132. font-weight: bold;
  133.  
  134. .flex-r {
  135. min-height: 40px;
  136. max-height: 75px;
  137. }
  138.  
  139. .detail-label {
  140. font-size: 12px;
  141. text-align: left;
  142. width: 160px;
  143. background: transparent;
  144. color: #ccefff;
  145. border: none;
  146. }
  147.  
  148. .detail-value {
  149. font-size: 14px;
  150. text-align: left;
  151. width: calc(100% - 165px);
  152. align-items: center;
  153. background: transparent;
  154. color: #ccefff;
  155. border: none;
  156. align-items: center;
  157. overflow: hidden;
  158. }
  159.  
  160. .ellipsis {
  161. width: 100%;
  162. display: -webkit-box;
  163. -webkit-line-clamp: 3; /* 显示最大行数 */
  164. -webkit-box-orient: vertical;
  165. overflow: hidden;
  166. text-overflow: ellipsis;
  167. }
  168.  
  169. .dialog-form-detail {
  170. border: none;
  171. }
  172.  
  173. .dialog-form-detail .flex-r {
  174. border: none;
  175. }
  176. }
  177. }
  178. </style>