图斑总览条件选择

src/views/farmlandProtection/components/jclxqk.vue

@@ -1,5 +1,33 @@
 <template>
   <div>
+    <div class="headerSelect">
+      <el-select v-model="yearsVal" placeholder="请选择">
+        <el-option
+          v-for="item in yearsOpt"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-cascader
+        :show-all-levels="false"
+        :options="xzqTreeData"
+        placeholder="行政区"
+        :props="{ checkStrictly: true, expandTrigger: 'hover' }"
+        clearable
+        v-model="xzqTreeValue"
+      ></el-cascader>
+      <el-select v-model="monitorVal" placeholder="请选择">
+        <el-option
+          v-for="item in monitorOpt"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
     <div class="divrow">
       <div class="divCol">
         <div class="divImg">
@@ -63,19 +91,21 @@
     <Statistics
       title="图斑分布情况"
       :cityList="cityList"
-      height="270"
+      height="236"
     ></Statistics>
   </div>
 </template>
 
 <script>
 import Statistics from "./statistics";
+import { GetXzqhTree } from "@/api/map";
 export default {
   components: {
     Statistics,
   },
   data() {
     return {
+      xzqTreeData: [], //申请范围
       tab: 1,
       options: [
         { name: "图斑数", value: 1 },
@@ -107,14 +137,87 @@ export default {
           area: 48.73,
           unit: "km²",
         },
+        {
+          name: "吉阳区",
+          number: 125,
+          area: 48.73,
+          unit: "km²",
+        },
+        {
+          name: "吉阳区",
+          number: 125,
+          area: 48.73,
+          unit: "km²",
+        },
       ],
+      yearsOpt: [
+        {
+          value: "2024年",
+          label: "2024年",
+        },
+        {
+          value: "2024年第一季度",
+          label: "2024年第一季度",
+        },
+        {
+          value: "2024年第二季度",
+          label: "2024年第二季度",
+        },
+        {
+          value: "2024年第三季度",
+          label: "2024年第三季度",
+        },
+        {
+          value: "2024年第四季度",
+          label: "2024年第四季度",
+        },
+        {
+          value: "2023年",
+          label: "2023年",
+        },
+        {
+          value: "2023年第一季度",
+          label: "2023年第一季度",
+        },
+      ],
+      monitorOpt: [
+        {
+          value: "全部监测类型",
+          label: "全部监测类型",
+        },
+        {
+          value: "新增建筑物",
+          label: "新增建筑物",
+        },
+        {
+          value: "新增耕地",
+          label: "新增耕地",
+        },
+      ],
+      monitorVal: "",
+      yearsVal: "",
     };
   },
   computed: {},
   mounted() {
     this.initEcharts();
+    this.getXzqTreeData();
   },
   methods: {
+    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;
+          //   store.setRegionTree(this.xzqTreeData);
+        }
+      });
+    },
     initEcharts(payload) {
       console.log(payload);
       this.myChart = echarts.init(this.$refs.echars_pie);
@@ -314,4 +417,29 @@ 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>