首页添加今日图斑及历史图斑

src/views/sys/exception/Converge/index.vue

@@ -20,6 +20,12 @@
 
       <div class="home-button" @click="handlerInitialize">
       </div>
+      <div :class="`switch-button ${showTodayType === 1? 'switch-button-active': ''}`" style="margin-top: 20px;" @click="showToday(1)">
+        <span>&nbsp;最新图斑</span>
+      </div>
+      <div :class="`switch-button ${showTodayType === 0? 'switch-button-active': ''}`" style="margin-top: 10px;" @click="showToday(0)">
+        <span>&nbsp;历史图斑</span>
+      </div>
     </div>
   </div>
 </template>
@@ -42,6 +48,13 @@
   const { VITE_GLOB_YINGXIANG_SERVER, VITE_GLOB_YAOGANYINGXIANG_SERVER } = getAppEnvConfig();
 
   const networkType = ref("WAN");
+  const showTodayType = ref<null | number>(null)
+  const handlerLoadPolygonAttr = ref({
+    code: '',
+    filter:'',
+    type:'',
+    level:'',
+  })
 
   
   //
@@ -250,11 +263,14 @@
   }
 
   function handlerLoadPolygon(code = '', filter = '', type = '', level = '') {
+    handlerLoadPolygonAttr.value = {
+      code,filter,type,level,
+    }
     let sql_filter;
     let map_filter;
     let type_filter;
     let table_filter = layerSettings.value.tablename;
-    let field_filter = '&field="gid","tubantype","Id",';
+    let field_filter = '&field="gid","tubantype","Id","is_today",';
     let color_filter: any = [];
     if (code) {
       sql_filter = '&filter="countyid"=\'' + code + "'";
@@ -289,7 +305,13 @@
     } else if (!filter && type) {
       map_filter = ['all', ['!=', ['get', 'gid'], 0], type_filter];
     }
-
+    if(showTodayType.value !== null){
+      if(map_filter[0] == 'all'){
+        map_filter.push(['==', ['get', 'is_today'], showTodayType.value])
+      }else{
+        map_filter = ['all',map_filter,['==', ['get', 'is_today'], showTodayType.value]]
+      }
+    }
     if (map.getSource('historyLayerLine')) {
       polygonVisibility.value = map.getLayoutProperty('historyLayerLine', 'visibility');
       map.removeLayer('historyLayerLine');
@@ -307,7 +329,6 @@
         localStorage.getItem('userid') +
         ')';
     }
-
     map.addLayer({
       id: 'historyLayerLine',
       type: 'line',
@@ -1146,6 +1167,15 @@
     });
     tifLayers.value = [];
   }
+  const showToday = (value) => {
+    if(showTodayType.value === value){
+      showTodayType.value = null
+    }else{
+      showTodayType.value = value
+    }
+    const { code, filter, type, level } = handlerLoadPolygonAttr.value;
+    handlerLoadPolygon(code, filter, type, level);
+  }
 </script>
 <style type="less" scoped>
   .map-container {
@@ -1183,6 +1213,9 @@
     background: url(/map/change-view-btn.png);
     background-size: 100% 100%;
   }
+  .map-type-switch-container .switch-button-active {
+    color: yellow;
+  }
 
   .map-type-switch-container .switch-button span {
     font-size: 14px;