Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

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,6 +74,11 @@ import { GetXzqhTree } from "@/api/map";
 import { QueryOne, QueryList } from "@/api/cockpitNew";
 import { GetDateList, CodeList, JscQueryList } from "@/api/ghss/jctb.js";
 export default {
+  props: {
+    updateObj: {
+      type: Object,
+    },
+  },
   components: {
     Statistics,
   },
@@ -129,106 +95,40 @@ 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",
+      val0: "",
+      val1: "",
       val2: "",
     };
   },
   computed: {},
-  mounted() {
-    this.getXzqTreeData();
-    this.getData();
-  },
+  mounted() {},
   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 = [];
@@ -261,7 +161,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 +288,24 @@ export default {
         ],
       };
 
+      this.myChart.clear();
       this.myChart.setOption(option);
     },
   },
-  watch: {},
+  watch: {
+    updateObj: {
+      handler(newVal, oldVal) {
+        (this.region = newVal.region),
+          (this.tab = newVal.tab),
+          (this.val0 = newVal.val0),
+          (this.val1 = newVal.val1),
+          (this.val2 = newVal.val2),
+          this.getData();
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   beforeDestroy() {},
 };
 </script>
@@ -441,29 +355,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/indexNew.vue

@@ -24,7 +24,7 @@
         @contrast="goContrast"
         @handleView="handleView"
       ></Gdzl>
-      <Jctb v-show="activeIndex == 2" ref="jctb"></Jctb>
+      <Jctb v-if="activeIndex == 2" ref="jctb"></Jctb>
       <Fzyp v-show="activeIndex == 3"></Fzyp>
     </div>
 
@@ -141,7 +141,7 @@ export default {
         this.$refs.gdzl.regionChange(this.xzqh);
       }
       if (val == 1) this.$refs.gdzl.regionChange(this.xzqh);
-      if (val !== 2) this.$refs.jctb.isShowTb = false;
+      if (val !== 2 && this.$refs.jctb) this.$refs.jctb.isShowTb = false;
     },
   },
   watch: {

src/views/farmlandProtection/jctb/index.vue

@@ -5,19 +5,74 @@
         <span class="pange_text">监测图斑管理</span>
         <span class="exportBtn">导入</span>
       </h2>
+      <div class="gdzl">
+        <div class="el-col headerSelect">
+          <el-select
+            v-model="yearsVal"
+            placeholder="请选择"
+            @change="yearsChange"
+            size="mini"
+          >
+            <el-option
+              v-for="item in yearsOpt"
+              :key="item.quarter"
+              :label="item.quarter"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <el-cascader
+            v-model="updateObj.region"
+            :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
+            size="mini"
+          >
+            <el-option
+              v-for="item in monitorOpt"
+              :key="item.dictCode"
+              :label="item.dictValue"
+              :value="item.dictCode"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+
       <div>
         <el-tabs
           type="border-card"
           v-model="activeTabs"
-          class="xz_box"
           stretch
+          class="xz_box"
           @tab-click="tabClick"
         >
           <el-tab-pane label="图斑总览" name="tbzl">
-            <Jclxqk></Jclxqk>
+            <Jclxqk
+              @updateParent="changeData"
+              ref="tbzl"
+              :updateObj="updateObj"
+            ></Jclxqk>
           </el-tab-pane>
           <el-tab-pane label="图斑清单" name="tbqd">
-            <Tbqd @updateParent="changeData" ref="tbqd"></Tbqd>
+            <Tbqd
+              @updateParent="changeData"
+              ref="tbqd"
+              :updateObj="updateObj"
+            ></Tbqd>
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -74,6 +129,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 +156,29 @@ export default {
       // isShowImg: false,
       imgList: [],
       imgIndex: -1,
+
+      xzqTreeData: [], //申请范围
+
+      options: [],
+      cityList: [],
+      yearsOpt: [], //检测图斑时间季度
+      monitorOpt: [],
+      monitorVal: "",
+      yearsVal: "",
+      updateObj: {
+        region: "4602",
+        tab: 1,
+
+        val0: "",
+        val1: "",
+        val2: "",
+      },
     };
   },
+  mounted() {
+    this.getXzqTreeData();
+    // this.getData();
+  },
   methods: {
     changeData(name, updata) {
       this[name] = updata;
@@ -109,12 +187,8 @@ export default {
       this.activeTabs = evt.name;
       this.isShowTb = false;
       this.imgIndex = -1;
-      console.log();
       if (this.activeTabs == "tbqd") {
         this.$refs.tbqd.init();
-        // console.log("哈哈哈",this.$refs.tbqd);
-      } else {
-        // console.log(33333,viewer);
       }
     },
     closeBox() {
@@ -147,57 +221,57 @@ export default {
         /* IE/Edge */
         div.msRequestFullscreen();
       }
-
-      // // 监听全屏状态的改变
-      // 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
-      // );
-
-      // document.addEventListener(
-      //   "msfullscreenchange",
-      //   function () {
-      //     if (!document.msFullscreenElement) {
-      //       console.log("已退出全屏");
-      //     } else {
-      //       console.log("已进入全屏");
-      //     }
-      //   },
-      //   false
-      // );
     },
     aimScreen() {},
+    GetInfo(val) {
+      this.updateObj.tab = val;
+    },
+    regionChange1(region) {
+      this.updateObj.region = region;
+    },
+    typeChange(val) {
+      this.updateObj.val2 = val;
+    },
+    //年份季度改变
+    yearsChange(val) {
+      // if (val) {
+      console.log(val, "valval");
+      val = JSON.parse(JSON.stringify(val));
+      this.updateObj.val0 = val.startTime;
+      this.updateObj.val1 = val.endTime;
+      this.yearsVal = val.quarter;
+      console.log(this.updateObj.val0, this.updateObj.val1, this.yearsVal);
+    },
+    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;
+        this.updateObj.val0 = res.data[0].startTime;
+        this.updateObj.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;
+        }
+      });
+    },
   },
   watch: {
     imgIndex(val) {
@@ -297,4 +371,35 @@ export default {
   left: 41%;
   top: 30%;
 }
+.headerSelect {
+  width: 100%;
+  height: 26px;
+  //   background: #00ffff;
+  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;
+    background: #041c3273 !important;
+    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;
+}
 </style>