图斑列表、统计报表页面优化

dianlixunjian
刘妍 2024-08-03 10:05:45 +08:00
parent 591bb51706
commit a08a894024
6 changed files with 194 additions and 91 deletions

View File

@ -51,7 +51,7 @@
<UserDropDown :theme="getHeaderTheme" />
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
<BigScreen :class="`${prefixCls}-action__item`" />
<!-- <BigScreen :class="`${prefixCls}-action__item`" /> -->
</div>
</Layout.Header>
</template>

View File

@ -13,164 +13,164 @@
</template> -->
<!-- 下发图斑·宗数 -->
<template v-if="column.key === 'xftbzs' && record.countyname != '总计'">
<template v-if="column.key === 'xftbzs'">
<a @click="handlePreViewData(column, record, 1)"> {{ record.xftbzs }} </a>
</template>
<!-- 下发图斑·面积 -->
<template v-if="column.key === 'xfmj' && record.countyname != '总计'">
<template v-if="column.key === 'xfmj'">
<a @click="handlePreViewData(column, record, 1)">
{{ record.xfmj == 0 ? 0 : record.xfmj.toFixed(2) }}
</a>
</template>
<!-- 下发图斑·耕地面积 -->
<template v-if="column.key === 'xfgdmj' && record.countyname != '总计'">
<template v-if="column.key === 'xfgdmj'">
<a @click="handlePreViewData(column, record, 1)">
{{ record.xfgdmj == 0 ? 0 : record.xfgdmj.toFixed(2) }}
</a>
</template>
<!-- 合法·宗数 -->
<template v-if="column.key === 'hfzs' && record.countyname != '总计'">
<template v-if="column.key === 'hfzs'">
<a @click="handlePreViewData(column, record, 2)"> {{ record.hfzs }} </a>
</template>
<!-- 合法·面积 -->
<template v-if="column.key === 'hfmj' && record.countyname != '总计'">
<template v-if="column.key === 'hfmj'">
<a @click="handlePreViewData(column, record, 2)">
{{ record.hfmj == 0 ? 0 : record.hfmj.toFixed(2) }}
</a>
</template>
<!-- 合法·耕地面积 -->
<template v-if="column.key === 'hfgdmj' && record.countyname != '总计'">
<template v-if="column.key === 'hfgdmj'">
<a @click="handlePreViewData(column, record, 2)">
{{ record.hfgdmj == 0 ? 0 : record.hfgdmj.toFixed(2) }}
</a>
</template>
<!-- 违法·小计·宗数 -->
<template v-if="column.key === 'wfzs' && record.countyname != '总计'">
<template v-if="column.key === 'wfzs'">
<a @click="handlePreViewData(column, record, 3)"> {{ record.wfzs }} </a>
</template>
<!-- 违法·小计·面积 -->
<template v-if="column.key === 'wfmj' && record.countyname != '总计'">
<template v-if="column.key === 'wfmj'">
<a @click="handlePreViewData(column, record, 3)">
{{ record.wfmj == 0 ? 0 : record.wfmj.toFixed(2) }}
</a>
</template>
<!-- 违法·小计·耕地面积 -->
<template v-if="column.key === 'wfgdmj' && record.countyname != '总计'">
<template v-if="column.key === 'wfgdmj'">
<a @click="handlePreViewData(column, record, 3)">
{{ record.wfgdmj == 0 ? 0 : record.wfgdmj.toFixed(2) }}
</a>
</template>
<!-- 违法·非农化·宗数 -->
<template v-if="column.key === 'fnhzs' && record.countyname != '总计'">
<template v-if="column.key === 'fnhzs'">
<a @click="handlePreViewData(column, record, 10)"> {{ record.fnhzs }} </a>
</template>
<!-- 违法·非农化·面积 -->
<template v-if="column.key === 'fnhmj' && record.countyname != '总计'">
<template v-if="column.key === 'fnhmj'">
<a @click="handlePreViewData(column, record, 10)">
{{ record.fnhmj == 0 ? 0 : record.fnhmj.toFixed(2) }}
</a>
</template>
<!-- 违法·非农化·耕地面积 -->
<template v-if="column.key === 'fnhgdmj' && record.countyname != '总计'">
<template v-if="column.key === 'fnhgdmj'">
<a @click="handlePreViewData(column, record, 10)">
{{ record.fnhgdmj == 0 ? 0 : record.fnhgdmj.toFixed(2) }}
</a>
</template>
<!-- 违法·非粮化·宗数 -->
<template v-if="column.key === 'flhzs' && record.countyname != '总计'">
<template v-if="column.key === 'flhzs'">
<a @click="handlePreViewData(column, record, 5)"> {{ record.flhzs }} </a>
</template>
<!-- 违法·非粮化·面积 -->
<template v-if="column.key === 'flhmj' && record.countyname != '总计'">
<template v-if="column.key === 'flhmj'">
<a @click="handlePreViewData(column, record, 5)">
{{ record.flhmj == 0 ? 0 : record.flhmj.toFixed(2) }}
</a>
</template>
<!-- 违法·非粮化·耕地面积 -->
<template v-if="column.key === 'flhgdmj' && record.countyname != '总计'">
<template v-if="column.key === 'flhgdmj'">
<a @click="handlePreViewData(column, record, 5)">
{{ record.flhgdmj == 0 ? 0 : record.flhgdmj.toFixed(2) }}
</a>
</template>
<!-- 其他·宗数 -->
<template v-if="column.key === 'qtzs' && record.countyname != '总计'">
<template v-if="column.key === 'qtzs'">
<a @click="handlePreViewData(column, record, 4)"> {{ record.qtzs }} </a>
</template>
<!-- 其他·面积 -->
<template v-if="column.key === 'qtmj' && record.countyname != '总计'">
<template v-if="column.key === 'qtmj'">
<a @click="handlePreViewData(column, record, 4)">
{{ record.qtmj == 0 ? 0 : record.qtmj.toFixed(2) }}
</a>
</template>
<!-- 其他·耕地面积 -->
<template v-if="column.key === 'qtgdmj' && record.countyname != '总计'">
<template v-if="column.key === 'qtgdmj'">
<a @click="handlePreViewData(column, record, 4)">
{{ record.qtgdmj == 0 ? 0 : record.qtgdmj.toFixed(2) }}
</a>
</template>
<!-- 整改情况·补办手续·宗数 -->
<template v-if="column.key === 'bbsxzs' && record.countyname != '总计'">
<template v-if="column.key === 'bbsxzs'">
<a @click="handlePreViewData(column, record, 6)"> {{ record.bbsxzs }} </a>
</template>
<!-- 整改情况·补办手续·面积 -->
<template v-if="column.key === 'bbsxmj' && record.countyname != '总计'">
<template v-if="column.key === 'bbsxmj'">
<a @click="handlePreViewData(column, record, 6)">
{{ record.bbsxmj == 0 ? 0 : record.bbsxmj.toFixed(2) }}
</a>
</template>
<!-- 整改情况·补办手续·耕地面积 -->
<template v-if="column.key === 'bbsxgdmj' && record.countyname != '总计'">
<template v-if="column.key === 'bbsxgdmj'">
<a @click="handlePreViewData(column, record, 6)">
{{ record.bbsxgdmj == 0 ? 0 : record.bbsxgdmj.toFixed(2) }}
</a>
</template>
<!-- 整改情况·拆除复耕·宗数 -->
<template v-if="column.key === 'cczs' && record.countyname != '总计'">
<template v-if="column.key === 'cczs'">
<a @click="handlePreViewData(column, record, 7)"> {{ record.cczs }} </a>
</template>
<!-- 整改情况·拆除复耕·面积 -->
<template v-if="column.key === 'ccmj' && record.countyname != '总计'">
<template v-if="column.key === 'ccmj'">
<a @click="handlePreViewData(column, record, 7)">
{{ record.ccmj == 0 ? 0 : record.ccmj.toFixed(2) }}
</a>
</template>
<!-- 整改情况·拆除复耕·耕地面积 -->
<template v-if="column.key === 'ccgdmj' && record.countyname != '总计'">
<template v-if="column.key === 'ccgdmj'">
<a @click="handlePreViewData(column, record, 7)">
{{ record.ccgdmj == 0 ? 0 : record.ccgdmj.toFixed(2) }}
</a>
</template>
<!-- 新增违法占用耕地情况·核实后新增违法耕地·宗数 -->
<template v-if="column.key === 'hshxzwfgdzs' && record.countyname != '总计'">
<template v-if="column.key === 'hshxzwfgdzs'">
<a @click="handlePreViewData(column, record, 8)"> {{ record.hshxzwfgdzs }} </a>
</template>
<!-- 新增违法占用耕地情况·核实后新增违法耕地·耕地面积 -->
<template v-if="column.key === 'hshxzwfgdgdmj' && record.countyname != '总计'">
<template v-if="column.key === 'hshxzwfgdgdmj'">
<a @click="handlePreViewData(column, record, 8)">
{{ record.hshxzwfgdgdmj == 0 ? 0 : record.hshxzwfgdgdmj.toFixed(2) }}
</a>
</template>
<!-- 新增违法占用耕地情况·整改后剩余违法耕地·宗数 -->
<template v-if="column.key === 'zghsywfgdzs' && record.countyname != '总计'">
<template v-if="column.key === 'zghsywfgdzs'">
<a @click="handlePreViewData(column, record, 9)"> {{ record.zghsywfgdzs }} </a>
</template>
<!-- 新增违法占用耕地情况·整改后剩余违法耕地·耕地面积 -->
<template v-if="column.key === 'zghsywfgdgdmj' && record.countyname != '总计'">
<template v-if="column.key === 'zghsywfgdgdmj'">
<a @click="handlePreViewData(column, record, 9)">
{{ record.zghsywfgdgdmj == 0 ? 0 : record.zghsywfgdgdmj.toFixed(2) }}
</a>
</template>
<!-- 面积只取小数点后两位 -->
<template v-if="column.key.slice(-2) === 'mj' && record.countyname == '总计'">
<!-- <template v-if="column.key.slice(-2) === 'mj' && record.countyname == '总计'">
{{ record[column.key].toFixed(2) }}
</template>
</template> -->
</template>
</BasicTable>
@ -200,7 +200,6 @@
<a-modal
v-model:open="showRecordList"
width="1710px"
style="top: 50px; left: 105px"
:closable="false"
:footer="null"
@ok="handleOk"
@ -230,8 +229,7 @@
:key="index.toString()"
:tab="pane.countyname + '-' + pane.label"
:closable="pane.closable"
>
</a-tab-pane>
/>
</a-tabs>
<RecordList :tablist="tablist" :currentListQuery="currentListQuery.listQuery" />
</a-modal>

View File

@ -107,10 +107,10 @@
height: 15px;
"
></div> -->
<div class="info-data-item">
<!-- <div class="info-data-item">
<div class="info-data-label">非粮化</div>
<div class="info-data-data">{{ item.nonfoodcase }}</div>
</div>
</div> -->
<!-- <div
style="
width: 1px;

View File

@ -6,7 +6,29 @@
:labelWidth="100"
:schemas="searchFormSchema"
:actionColOptions="{ span: 24 }"
/>
>
<template #tubanmianji>
<div class="scope-box">
<a-input v-model:value="areaParams.tubanArea1" placeholder="请输入" />
-
<a-input v-model:value="areaParams.tubanArea2" placeholder="请输入" />
</div>
</template>
<template #gengdimianji>
<div class="scope-box">
<a-input v-model:value="areaParams.gengdiArea1" placeholder="请输入" />
-
<a-input v-model:value="areaParams.gengdiArea2" placeholder="请输入" />
</div>
</template>
<template #jibennongtianmianji>
<div class="scope-box">
<a-input v-model:value="areaParams.jibenArea1" placeholder="请输入" />
-
<a-input v-model:value="areaParams.jibenArea2" placeholder="请输入" />
</div>
</template>
</BasicForm>
</div>
<div class="table-box">
<BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
@ -84,6 +106,14 @@
page: 1,
limit: 10,
});
const areaParams = ref({
tubanArea1: null,
tubanArea2: null,
gengdiArea1: null,
gengdiArea2: null,
jibenArea1: null,
jibenArea2: null,
});
const tableData = ref([]);
const tablePaginationRight = ref({
current: 1,
@ -97,11 +127,12 @@
});
const [registerForm, { validate, getFieldsValue }] = useForm({
schemas: searchFormSchema,
labelWidth: 80,
labelWidth: 100,
baseColProps: { span: 6 },
actionColOptions: { span: 24 },
autoSubmitOnEnter: true,
submitFunc: handleSubmit,
resetFunc: handleReset,
});
const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
useTable({
@ -177,21 +208,24 @@
});
}
function handleChange(data) {
console.log(data);
searchParams.value.page = data.current;
searchParams.value.limit = data.pageSize;
tablePaginationRight.value = data;
getTableData();
const querys = Object.assign(searchParams.value, areaParams.value);
getTableData(querys);
}
function handleSubmit() {
searchParams.value = getFieldsValue();
searchParams.value.page = 1;
tablePaginationRight.value.current = 1;
searchParams.value.limit = tablePaginationRight.value.pageSize;
getTableData();
const querys = Object.assign(searchParams.value, areaParams.value);
getTableData(querys);
}
function getTableData() {
function getTableData(querys) {
setLoading(true);
loadCaseInfoTuBanList(searchParams.value).then((res) => {
loadCaseInfoTuBanList(querys).then((res) => {
tableData.value = res.items;
tablePaginationRight.value.total = res.total;
setTableData(tableData.value);
@ -199,8 +233,24 @@
setLoading(false);
});
}
function handleReset() {
searchParams.value = {
page: 1,
limit: 10,
};
areaParams.value = {
tubanArea1: null,
tubanArea2: null,
gengdiArea1: null,
gengdiArea2: null,
jibenArea1: null,
jibenArea2: null,
};
tablePaginationRight.value.current = 1;
getTableData(searchParams.value);
}
onMounted(() => {
getTableData();
getTableData(searchParams.value);
});
</script>
<style lang="less" scoped>
@ -261,4 +311,13 @@
.table-box {
margin: 16px;
}
.scope-box {
display: flex;
width: 100%;
.ant-input {
width: 48% !important;
max-width: 48%;
min-width: 48%;
}
}
</style>

View File

@ -16,6 +16,7 @@ export const columns: BasicColumn[] = [
{
title: '区县',
dataIndex: 'countyname',
width: 100,
},
{
title: '乡镇',
@ -33,10 +34,7 @@ export const columns: BasicColumn[] = [
{
title: '图斑类型',
dataIndex: 'typename',
},
{
title: '下发时间',
dataIndex: 'identificationtime',
width: 80,
},
{
title: '图斑面积',
@ -47,12 +45,22 @@ export const columns: BasicColumn[] = [
dataIndex: 'gengdiarea',
},
{
title: '判定结果',
dataIndex: 'isillegal',
title: '基本农田面积',
dataIndex: 'yongjiujibennongtianarea',
},
{
title: '当前状态',
dataIndex: 'handlestatusname',
width: 80,
},
{
title: '判定结果',
dataIndex: 'isillegal',
width: 80,
},
{
title: '下发时间',
dataIndex: 'identificationtime',
},
{
title: '项目名称',
@ -197,4 +205,29 @@ export const searchFormSchema: FormSchema[] = [
component: 'Input',
colProps: { span: 4 },
},
{
field: 'originalcaseno',
label: '标识号',
component: 'Input',
colProps: { span: 4 },
},
// 增加图斑面积、耕地面积、基本农田面积的筛选项;
{
field: 'tubanmianji',
label: '图斑面积',
colProps: { span: 4 },
slot: 'tubanmianji',
},
{
field: 'gengdimianji',
label: '耕地面积',
colProps: { span: 4 },
slot: 'gengdimianji',
},
{
field: 'jibennongtianmianji',
label: '基本农田面积',
colProps: { span: 4 },
slot: 'jibennongtianmianji',
},
];

View File

@ -2,19 +2,21 @@
<div class="screen-div">
<div class="screen-row">
<div class="screen-item">
<div class="screen-item-label" style="margin-right:9px;">年份</div>
<div class="screen-item-label" style="margin-right: 9px">年份</div>
<a-select
allowClear
style="width: 103px"
v-model:value="props.year"
:options="yearOptions"
@change=" (value) => {
@change="
(value) => {
emits('auditProgressScreenChange', value, 'year');
}"
}
"
/>
</div>
<div class="screen-item" style="margin-left:20px;margin-right:17px;">
<div class="screen-item-label" style="margin-right:11px;">图斑来源</div>
<div class="screen-item" style="margin-left: 20px; margin-right: 17px">
<div class="screen-item-label" style="margin-right: 11px">图斑来源</div>
<a-select
allowClear
style="width: 142px"
@ -28,7 +30,7 @@
/>
</div>
<div class="screen-item">
<div class="screen-item-label" style="margin-right:9px;">批次</div>
<div class="screen-item-label" style="margin-right: 9px">批次</div>
<a-select
allowClear
style="width: 117px"
@ -54,36 +56,40 @@
v-if="dataList.length > 0"
>
<div class="name-div">
<div style="display:flex;align-items: center;">
<img src="/positioning.png" class="item-mark"/>
<div style="display: flex; align-items: center">
<img src="/positioning.png" class="item-mark" />
<div class="item-label">{{ item.areaname }}</div>
</div>
<div class="progress-div">
<div class="progress-label reviewed-color" style="width:70px;">待审核</div>
<div class="progress-data" style="width:37px">
<span style="color: #EC7908;">{{item.verifytask}}</span>
<div class="progress-label reviewed-color" style="width: 70px">待审核</div>
<div class="progress-data" style="width: 37px">
<span style="color: #ec7908">{{ item.verifytask }}</span>
</div>
</div>
</div>
<div class="info-data-div">
<div class="info-data-item">
<div class="info-data-label">下发</div>
<div class="info-data-data">{{item.totaltask}}</div>
<div class="info-data-data">{{ item.totaltask }}</div>
</div>
<!-- <div style="width: 1px;margin-right:27px;margin-left:31px;background-color:#EDEDED;height: 15px;"></div> -->
<div class="info-data-item">
<div class="info-data-label">接收</div>
<div class="info-data-data">{{item.receivetask}}</div>
<div class="info-data-data">{{ item.receivetask }}</div>
</div>
<div class="info-data-item">
<div class="info-data-label">非粮化</div>
<div class="info-data-data">{{ item.nonfoodcase }}</div>
</div>
<!-- <div style="width: 1px;margin-right:15px;margin-left:30px;background-color:#EDEDED;height: 15px;"></div> -->
<div class="info-data-item">
<div class="info-data-label">举证合法</div>
<div class="info-data-data">{{item.legalcase}}</div>
<div class="info-data-data">{{ item.legalcase }}</div>
</div>
<!-- <div style="width: 1px;margin-right:18px;margin-left:17px;background-color:#EDEDED;height: 15px;"></div> -->
<div class="info-data-item">
<div class="info-data-label">举证其他</div>
<div class="info-data-data">{{item.ilegalcase}}</div>
<div class="info-data-data">{{ item.ilegalcase }}</div>
</div>
</div>
</div>
@ -98,9 +104,16 @@
import { ref, defineProps, defineEmits, toRefs } from 'vue';
import Icon from '@/components/Icon/Icon.vue';
import { Empty } from 'ant-design-vue';
import {patchSourceOptions} from '@/utils/global'
import { patchSourceOptions } from '@/utils/global';
const props = defineProps(['year', 'batch','patchSource', 'batchOptions', 'yearOptions', 'dataList']);
const props = defineProps([
'year',
'batch',
'patchSource',
'batchOptions',
'yearOptions',
'dataList',
]);
const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
@ -111,7 +124,7 @@
<style lang="less" scoped>
.screen-div {
width:590px;
width: 590px;
padding: 22px 12px 14px 13px;
.screen-row {
display: flex;
@ -123,14 +136,14 @@
color: #000000;
// width: 33.3%;
display: flex;
.item-input{
width:223px;
.item-input {
width: 223px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
font-size: 17px;
color: #000000;
line-height: 30px;
box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
}
.screen-item-label {
font-family: Alibaba PuHuiTi;
@ -141,7 +154,7 @@
display: flex;
align-items: center;
}
:deep(.ant-select-selector){
:deep(.ant-select-selector) {
display: flex;
align-items: center;
font-family: HarmonyOS Sans;
@ -150,7 +163,7 @@
color: #000000;
line-height: 30px;
height: 39px;
box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
}
}
}
@ -186,23 +199,23 @@
height: 57px;
align-items: center;
padding: 10px 0px;
border-bottom: 1px solid #E5E5E5;
border-bottom: 1px solid #e5e5e5;
justify-content: space-between;
}
.info-data-div{
.info-data-div {
height: 61px;
display: flex;
align-items: center;
// padding-left: 27px;
// justify-content: space-between;
// margin-top: 10px;
.info-data-item{
.info-data-item {
display: flex;
align-items: center;
flex: 1;
justify-content: center;
border-right: 1px solid #EDEDED;
.info-data-label{
border-right: 1px solid #ededed;
.info-data-label {
font-family: Alibaba PuHuiTi;
font-weight: 400;
font-size: 16px;
@ -211,7 +224,7 @@
line-height: 30px;
margin-right: 11px;
}
.info-data-data{
.info-data-data {
font-family: HarmonyOS Sans;
font-weight: 500;
font-size: 16px;
@ -220,7 +233,7 @@
display: flex;
}
}
.info-data-item:nth-last-child(1){
.info-data-item:nth-last-child(1) {
border-right: 0px;
}
}
@ -244,15 +257,15 @@
color: #000000;
line-height: 30px;
}
.progress-div{
display:flex;
.progress-div {
display: flex;
// font-weight: 500;
// font-size: 16px;
// line-height: 30px;
// margin-right: 17px;
.progress-label{
.progress-label {
font-family: Alibaba PuHuiTi;
color: #FFFFFF;
color: #ffffff;
width: 50px;
height: 30px;
border-radius: 4px 0px 0px 4px;
@ -260,8 +273,8 @@
align-items: center;
justify-content: center;
}
.progress-data{
background: #EFEFEF;
.progress-data {
background: #efefef;
height: 30px;
display: flex;
align-items: center;
@ -273,14 +286,14 @@
// color: #086DEC;
line-height: 30px;
}
.progress-color{
background: #086DEC;
.progress-color {
background: #086dec;
}
.extended-color{
background: #D03542
.extended-color {
background: #d03542;
}
.reviewed-color{
background: #EC7908
.reviewed-color {
background: #ec7908;
}
}
}