大屏日期组件更新

.vscode/settings.json

@@ -3,5 +3,8 @@
         "src/locales",
         "src/locales/lang",
         "public/resource/tinymce/langs"
-    ]
+    ],
+    "files.associations": {
+        "stdlib.h": "c"
+    }
 }

src/components/MapboxMaps/src/config.ts

@@ -1,5 +1,5 @@
 export enum MapboxConfig {
-  ACCESS_TOKEN = 'pk.eyJ1IjoiYWlvb2lvbyIsImEiOiJjbHdhNHhxbTIwNjBiMmlxdGVpeDdnZzM4In0.vHK5bpeCj4sSK2POMI4y4Q',
+  ACCESS_TOKEN = 'pk.eyJ1IjoiaHVhbmdsaWkiLCJhIjoiY2wwM2E4a2drMDVrZjNrcGRucHIxOHo0cyJ9.0ecG5KGQE6R-SmhxvLvhHg',
   // ACCESS_TOKEN = "1234",
   TDT_TOKEN = 'b6585bc41ee16251dbe6b1af64f375d9',
   // add more config options here

src/views/sys/exception/ChartsContainer/left_charts_container.vue

@@ -4,23 +4,39 @@
             <div class="echarts-title">
                 <span>下发图斑</span>
                 <div class="month">
-                <div class="filter-container">
+                    <div class="filter-container">
-                    <div class="filter-name" @click="handlerChangeFilterOptions('issued')">{{ currentFilterName['issued'] }}</div>
+
-                    <div class="filter-icon" @click="handlerChangeFilterOptions('issued')">
+                        <div class="filter-name" @click="handlerChangeFilterOptions('issued')">{{ monthSelect['issued'] != 0 ? yearSelect['issued']+"年"+monthSelect['issued']+"月" : '全部' }}</div>
-                    <img src="/statistical/up.png" alt="" v-if="showFilterOptions['issued']" />
+                        
-                    <img src="/statistical/down.png" alt="" v-else />
+                        <CloseCircleOutlined v-show="monthSelect['issued'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('issued')" />
-                    </div>
+
-                    <div class="filter-item-container" v-if="showFilterOptions['issued']">
+                        <div class="filter-icon" @click="handlerChangeFilterOptions('issued')">
-                    <div
+                            <img src="/statistical/up.png" alt="" v-if="showFilterOptions['issued']" />
-                        v-for="(item, index) in filters"
+                            <img src="/statistical/down.png" alt="" v-else />
-                        :key="index"
+                        </div>
-                        :class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
+
-                        @click="handlerCheckedFilter('issued',item)"
+                        <div class="filter-item-container" v-if="showFilterOptions['issued']">
-                        >{{ item.label }}</div
+                            <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/up.png" alt="" v-if="showFilterOptions['verify']" />
-                        <img src="/statistical/down.png" alt="" v-else />
+                            <img src="/statistical/down.png" alt="" v-else />
                         </div>
+
                         <div class="filter-item-container" v-if="showFilterOptions['verify']">
-                        <div
+                            <div class="date-select-contaienr">
-                            v-for="(item, index) in filters"
+                                <div class="year-select-container">
-                            :key="index"
+                                    <div class="last-year" @click="handlerMinusYear('verify')" >
-                            :class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
+                                        <DoubleLeftOutlined/>
-                            @click="handlerCheckedFilter('verify',item)"
+                                    </div>
-                            >{{ item.label }}</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/up.png" alt="" v-if="showFilterOptions['rectification']" />
-                        <img src="/statistical/down.png" alt="" v-else />
+                            <img src="/statistical/down.png" alt="" v-else />
                         </div>
+
                         <div class="filter-item-container" v-if="showFilterOptions['rectification']">
-                        <div
+                            <div class="date-select-contaienr">
-                            v-for="(item, index) in filters"
+                                <div class="year-select-container">
-                            :key="index"
+                                    <div class="last-year" @click="handlerMinusYear('rectification')" >
-                            :class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
+                                        <DoubleLeftOutlined/>
-                            @click="handlerCheckedFilter('rectification',item)"
+                                    </div>
-                            >{{ item.label }}</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;
+          right: 0px;
-          height: 140px;
           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>

src/views/sys/exception/Converge/config.ts

@@ -1,4 +1,4 @@
-export const MAPBOX_TOKEN = "pk.eyJ1IjoiZXZvbGxlcnMiLCJhIjoiY2p5dGV3M2RwMDNlcDNub2E4a2tsejBzcSJ9.qzdwDmfnX-gH68U77Sxzlg";
+export const MAPBOX_TOKEN = "pk.eyJ1IjoiYWlvb2lvbyIsImEiOiJjbHdhNHhxbTIwNjBiMmlxdGVpeDdnZzM4In0.vHK5bpeCj4sSK2POMI4y4Q";
 
 export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
 

src/views/sys/exception/VideoSupervision.vue

@@ -41,7 +41,6 @@
     </div>
     <!-- monitor -->
     <!-- <Monitor  :currentMonitor="monitorInfo" @register="registerModal" /> -->
-
     <!-- TCVideo -->
     <div class="TC-videoi-container" v-if="showTCLPlayer" v-drag>
       <div class="close-button" @click="showTCLPlayer = false;">

src/views/sys/exception/VideoSupervision/map/src/config.ts

@@ -1,5 +1,5 @@
 export enum MapboxConfig {
-  ACCESS_TOKEN = 'pk.eyJ1IjoiZXZvbGxlcnMiLCJhIjoiY2p5dGV3M2RwMDNlcDNub2E4a2tsejBzcSJ9.qzdwDmfnX-gH68U77Sxzlg',
+  ACCESS_TOKEN = 'pk.eyJ1IjoiYWlvb2lvbyIsImEiOiJjbHdhNHhxbTIwNjBiMmlxdGVpeDdnZzM4In0.vHK5bpeCj4sSK2POMI4y4Q',
   // ACCESS_TOKEN = "1234",
   TDT_TOKEN = 'b6585bc41ee16251dbe6b1af64f375d9',
   // add more config options here

src/views/sys/exception/rightDataScreen/circulation/index.vue

@@ -6,6 +6,7 @@
       <div class="month">
         <div class="month-list">
           <div
+            v-if="false"
             v-for="item in monthOptions"
             :key="item.value"
             @click="monthClick(item.value)"
@@ -13,6 +14,40 @@
             >{{ item.label }}</div
           >
         </div>
+
+        <div class="filter-container-date">
+
+          <div class="filter-name" @click="handlerChangeFilterOptionsDate('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="showFilterOptionsDate['issued']" />
+              <img src="/statistical/down.png" alt="" v-else />
+          </div>
+
+          <div class="filter-item-container" v-if="showFilterOptionsDate['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 class="filter-container">
           <div class="filter-name" @click="handlerChangeFilterOptions">{{ currentFilterName }}</div>
           <div class="filter-icon" @click="handlerChangeFilterOptions">
@@ -29,6 +64,7 @@
             >
           </div>
         </div>
+
       </div>
     </div>
     <div class="circulation-content">
@@ -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;
+                }
+            }
+        }
+      }
+    }
+  }
 </style>

src/views/sys/exception/rightDataScreen/columnar/index.vue

@@ -4,7 +4,7 @@
     <div class="columnar-title">
       <div class="title">{{ props.typeName }}</div>
       <div class="month">
-        <div class="filter-container">
+        <!-- <div class="filter-container">
           <div class="filter-name" @click="handlerChangeFilterOptions">{{ currentFilterName }}</div>
           <div class="filter-icon" @click="handlerChangeFilterOptions">
             <img src="/statistical/up.png" alt="" v-if="showFilterOptions" />
@@ -19,7 +19,40 @@
               >{{ item.label }}</div
             >
           </div>
-        </div>
+        </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 class="columnar-content">
@@ -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 showFilterOptions = ref({
-  const currentFilter = ref(0);
+    issued:false,
-  const currentFilterName = ref('全部');
+    verify:false,
+    rectification:false,
+})
+const currentFilter = ref({
+    issued:0,
+    verify:0,
+    rectification:0,
+});
+
+  const currentFilterName = ref({
+      issued:"全部",
+      verify:"全部",
+      rectification:"全部",
+  });
 
-  function handlerChangeFilterOptions() {
+  function handlerChangeFilterOptions(type) {
-    showFilterOptions.value = !showFilterOptions.value;
+    showFilterOptions.value[type] = !showFilterOptions.value[type];
   }
 
-  function handlerCheckedFilter(item) {
+
-    currentFilter.value = item.value;
+  const yearSelect = ref({
-    currentFilterName.value = item.label;
+    issued:parseInt(new Date().getFullYear()),
-    showFilterOptions.value = false;
+    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;
+      right: 0px;
-      height: 140px;
       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;
+                }
+            }
+        }
+      }
     }
   }
 </style>