Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / wuransuyuan.vue
@zhangqy zhangqy on 29 Nov 4 KB first commit
  1. <template>
  2. <div id="wuransuyuan">
  3. <div class="topfilter">
  4. <div class="selectbox">
  5. <div class="label">是否监测:</div>
  6. <div
  7. class="value"
  8. v-for="item in onelist"
  9. :class="queryParams.one == item.value ? 'actived' : ''"
  10. :key="item"
  11. @click="onechange(item)"
  12. >
  13. {{ item.name }}
  14. </div>
  15. </div>
  16. <div class="selectbox">
  17. <div class="label">是否整治:</div>
  18. <div
  19. class="value"
  20. v-for="item in twolist"
  21. :class="queryParams.two == item.value ? 'actived' : ''"
  22. :key="item"
  23. @click="twochange(item)"
  24. >
  25. {{ item.name }}
  26. </div>
  27. </div>
  28. <div class="selectbox">
  29. <div class="label">是否溯源:</div>
  30. <div
  31. class="value"
  32. v-for="item in threelist"
  33. :class="queryParams.three == item.value ? 'actived' : ''"
  34. :key="item"
  35. @click="threechange(item)"
  36. >
  37. {{ item.name }}
  38. </div>
  39. </div>
  40. <div class="selectbox">
  41. <div class="label">排口类型:</div>
  42. <div class="input">
  43. <el-select v-model="paikouType" placeholder="请选择排口类型" clearable filterable style="width: 200px">
  44. <el-option v-for="dict in paikouTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
  45. </el-select>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="bottomtable">
  50. <el-table height="calc(100% - 50px)" v-loading="loading" :data="tablelist">
  51. <el-table-column label="排口名称" align="center" prop="dataCode">
  52. <template #default="{ row }">
  53. <!-- <dict-tag :options="basis_data_type" :value="row.dataCode" /> -->
  54. </template>
  55. </el-table-column>
  56. <el-table-column label="排口编号" align="center" prop="dataName" />
  57. <el-table-column label="排口类型" align="center" prop="stType">
  58. <template #default="{ row }">
  59. <!-- <dict-tag :options="basis_site_type" :value="row.stType" /> -->
  60. </template>
  61. </el-table-column>
  62. <el-table-column label="是否需要监测" align="center" prop="stName" />
  63. <el-table-column label="是否需要溯源" align="center" prop="stConfigsName" />
  64. <el-table-column label="是否需要整治" align="center" prop="stConfigsName" />
  65. <el-table-column label="排口形状" align="center" prop="stConfigsName" />
  66. </el-table>
  67.  
  68. <pagination
  69. v-show="total > 0"
  70. :total="total"
  71. v-model:page="queryParams.pageNum"
  72. v-model:limit="queryParams.pageSize"
  73. @pagination="getList"
  74. />
  75. </div>
  76. </div>
  77. </template>
  78.  
  79. <script setup name="wuransuyuan">
  80. const onelist = ref([
  81. {
  82. name: '全部',
  83. value: '',
  84. },
  85. {
  86. name: '需要监测',
  87. value: '2',
  88. },
  89. {
  90. name: '已监测',
  91. value: '3',
  92. },
  93. {
  94. name: '无需监测',
  95. value: '4',
  96. },
  97. ]);
  98. const twolist = ref([
  99. {
  100. name: '全部',
  101. value: '',
  102. },
  103. {
  104. name: '整治完成',
  105. value: '2',
  106. },
  107. {
  108. name: '整治中',
  109. value: '3',
  110. },
  111. {
  112. name: '无需整治',
  113. value: '4',
  114. },
  115. ]);
  116. const threelist = ref([
  117. {
  118. name: '全部',
  119. value: '',
  120. },
  121. {
  122. name: '无需溯源',
  123. value: '2',
  124. },
  125. {
  126. name: '一级溯源',
  127. value: '3',
  128. },
  129. {
  130. name: '二级溯源',
  131. value: '4',
  132. },
  133. ]);
  134. const total = ref(0);
  135. const paikouType = ref('');
  136. const paikouTypeList = ref([{}]);
  137.  
  138. const loading = ref(true);
  139. const tablelist = ref([{ dataCode: '排口名称' }]);
  140.  
  141. const queryParams = ref({
  142. pageNum: 1,
  143. pageSize: 10,
  144. one: '',
  145. two: '4',
  146. three: '2',
  147. });
  148.  
  149. function getList() {
  150. loading.value = false;
  151. // pagedataCameraRelation(queryParams.value).then(response => {
  152. // dataCameraRelationList.value = response.data;
  153. // total.value = response.total;
  154. // loading.value = false;
  155. // });
  156. }
  157.  
  158. function onechange(item) {
  159. queryParams.value.one = item.value;
  160. }
  161.  
  162. function twochange(item) {
  163. queryParams.value.two = item.value;
  164. }
  165. function threechange(item) {
  166. queryParams.value.three = item.value;
  167. }
  168.  
  169. onMounted(() => {
  170. getList();
  171. });
  172. </script>
  173.  
  174. <style lang="scss" scoped>
  175. @import '@/assets/styles/mapcss.scss';
  176.  
  177. #wuransuyuan {
  178. width: 100%;
  179. height: 100%;
  180. padding: 0 10px;
  181. color: #ccefff;
  182. }
  183. </style>