|
|
@@ -0,0 +1,186 @@
|
|
|
+<template>
|
|
|
+ <div class="gasReport">
|
|
|
+ <customHeader>瓦斯日报监测</customHeader>
|
|
|
+ <div class="report-container">
|
|
|
+ <div class="search-area">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="5">
|
|
|
+ <div class="area-item">
|
|
|
+ <div class="item-text">填报日期：</div>
|
|
|
+ <a-date-picker style="width:220px" v-model="searchData.reportTime" placeholder="请选择填报日期"
|
|
|
+ @change="onChange" />
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="5">
|
|
|
+ <div class="area-item">
|
|
|
+ <div class="item-text">区队：</div>
|
|
|
+ <a-select v-model:value="searchData.districtTeam" style="width: 220px" placeholder="请选择区队">
|
|
|
+ <a-select-option v-for="item in qdList" :key="item" :value="item.value">{{ item.label
|
|
|
+ }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="5">
|
|
|
+ <div class="area-item">
|
|
|
+ <div class="item-text">上报人：</div>
|
|
|
+ <a-input style="width: 220px" v-model:value="searchData.sbr" placeholder="请输入上报人" />
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="5">
|
|
|
+ <div class="area-item">
|
|
|
+ <div class="item-text">上报地点：</div>
|
|
|
+ <a-select v-model:value="searchData.strInstallPos" style="width: 220px" placeholder="请选择上报地点">
|
|
|
+ <a-select-option v-for="item in addressList" :key="item" :value="item.value">{{
|
|
|
+ item.label
|
|
|
+ }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-right: 15px"
|
|
|
+ @click="getSearch">查询</a-button>
|
|
|
+ <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <a-table :columns="columns" :data-source="tableData" :scroll="{ y: 500 }" class="tableW"
|
|
|
+ :pagination="pagination" @change="pageChange">
|
|
|
+ <template #bodyCell="{ column, text }"></template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, onMounted, computed, reactive } from 'vue';
|
|
|
+import { columns } from './gas-report.data'
|
|
|
+import { getGasAddressList, getList } from './gas-report.api'
|
|
|
+import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
+
|
|
|
+let searchData = reactive({
|
|
|
+ reportTime: '',
|
|
|
+ districtTeam: '',
|
|
|
+ sbr: '',
|
|
|
+ strInstallPos: '',
|
|
|
+})
|
|
|
+let qdList = reactive<any[]>([])//区队下拉列表
|
|
|
+let addressList = reactive<any[]>([])//上报地点下拉列表
|
|
|
+let pagination = reactive({
|
|
|
+ current: 1, // 当前页码
|
|
|
+ pageSize: 10, // 每页显示条数
|
|
|
+ total: 0, // 总条目数，后端返回
|
|
|
+ // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
|
|
|
+ showSizeChanger: true, // 是否可改变每页显示条数
|
|
|
+ pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
|
|
|
+});
|
|
|
+let tableData = ref<any[]>([])
|
|
|
+
|
|
|
+
|
|
|
+function onChange(val,time) {
|
|
|
+ searchData.reportTime=time
|
|
|
+}
|
|
|
+//获取日报列表数据
|
|
|
+async function getTableList() {
|
|
|
+ let res = await getList({pageNo:pagination.current,pageSize:pagination.pageSize,...searchData})
|
|
|
+ console.log(res, '瓦斯日报列表数据-----------')
|
|
|
+ tableData.value=res.records
|
|
|
+ pagination.total=res.total
|
|
|
+}
|
|
|
+//查询
|
|
|
+function getSearch() {
|
|
|
+ pagination.current=1
|
|
|
+ getTableList()
|
|
|
+}
|
|
|
+//重置
|
|
|
+function onReset() {
|
|
|
+ pagination.current=1
|
|
|
+ searchData.districtTeam=''
|
|
|
+ searchData.reportTime=''
|
|
|
+ searchData.strInstallPos=''
|
|
|
+ searchData.sbr=''
|
|
|
+ getTableList()
|
|
|
+}
|
|
|
+//分页切换
|
|
|
+function pageChange(val) {
|
|
|
+ pagination.current = val.current;
|
|
|
+ pagination.pageSize = val.pageSize;
|
|
|
+ getTableList()
|
|
|
+}
|
|
|
+function uniqueObjectsArray(arr) {
|
|
|
+ const map = new Map();
|
|
|
+ return arr.filter((item) => {
|
|
|
+ const key = JSON.stringify(item);
|
|
|
+ const isNew = !map.has(key);
|
|
|
+ map.set(key, item);
|
|
|
+ return isNew;
|
|
|
+ });
|
|
|
+}
|
|
|
+//获取安装位置下拉选项
|
|
|
+async function getSelectList() {
|
|
|
+ let res = await getGasAddressList({ devicekind: 'gasDayReport' })
|
|
|
+ console.log(res, '区队下拉选项--------')
|
|
|
+ qdList.length = 0
|
|
|
+ addressList.length = 0
|
|
|
+ if (res.length != 0) {
|
|
|
+ res.forEach(el => {
|
|
|
+ qdList.push({ label: el.devgroup_dictText, value: el.devgroup })
|
|
|
+ addressList.push({ label: el.strinstallpos, value: el.strinstallpos })
|
|
|
+ })
|
|
|
+ qdList= uniqueObjectsArray(qdList)
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getSelectList()
|
|
|
+ getTableList()
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.gasReport {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 80px 10px 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .search-area {
|
|
|
+ margin: 20px 0px;
|
|
|
+
|
|
|
+ .area-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-text {
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zxm-picker,
|
|
|
+ .zxm-input {
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+ background-color: #ffffff00 !important;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-table-thead > tr > th:last-child) {
|
|
|
+ border-right: 1px solid #91e9fe !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-picker-input > input) {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+ background-color: #ffffff00 !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-select-selection-item) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+</style>
|
