Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / shuiwuyuansu.vue
@zhangqy zhangqy on 29 Nov 2 KB first commit
  1. <template>
  2. <div id="shuiwuyuansu">
  3. <div class="boxitem" v-for="item in leftList" :key="item">
  4. <div class="leftbox">
  5. {{ item.pointTypeName }}
  6. </div>
  7. <div class="rightbox">
  8. <div
  9. class="pumpName"
  10. :class="p.id == getdataid ? 'actived' : ''"
  11. @click="pumpclick(p)"
  12. :title="p.name"
  13. v-for="p in item.data"
  14. :key="p"
  15. >
  16. {{ p.name }}
  17. </div>
  18. </div>
  19. </div>
  20.  
  21. <div class="dialog" v-if="showdia">
  22. <div class="closedia" @click="showdia = false">x</div>
  23. <JichuXinxi :dataID="getdataid" :dataCode="getdataCode"></JichuXinxi>
  24. </div>
  25. </div>
  26. </template>
  27.  
  28. <script setup name="shuiwuyuansu">
  29. import JichuXinxi from '@/views/pictureOnMap/page/components/DialogTabs/component/JichuXinxi.vue';
  30. import { getWaterRegionData, getRegionData, getReservoirData } from '@/api/MonitorAssetsOnMap';
  31.  
  32. const props = defineProps({
  33. // 数据id
  34. dataID: {
  35. type: [String, Number],
  36. },
  37. dataCode: {
  38. type: String,
  39. },
  40. });
  41.  
  42. const getdataCode = ref('');
  43. const getdataid = ref('');
  44. const leftList = ref([
  45. // {
  46. // pointTypeName: '泵站',
  47. // type: 'bengzhan',
  48. // data: [
  49. // { name: '泵站1xxxxxxxxxx', value: '1' },
  50. // { name: '泵站2', value: '2' },
  51. // { name: '泵站3', value: '3' },
  52. // { name: '泵站3', value: '3' },
  53. // { name: '泵站3', value: '3' },
  54. // { name: '泵站3', value: '3' },
  55. // ],
  56. // },
  57. ]);
  58.  
  59. const showdia = ref(false);
  60.  
  61. function pumpclick(item) {
  62. console.log('点击的每一项', item);
  63. showdia.value = false;
  64. getdataid.value = item.id;
  65. getdataCode.value = item.pointType;
  66. showdia.value = true;
  67. }
  68.  
  69. function Getlist() {
  70. let params = {
  71. id: props.dataID,
  72. };
  73. let api = '';
  74. if (props.dataCode == 'region_info') {
  75. api = getRegionData;
  76. }
  77. if (props.dataCode == 'water_region_info') {
  78. api = getWaterRegionData;
  79. }
  80.  
  81. if (props.dataCode == 'lake_info') {
  82. api = getReservoirData;
  83. }
  84.  
  85. api(params).then(res => {
  86. console.log(res);
  87. leftList.value = res.data;
  88. });
  89. }
  90.  
  91. onMounted(() => {
  92. console.log('props', props);
  93. Getlist();
  94. });
  95. </script>
  96.  
  97. <style lang="scss" scoped>
  98. @import '@/assets/styles/mapcss.scss';
  99.  
  100. #shuiwuyuansu {
  101. width: 100%;
  102. height: 100%;
  103. overflow: hidden;
  104. overflow-y: auto;
  105. padding: 0 20px;
  106. position: relative;
  107. color: #ccefff;
  108.  
  109. .dialog {
  110. padding-top: 20px;
  111. position: absolute;
  112. width: 75%;
  113. height: 95%;
  114. right: 2%;
  115. bottom: 2%;
  116. z-index: 999;
  117. background: rgba(51, 95, 141, 0.9);
  118. border-radius: 5px;
  119. overflow: hidden;
  120.  
  121. .closedia {
  122. cursor: pointer;
  123. position: absolute;
  124. right: 10px;
  125. top: 5px;
  126. }
  127. }
  128. }
  129. </style>