- <template>
- <div id="wuransuyuan">
- <div class="topfilter">
- <div class="selectbox">
- <div class="label">是否监测:</div>
- <div
- class="value"
- v-for="item in onelist"
- :class="queryParams.one == item.value ? 'actived' : ''"
- :key="item"
- @click="onechange(item)"
- >
- {{ item.name }}
- </div>
- </div>
- <div class="selectbox">
- <div class="label">是否整治:</div>
- <div
- class="value"
- v-for="item in twolist"
- :class="queryParams.two == item.value ? 'actived' : ''"
- :key="item"
- @click="twochange(item)"
- >
- {{ item.name }}
- </div>
- </div>
- <div class="selectbox">
- <div class="label">是否溯源:</div>
- <div
- class="value"
- v-for="item in threelist"
- :class="queryParams.three == item.value ? 'actived' : ''"
- :key="item"
- @click="threechange(item)"
- >
- {{ item.name }}
- </div>
- </div>
- <div class="selectbox">
- <div class="label">排口类型:</div>
- <div class="input">
- <el-select v-model="paikouType" placeholder="请选择排口类型" clearable filterable style="width: 200px">
- <el-option v-for="dict in paikouTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </div>
- </div>
- </div>
- <div class="bottomtable">
- <el-table height="calc(100% - 50px)" v-loading="loading" :data="tablelist">
- <el-table-column label="排口名称" align="center" prop="dataCode">
- <template #default="{ row }">
- <!-- <dict-tag :options="basis_data_type" :value="row.dataCode" /> -->
- </template>
- </el-table-column>
- <el-table-column label="排口编号" align="center" prop="dataName" />
- <el-table-column label="排口类型" align="center" prop="stType">
- <template #default="{ row }">
- <!-- <dict-tag :options="basis_site_type" :value="row.stType" /> -->
- </template>
- </el-table-column>
- <el-table-column label="是否需要监测" align="center" prop="stName" />
- <el-table-column label="是否需要溯源" align="center" prop="stConfigsName" />
- <el-table-column label="是否需要整治" align="center" prop="stConfigsName" />
- <el-table-column label="排口形状" align="center" prop="stConfigsName" />
- </el-table>
-
- <pagination
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
- </div>
- </div>
- </template>
-
- <script setup name="wuransuyuan">
- const onelist = ref([
- {
- name: '全部',
- value: '',
- },
- {
- name: '需要监测',
- value: '2',
- },
- {
- name: '已监测',
- value: '3',
- },
- {
- name: '无需监测',
- value: '4',
- },
- ]);
- const twolist = ref([
- {
- name: '全部',
- value: '',
- },
- {
- name: '整治完成',
- value: '2',
- },
- {
- name: '整治中',
- value: '3',
- },
- {
- name: '无需整治',
- value: '4',
- },
- ]);
- const threelist = ref([
- {
- name: '全部',
- value: '',
- },
- {
- name: '无需溯源',
- value: '2',
- },
- {
- name: '一级溯源',
- value: '3',
- },
- {
- name: '二级溯源',
- value: '4',
- },
- ]);
- const total = ref(0);
- const paikouType = ref('');
- const paikouTypeList = ref([{}]);
-
- const loading = ref(true);
- const tablelist = ref([{ dataCode: '排口名称' }]);
-
- const queryParams = ref({
- pageNum: 1,
- pageSize: 10,
- one: '',
- two: '4',
- three: '2',
- });
-
- function getList() {
- loading.value = false;
- // pagedataCameraRelation(queryParams.value).then(response => {
- // dataCameraRelationList.value = response.data;
- // total.value = response.total;
- // loading.value = false;
- // });
- }
-
- function onechange(item) {
- queryParams.value.one = item.value;
- }
-
- function twochange(item) {
- queryParams.value.two = item.value;
- }
- function threechange(item) {
- queryParams.value.three = item.value;
- }
-
- onMounted(() => {
- getList();
- });
- </script>
-
- <style lang="scss" scoped>
- @import '@/assets/styles/mapcss.scss';
-
- #wuransuyuan {
- width: 100%;
- height: 100%;
- padding: 0 10px;
- color: #ccefff;
- }
- </style>