style[环境监测模块 设施农业模块]：新增注释 feat[长势监测]：页面挂载前，当页面更新时，切换作物时的逻辑新增或优化

src/permission.js

@@ -19,7 +19,7 @@ router.beforeEach((to, from, next) => {
   NProgress.start();
 
   //打印已经注册的路由
-  console.log(router.getRoutes(), '检查所有已经注册的路由1');
+  // console.log(router.getRoutes(), '检查所有已经注册的路由1');
 
   if (getToken()) {
     to.meta.title && useSettingsStore().setTitle(to.meta.title)
@@ -40,7 +40,7 @@ router.beforeEach((to, from, next) => {
             // 根据roles权限生成可访问的路由表
             accessRoutes.forEach(route => {
               if (!isHttp(route.path)) {
-                console.log(route,'addRoute');
+                // console.log(route,'addRoute');
                 router.addRoute(route) // 动态添加可访问路由表
               }
             })

src/router/index.js

@@ -38,17 +38,17 @@ export const constantRoutes = [
     ]
   },
   // 标记 原有登录
-  {
-    path: '/login',
-    component: () => import('@/views/login'),
-    hidden: true
-  },
-  // 标记 开发环境 登录
   // {
   //   path: '/login',
-  //   component: () => import('@/views/newlogin2.vue'),
+  //   component: () => import('@/views/login'),
   //   hidden: true
   // },
+  // 标记 开发环境 登录
+  {
+    path: '/login',
+    component: () => import('@/views/newlogin2.vue'),
+    hidden: true
+  },
 
   {
     path: '/transitional',

src/views/Environment.vue

@@ -300,7 +300,7 @@ function handleCurrentChange(val) {
     currentPage.value = val;
 }
 
-// 累计
+// 累计 求设备总数之和
 function sum(arr) {
     let newArr = [];
 

src/views/crops/site/Site.vue

@@ -1,6 +1,6 @@
 <!--
 页面： 农作物监管 - 长势监测
-更新时间：2024 7 26
+更新时间：2024 8 6
 注意： 该页面或许经多为前端同仁接手，每个人的代码风格和编程习惯不同，导致维护相对困难，请慎重修改代码
 -->
 <template>
@@ -245,6 +245,7 @@
       </div>
 
       <!-- 图例 -->
+      <!-- 作物 图例  -->
       <el-collapse
         class="legend2"
         accordion
@@ -271,13 +272,8 @@
           </div>
         </el-collapse-item>
       </el-collapse>
-
-      <!-- 图例 -->
-      <el-collapse
-        class="legend1"
-        accordion
-        style="box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2)"
-      >
+      <!-- 长势等级 图例  -->
+      <el-collapse class="legend1" accordion>
         <el-collapse-item name="1">
           <template #title>图例</template>
           <div class="mt-4">
@@ -305,6 +301,7 @@
           </div>
         </el-collapse-item>
       </el-collapse>
+
       <el-button v-if="flag" class="back_button" @click="back()"
         >返回</el-button
       >
@@ -446,7 +443,17 @@
 </template>
 
 <script setup>
-import { ref, onMounted, inject, reactive, watch, watchEffect } from "vue";
+import {
+  ref,
+  onBeforeMount,
+  onMounted,
+  onBeforeUpdate,
+  onUpdated,
+  inject,
+  reactive,
+  watch,
+  watchEffect,
+} from "vue";
 import * as echarts from "echarts";
 import TimeLine from "@/components/TimeLine/TimeLine.vue";
 import * as xlsx from "xlsx"; // Vue3 版本
@@ -474,6 +481,7 @@ import "echarts-gl";
 import { download } from "@/utils/request";
 import elementResizeDetectorMaker from "element-resize-detector";
 import { useRouter } from "vue-router";
+import object from "element-resize-detector/src/detection-strategy/object";
 
 // 标记 时间-作物-长势等级-请求矢量图层字典
 let layersDic = {};
@@ -482,12 +490,12 @@ let layersDic = {};
 // dic2 单选框数据 作物字典
 // 大豆 玉米 暂时没有发布相关地图服务 禁用状态-true 允许状态-false
 // 即使没有地图服务 其实也无需禁用 切换作物 都会执行删掉上一个作物矢量图层的逻辑 从而最终加载空的矢量图层
-const dic2 = {
+const dic2 = reactive({
   小麦: { disabled: false },
-  玉米: { disabled: true },
-  大豆: { disabled: true },
+  玉米: { disabled: false },
+  大豆: { disabled: false },
   花生: { disabled: false },
-};
+});
 
 // 农作物 单选框组 默认选项 小麦  大多数请求的type字段值
 const check2 = ref("小麦");
@@ -613,7 +621,7 @@ let nums = 0;
 // 加载 矢量图层 作物 长势 时间
 const addwms = (val) => {
   //   name.name 指的长势等级  name.setOf 指的是作物 两者均兼顾时间维度
-  console.log(val);
+  // console.log(val);
   // ol.layer.Tile 是 OpenLayers 中用于显示瓦片图层的类。这里创建了一个新的瓦片图层对象 layer。
   let layer = new ol.layer.Tile({
     //定义数据源
@@ -633,206 +641,6 @@ const addwms = (val) => {
   map.addLayer(layer);
 };
 
-//
-watch(
-  () => value.value,
-  () => {
-    selectTab();
-  }
-);
-
-// 标记
-watch(
-  [() => oldDatas.value, () => check2.value],
-
-  ([newVal1, newVal2]) => {
-    console.log(newVal1, newVal2, "newVal1,newVal2");
-
-    // tab切换 至 黄岛区 （行政区会有bug）
-    tabrFlag.value = true;
-
-    // 弹窗数据 重置
-    alterArr.value = [];
-
-    value.value = window.localStorage.getItem("divisions");
-    getfarmlands(check2.value, value.value, oldDatas.value.name); //作物长势等级面积统计
-    getstatisticss(check2.value, value.value, oldDatas.value.name); //作物长势等级面积占比
-    if (limits) {
-      getTownships(value.value, oldDatas.value.name);
-    } else {
-      getvillages(check2.value, value.value, oldDatas.value.name);
-    }
-    gethighStandardss(check2.value, oldDatas.value.name); //高标准农田
-
-    let str = oldDatas.value.name;
-    let str1 = str.replace(/-/g, "_");
-
-    let ZuoWu = "";
-
-    console.log("====================================");
-    console.log(check2.value);
-    console.log("====================================");
-
-    switch (check2.value) {
-      case "小麦":
-        ZuoWu = "xiaomaizhangshi";
-        break;
-      case "玉米":
-        ZuoWu = "yumizhangshi";
-        break;
-      case "大豆":
-        ZuoWu = "dadouzhangshi";
-        break;
-      case "花生":
-        ZuoWu = "huashengzhangshi";
-    }
-
-    // 字典 标记
-    layersDic = {
-      好: {
-        setOf: `${oldDatas.value.name}_${ZuoWu}`,
-        name: `T${str1}_hao`,
-        time: newVal1.name,
-        ZuoWu: ZuoWu,
-      },
-      较好: {
-        setOf: `${oldDatas.value.name}_${ZuoWu}`,
-        name: `T${str1}_jiaohao`,
-        time: newVal1.name,
-        ZuoWu: ZuoWu,
-      },
-      适中: {
-        setOf: `${oldDatas.value.name}_${ZuoWu}`,
-        name: `T${str1}_shizhong`,
-        time: newVal1.name,
-        ZuoWu: ZuoWu,
-      },
-      较差: {
-        setOf: `${oldDatas.value.name}_${ZuoWu}`,
-        name: `T${str1}_jiaocha`,
-        time: newVal1.name,
-        ZuoWu: ZuoWu,
-      },
-      差: {
-        setOf: `${oldDatas.value.name}_${ZuoWu}`,
-        name: `T${str1}_cha`,
-        time: newVal1.name,
-        ZuoWu: ZuoWu,
-      },
-    };
-
-    console.log(tableData.value, "黄岛区 - 表格数据");
-  }
-);
-const change = () => {
-  time.value = 0;
-};
-
-// 监听 作物切换 和 长势等级 变化
-watch(
-  // 监听 图例列表 和 作物类型 变化
-  [() => checkList.value, () => check2.value],
-  ([newVal1, newVal2], [oldVal1, oldVal2]) => {
-    // 校验
-    // console.log(
-    //   newVal1,
-    //   newVal2,
-    //   oldVal1,
-    //   oldVal2,
-    //   "newVal1,newVal2,oldVal1,oldVal2",
-    //   time.value
-    // );
-
-    // 同一种作物 长势等级 变化 执行以下逻辑
-    if (newVal2 == oldVal2) {
-      // 当勾选新的 长势等级时 触发
-      if (newVal1.length >= oldVal1.length && time.value < 1) {
-        //
-        console.log("加载作物长势图层");
-        // 挑选出增多的数据 不破不立 原有逻辑完全是错误的 现已改正
-        const newData = newVal1.filter((item) => {
-          const index = oldVal1.findIndex((it) => it === item);
-          if (index < 0) {
-            return item;
-          }
-        });
-        // 验证
-        // console.log(newData, "newData");
-
-        // 遍历 新增长势等级 加载相关的图层
-        newData.forEach((item) => {
-          if (layersDic[item]) {
-            addwms(layersDic[item]);
-          }
-        });
-
-        // 当取消勾选长势等级时 触发
-      } else if (newVal1.length < oldVal1.length) {
-        // 挑选出减少的数据
-        const newData = oldVal1.filter((item) => {
-          const index = newVal1.findIndex((it) => it === item);
-          if (index < 0) {
-            return item;
-          }
-        });
-        // 验证
-        // console.log(newData, "newData");
-
-        // 遍历 减少的长势等级 删除相关的图层
-        newData.forEach((item) => {
-          if (layersDic[item]) {
-            // map.getLayers().getArray() 获取所有图层
-            map
-              .getLayers()
-              .getArray()
-              .forEach((ite, index) => {
-                if (ite.A.name) {
-                  if (ite.A.name == layersDic[item].name) {
-                    // 根据 查询到的索引 删除对应图层
-                    map.getLayers().removeAt(index);
-                  }
-                }
-              });
-          }
-        });
-      }
-    } else {
-      // 作物切换 执行以下逻辑
-      // 删除上一作物的图层 以避免影响下一作物 十分重要 切勿删除
-      ["好", "较好", "适中", "较差", "差"].forEach((item) => {
-        if (layersDic[item]) {
-          // 假设要删除的图层为 layerToRemove
-          map
-            .getLayers()
-            .getArray()
-            .forEach((ite, index) => {
-              if (ite.A.name) {
-                if (ite.A.name == layersDic[item].name) {
-                  console.log("delete layers index");
-                  map.getLayers().removeAt(index);
-                }
-              }
-            });
-        }
-      });
-      console.log("加载作物长势图层 - 直接切换作物");
-      //根据已勾选的长势等级 加载 新切换作物的矢量图层
-      newVal1.forEach((item) => {
-        if (layersDic[item]) {
-          addwms(layersDic[item]);
-        }
-      });
-    }
-
-    //
-    nums++;
-    if (nums == 1) {
-      cun(); //添加村
-      zhen(); //添加镇
-    }
-  }
-);
-
 //行政区划数据
 var data = {
   title: [],
@@ -849,11 +657,6 @@ let layers = ref(null); //村
 //表格数据
 let tableData = ref([]);
 
-// 组件挂载完成后执行
-onMounted(() => {
-  initonMounted();
-});
-
 function initonMounted() {
   getgrowthTimes(); //年
   //地图
@@ -872,18 +675,6 @@ function initonMounted() {
   localStorage.setItem(router.currentRoute.value.path, true);
 }
 
-onUpdated(() => {
-  if (localStorage.getItem(router.currentRoute.value.path) == "false") {
-    document.querySelector(".mode").style.display = "block";
-    document.querySelector(".mode").innerText = "地图模式";
-    window.document.querySelector("#screenfull").style.display = "none";
-  } else {
-    document.querySelector(".mode").style.display = "block";
-    document.querySelector(".mode").innerText = "列表模式";
-    window.document.querySelector("#screenfull").style.display = "block";
-  }
-});
-
 /*-------------地图------------------------*/
 let map = ref(null);
 let container = ref(null);
@@ -1604,6 +1395,8 @@ const handleData = (oldData) => {
     }
   }
   checkList.value = checkListdata.value;
+
+  // 删除变化前的旧图层
   for (const key in layersDic) {
     map
       .getLayers()
@@ -1619,10 +1412,6 @@ const handleData = (oldData) => {
 
   let ZuoWu = "";
 
-  console.log("====================================");
-  console.log(check2.value);
-  console.log("====================================");
-
   switch (check2.value) {
     case "小麦":
       ZuoWu = "xiaomaizhangshi";
@@ -1688,9 +1477,6 @@ const getgrowthTimes = () => {
     console.log(res, "growthTime");
 
     oldDatas.value = { name: res.data[res.data.length - 1] };
-    console.log("====================================");
-    console.log(oldDatas.value, "oldDatas.value");
-    console.log("====================================");
     timeArr.value = res.data;
     let arr = [];
     res.data.forEach((item) => {
@@ -1711,10 +1497,6 @@ const getgrowthTimes = () => {
 
     let ZuoWu = "";
 
-    console.log("====================================");
-    console.log(check2.value);
-    console.log("====================================");
-
     switch (check2.value) {
       case "小麦":
         ZuoWu = "xiaomaizhangshi";
@@ -1770,13 +1552,19 @@ const getfarmlands = (type, city, time) => {
   areacharLable = ref([]);
   areacharPrice = ref([]);
   getfarmland({ type: type, divisions: city, yearMonth: time }).then((res) => {
-    for (const key in res.data[0]) {
-      if (res.data[0][key]) {
-        areacharLable.value.push(key);
-        areacharPrice.value.push(res.data[0][key]);
+    // 当前数据为空时，禁用该作物
+    if (res.data.length == 0) {
+      dic2[type].disabled = true;
+    } else {
+      dic2[type].disabled = false;
+      for (const key in res.data[0]) {
+        if (res.data[0][key]) {
+          areacharLable.value.push(key);
+          areacharPrice.value.push(res.data[0][key]);
+        }
       }
+      areachar();
     }
-    areachar();
   });
 };
 
@@ -3451,33 +3239,361 @@ function chartModes() {
 }
 
 /*--------------------------------------------------------------------------------------------*/
-
-let fenleiRef = ref({});
+// 以下被注释的变量和函数暂时没用
+// let fenleiRef = ref({});
 
 // 地图移动时弹窗跟随
-function infoWindowPostRender() {
-  // let viewer = viewers.value;
-  if (clickInfoMap.value.lon && clickInfoMap.value.lat) {
-    //经纬度转为世界坐标
-    const gisPosition = Cesium.Cartesian3.fromDegrees(
-      Number(clickInfoMap.value.lon),
-      Number(clickInfoMap.value.lat),
-      0
-    ); //转化为屏幕坐标
-    var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
-      viewer.scene,
-      gisPosition
-    );
+// function infoWindowPostRender() {
+//   // let viewer = viewers.value;
+//   if (clickInfoMap.value.lon && clickInfoMap.value.lat) {
+//     //经纬度转为世界坐标
+//     const gisPosition = Cesium.Cartesian3.fromDegrees(
+//       Number(clickInfoMap.value.lon),
+//       Number(clickInfoMap.value.lat),
+//       0
+//     ); //转化为屏幕坐标
+//     var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+//       viewer.scene,
+//       gisPosition
+//     );
 
-    if (Cesium.defined(windowPosition)) {
-      const pop = document.getElementById("popup");
-      if (pop) {
-        pop.style.top = windowPosition.y - 10 + "px";
-        pop.style.left = windowPosition.x + 10 + "px";
+//     if (Cesium.defined(windowPosition)) {
+//       const pop = document.getElementById("popup");
+//       if (pop) {
+//         pop.style.top = windowPosition.y - 10 + "px";
+//         pop.style.left = windowPosition.x + 10 + "px";
+//       }
+//     }
+//   }
+// }
+
+// 监听
+//
+watch(
+  () => value.value,
+  () => {
+    selectTab();
+  }
+);
+
+// 标记
+watch(
+  [() => oldDatas.value, () => check2.value],
+
+  ([newVal1, newVal2]) => {
+    console.log(newVal1, newVal2, "newVal1,newVal2");
+
+    // tab切换 至 黄岛区 （行政区会有bug）
+    tabrFlag.value = true;
+
+    // 弹窗数据 重置
+    alterArr.value = [];
+
+    value.value = window.localStorage.getItem("divisions");
+    getfarmlands(check2.value, value.value, oldDatas.value.name); //作物长势等级面积统计
+    getstatisticss(check2.value, value.value, oldDatas.value.name); //作物长势等级面积占比
+    if (limits) {
+      getTownships(value.value, oldDatas.value.name);
+    } else {
+      getvillages(check2.value, value.value, oldDatas.value.name);
+    }
+    gethighStandardss(check2.value, oldDatas.value.name); //高标准农田
+
+    let str = oldDatas.value.name;
+    let str1 = str.replace(/-/g, "_");
+
+    let ZuoWu = "";
+
+    console.log("====================================");
+    console.log(check2.value);
+    console.log("====================================");
+
+    switch (check2.value) {
+      case "小麦":
+        ZuoWu = "xiaomaizhangshi";
+        break;
+      case "玉米":
+        ZuoWu = "yumizhangshi";
+        break;
+      case "大豆":
+        ZuoWu = "dadouzhangshi";
+        break;
+      case "花生":
+        ZuoWu = "huashengzhangshi";
+    }
+
+    // 字典 标记
+    layersDic = {
+      好: {
+        setOf: `${oldDatas.value.name}_${ZuoWu}`,
+        name: `T${str1}_hao`,
+        time: newVal1.name,
+        ZuoWu: ZuoWu,
+      },
+      较好: {
+        setOf: `${oldDatas.value.name}_${ZuoWu}`,
+        name: `T${str1}_jiaohao`,
+        time: newVal1.name,
+        ZuoWu: ZuoWu,
+      },
+      适中: {
+        setOf: `${oldDatas.value.name}_${ZuoWu}`,
+        name: `T${str1}_shizhong`,
+        time: newVal1.name,
+        ZuoWu: ZuoWu,
+      },
+      较差: {
+        setOf: `${oldDatas.value.name}_${ZuoWu}`,
+        name: `T${str1}_jiaocha`,
+        time: newVal1.name,
+        ZuoWu: ZuoWu,
+      },
+      差: {
+        setOf: `${oldDatas.value.name}_${ZuoWu}`,
+        name: `T${str1}_cha`,
+        time: newVal1.name,
+        ZuoWu: ZuoWu,
+      },
+    };
+
+    console.log(tableData.value, "黄岛区 - 表格数据");
+  }
+);
+const change = () => {
+  time.value = 0;
+};
+
+// 监听 作物切换 和 长势等级 变化
+watch(
+  // 监听 图例列表 和 作物类型 变化
+  [() => checkList.value, () => check2.value],
+  ([newVal1, newVal2], [oldVal1, oldVal2]) => {
+    // 校验
+    // console.log(
+    //   newVal1,
+    //   newVal2,
+    //   oldVal1,
+    //   oldVal2,
+    //   "newVal1,newVal2,oldVal1,oldVal2",
+    //   time.value
+    // );
+
+    // 同一种作物 长势等级 变化 执行以下逻辑
+    if (newVal2 == oldVal2) {
+      // 当勾选新的 长势等级时 触发
+      if (newVal1.length >= oldVal1.length && time.value < 1) {
+        //
+        console.log("加载作物长势图层");
+        // 挑选出增多的数据 不破不立 原有逻辑完全是错误的 现已改正
+        const newData = newVal1.filter((item) => {
+          const index = oldVal1.findIndex((it) => it === item);
+          if (index < 0) {
+            return item;
+          }
+        });
+        // 验证
+        // console.log(newData, "newData");
+
+        // 遍历 新增长势等级 加载相关的图层
+        newData.forEach((item) => {
+          if (layersDic[item]) {
+            addwms(layersDic[item]);
+          }
+        });
+
+        // 当取消勾选长势等级时 触发
+      } else if (newVal1.length < oldVal1.length) {
+        // 挑选出减少的数据
+        const newData = oldVal1.filter((item) => {
+          const index = newVal1.findIndex((it) => it === item);
+          if (index < 0) {
+            return item;
+          }
+        });
+        // 验证
+        // console.log(newData, "newData");
+
+        // 遍历 减少的长势等级 删除相关的图层
+        newData.forEach((item) => {
+          if (layersDic[item]) {
+            // map.getLayers().getArray() 获取所有图层
+            map
+              .getLayers()
+              .getArray()
+              .forEach((ite, index) => {
+                if (ite.A.name) {
+                  if (ite.A.name == layersDic[item].name) {
+                    // 根据 查询到的索引 删除对应图层
+                    map.getLayers().removeAt(index);
+                  }
+                }
+              });
+          }
+        });
       }
+    } else {
+      console.log(`加载作物长势图层 - 直接切换作物 - ${newVal1}`);
+      // 作物切换 执行以下逻辑
+      // 删除上一作物的图层 以避免影响下一作物 十分重要 切勿删除
+      ["好", "较好", "适中", "较差", "差"].forEach((item) => {
+        if (layersDic[item]) {
+          // 假设要删除的图层为 layerToRemove
+          map
+            .getLayers()
+            .getArray()
+            .forEach((ite, index) => {
+              if (ite.A.name) {
+                if (ite.A.name == layersDic[item].name) {
+                  console.log("delete layers index");
+                  map.getLayers().removeAt(index);
+                }
+              }
+            });
+        }
+      });
+
+      //根据已勾选的长势等级 加载 新切换作物的矢量图层
+      setTimeout(() => {
+        // 重要：异步 宏任务 该watch监听总是优先执行 导致“layersDic”的值并非最新的 所以采用setTimeout 延迟执行
+        newVal1.forEach((item) => {
+          // console.log(layersDic[item],'layersDic[item]');
+          if (layersDic[item]) {
+            addwms(layersDic[item]);
+          }
+        });
+      }, 0);
+    }
+
+    //
+    nums++;
+    if (nums == 1) {
+      cun(); //添加村
+      zhen(); //添加镇
     }
   }
+);
+
+// 生命周期
+// 筛选函数
+function FilterFn(TargetObj1, TargetObj2) {
+  let arr = [];
+  let resultArr = [];
+  console.log(TargetObj1 !== null && TargetObj2 !== null);
+
+  if (TargetObj1 !== null && TargetObj2 !== null) {
+    arr = Object.keys(TargetObj1);
+    resultArr = arr.reduce((pre, cur) => {
+      if (TargetObj2.findIndex((item) => item.type === cur) == -1) {
+        pre.push(cur);
+      }
+      return pre;
+    }, []);
+  }
+  return resultArr;
 }
+
+// 禁用 筛选出当前日期不存在的作物 为check2 重新赋值 不符合tarrgetarr数组中的第一个作物 函数
+function FilterDisabledCheck2AssignmentFn() {
+  // 由于先调用“getgrowthTime”异步函数 所以该函数 就只能在“onBeforeMount”中调用 而不能在“onBeforeUpdate”中调用
+  // 即使“time”代替“oldDatas.value.name”消除了响应式的影响
+  getgrowthTime().then((res) => {
+    // console.log(res, "growthTime");
+
+    // 取最后一位是有意义的 因为“getgrowthTimes”该方法就是如此 所以要保持一致性 否则会有影响
+    let time = res.data[res.data.length - 1];
+
+    getfarmland({
+      type: "",
+      divisions: value.value,
+      yearMonth: time,
+    }).then((res) => {
+      // console.log(res.data, "res");
+      //筛选出当前日期不存在的作物
+      let targetarr = FilterFn(dic2, res.data);
+
+      // console.log(targetarr, "targetarr");
+
+      // 禁用 筛选出当前日期不存在的作物
+      targetarr.forEach((item) => {
+        dic2[item].disabled = true;
+      });
+
+      // 若check2的初始值符合禁用数组中的某一项 则为check2 重新赋值 不符合tarrgetarr数组中的第一个作物
+      if (targetarr.includes(check2.value)) {
+        check2.value = Object.keys(dic2).find((item) => {
+          return !targetarr.includes(item);
+        });
+      }
+    });
+  });
+}
+
+//所有作物先启用，之后再禁用筛选出当前日期不存在的作物，有必要则为check2重新赋值，不符合tarrgetarr数组中的第一个作物 函数
+function EnableAllFilterDisabledCheck2AssignmentFn() {
+  // 当 入参合法才执行
+  if (oldDatas.value.name && value.value) {
+    getfarmland({
+      type: "",
+      divisions: value.value,
+      yearMonth: oldDatas.value.name,
+    }).then((res) => {
+      // console.log(res.data, "res");
+      //筛选出当前日期不存在的作物
+      let targetarr = FilterFn(dic2, res.data);
+
+      // console.log(targetarr, "targetarr");
+
+      // 所有 作物 启用
+      Object.keys(dic2).forEach((item) => {
+        dic2[item].disabled = false;
+      });
+
+      // 禁用 筛选出当前日期不存在的作物
+      targetarr.forEach((item) => {
+        dic2[item].disabled = true;
+      });
+
+      // 若check2的初始值符合禁用数组中的某一项 则为check2 重新赋值 不符合tarrgetarr数组中的第一个作物
+      if (targetarr.includes(check2.value)) {
+        check2.value = Object.keys(dic2).find((item) => {
+          return !targetarr.includes(item);
+        });
+      }
+    });
+  }
+}
+
+// 组件挂载前执行
+onBeforeMount(() => {
+  // 标记
+  FilterDisabledCheck2AssignmentFn();
+});
+
+// 组件挂载完成后执行
+onMounted(() => {
+  initonMounted();
+});
+
+// 组件更新前执行
+onBeforeUpdate(() => {
+  // 校验
+  console.log(`onBeforeUpdate-${oldDatas.value.name}-${value.value}`);
+  EnableAllFilterDisabledCheck2AssignmentFn();
+});
+
+// 组件更新完成后执行
+onUpdated(() => {
+  // console.log("onUpdated");
+  if (localStorage.getItem(router.currentRoute.value.path) == "false") {
+    document.querySelector(".mode").style.display = "block";
+    document.querySelector(".mode").innerText = "地图模式";
+    window.document.querySelector("#screenfull").style.display = "none";
+  } else {
+    document.querySelector(".mode").style.display = "block";
+    document.querySelector(".mode").innerText = "列表模式";
+    window.document.querySelector("#screenfull").style.display = "block";
+  }
+});
 </script>
 
 <style lang="scss" scoped>
@@ -3922,15 +4038,29 @@ $height: calc(100vh - 100px);
   }
 }
 
+// .LegendBox {
+
+//   width: 260px;
+//   min-height: 48px;
+//   max-height: 48px;
+//   border-radius: 4px;
+//   background: rgba(255, 255, 255, 1);
+
+//   // display: flex;
+//   // justify-content: space-between;
+//   // align-items: center;
+
+// 作物图例 样式
 .legend2 {
   position: absolute;
   right: 35%;
   bottom: 60px;
-  width: 129px;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 1);
 
-  // height: 50px;
+  min-width: 130px;
+  max-width: 130px;
+  border-radius: 4px 4px 4px 4px;
+  background: rgba(255, 255, 255, 1);
+  // height: 100%;
   :deep(.el-collapse-item__header) {
     border-radius: 4px;
     color: rgba(51, 51, 51, 1);
@@ -3998,15 +4128,20 @@ $height: calc(100vh - 100px);
   }
 }
 
+// 长势等级样式
 .legend1 {
   position: absolute;
-  right: 25%;
+  right: 35%;
   bottom: 60px;
-  width: 129px;
-  border-radius: 4px;
+
+  transform: translateX(95%);
+
+  min-width: 130px;
+  max-width: 130px;
+  border-radius: 4px 4px 4px 4px;
   background: rgba(255, 255, 255, 1);
 
-  // height: 50px;
+  // height: 100%;
   :deep(.el-collapse-item__header) {
     border-radius: 4px;
     color: rgba(51, 51, 51, 1);
@@ -4073,6 +4208,7 @@ $height: calc(100vh - 100px);
     align-items: center;
   }
 }
+// }
 
 .bottom_center {
   position: absolute;

src/views/plough/ssnyygsj/index.vue

@@ -236,6 +236,7 @@ const handleDownHNT = () => {
 
 // 地图服务------------------------------------------------------------------------------------
 
+// 标记
 //加载随时间变量变化的矢量图层 测试没有问题
 function addTimerLayer() {
     //