监测图斑时间选择

src/views/basicGeographic/components/list.vue

@@ -28,10 +28,9 @@
 </template>
 
 <script>
-import Clipboard from "clipboard";
 import tablePage from "@/components/mapView/tablePage.vue";
 import customForm from "@/components/mapView/custom-form.vue";
-import { FormConfig, TableHeader } from "./config";
+import { FormConfig, TableHeader } from "./config.js";
 import { getList } from "@/api/basicGeographic.js";
 export default {
   components: {

src/views/farmlandProtection/jctb/index.vue

@@ -12,7 +12,7 @@
       </h2>
       <div class="gdzl">
         <div class="el-col headerSelect">
-          <el-select
+          <!-- <el-select
             v-model="yearsVal"
             placeholder="请选择"
             @change="yearsChange"
@@ -25,7 +25,23 @@
               :value="item"
             >
             </el-option>
-          </el-select>
+          </el-select> -->
+          <el-cascader
+            ref="timeCas"
+            v-model="yearsVal"
+            :show-all-levels="false"
+            :options="yearsOpt"
+            @change="yearsChange"
+            placeholder="请选择时间"
+            size="mini"
+            :props="{
+              value: 'quarter',
+              label: 'quarter',
+              checkStrictly: true,
+              expandTrigger: 'hover',
+              emitPath: false,
+            }"
+          ></el-cascader>
           <el-cascader
             v-model="updateObj.region"
             :show-all-levels="false"
@@ -125,7 +141,7 @@
     <el-dialog
       title="选择图斑"
       :visible.sync="dialogVisible"
-                                                                                                                                                                                 width="45%"
+      width="45%"
       :before-close="handleClose"
       :modal-append-to-body="false"
       :close-on-click-modal="false"
@@ -170,6 +186,7 @@ export default {
       options: [],
       cityList: [],
       yearsOpt: [], //检测图斑时间季度
+
       monitorOpt: [],
       monitorVal: "",
       yearsVal: "",
@@ -257,10 +274,13 @@ export default {
     },
     //年份季度改变
     yearsChange(val) {
-      val = JSON.parse(JSON.stringify(val));
+      // val = JSON.parse(JSON.stringify(val));
+      let nodes = this.$refs.timeCas.getCheckedNodes(true);
+      val = nodes[0].data;
+      console.log(val, "---");
       this.updateObj.val0 = val.startTime;
       this.updateObj.val1 = val.endTime;
-      this.yearsVal = val.quarter;
+      // this.yearsVal = val.quarter;
       console.log(this.updateObj.val0, this.updateObj.val1, this.yearsVal);
     },
     getXzqTreeData() {
@@ -281,6 +301,18 @@ export default {
         this.updateObj.val0 = res.data[0].startTime;
         this.updateObj.val1 = res.data[0].endTime;
         this.yearsVal = res.data[0].quarter;
+        //         endTime
+        // :
+        // "2025-12-31 23:59:59"
+        // quarter
+        // :
+        // 2025
+        // startTime
+        // :
+        // "2025-01-01 00:00:00"
+        // year
+        // :
+        // 2025
       });
       //检测类型分类
       CodeList({
@@ -330,6 +362,7 @@ export default {
     height: 100%;
   }
 }
+
 .imgRemove {
   width: 504px;
   height: 368px;
@@ -341,13 +374,16 @@ export default {
   z-index: 99;
   left: 41%;
   top: 30%;
+
   .imgBox {
     width: 100%;
     height: 332px;
+
     img {
       width: 100%;
       height: 332px;
     }
+
     .imgInfo {
       // width: 245px;
       width: 60%;
@@ -356,24 +392,29 @@ export default {
       position: absolute;
       bottom: 0;
       left: 10px;
+
       p {
         display: flex;
         justify-content: space-between;
         font-size: 12px;
         height: 50%;
         line-height: 2;
+
         span {
           // margin: 0px 5px;
         }
       }
     }
   }
+
   /deep/.el-carousel__arrow {
     background-color: rgba(45, 140, 240, 0.4);
   }
+
   /deep/.el-carousel__arrow:hover {
     background-color: rgba(45, 140, 240);
   }
+
   /deep/ .el-icon-close:before {
     position: absolute;
     top: 10px;
@@ -386,6 +427,7 @@ export default {
     }
   }
 }
+
 .tiffBox {
   width: 504px;
   height: 368px;
@@ -398,6 +440,7 @@ export default {
   left: 41%;
   top: 30%;
 }
+
 .headerSelect {
   width: 100%;
   height: 26px;
@@ -405,9 +448,11 @@ export default {
   margin: 5px 0px;
   display: flex;
   justify-content: space-between;
+
   /deep/ .el-select {
     padding: 0 10px;
   }
+
   /deep/ .el-input--suffix .el-input__inner {
     padding-right: 15px;
     // height: 26px;
@@ -415,27 +460,34 @@ export default {
     border: 1px dashed #0f7ac8;
     color: #fff;
   }
+
   /deep/ .el-cascader {
     // line-height: 26px;
   }
+
   /deep/.el-input__icon {
     // line-height: 1;
     color: #fff;
   }
+
   /deep/ .el-input__inner::placeholder {
     color: #fff;
   }
 }
+
 .xz_box {
   padding-top: 0px;
 }
+
 /deep/ .el-dialog__header {
   padding: 10px 20px 0px !important;
 }
+
 /deep/ .el-dialog__body {
   padding: 0px 20px !important;
 }
-/deep/.el-dialog__headerbtn{
+
+/deep/.el-dialog__headerbtn {
   top: 8px;
 }
 </style>