Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / rengongshuizhi.vue
@zhangqy zhangqy on 29 Nov 3 KB first commit
  1. <template>
  2. <div id="rengongshuizhi">
  3. <div class="topfilter">
  4. <div class="selectbox">
  5. <div class="label">年度范围选择:</div>
  6. <div class="input">
  7. <el-date-picker
  8. v-model="value1"
  9. type="yearrange"
  10. range-separator="-"
  11. start-placeholder="开始年份"
  12. end-placeholder="结束年份"
  13. />
  14. </div>
  15. </div>
  16. </div>
  17. <div class="bottomtable">
  18. <el-table height="calc(100% - 50px)" v-loading="loading" :data="tablelist">
  19. <el-table-column label="监测点位" align="center" prop="dataCode">
  20. <template #default="{ row }">
  21. <!-- <dict-tag :options="basis_data_type" :value="row.dataCode" /> -->
  22. </template>
  23. </el-table-column>
  24. <el-table-column label="检测日期" align="center" prop="dataName" />
  25. <el-table-column label="当前水质" align="center" prop="stType">
  26. <template #default="{ row }">
  27. <!-- <dict-tag :options="basis_site_type" :value="row.stType" /> -->
  28. </template>
  29. </el-table-column>
  30. <el-table-column label="目标水质" align="center" prop="stName" />
  31. <el-table-column label="达标情况" align="center" prop="stConfigsName" />
  32. <el-table-column label="营养状态" align="center" prop="stConfigsName" />
  33. <el-table-column width="200" label="主要污染物及超标倍数" align="center" prop="stConfigsName" />
  34. <el-table-column label="数据来源" align="center" prop="stConfigsName" />
  35. </el-table>
  36.  
  37. <pagination
  38. v-show="total > 0"
  39. :total="total"
  40. v-model:page="queryParams.pageNum"
  41. v-model:limit="queryParams.pageSize"
  42. @pagination="getList"
  43. />
  44. </div>
  45. </div>
  46. </template>
  47.  
  48. <script setup name="rengongshuizhi">
  49. const value1 = ref('');
  50. const onelist = ref([
  51. {
  52. name: '全部',
  53. value: '',
  54. },
  55. {
  56. name: '需要监测',
  57. value: '2',
  58. },
  59. {
  60. name: '已监测',
  61. value: '3',
  62. },
  63. {
  64. name: '无需监测',
  65. value: '4',
  66. },
  67. ]);
  68. const twolist = ref([
  69. {
  70. name: '全部',
  71. value: '',
  72. },
  73. {
  74. name: '整治完成',
  75. value: '2',
  76. },
  77. {
  78. name: '整治中',
  79. value: '3',
  80. },
  81. {
  82. name: '无需整治',
  83. value: '4',
  84. },
  85. ]);
  86. const threelist = ref([
  87. {
  88. name: '全部',
  89. value: '',
  90. },
  91. {
  92. name: '无需溯源',
  93. value: '2',
  94. },
  95. {
  96. name: '一级溯源',
  97. value: '3',
  98. },
  99. {
  100. name: '二级溯源',
  101. value: '4',
  102. },
  103. ]);
  104. const total = ref(0);
  105. const paikouType = ref('');
  106. const paikouTypeList = ref([{}]);
  107.  
  108. const loading = ref(true);
  109. const tablelist = ref([]);
  110.  
  111. const queryParams = ref({
  112. pageNum: 1,
  113. pageSize: 10,
  114. one: '',
  115. two: '4',
  116. three: '2',
  117. });
  118.  
  119. function getList() {
  120. loading.value = false;
  121. // pagedataCameraRelation(queryParams.value).then(response => {
  122. // dataCameraRelationList.value = response.data;
  123. // total.value = response.total;
  124. // loading.value = false;
  125. // });
  126. }
  127.  
  128. function onechange(item) {
  129. queryParams.value.one = item.value;
  130. }
  131.  
  132. function twochange(item) {
  133. queryParams.value.two = item.value;
  134. }
  135. function threechange(item) {
  136. queryParams.value.three = item.value;
  137. }
  138.  
  139. onMounted(() => {
  140. getList();
  141. });
  142. </script>
  143.  
  144. <style lang="scss" scoped>
  145. @import '@/assets/styles/mapcss.scss';
  146.  
  147. #rengongshuizhi {
  148. width: 100%;
  149. height: 100%;
  150. padding: 0 10px;
  151. color: #ccefff;
  152. }
  153.  
  154. :deep(.el-select .el-input) {
  155. height: 25px;
  156. }
  157.  
  158. :deep(.el-input__wrapper) {
  159. height: 25px;
  160. }
  161. </style>