|
|
|
@ -4,23 +4,39 @@
|
|
|
|
|
<div class="echarts-title">
|
|
|
|
|
<span>下发图斑</span>
|
|
|
|
|
<div class="month">
|
|
|
|
|
<div class="filter-container">
|
|
|
|
|
<div class="filter-name" @click="handlerChangeFilterOptions('issued')">{{ currentFilterName['issued'] }}</div>
|
|
|
|
|
<div class="filter-icon" @click="handlerChangeFilterOptions('issued')">
|
|
|
|
|
<img src="/statistical/up.png" alt="" v-if="showFilterOptions['issued']" />
|
|
|
|
|
<img src="/statistical/down.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="filter-item-container" v-if="showFilterOptions['issued']">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in filters"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
|
|
|
|
|
@click="handlerCheckedFilter('issued',item)"
|
|
|
|
|
>{{ item.label }}</div
|
|
|
|
|
>
|
|
|
|
|
<div class="filter-container">
|
|
|
|
|
|
|
|
|
|
<div class="filter-name" @click="handlerChangeFilterOptions('issued')">{{ monthSelect['issued'] != 0 ? yearSelect['issued']+"年"+monthSelect['issued']+"月" : '全部' }}</div>
|
|
|
|
|
|
|
|
|
|
<CloseCircleOutlined v-show="monthSelect['issued'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('issued')" />
|
|
|
|
|
|
|
|
|
|
<div class="filter-icon" @click="handlerChangeFilterOptions('issued')">
|
|
|
|
|
<img src="/statistical/up.png" alt="" v-if="showFilterOptions['issued']" />
|
|
|
|
|
<img src="/statistical/down.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="filter-item-container" v-if="showFilterOptions['issued']">
|
|
|
|
|
<div class="date-select-contaienr">
|
|
|
|
|
<div class="year-select-container">
|
|
|
|
|
<div class="last-year" @click="handlerMinusYear('issued')" >
|
|
|
|
|
<DoubleLeftOutlined/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="current-year">
|
|
|
|
|
{{yearSelect['issued']}}年
|
|
|
|
|
</div>
|
|
|
|
|
<div class="next-year" @click="handlerAddYear('issued')">
|
|
|
|
|
<DoubleRightOutlined/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="month-select-container">
|
|
|
|
|
<div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('issued',item)">
|
|
|
|
|
{{ item }}月
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="data-container">
|
|
|
|
|
<div class="data-box">
|
|
|
|
@ -39,19 +55,32 @@
|
|
|
|
|
<span>核实后新增违法耕地</span>
|
|
|
|
|
<div class="month">
|
|
|
|
|
<div class="filter-container">
|
|
|
|
|
<div class="filter-name" @click="handlerChangeFilterOptions('verify')">{{ currentFilterName['verify'] }}</div>
|
|
|
|
|
<div class="filter-name" @click="handlerChangeFilterOptions('verify')">{{ monthSelect['verify'] != 0 ? yearSelect['verify']+"年"+monthSelect['verify']+"月" : '全部' }}</div>
|
|
|
|
|
<CloseCircleOutlined v-show="monthSelect['verify'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('verify')" />
|
|
|
|
|
<div class="filter-icon" @click="handlerChangeFilterOptions('verify')">
|
|
|
|
|
<img src="/statistical/up.png" alt="" v-if="showFilterOptions['verify']" />
|
|
|
|
|
<img src="/statistical/down.png" alt="" v-else />
|
|
|
|
|
<img src="/statistical/up.png" alt="" v-if="showFilterOptions['verify']" />
|
|
|
|
|
<img src="/statistical/down.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="filter-item-container" v-if="showFilterOptions['verify']">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in filters"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
|
|
|
|
|
@click="handlerCheckedFilter('verify',item)"
|
|
|
|
|
>{{ item.label }}</div
|
|
|
|
|
>
|
|
|
|
|
<div class="date-select-contaienr">
|
|
|
|
|
<div class="year-select-container">
|
|
|
|
|
<div class="last-year" @click="handlerMinusYear('verify')" >
|
|
|
|
|
<DoubleLeftOutlined/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="current-year">
|
|
|
|
|
{{yearSelect['verify']}}年
|
|
|
|
|
</div>
|
|
|
|
|
<div class="next-year" @click="handlerAddYear('verify')">
|
|
|
|
|
<DoubleRightOutlined/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="month-select-container">
|
|
|
|
|
<div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('verify',item)">
|
|
|
|
|
{{ item }}月
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -73,19 +102,32 @@
|
|
|
|
|
<span>整改后剩余新增违法耕地</span>
|
|
|
|
|
<div class="month">
|
|
|
|
|
<div class="filter-container">
|
|
|
|
|
<div class="filter-name" @click="handlerChangeFilterOptions('rectification')">{{ currentFilterName['rectification'] }}</div>
|
|
|
|
|
<div class="filter-name" @click="handlerChangeFilterOptions('rectification')">{{ monthSelect['rectification'] != 0 ? yearSelect['rectification']+"年"+monthSelect['rectification']+"月" : '全部' }}</div>
|
|
|
|
|
<CloseCircleOutlined v-show="monthSelect['rectification'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('rectification')" />
|
|
|
|
|
<div class="filter-icon" @click="handlerChangeFilterOptions('rectification')">
|
|
|
|
|
<img src="/statistical/up.png" alt="" v-if="showFilterOptions['rectification']" />
|
|
|
|
|
<img src="/statistical/down.png" alt="" v-else />
|
|
|
|
|
<img src="/statistical/up.png" alt="" v-if="showFilterOptions['rectification']" />
|
|
|
|
|
<img src="/statistical/down.png" alt="" v-else />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="filter-item-container" v-if="showFilterOptions['rectification']">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in filters"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
|
|
|
|
|
@click="handlerCheckedFilter('rectification',item)"
|
|
|
|
|
>{{ item.label }}</div
|
|
|
|
|
>
|
|
|
|
|
<div class="date-select-contaienr">
|
|
|
|
|
<div class="year-select-container">
|
|
|
|
|
<div class="last-year" @click="handlerMinusYear('rectification')" >
|
|
|
|
|
<DoubleLeftOutlined/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="current-year">
|
|
|
|
|
{{yearSelect['rectification']}}年
|
|
|
|
|
</div>
|
|
|
|
|
<div class="next-year" @click="handlerAddYear('rectification')">
|
|
|
|
|
<DoubleRightOutlined/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="month-select-container">
|
|
|
|
|
<div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('rectification',item)">
|
|
|
|
|
{{ item }}月
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -109,6 +151,7 @@ import { monthAllOptions } from '@/utils/global';
|
|
|
|
|
import {ref,onMounted} from 'vue';
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import {getIssuedStatitical,getVerifyStatitical,getRectificationStatitical} from '@/api/tiankongdi/index'
|
|
|
|
|
import {DoubleLeftOutlined,DoubleRightOutlined,CloseCircleOutlined} from '@ant-design/icons-vue'
|
|
|
|
|
|
|
|
|
|
const filters = monthAllOptions();
|
|
|
|
|
// const showFilterOptions = ref(false);
|
|
|
|
@ -134,19 +177,54 @@ function handlerChangeFilterOptions(type) {
|
|
|
|
|
showFilterOptions.value[type] = !showFilterOptions.value[type];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const yearSelect = ref({
|
|
|
|
|
issued:parseInt(new Date().getFullYear()),
|
|
|
|
|
verify:parseInt(new Date().getFullYear()),
|
|
|
|
|
rectification:parseInt(new Date().getFullYear()),
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const monthSelect = ref({
|
|
|
|
|
issued:parseInt(new Date().getMonth()),
|
|
|
|
|
verify:parseInt(new Date().getMonth()),
|
|
|
|
|
rectification:parseInt(new Date().getMonth()),
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handlerAddYear(type){
|
|
|
|
|
yearSelect.value[type] = yearSelect.value[type]+1;
|
|
|
|
|
// handlerCheckedFilter(type,1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handlerMinusYear(type){
|
|
|
|
|
yearSelect.value[type] = yearSelect.value[type]-1;
|
|
|
|
|
// handlerCheckedFilter(type,0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handlerMonth(type,item){
|
|
|
|
|
monthSelect.value[type] = item;
|
|
|
|
|
handlerCheckedFilter(type,item);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handlerGetAllDate(type){
|
|
|
|
|
monthSelect.value[type] = 0;
|
|
|
|
|
handlerCheckedFilter(type,0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handlerCheckedFilter(type,item) {
|
|
|
|
|
currentFilter.value[type] = item.value;
|
|
|
|
|
currentFilterName.value[type] = item.label;
|
|
|
|
|
currentFilterName.value[type] = yearSelect.value[type]+"-"+monthSelect.value[type];
|
|
|
|
|
showFilterOptions.value[type] = false;
|
|
|
|
|
|
|
|
|
|
switch(type){
|
|
|
|
|
case "issued":
|
|
|
|
|
handlerGetIssuedStatitical(item.value)
|
|
|
|
|
handlerGetIssuedStatitical(monthSelect.value[type]>0?currentFilterName.value[type]:null)
|
|
|
|
|
break;
|
|
|
|
|
case "verify":
|
|
|
|
|
handlerGetVerifyStatitical(item.value);
|
|
|
|
|
handlerGetVerifyStatitical(monthSelect.value[type]>0?currentFilterName.value[type]:null)
|
|
|
|
|
break;
|
|
|
|
|
case "rectification":
|
|
|
|
|
handlerGetRectificationStatitical(item.value);
|
|
|
|
|
handlerGetRectificationStatitical(monthSelect.value[type]>0?currentFilterName.value[type]:null)
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -1041,7 +1119,7 @@ window.addEventListener('resize', function () {
|
|
|
|
|
.filter-container {
|
|
|
|
|
z-index: 10;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 104px;
|
|
|
|
|
width: 124px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
height: 29px;
|
|
|
|
|
background-image: url('/statistical/select-bg.png');
|
|
|
|
@ -1057,7 +1135,7 @@ window.addEventListener('resize', function () {
|
|
|
|
|
width: 10px;
|
|
|
|
|
}
|
|
|
|
|
.filter-name {
|
|
|
|
|
width: 70px;
|
|
|
|
|
width: 80px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 0px 2px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
@ -1068,13 +1146,11 @@ window.addEventListener('resize', function () {
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
}
|
|
|
|
|
.filter-item-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
background: rgba(11, 39, 68, 0.8);
|
|
|
|
|
border: 1px solid #0a62c6;
|
|
|
|
|
top: 36px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
height: 140px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
@ -1096,6 +1172,48 @@ window.addEventListener('resize', function () {
|
|
|
|
|
background: #086953;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.date-select-contaienr{
|
|
|
|
|
width:240px;
|
|
|
|
|
.year-select-container{
|
|
|
|
|
width:100%;
|
|
|
|
|
height:40px;
|
|
|
|
|
border-bottom:1px solid #0a62c6;
|
|
|
|
|
display: flex;
|
|
|
|
|
line-height:40px;
|
|
|
|
|
.next-year{
|
|
|
|
|
width:40px;
|
|
|
|
|
height:40px;
|
|
|
|
|
flex:1;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.current-year{
|
|
|
|
|
flex:auto;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.last-year{
|
|
|
|
|
width:40px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
height:40px;
|
|
|
|
|
flex:1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.month-select-container{
|
|
|
|
|
width:100%;
|
|
|
|
|
display:flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
.month-item{
|
|
|
|
|
flex: 1 1 33%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
text-align:center;
|
|
|
|
|
line-height:40px;
|
|
|
|
|
&:hover {
|
|
|
|
|
background:#035341;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|