- <template>
- <div id="rengongshuizhi">
- <div class="topfilter">
- <div class="selectbox">
- <div class="label">年度范围选择:</div>
- <div class="input">
- <el-date-picker
- v-model="value1"
- type="yearrange"
- range-separator="-"
- start-placeholder="开始年份"
- end-placeholder="结束年份"
- />
- </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 width="200" 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="rengongshuizhi">
- const value1 = ref('');
- 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([]);
-
- 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';
-
- #rengongshuizhi {
- width: 100%;
- height: 100%;
- padding: 0 10px;
- color: #ccefff;
- }
-
- :deep(.el-select .el-input) {
- height: 25px;
- }
-
- :deep(.el-input__wrapper) {
- height: 25px;
- }
- </style>