筛选条件位置更改

src/views/farmlandProtection/components/jclxqk.vue

@@ -1,44 +1,5 @@
 <template>
   <div>
-    <div class="headerSelect">
-      <el-select
-        v-model="yearsVal"
-        placeholder="请选择"
-        @change="yearsChange"
-        clearable
-      >
-        <el-option
-          v-for="item in yearsOpt"
-          :key="item.quarter"
-          :label="item.quarter"
-          :value="item"
-        >
-        </el-option>
-      </el-select>
-      <el-cascader
-        :show-all-levels="false"
-        :options="xzqTreeData"
-        placeholder="行政区"
-        @change="regionChange"
-        :props="{ checkStrictly: true, expandTrigger: 'hover' }"
-        clearable
-        v-model="region"
-      ></el-cascader>
-      <el-select
-        v-model="monitorVal"
-        placeholder="请选择"
-        @change="typeChange"
-        clearable
-      >
-        <el-option
-          v-for="item in monitorOpt"
-          :key="item.dictCode"
-          :label="item.dictValue"
-          :value="item.dictCode"
-        >
-        </el-option>
-      </el-select>
-    </div>
     <div class="divrow">
       <div class="divCol">
         <div class="divImg">
@@ -113,12 +74,29 @@ import { GetXzqhTree } from "@/api/map";
 import { QueryOne, QueryList } from "@/api/cockpitNew";
 import { GetDateList, CodeList, JscQueryList } from "@/api/ghss/jctb.js";
 export default {
+  props: {
+    region: {
+      type: String,
+    },
+    tab: {
+      type: Number,
+    },
+    val0: {
+      type: String,
+    },
+    val1: {
+      type: String,
+    },
+    val2: {
+      type: String,
+    },
+  },
   components: {
     Statistics,
   },
   data() {
     return {
-      region: "4602",
+      // region: "4602",
       xzqTreeData: [], //申请范围
       tab: 1,
       options: [
@@ -129,106 +107,43 @@ export default {
       myChart: null,
       cityList: [],
       yearsOpt: [], //检测图斑时间季度
-      monitorOpt: [
-        {
-          value: "全部监测类型",
-          label: "全部监测类型",
-        },
-        {
-          value: "新增建筑物",
-          label: "新增建筑物",
-        },
-        {
-          value: "新增耕地",
-          label: "新增耕地",
-        },
-      ],
+      monitorOpt: [],
       monitorVal: "",
       yearsVal: "",
-      val0: "2024-02-17 00:00:00",
-      val1: "2024-12-31 23:59:59",
-      val2: "",
+      // val0: "2024-02-17 00:00:00",
+      // val1: "2024-12-31 23:59:59",
+      // val2: "",
     };
   },
   computed: {},
   mounted() {
-    this.getXzqTreeData();
+    // this.getXzqTreeData();
     this.getData();
   },
   methods: {
     GetInfo(val) {
       this.tab = val;
-      this.initEcharts()
-    },
-    regionChange(region) {
-      if (region.length && region.length > 1) {
-        this.region = region[1];
-      } else {
-        this.region = region[0];
-      }
-      this.getData();
+      this.initEcharts();
     },
     typeChange(val) {
       this.val2 = val;
       this.getzl();
     },
-    //年份季度改变
-    yearsChange(val) {
-      if (val) {
-        val = JSON.parse(JSON.stringify(val));
-        this.val0 = val.startTime;
-        this.val1 = val.endTime;
-        this.yearsVal = val.quarter;
-      } else {
-        this.val0 = "2024-02-17 00:00:00";
-        this.val1 = "2024-12-31 23:59:59";
-      }
-      // this.getzl();
-      // this.GetCityList();
-      // this.initEcharts();
-      this.getData();
-    },
-    getXzqTreeData() {
-      GetXzqhTree().then((res) => {
-        if (res.data.length > 0) {
-          const list = res.data[0].children.filter((item) => {
-            return item.label == "三亚市";
-          });
-          if (list.length > 0) {
-            list[0].value = "4602";
-            this.xzqTreeData = list[0];
-          } else this.xzqTreeData = res.data;
-        }
-      });
-
-      GetDateList().then((res) => {
-        this.yearsOpt = res.data;
-      });
-      //检测类型分类
-      CodeList({
-        dictType: "卫片执法后地类分类标准‌",
-        pageNum: 1,
-        pageSize: 999,
-      }).then((res) => {
-        if (res.code == 200) {
-          this.monitorOpt = res.rows;
-        }
-      });
-    },
     getData() {
       this.getzl();
       this.GetCityList();
       this.initEcharts();
     },
-    async getzl() {
-      let sdres = await QueryOne({
+    getzl() {
+      QueryOne({
         jscType: "t_gdbh_jctb_tbzl",
         id: this.region,
         val0: this.val0,
         val1: this.val1,
         val2: this.val2,
+      }).then((res) => {
+        this.sdata = res.data;
       });
-      this.sdata = sdres.data;
     },
     async GetCityList() {
       this.cityList = [];
@@ -248,6 +163,7 @@ export default {
       });
     },
     async initEcharts() {
+      console.log(this.val0, this.val1, "-----------");
       this.myChart = echarts.init(this.$refs.echars_pie);
       let jclxres = await JscQueryList({
         jscType: "t_gdbh_jctb_jclx",
@@ -261,7 +177,7 @@ export default {
         jclxres.data.forEach((item) => {
           names.push(item.dict_value);
           if (this.tab == 1) {
-            values.push(item.jcgs)
+            values.push(item.jcgs);
           } else {
             values.push(item.jcmj);
           }
@@ -388,10 +304,22 @@ export default {
         ],
       };
 
+      this.myChart.clear();;
       this.myChart.setOption(option);
     },
   },
-  watch: {},
+  watch: {
+    val0: {
+      handler(newVal, oldVal) {
+        if (!oldVal) {
+        this.getData();
+        }
+
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   beforeDestroy() {},
 };
 </script>
@@ -441,29 +369,4 @@ img {
   height: 260px;
   width: 402px;
 }
-.headerSelect {
-  width: 100%;
-  height: 26px;
-  //   background: #00ffff;
-  margin: 5px 0px;
-  display: flex;
-  justify-content: space-between;
-  /deep/ .el-input--suffix .el-input__inner {
-    padding-right: 15px;
-    height: 26px;
-    background-color: transparent;
-    border: none;
-    color: #fff;
-  }
-  /deep/ .el-cascader {
-    line-height: 26px;
-  }
-  /deep/.el-input__icon {
-    line-height: 1;
-    color: #fff;
-  }
-  /deep/ .el-input__inner::placeholder {
-    color: #fff;
-  }
-}
 </style>

src/views/farmlandProtection/jctb/index.vue

@@ -5,6 +5,48 @@
         <span class="pange_text">监测图斑管理</span>
         <span class="exportBtn">导入</span>
       </h2>
+      <div class="headerSelect">
+        <el-select
+          v-model="yearsVal"
+          placeholder="请选择"
+          @change="yearsChange"
+        >
+          <el-option
+            v-for="item in yearsOpt"
+            :key="item.quarter"
+            :label="item.quarter"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
+        <el-cascader
+          v-model="region1"
+          :show-all-levels="false"
+          :options="store.state.region_tree"
+          @change="regionChange1"
+          placeholder="行政区"
+          size="mini"
+          :props="{
+            checkStrictly: true,
+            expandTrigger: 'hover',
+            emitPath: false,
+          }"
+        ></el-cascader>
+        <el-select
+          v-model="monitorVal"
+          placeholder="请选择"
+          @change="typeChange"
+          clearable
+        >
+          <el-option
+            v-for="item in monitorOpt"
+            :key="item.dictCode"
+            :label="item.dictValue"
+            :value="item.dictCode"
+          >
+          </el-option>
+        </el-select>
+      </div>
       <div>
         <el-tabs
           type="border-card"
@@ -14,7 +56,15 @@
           @tab-click="tabClick"
         >
           <el-tab-pane label="图斑总览" name="tbzl">
-            <Jclxqk></Jclxqk>
+            <Jclxqk
+              @updateParent="changeData"
+              ref="tbzl"
+              :region="region1"
+              :tab="tab"
+              :val0="val0"
+              :val1="val1"
+              :val2="val2"
+            ></Jclxqk>
           </el-tab-pane>
           <el-tab-pane label="图斑清单" name="tbqd">
             <Tbqd @updateParent="changeData" ref="tbqd"></Tbqd>
@@ -74,6 +124,8 @@
 import Jclxqk from "../components/jclxqk.vue";
 import Tbqd from "../components/tbqd.vue";
 import tbDetails from "../components/tbDetails.vue";
+import { GetXzqhTree } from "@/api/map";
+import { GetDateList, CodeList, JscQueryList } from "@/api/ghss/jctb.js";
 export default {
   components: {
     Jclxqk,
@@ -99,8 +151,25 @@ export default {
       // isShowImg: false,
       imgList: [],
       imgIndex: -1,
+
+      region1: "4602",
+      xzqTreeData: [], //申请范围
+      tab: 1,
+      options: [],
+      cityList: [],
+      yearsOpt: [], //检测图斑时间季度
+      monitorOpt: [],
+      monitorVal: "",
+      yearsVal: "",
+      val0: "",
+      val1: "",
+      val2: "",
     };
   },
+  mounted() {
+    this.getXzqTreeData();
+    // this.getData();
+  },
   methods: {
     changeData(name, updata) {
       this[name] = updata;
@@ -147,57 +216,70 @@ export default {
         /* IE/Edge */
         div.msRequestFullscreen();
       }
+    },
+    aimScreen() {},
+    GetInfo(val) {
+      this.tab = val;
+      this.$nextTick(() => {
+        this.$refs.tbzl.initEcharts();
+      });
+      // this.initEcharts();
+    },
+    async regionChange1(region) {
+      console.log(region, "region");
+      this.region1 = region;
 
-      // // 监听全屏状态的改变
-      // document.addEventListener(
-      //   "fullscreenchange",
-      //   function () {
-      //     if (!document.fullscreenElement) {
-      //       console.log("已退出全屏");
-      //     } else {
-      //       console.log("已进入全屏");
-      //     }
-      //   },
-      //   false
-      // );
-
-      // document.addEventListener(
-      //   "mozfullscreenchange",
-      //   function () {
-      //     if (!document.mozFullScreenElement) {
-      //       console.log("已退出全屏");
-      //     } else {
-      //       console.log("已进入全屏");
-      //     }
-      //   },
-      //   false
-      // );
-
-      // document.addEventListener(
-      //   "webkitfullscreenchange",
-      //   function () {
-      //     if (!document.webkitFullscreenElement) {
-      //       console.log("已退出全屏");
-      //     } else {
-      //       console.log("已进入全屏");
-      //     }
-      //   },
-      //   false
-      // );
+      await this.$refs.tbzl.getData();
+    },
+    typeChange(val) {
+      this.val2 = val;
+      // this.getzl();
+    },
+    //年份季度改变
+    async yearsChange(val) {
+      // if (val) {
+      console.log(val, "valval");
+      val = JSON.parse(JSON.stringify(val));
+      this.val0 = val.startTime;
+      this.val1 = val.endTime;
+      this.yearsVal = val.quarter;
+      this.$refs.tbzl.getData();
+      console.log(this.val0, this.val1, this.yearsVal);
+      // this.getzl();
+      // this.GetCityList();
+      // this.initEcharts();
+      // this.getData();
+    },
+    getXzqTreeData() {
+      GetXzqhTree().then((res) => {
+        if (res.data.length > 0) {
+          const list = res.data[0].children.filter((item) => {
+            return item.label == "三亚市";
+          });
+          if (list.length > 0) {
+            list[0].value = "4602";
+            this.xzqTreeData = list[0];
+          } else this.xzqTreeData = res.data;
+        }
+      });
 
-      // document.addEventListener(
-      //   "msfullscreenchange",
-      //   function () {
-      //     if (!document.msFullscreenElement) {
-      //       console.log("已退出全屏");
-      //     } else {
-      //       console.log("已进入全屏");
-      //     }
-      //   },
-      //   false
-      // );
+      GetDateList().then((res) => {
+        this.yearsOpt = res.data;
+        this.val0 = res.data[0].startTime;
+        this.val1 = res.data[0].endTime;
+        this.yearsVal = res.data[0].quarter;
+      });
+      //检测类型分类
+      CodeList({
+        dictType: "卫片执法后地类分类标准‌",
+        pageNum: 1,
+        pageSize: 999,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.monitorOpt = res.rows;
+        }
+      });
     },
-    aimScreen() {},
   },
   watch: {
     imgIndex(val) {
@@ -297,4 +379,29 @@ export default {
   left: 41%;
   top: 30%;
 }
+.headerSelect {
+  width: 100%;
+  height: 26px;
+  //   background: #00ffff;
+  margin: 5px 0px;
+  display: flex;
+  justify-content: space-between;
+  /deep/ .el-input--suffix .el-input__inner {
+    padding-right: 15px;
+    height: 26px;
+    background-color: transparent;
+    border: none;
+    color: #fff;
+  }
+  /deep/ .el-cascader {
+    line-height: 26px;
+  }
+  /deep/.el-input__icon {
+    line-height: 1;
+    color: #fff;
+  }
+  /deep/ .el-input__inner::placeholder {
+    color: #fff;
+  }
+}
 </style>