@@ -95,7 +131,7 @@
import { onMounted, ref, watch } from 'vue';
import { monthOptions } from '@/utils/global';
import { getAnalysisData } from '@/api/statistical/index';
-
+ import {DoubleLeftOutlined,DoubleRightOutlined,CloseCircleOutlined} from '@ant-design/icons-vue'
const props = defineProps({
countyList: Object,
});
@@ -122,15 +158,66 @@
showFilterOptions.value = !showFilterOptions.value;
}
+ const showFilterOptionsDate = ref({
+ issued:false,
+ verify:false,
+ rectification:false,
+})
+
+ function handlerChangeFilterOptionsDate(type) {
+ showFilterOptionsDate.value[type] = !showFilterOptionsDate.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()+1),
+ verify:parseInt(new Date().getMonth()+1),
+ rectification:parseInt(new Date().getMonth()+1),
+})
+
+
+
+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;
+ handlerCheckedFilterDate(type,item);
+}
+
+function handlerGetAllDate(type){
+ monthSelect.value[type] = 0;
+ handlerCheckedFilterDate(type,0);
+}
+function handlerCheckedFilterDate(type,iitem) {
+
+ showFilterOptionsDate.value[type]= false;
+ getCount();
+ }
+
function handlerCheckedFilter(item) {
currentFilter.value = item.id;
currentFilterName.value = item.name;
showFilterOptions.value = false;
getCount();
}
+
function getCount() {
const querys = {
- month: monthVal.value,
+ // month: monthVal.value,
+ month:monthSelect.value["issued"]>0?yearSelect.value["issued"]+"-"+monthSelect.value["issued"] : null,
countyid: currentFilter.value,
};
getAnalysisData(querys).then((res) => {
@@ -297,4 +384,102 @@
}
}
}
+ .filter-container-date {
+ z-index: 10;
+ position: relative;
+ width: 124px;
+ border-radius: 6px;
+ height: 29px;
+ background-image: url('/statistical/select-bg.png');
+ line-height: 29px;
+ color: #fff;
+ display: flex;
+ cursor: pointer;
+ align-items: center;
+ justify-content: center;
+ margin-left: 10px;
+ text-indent: 0px;
+ img {
+ width: 10px;
+ }
+ .filter-name {
+ width: 80px;
+ text-align: center;
+ padding: 0px 2px;
+ font-size: 14px;
+ position: relative;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ margin-left: 4px;
+ }
+ .filter-item-container {
+ position: absolute;
+ background: rgba(11, 39, 68, 0.8);
+ border: 1px solid #0a62c6;
+ top: 36px;
+ right: 0px;
+ overflow: auto;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ .filter-item {
+ height: 36px;
+ text-align: center;
+ &:hover {
+ cursor: pointer;
+ background: #054234;
+ }
+ }
+ .filter-item.active {
+ background: #054234;
+ color: #e1ecf8;
+ }
+ .filter-item {
+ 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;
+ }
+ }
+ }
+ }
+ }
+ }
diff --git a/src/views/sys/exception/rightDataScreen/columnar/index.vue b/src/views/sys/exception/rightDataScreen/columnar/index.vue
index 183791ec..574bd223 100644
--- a/src/views/sys/exception/rightDataScreen/columnar/index.vue
+++ b/src/views/sys/exception/rightDataScreen/columnar/index.vue
@@ -4,7 +4,7 @@
{{ props.typeName }}
-
+
+
+
+
+
{{ monthSelect['issued'] != 0 ? yearSelect['issued']+"年"+monthSelect['issued']+"月" : '全部' }}
+
+
+
+
+

+

+
+
+
+
+
+
+
+
+
+ {{yearSelect['issued']}}年
+
+
+
+
+
+
+
+
+
@@ -33,23 +66,79 @@
import * as echarts from 'echarts';
import { monthAllOptions } from '@/utils/global';
import { caseOffenceEcharts } from '@/api/statistical/index';
-
+ import {DoubleLeftOutlined,DoubleRightOutlined,CloseCircleOutlined} from '@ant-design/icons-vue'
const filters = monthAllOptions();
- const showFilterOptions = ref(false);
- const currentFilter = ref(0);
- const currentFilterName = ref('全部');
+ const showFilterOptions = ref({
+ issued:false,
+ verify:false,
+ rectification:false,
+})
+const currentFilter = ref({
+ issued:0,
+ verify:0,
+ rectification:0,
+});
+
+ const currentFilterName = ref({
+ issued:"全部",
+ verify:"全部",
+ rectification:"全部",
+ });
- function handlerChangeFilterOptions() {
- showFilterOptions.value = !showFilterOptions.value;
+ function handlerChangeFilterOptions(type) {
+ showFilterOptions.value[type] = !showFilterOptions.value[type];
}
- function handlerCheckedFilter(item) {
- currentFilter.value = item.value;
- currentFilterName.value = item.label;
- showFilterOptions.value = false;
+
+ 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(item) {
+ // currentFilter.value = item.value;
+ // currentFilterName.value = item.label;
+ // showFilterOptions.value = false;
+ // }
+
+ function handlerCheckedFilter(type,item) {
+ currentFilter.value[type] = item.value;
+ currentFilterName.value[type] = yearSelect.value[type]+"-"+monthSelect.value[type];
+ showFilterOptions.value[type] = false;
getData();
}
+
const props = defineProps({
typeName: {
type: String,
@@ -79,7 +168,8 @@
xfAreaList.value = [];
const querys = {
type: props.type,
- month: currentFilter.value,
+ month:monthSelect.value["issued"]>0?yearSelect.value["issued"]+"-"+monthSelect.value["issued"] : null,
+ // month: yearSelect.value['issued']+"-"+monthSelect.value["issued"],
};
caseOffenceEcharts(querys).then((res) => {
@@ -345,7 +435,7 @@
.filter-container {
z-index: 10;
position: relative;
- width: 104px;
+ width: 124px;
border-radius: 6px;
height: 29px;
background-image: url('/statistical/select-bg.png');
@@ -356,11 +446,12 @@
align-items: center;
justify-content: center;
margin-left: 10px;
+ text-indent: 0px;
img {
width: 10px;
}
.filter-name {
- width: 70px;
+ width: 80px;
text-align: center;
padding: 0px 2px;
font-size: 14px;
@@ -371,17 +462,16 @@
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;
- }
+ display: none;
+ }
+
.filter-item {
height: 36px;
text-align: center;
@@ -398,6 +488,46 @@
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;
+ }
+ }
+ }
+ }
}
}