Newer
Older
KaiFengPC / src / views / spongePerformance / waterUtilizationRate / odorousWaterBodies / index.vue
@zhangdeliang zhangdeliang on 17 Oct 3 KB update
  1. <template>
  2. <!-- 黑臭水体消除比例 -->
  3. <div class="water-analysis-page">
  4. <div class="icon">
  5. <todoDon ref="todoDonRef" :params="tableData" @searchClick="searchClick" @clicksWaterBodies="clicksWaterBodies"></todoDon>
  6. </div>
  7. <div class="tuli">
  8. <div style="margin: 10px; font-size: 18px">图例</div>
  9. <div v-for="i in tuliList" class="tuli_img">
  10. <img :src="i.icon" alt="" />
  11. <div>{{ i.label }}</div>
  12. </div>
  13. </div>
  14. <!-- gis地图 -->
  15. <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`"></MapBox>
  16. </div>
  17. </template>
  18. <script setup>
  19. import { blackOdorpaging, blackOdorpagingriverInfo } from '@/api/spongePerformance/surfaceWater';
  20. import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
  21. import todoDon from './todoDon.vue';
  22. import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
  23. const { proxy } = getCurrentInstance();
  24. const todoDonRef = ref(null);
  25. const pipePopupShow = ref(false);
  26. const popsdata = ref('');
  27. let isComponent = ref(0);
  28. let tuliList = ref([
  29. { label: '未考核', id: 0, icon: '/images/1.1.jpg' },
  30. { label: '已考核', id: 1, icon: '/images/1.2.jpg' },
  31. ]);
  32. const tableData2 = ref([]);
  33. //动态组件
  34. let dataForm = reactive({
  35. tableData: { itemDataType: 'NLFZBZ' },
  36. tableDateTwo: '',
  37. tableLoading: true,
  38. });
  39. let { tableData } = toRefs(dataForm);
  40. // 获取列表数据
  41. const params = ref({});
  42. function searchClick(row) {
  43. params.value = row;
  44. isComponent.value = row.type;
  45. }
  46.  
  47. /** 搜索列表 */
  48. const getDataList = async val => {
  49. let params = {
  50. pageNum: 1,
  51. pageSize: 999,
  52. riverId: val,
  53. };
  54. const res = await blackOdorpaging(params);
  55. pipePopupShow.value = true;
  56. tableData2.value = [];
  57. tableData2.value = res.data.records;
  58. };
  59. /** 搜索黑臭照片列表 */
  60. const getDatariverInfo = async val => {
  61. let params = {
  62. riverName: val,
  63. };
  64. const res = await blackOdorpagingriverInfo(params);
  65. if (res && res.code == 200) {
  66. popsdata.value = res.data[0];
  67. }
  68. };
  69.  
  70. const clicksWaterBodies = row => {
  71. let ids = '';
  72. if (row.riverId) {
  73. ids = row.riverId;
  74. } else {
  75. ids = row.id;
  76. }
  77. getDataList(ids);
  78. getDatariverInfo(row.riverName);
  79. };
  80. onMounted(() => {});
  81. </script>
  82. <style lang="scss">
  83. .hcstDialog {
  84. display: flex;
  85. flex-wrap: wrap;
  86. .part {
  87. width: 48%;
  88. margin-right: 2%;
  89. .title {
  90. font-size: 18px;
  91. font-weight: bold;
  92. color: #fff;
  93. }
  94. .chart {
  95. height: 300px !important;
  96. }
  97. }
  98. }
  99. @import '@/assets/styles/variables.module.scss';
  100.  
  101. .water-analysis-page {
  102. padding: 20px;
  103. height: 100%;
  104. position: relative;
  105. #map {
  106. width: 100%;
  107. height: 100%;
  108. }
  109. .form {
  110. left: 10px;
  111. top: 10px;
  112. z-index: 111;
  113. position: absolute;
  114. width: 20%;
  115. }
  116. .icon {
  117. right: 0;
  118. top: 0;
  119. z-index: 111;
  120. position: absolute;
  121. width: 800px;
  122. }
  123. .tuli {
  124. left: 20px;
  125. bottom: 30px;
  126. padding: 10px;
  127. z-index: 111;
  128. position: absolute;
  129. background: $mainColor1;
  130. flex-wrap: wrap;
  131. align-items: center;
  132. text-align: center;
  133. color: #fff;
  134. .tuli_img {
  135. display: flex;
  136. align-items: center;
  137. margin-top: 8px;
  138. img {
  139. margin-right: 10px;
  140. width: 25px;
  141. }
  142. }
  143. }
  144. }
  145. </style>