图斑调整添加乡镇筛选

src/views/demo/degraining/changearea/MapList/index.vue

@@ -31,7 +31,17 @@
           @change="(value) => mapListScreenChange(value, 'batch')"
         />
       </div>
-      <div class="screen-item" style="margin-right: 18px">
+      <div class="screen-item" style="margin-right: 13px;margin-bottom: 12px">
+        <div class="screen-item-label">乡镇</div>
+        <a-select
+          allowClear
+          style="width:120px;"
+          v-model:value="infoScreenData.streetid"
+          :options="streetsAreaOptions"
+          @change="(value) => mapListScreenChange(value, 'streetid')"
+        />
+      </div>
+      <div class="screen-item" style="margin-bottom: 12px;width:389px">
         <a-input
           allowClear
           placeholder="请输入图斑编号"
@@ -40,7 +50,7 @@
           @change="(value) => mapListScreenChange(value.target.value, 'caseNo')"
         />
       </div>
-      <div class="screen-item">
+      <div class="screen-item" style="flex: 1;justify-content: flex-end;">
         <a-button class="item-button" style="background: #2B75E1;" type="primary" :icon="h(SearchOutlined)" @click="querysBtn"
           >查询</a-button>
           <a-button class="item-button img" type="primary" @click="changeArea">
@@ -297,6 +307,7 @@
 import { ref, onMounted, defineEmits, computed, h } from 'vue';
 import { SearchOutlined, DownOutlined, SendOutlined } from '@ant-design/icons-vue';
 import Icon from '@/components/Icon/Icon.vue';
+import { getLoadStreet } from '@/api/tiankongdi/index';
 import { LoadCaiKuangTaskList, GetCaseInfoById, CaseRecover } from '@/api/degraining/index';
 import {
   batchOptions,
@@ -317,6 +328,7 @@ const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
 const pageSize = ref(10);
 const pageNo = ref(1);
 const total = ref(0);
+const streetsAreaOptions =  ref<{ label: string; value: string}[]>([])
 const mapStatusOptions = ref([
   {
     label: '正常',
@@ -433,6 +445,15 @@ const openCollect = computed(() => {
 });
 const showInfoData = ref();
 onMounted(() => {
+  getLoadStreet().then(res => {
+    console.log(res)
+    res.forEach(item => {
+      streetsAreaOptions.value.push({
+        label: item.Name,
+        value: item.Id,
+      })
+    })
+  })
   getInfoList();
 });
 
@@ -634,7 +655,7 @@ function querysBtn(){
       box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
     }
     .item-input {
-      width: 223px;
+      width: 389px;
       font-family: Alibaba PuHuiTi;
       font-weight: 500;
       font-size: 17px;

src/views/demo/tiankongdi/changearea/MapList/index.vue

@@ -31,7 +31,17 @@
           @change="(value) => mapListScreenChange(value, 'batch')"
         />
       </div>
-      <div class="screen-item" style="margin-right: 18px">
+      <div class="screen-item" style="margin-right: 13px;margin-bottom: 12px">
+        <div class="screen-item-label">乡镇</div>
+        <a-select
+          allowClear
+          style="width:120px;"
+          v-model:value="infoScreenData.streetid"
+          :options="streetsAreaOptions"
+          @change="(value) => mapListScreenChange(value, 'streetid')"
+        />
+      </div>
+      <div class="screen-item" style="margin-bottom: 12px;width:389px">
         <a-input
           allowClear
           placeholder="请输入图斑编号"
@@ -40,7 +50,7 @@
           @change="(value) => mapListScreenChange(value.target.value, 'caseNo')"
         />
       </div>
-      <div class="screen-item">
+      <div class="screen-item" style="flex: 1;justify-content: flex-end;">
         <a-button class="item-button" style="background: #2B75E1;" type="primary" :icon="h(SearchOutlined)" @click="querysBtn"
           >查询</a-button>
           <a-button class="item-button img" type="primary" @click="changeArea">
@@ -298,7 +308,7 @@
 import { ref, onMounted, defineEmits, computed, h } from 'vue';
 import { SearchOutlined, DownOutlined, SendOutlined } from '@ant-design/icons-vue';
 import Icon from '@/components/Icon/Icon.vue';
-import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';
+import { getLoadDroneCaseInfoDetail, getCaseInfoById, getLoadStreet } from '@/api/tiankongdi/index';
 import {
   batchOptions,
   yearOptions,
@@ -339,6 +349,7 @@ const showSortMark = (key, sort) => {
   return false;
 };
 
+const streetsAreaOptions =  ref<{ label: string; value: string}[]>([])
 const infoDataList = ref([]);
 const infoScreenData: any = ref({
   year: null,
@@ -435,6 +446,15 @@ const openCollect = computed(() => {
 });
 const showInfoData = ref();
 onMounted(() => {
+  getLoadStreet().then(res => {
+    console.log(res)
+    res.forEach(item => {
+      streetsAreaOptions.value.push({
+        label: item.Name,
+        value: item.Id,
+      })
+    })
+  })
   getInfoList();
 });
 
@@ -636,7 +656,7 @@ function querysBtn(){
       box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
     }
     .item-input {
-      width: 223px;
+      width: 389px;
       font-family: Alibaba PuHuiTi;
       font-weight: 500;
       font-size: 17px;