Newer
Older
KaiFengPC / src / views / spongePerformance / waterUtilizationRate / surfaceWater / index.vue
@zhangdeliang zhangdeliang on 17 Oct 5 KB update
  1. <template>
  2. <div class="water-analysis-page">
  3. <div class="top">
  4. <div class="top" v-if="!isComponent">
  5. <div class="icon">
  6. <!-- <div class="tittle">地表水水体年度考核统计表</div> -->
  7. <todoDon ref="todoDonRef" :params="tableData" @searchClick="searchClick" @clicksurfaceWater="clicksurfaceWater"></todoDon>
  8. </div>
  9. <div class="tuli">
  10. <div style="margin: 10px; font-size: 18px">图例</div>
  11. <div v-for="i in tuliList" class="tuli_img">
  12. <img :src="i.icon" alt="" />
  13. <div>{{ i.label }}</div>
  14. </div>
  15. </div>
  16. <!-- gis地图 -->
  17. <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`" class="surfaceWatermaps"></MapBox>
  18. </div>
  19. <detial v-else-if="isComponent == 1" @searchClick="searchClick" :paramsData="params"></detial>
  20. </div>
  21. <div class="PopupWaterlogging" id="PopupWaterlogging" v-if="pipePopupShow">
  22. <div class="titleTop">
  23. <el-tabs class="PopupWaterloggingtabs">
  24. <el-tab-pane label="当前地表水本年度水质监测情况">
  25. <el-table
  26. ref="tableModal"
  27. :data="tableData2"
  28. max-height="230"
  29. v-loading="tableLoading"
  30. @row-click="clickModal"
  31. highlight-current-row
  32. ><el-table-column label="考核水体" prop="riverName" />
  33. <el-table-column label="采样时间" prop="sampleTime" width="150" />
  34. <el-table-column label="溶解氧mg/L" prop="DOX" />
  35. <el-table-column label="高猛酸盐指数mg/L" prop="BOD" />
  36. <el-table-column label="氨氮mg/L" prop="NH3N" />
  37. <el-table-column label="总磷mg/L" prop="TP1" />
  38. <el-table-column label="水质类别" prop="waterQualityName" />
  39. <el-table-column label="目标水质类别" prop="targetWaterQualityName" />
  40. </el-table>
  41. </el-tab-pane>
  42. </el-tabs>
  43. </div>
  44. <div class="closePopup">
  45. <el-icon :size="18" @click="closePopup"><Close /></el-icon>
  46. </div>
  47. </div>
  48. </div>
  49. </template>
  50. <script setup>
  51. import detial from './detial/index';
  52. import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
  53. import todoDon from './todoDon.vue';
  54. import { waterQualitySampleInfopaging } from '@/api/spongePerformance/surfaceWater';
  55. const { proxy } = getCurrentInstance();
  56. const pipePopupShow = ref(false);
  57. const todoDonRef = ref(null);
  58. const tableData2 = ref([]);
  59. let isComponent = ref(0);
  60. let tuliList = ref([
  61. { label: '不达标', id: 0, icon: '/images/1.1.jpg' },
  62. { label: '达标', id: 1, icon: '/images/1.2.jpg' },
  63. ]);
  64. const closePopup = () => {
  65. pipePopupShow.value = false;
  66. };
  67. //动态组件
  68. let dataForm = reactive({
  69. tableData: { itemDataType: 'NLFZBZ' },
  70. tableDateTwo: '',
  71. tableLoading: true,
  72. });
  73. let { tableData } = toRefs(dataForm);
  74. const params = ref({});
  75. function searchClick(row) {
  76. params.value = row;
  77. isComponent.value = row.type;
  78. }
  79. /** 搜索地表水本年度水质监测情况 */
  80. const getDataList = async val => {
  81. let params = {
  82. pageNum: 1,
  83. pageSize: 999,
  84. riverId: val.riverId,
  85. sampleYear: val.examineYear,
  86. };
  87. const res = await waterQualitySampleInfopaging(params);
  88. pipePopupShow.value = true;
  89. tableData2.value = [];
  90. tableData2.value = res.data.records;
  91. console.log(tableData2.value, 999999999);
  92. };
  93.  
  94. const clicksurfaceWater = row => {
  95. pipePopupShow.value = true;
  96. getDataList(row);
  97. };
  98. onMounted(() => {});
  99. </script>
  100. <style lang="scss" scoped>
  101. @import '@/assets/styles/variables.module.scss';
  102. #map {
  103. width: 100%;
  104. height: 100%;
  105. }
  106. .form {
  107. left: 10px;
  108. top: 10px;
  109. z-index: 111;
  110. position: absolute;
  111. width: 20%;
  112. }
  113. .top {
  114. position: relative;
  115. height: 86vh;
  116. }
  117. .icon {
  118. right: 0;
  119. top: 0;
  120. z-index: 111;
  121. position: absolute;
  122. width: 70%;
  123. }
  124. .tuli {
  125. left: 20px;
  126. bottom: 30px;
  127. z-index: 111;
  128. position: absolute;
  129. padding: 10px;
  130. background: $mainColor1;
  131. // display: flex;
  132. align-items: center;
  133. text-align: center;
  134. color: #fff;
  135.  
  136. .tuli_img {
  137. display: flex;
  138. align-items: center;
  139. margin-top: 8px;
  140. img {
  141. margin-right: 10px;
  142. width: 25px;
  143. }
  144. }
  145. }
  146. .tittle {
  147. font-size: 16px;
  148. font-weight: bold;
  149. width: 200px;
  150. height: 40px;
  151. line-height: 40px;
  152. text-align: center;
  153. margin: 5px 0;
  154. color: #fff;
  155. }
  156.  
  157. .water-analysis-page {
  158. padding: 20px;
  159. overflow-y: hidden;
  160. }
  161. #PopupWaterlogging {
  162. position: fixed;
  163. left: 52%;
  164. top: 45%;
  165. transform: translate(-50%, -50%);
  166. width: 650px;
  167. height: 310px;
  168. background: #021534;
  169. border: 1px solid #114f89;
  170. z-index: 2000;
  171. display: flex;
  172.  
  173. .titleTop {
  174. width: 90%;
  175. display: flex;
  176. padding-top: 8px;
  177. margin-left: 20px;
  178. }
  179. .closePopup {
  180. width: 5%;
  181. margin: 15px;
  182. cursor: pointer;
  183. }
  184. .PopupWaterloggingtabs {
  185. width: 100%;
  186. }
  187. }
  188. .l7-popup-tip {
  189. display: none !important;
  190. }
  191. .l7-popup .l7-popup-content {
  192. padding: 0px;
  193. background: rgba(3, 59, 79, 0) !important;
  194. }
  195. .l7-popup-content {
  196. padding: 0px;
  197. background: rgba(3, 59, 79, 0) !important;
  198. }
  199. .l7-popup .l7-popup-content .l7-popup-close-button {
  200. display: none !important;
  201. }
  202. </style>