From 66cf8ac9a5392b7805cf5be4ae2b9a7cf579cabf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Wed, 3 Jul 2024 14:34:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A3=9E=E5=9C=B0=E8=B0=83=E6=95=B4=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../auditinfo/AuditProgress/index.vue         |   3 +-
 .../bootstraps/auditinfo/MapList/index.vue    |  22 +-
 src/views/demo/bootstraps/auditinfo/index.vue |   2 +-
 .../changearea/AuditProgress/index.vue        | 144 +++++
 .../bootstraps/changearea/MapList/amend.vue   | 117 ++++
 .../bootstraps/changearea/MapList/index.vue   | 522 ++++++++++++++++++
 .../demo/bootstraps/changearea/index.vue      | 316 +++++++++++
 src/views/demo/bootstraps/changearea/util.ts  |  36 ++
 8 files changed, 1150 insertions(+), 12 deletions(-)
 create mode 100644 src/views/demo/bootstraps/changearea/AuditProgress/index.vue
 create mode 100644 src/views/demo/bootstraps/changearea/MapList/amend.vue
 create mode 100644 src/views/demo/bootstraps/changearea/MapList/index.vue
 create mode 100644 src/views/demo/bootstraps/changearea/index.vue
 create mode 100644 src/views/demo/bootstraps/changearea/util.ts

diff --git a/src/views/demo/bootstraps/auditinfo/AuditProgress/index.vue b/src/views/demo/bootstraps/auditinfo/AuditProgress/index.vue
index c14362e0..1f53b416 100644
--- a/src/views/demo/bootstraps/auditinfo/AuditProgress/index.vue
+++ b/src/views/demo/bootstraps/auditinfo/AuditProgress/index.vue
@@ -109,6 +109,7 @@
         align-items: center;
         padding: 10px;
         justify-content: space-between;
+        border-bottom: 1px solid #ececec;
         .name-div {
           display: flex;
           align-items: center;
@@ -138,7 +139,7 @@
       }
     }
   }
-  .no-data{
+  .no-data {
     padding: 20px 0;
   }
 </style>
diff --git a/src/views/demo/bootstraps/auditinfo/MapList/index.vue b/src/views/demo/bootstraps/auditinfo/MapList/index.vue
index 90481636..ec56ba4d 100644
--- a/src/views/demo/bootstraps/auditinfo/MapList/index.vue
+++ b/src/views/demo/bootstraps/auditinfo/MapList/index.vue
@@ -52,7 +52,7 @@
       >
         <div class="select-mark"></div>
         <Icon
-          style="font-size: 30px; color: #bf0000; cursor: pointer"
+          style="font-size: 30px; color: #0a6dea; cursor: pointer"
           icon="gis:poi-alt"
           @click="locationFun(item)"
         />
@@ -60,7 +60,9 @@
           <div class="item-info-div">
             <div class="item-info-id">{{ item.case_no }}</div>
             <div class="item-info-layout">
-              <div class="item-info-address" :title="item.address">{{ item.address }}</div>
+              <div class="item-info-address" :title="item.address">
+                <a-tag color="processing" v-if="item.address">{{ item.address }}</a-tag>
+              </div>
               <div class="item-info-batch">
                 <a-tag color="success">{{ item.unitname }}</a-tag>
               </div>
@@ -170,7 +172,7 @@
     { label: '已建成', value: 1 },
     { label: '持续变化', value: 2 },
   ]);
- 
+
   const dataList = ref([]);
   const total = ref(0);
   async function getTaskList() {
@@ -275,12 +277,10 @@
           margin-bottom: 5px;
           .item-info-id {
             width: 178px;
-            background: #bf2c64;
-            color: #fff;
             border-radius: 11px;
             display: flex;
             align-items: center;
-            justify-content: center;
+            // justify-content: center;
             height: 22px;
           }
           .item-info-layout {
@@ -290,7 +290,7 @@
             justify-content: space-between;
           }
           .item-info-address {
-            width: 120px;
+            // width: 120px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -339,12 +339,14 @@
         }
       }
       .button-div {
-        flex: 1;
-        width: 100%;
-        height: 100%;
+        height: 30px;
+        width: 30px;
         display: flex;
         justify-content: space-evenly;
         font-size: 20px;
+        border: 1px solid #d9d9d9;
+        border-radius: 50%;
+        margin-left: 10px;
         .collect-button:hover {
           color: rgb(255, 205, 42);
         }
diff --git a/src/views/demo/bootstraps/auditinfo/index.vue b/src/views/demo/bootstraps/auditinfo/index.vue
index 8003eec2..4f85b1df 100644
--- a/src/views/demo/bootstraps/auditinfo/index.vue
+++ b/src/views/demo/bootstraps/auditinfo/index.vue
@@ -101,7 +101,7 @@
     // 存储年份数据的数组
     let list: any = [];
     // 获取当前年份
-    year.value = Number(`${currentYear}`);
+    // year.value = Number(`${currentYear}`);
     list.push({
       value: Number(`${currentYear}`),
       label: Number(`${currentYear}`),
diff --git a/src/views/demo/bootstraps/changearea/AuditProgress/index.vue b/src/views/demo/bootstraps/changearea/AuditProgress/index.vue
new file mode 100644
index 00000000..a4ea588b
--- /dev/null
+++ b/src/views/demo/bootstraps/changearea/AuditProgress/index.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="screen-div">
+    <div class="screen-row">
+      <div class="screen-item">
+        <div class="screen-item-label">年份</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.year"
+          :options="yearOptions"
+          @change="
+            (value) => {
+              emits('auditProgressScreenChange', value, 'year');
+            }
+          "
+        />
+      </div>
+      <div class="screen-item">
+        <div class="screen-item-label">批次</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.batch"
+          :options="batchOptions"
+          @change="
+            (value) => {
+              emits('auditProgressScreenChange', value, 'batch');
+            }
+          "
+        />
+      </div>
+    </div>
+  </div>
+  <div class="data-list">
+    <!-- <div class="data-title">审核进度</div> -->
+    <div class="show-data-list-content">
+      <div
+        class="data-item"
+        v-for="(item, index) in dataList"
+        :key="index"
+        @click="emits('showInfo', true, item)"
+        v-if="dataList.length > 0"
+      >
+        <div class="name-div">
+          <div class="item-mark"></div>
+          <div class="item-label">{{ item.areaname }}</div>
+        </div>
+        <div class="data-div">
+          <span>{{ item.count }}</span>
+        </div>
+      </div>
+      <div v-else class="no-data">
+        <a-empty :image="simpleImage" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, defineProps, defineEmits, toRefs } from 'vue';
+  import { batchOptions, yearOptions } from '@/views/demo/bootstraps/curbspotcity/util.ts';
+  import { Empty } from 'ant-design-vue';
+
+  const props = defineProps(['year', 'batch', 'dataList']);
+  const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
+  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+</script>
+
+<style lang="less" scoped>
+  .screen-div {
+    background: @component-background;
+    padding: 10px;
+    .screen-row {
+      display: flex;
+      .screen-item {
+        flex: 1;
+        display: flex;
+        .screen-item-label {
+          width: 55px;
+          padding-left: 10px;
+          display: flex;
+          align-items: center;
+          font-size: 15px;
+        }
+      }
+    }
+  }
+  .data-list {
+    height: calc(100% - 52px);
+    background: @component-background;
+    margin-top: 10px;
+    // background: darkgoldenrod;
+    .data-title {
+      height: 40px;
+      background: #bab9b7;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      color: #366198;
+    }
+    .show-data-list-content {
+      .data-item {
+        width: 100%;
+        display: flex;
+        height: 50px;
+        align-items: center;
+        padding: 10px;
+        justify-content: space-between;
+        border-bottom: 1px solid #ececec;
+        .name-div {
+          display: flex;
+          align-items: center;
+        }
+        .data-div {
+          font-weight: 500;
+          margin-right: 5px;
+        }
+        .item-mark {
+          width: 5px;
+          height: 5px;
+          background: #086dec;
+          margin-left: 7px;
+          margin-right: 7px;
+        }
+        .item-label {
+          font-size: 16px;
+          font-weight: 600;
+          margin-left: 5px;
+        }
+      }
+      .data-item:hover {
+        background-color: rgba(8, 109, 236, 0.08);
+      }
+      .data-item:nth-child(2n) {
+        background: #ececec;
+      }
+    }
+  }
+  .no-data {
+    padding: 20px 0;
+  }
+</style>
diff --git a/src/views/demo/bootstraps/changearea/MapList/amend.vue b/src/views/demo/bootstraps/changearea/MapList/amend.vue
new file mode 100644
index 00000000..6609edc3
--- /dev/null
+++ b/src/views/demo/bootstraps/changearea/MapList/amend.vue
@@ -0,0 +1,117 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="飞地调整" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { accountFormSchema } from './account.data';
+  import { addAccount } from '@/api/demo/system';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import md5 from 'js-md5';
+  import { fun_getCaseInfo } from '@/api/demo/query';
+
+  const { createMessage } = useMessage();
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+
+  const isUpdate = ref(true);
+  const rowId = ref('');
+
+  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 24 },
+    schemas: [
+      {
+        field: 'id',
+        label: '县区',
+        component: 'Input',
+        required: true,
+      },
+      {
+        field: 'account',
+        label: '乡镇',
+        component: 'Input',
+        // helpMessage: ['本字段演示异步验证', '不能输入带有admin的账号'],
+        rules: [
+          {
+            required: true,
+            message: '请输入账号',
+          },
+          // {
+          //   trigger: 'blur',
+          //   validator(_, value) {
+          //     return new Promise((resolve, reject) => {
+          //       if (!value) return resolve();
+          //       isAccountExist(value)
+          //         .then(resolve)
+          //         .catch((err) => {
+          //           reject(err.message || '验证失败');
+          //         });
+          //     });
+          //   },
+          // },
+        ],
+      },
+      {
+        field: 'name',
+        label: '村/社区',
+        component: 'Input',
+        required: true,
+      },
+    ],
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const case_no = ref();
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    console.log(data);
+    isUpdate.value = !!data?.isUpdate;
+    case_no.value = data.record.id;
+    getDetail();
+    if (unref(isUpdate)) {
+      rowId.value = data.record.id;
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  async function getDetail() {
+    const data = await fun_getCaseInfo({
+      id: case_no.value,
+    });
+    console.log(data);
+    setFieldsValue({
+      ...data,
+    });
+  }
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      if (values.password) {
+        values.password = md5(values.password);
+      }
+      const data = await addAccount(values);
+      console.log(data);
+      if (data) {
+        // TODO custom api
+        closeModal();
+        emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+        return createMessage.success('成功');
+      } else {
+        return createMessage.error('失败');
+      }
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/demo/bootstraps/changearea/MapList/index.vue b/src/views/demo/bootstraps/changearea/MapList/index.vue
new file mode 100644
index 00000000..35ff8c48
--- /dev/null
+++ b/src/views/demo/bootstraps/changearea/MapList/index.vue
@@ -0,0 +1,522 @@
+<template>
+  <div class="content">
+    <div class="rollback">
+      <Icon
+        style="font-size: 20px; cursor: pointer"
+        icon="ant-design:arrow-left-outlined"
+        @click="emits('closeShowInfo', false)"
+      />
+    </div>
+    <div class="screen-div">
+      <div class="screen-item">
+        <div class="screen-item-label">年份</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.infoScreenData.year"
+          :options="yearOptions"
+          @change="(value) => emits('mapListScreenChange', value, 'year')"
+        />
+      </div>
+      <div class="screen-item">
+        <div class="screen-item-label">批次</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.infoScreenData.batch"
+          :options="batchOptions"
+          @change="(value) => emits('mapListScreenChange', value, 'batch')"
+        />
+      </div>
+      <div class="screen-item">
+        <div class="screen-item-label">图斑号</div>
+        <a-input
+          allowClear
+          v-model:value="props.infoScreenData.mapNo"
+          style="flex: 1"
+          @change="(value) => emits('mapListScreenChange', value.target.value, 'mapNo')"
+        />
+      </div>
+      <div class="screen-item" v-if="cityType.level === 0">
+        <div class="screen-item-label">市级区划</div>
+        <a-select
+          disabled
+          allowClear
+          style="flex: 1"
+          v-model:value="props.infoScreenData.countyId"
+          :options="props.municipalAreaOptions"
+          @change="(value) => emits('mapListScreenChange', value, 'countyId')"
+        />
+      </div>
+      <div class="screen-item" v-if="cityType.level === 0">
+        <div class="screen-item-label">县级区划</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.infoScreenData.streetId"
+          :options="props.countiesAreaOptions"
+          @change="(value) => emits('mapListScreenChange', value, 'streetId')"
+        />
+      </div>
+      <div class="screen-item" v-if="cityType.level !== 0">
+        <div class="screen-item-label">县级区划</div>
+        <a-select
+          disabled
+          allowClear
+          style="flex: 1"
+          v-model:value="props.infoScreenData.countyId"
+          :options="props.municipalAreaOptions"
+          @change="(value) => emits('mapListScreenChange', value, 'countyId')"
+        />
+      </div>
+      <div class="screen-item" v-if="cityType.level !== 0">
+        <div class="screen-item-label">镇级区划</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.infoScreenData.streetId"
+          :options="props.countiesAreaOptions"
+          @change="(value) => emits('mapListScreenChange', value, 'streetId')"
+        />
+      </div>
+      <div class="screen-item">
+        <div class="screen-item-label">图斑类型</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.infoScreenData.mapType"
+          :options="mapTypeOptions"
+          @change="(value) => emits('mapListScreenChange', value, 'mapType')"
+        />
+      </div>
+      <div class="screen-item" v-if="props.infoScreenData.mapType === 1">
+        <div class="screen-item-label">违法类型</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.infoScreenData.illegalType"
+          :options="illegalTypeOptions"
+          @change="(value) => emits('mapListScreenChange', value, 'illegalType')"
+        />
+      </div>
+      <div class="screen-item" v-if="props.infoScreenData.illegalType === 0">
+        <div class="screen-item-label">整改措施</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.infoScreenData.measure"
+          :options="measureOptions"
+          @change="(value) => emits('mapListScreenChange', value, 'measure')"
+        />
+      </div>
+      <div class="screen-item">
+        <div class="screen-item-label">图斑状态</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.infoScreenData.mapStatus"
+          :options="mapStatusOptions"
+          @change="(value) => emits('mapListScreenChange', value, 'mapStatus')"
+        />
+      </div>
+      <div class="screen-item">
+        <div class="screen-item-label">标注类型</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.infoScreenData.markType"
+          :options="markTypeOptions"
+          @change="(value) => emits('mapListScreenChange', value, 'markType')"
+        />
+      </div>
+      <div class="screen-button-div">
+        <a-button type="primary" @click="dataListSort('area')">
+          {{ `排序(图斑面积) ${props.infoScreenData.sort === 'area' ? orderMark() : '-'}` }}
+        </a-button>
+        <a-button type="primary" @click="dataListSort('gengdi_area')">
+          {{ `排序(耕地面积) ${props.infoScreenData.sort === 'gengdi_area' ? orderMark() : '-'}` }}
+        </a-button>
+        <a-button type="primary">导出</a-button>
+        <!-- <a-button
+          type="primary"
+          :style="openCollect && 'background: #bf0000;'"
+          @click="getCollectList"
+          >我的收藏</a-button
+        > -->
+        <a-button @click="emits('getInfoList')">查询</a-button>
+      </div>
+    </div>
+    <div class="data-list-div">
+      <div
+        v-if="props.infoDataList.length > 0"
+        v-for="(item, index) in props.infoDataList"
+        :key="index"
+        class="data-list-item"
+      >
+        <div class="select-mark"></div>
+        <Icon
+          style="font-size: 30px; color: #0a6dea; cursor: pointer"
+          icon="gis:poi-alt"
+          @click="locationFun(item)"
+        />
+        <div class="data-list-item-content">
+          <div class="item-info-div">
+            <div class="item-info-id">{{ item.case_no }}</div>
+            <div class="item-info-layout">
+              <div class="item-info-batch">
+                <a-tag color="processing" v-if="item.address">{{ item.address }}</a-tag>
+              </div>
+              <div class="item-info-batch">
+                <a-tag color="success" v-if="item.case_description">{{
+                  item.case_description
+                }}</a-tag>
+              </div>
+            </div>
+          </div>
+          <div class="item-data-div">
+            <div class="item-data-item" v-if="item.area">
+              <div class="item-mark-div sum-mark">总</div>
+              {{ item.area }}
+            </div>
+            <div class="item-data-item" v-if="item.gengdi_area">
+              <div class="item-mark-div plowland-mark">耕</div>
+              {{ item.gengdi_area }}
+            </div>
+            <div class="item-data-item" v-if="item.nongyongdi_area">
+              <div class="item-mark-div farmland-mark">农</div>
+              {{ item.nongyongdi_area }}
+            </div>
+            <div class="item-data-item" v-if="item.zhongdianquyu_area">
+              <div class="item-mark-div adjust-mark">重</div>
+              {{ item.zhongdianquyu_area }}
+            </div>
+            <div class="item-data-item" v-if="item.guotukongjianguihua_area">
+              <div class="item-mark-div guihua-mark">规</div>
+              {{ item.guotukongjianguihua_area }}
+            </div>
+            <div class="item-data-item" v-if="item.shengtaibaohuhongxian_area">
+              <div class="item-mark-div shengtai-mark">生</div>
+              {{ item.shengtaibaohuhongxian_area }}
+            </div>
+          </div>
+        </div>
+        <div class="button-div">
+          <!-- <StarOutlined class="collect-button" /> -->
+          <Icon
+            title="飞地调整"
+            style="font-size: 20px"
+            icon="ant-design:send-outlined"
+            @click="changeArea(item)"
+          />
+        </div>
+        <div class="button-div">
+          <!-- <StarOutlined class="collect-button" /> -->
+          <Icon
+            title="详情"
+            style="font-size: 20px; color: #0960bd"
+            icon="bx:detail"
+            @click="showInfo(item)"
+          />
+        </div>
+      </div>
+      <div v-else class="no-data">
+        <a-empty :image="simpleImage" />
+      </div>
+    </div>
+    <div class="pagination-div">
+      <a-pagination
+        size="small"
+        v-model:pageSize="props.pageSize"
+        v-model:current="props.pageNo"
+        :total="props.total"
+        show-size-changer
+        show-quick-jumper
+        @change="changePage"
+      />
+    </div>
+    <Amend @register="registerModal" @success="handleSuccess" />
+    <a-modal
+      width="80%"
+      v-model:open="showInfoOpen"
+      title="详情"
+      :footer="null"
+      :maskClosable="true"
+      :destroyOnClose="true"
+      @cancel="showInfoOpen = false"
+    >
+      <div class="modal-content">
+        <ShowInfoModal :showInfoData="showInfoData" />
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, defineEmits, defineProps, computed } from 'vue';
+  import { StarOutlined } from '@ant-design/icons-vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import {
+    addCaseFavorite,
+    getFavoriteCaseList,
+    deleteFavoriteCase,
+  } from '@/api/bootstraps/index.ts';
+  import { getLoadDroneCaseInfoDetail } from '@/api/bootstraps/index.ts';
+  import {
+    batchOptions,
+    yearOptions,
+    mapTypeOptions,
+    illegalTypeOptions,
+    measureOptions,
+    mapStatusOptions,
+    markTypeOptions,
+  } from '@/views/demo/bootstraps/curbspotcity/util.ts';
+  import Amend from './amend.vue';
+  import { useModal } from '@/components/Modal';
+  import { Empty } from 'ant-design-vue';
+  import ShowInfoModal from '@/views/demo/bootstraps/curbspotcity/MapList/ShowInfoModal/index.vue';
+
+  const [registerModal, { openModal }] = useModal();
+  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+
+  const emits = defineEmits([
+    'closeShowInfo',
+    'mapListScreenChange',
+    'changeInfoPage',
+    'getInfoList',
+    'changeTask',
+    'infoDataListSort',
+    'collectChange',
+  ]);
+  const props = defineProps([
+    'infoScreenData',
+    'cityType',
+    'municipalAreaOptions',
+    'countiesAreaOptions',
+    'pageNo',
+    'pageSize',
+    'total',
+    'infoDataList',
+  ]);
+  const order = ref(0); // 0: 不排序 1: 升序 2: 降序
+  const orderMark = () => {
+    switch (order.value) {
+      case 0:
+        return '-';
+      case 1:
+        return '↑';
+      case 2:
+        return '↓';
+    }
+  };
+  const showInfoOpen = ref(false);
+  const openCollect = computed(() => {
+    if (props.infoScreenData.type === '') return false;
+    return true;
+  });
+  const showInfoData = ref();
+  onMounted(() => {
+    console.log('onMounted');
+  });
+
+  async function locationFun(record) {
+    console.log(record);
+    emits('changeTask', record.geomid);
+  }
+
+  const changePage = (page, pageSize) => {
+    console.log(page, pageSize);
+    emits('changeInfoPage', page, pageSize);
+  };
+  const collectItem = (item) => {
+    console.log(item);
+    let userInfo = userStore.getUserInfo;
+    let params = {
+      id: item.id,
+      caseNo: item.case_no,
+      favoriteUserId: userInfo.id,
+    };
+    addCaseFavorite(params).then((res) => {
+      console.log(res);
+      message.success('收藏成功');
+      emits('getInfoList');
+    });
+  };
+  const cancelCollectItem = (item) => {
+    deleteFavoriteCase(item.Fid).then((res) => {
+      message.success('取消收藏成功');
+      emits('getInfoList');
+    });
+  };
+  const getCollectList = () => {
+    let collect = props.infoScreenData.type;
+    let value: number | string = '';
+    if (collect === '') {
+      value = 1;
+    } else if (collect === 1) {
+      value = '';
+    }
+    emits('collectChange', value);
+  };
+  const dataListSort = (type) => {
+    order.value = (order.value + 1) % 3;
+    emits('infoDataListSort', type, order.value);
+  };
+  const showInfo = (item) => {
+    console.log(item);
+    showInfoData.value = item;
+    showInfoOpen.value = true;
+  };
+  function changeArea(record) {
+    console.log(record);
+    openModal(true, {
+      record: record,
+    });
+  }
+  function handleSuccess() {}
+</script>
+
+<style lang="less" scoped>
+  .content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .screen-div {
+    padding: 10px;
+    background: @component-background;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    margin-top: 10px;
+    .screen-item {
+      width: 50%;
+      display: flex;
+      margin-bottom: 3px;
+      .screen-item-label {
+        width: 75px;
+        padding-left: 10px;
+        display: flex;
+        align-items: center;
+        font-size: 15px;
+      }
+    }
+    .screen-button-div {
+      // display: flex;
+      // justify-content: space-between;
+      width: 100%;
+      button {
+        margin: 10px 10px 0 0;
+      }
+    }
+  }
+  .data-list-div {
+    flex: 1;
+    overflow: auto;
+    padding: 10px;
+    background: @component-background;
+    margin-top: 10px;
+    .data-list-item {
+      display: flex;
+      height: 60px;
+      align-items: center;
+      border-bottom: 1px solid #cdcccc;
+      .select-mark {
+        width: 3px;
+        height: 100%;
+      }
+      .data-list-item-content {
+        padding-left: 5px;
+        width: 80%;
+        .item-info-div {
+          display: flex;
+          align-items: center;
+          margin-bottom: 5px;
+          .item-info-id {
+            width: 185px;
+            border-radius: 11px;
+            display: flex;
+            align-items: center;
+            // justify-content: center;
+            height: 22px;
+          }
+          .item-info-layout {
+            padding-left: 15px;
+            display: flex;
+            flex: 1;
+            justify-content: space-between;
+          }
+          .item-info-batch {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        .item-data-div {
+          display: flex;
+          justify-content: space-between;
+          .item-data-item {
+            display: flex;
+            align-items: center;
+            .item-mark-div {
+              width: 20px;
+              height: 20px;
+              color: #fff;
+              border-radius: 6px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-right: 7px;
+            }
+            .sum-mark {
+              background: rgb(46 90 173);
+            }
+            .plowland-mark {
+              background: #01692a;
+            }
+            .adjust-mark {
+              background: #c06b1a;
+              width: 40px;
+            }
+            .farmland-mark {
+              background: #7d2bb1;
+            }
+            .guihua-mark {
+              background: #c06b1a;
+            }
+            .shengtai-mark {
+              background: #09b66d;
+            }
+          }
+        }
+      }
+      .button-div {
+        height: 30px;
+        width: 30px;
+        display: flex;
+        justify-content: space-evenly;
+        font-size: 20px;
+        border: 1px solid #d9d9d9;
+        border-radius: 50%;
+        margin-left: 10px;
+        cursor: pointer;
+        .collect-button:hover {
+          color: rgb(255, 205, 42);
+        }
+      }
+    }
+  }
+  .pagination-div {
+    height: 30px;
+    display: flex;
+    align-items: center;
+    background: @component-background;
+    justify-content: center;
+  }
+  .no-data {
+    padding: 20px 0;
+  }
+  .rollback {
+    background: @component-background;
+    padding: 10px;
+  }
+</style>
diff --git a/src/views/demo/bootstraps/changearea/index.vue b/src/views/demo/bootstraps/changearea/index.vue
new file mode 100644
index 00000000..49486974
--- /dev/null
+++ b/src/views/demo/bootstraps/changearea/index.vue
@@ -0,0 +1,316 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <AuditProgress
+        v-if="!showInfo"
+        :year="year"
+        :batch="batch"
+        :batchOptions="batchOptions"
+        :yearOptions="yearOptions"
+        :dataList="dataList"
+        @auditProgressScreenChange="auditProgressScreenChange"
+        @showInfo="changeShowInfo"
+      />
+      <MapList
+        v-if="showInfo"
+        :infoScreenData="infoScreenData"
+        :cityType="cityType"
+        :pageNo="pageNo"
+        :pageSize="pageSize"
+        :total="total"
+        :infoDataList="infoDataList"
+        :municipalAreaOptions="municipalAreaOptions"
+        :countiesAreaOptions="countiesAreaOptions"
+        @infoDataListSort="infoDataListSort"
+        @changeInfoPage="changeInfoPage"
+        @getInfoList="getInfoList"
+        @mapListScreenChange="mapListScreenChange"
+        @closeShowInfo="changeShowInfo"
+        @changeTask="changeTask"
+        @collectChange="collectChange"
+      />
+    </div>
+    <div class="map-box-div">
+      <MapboxMap
+        :mapConfig="mapConfig"
+        @handlerDrawComplete="handlerDrawComplete"
+        @mapOnLoad="onMapboxLoad"
+        ref="MapboxComponent"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, watch, defineAsyncComponent } from 'vue';
+  import mapboxgl, { Map } from 'mapbox-gl';
+  import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config.ts';
+  import AuditProgress from './AuditProgress/index.vue';
+  import MapList from './MapList/index.vue';
+  import { getLoadDroneCaseInfoCount, getLoadDroneCaseInfoDetail } from '@/api/bootstraps/index.ts';
+  import { batchOptions, yearOptions } from '@/views/demo/bootstraps/curbspotcity/util.ts';
+  import { getChildrenTree } from '@/api/demo/system.ts';
+  import { getGeom } from '@/api/sys/layerManagement';
+
+  const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+  const MapboxComponent = ref();
+  const mapConfig = ref({ isShowMap: false });
+
+  const showInfo = ref(false);
+  const year = ref<number>();
+  const batch = ref();
+  const dataList = ref<any>([]);
+  const infoDataList = ref<any>([]);
+  const infoScreenData = ref({
+    year: '',
+    batch: '',
+    mapNo: '',
+    countyId: '',
+    streetId: '',
+    mapType: '',
+    illegalType: '',
+    measure: '',
+    mapStatus: '',
+    markType: '',
+    sort: '',
+    order: '',
+    type: '', // 收藏
+  });
+  const pageNo = ref(1);
+  const pageSize = ref(10);
+  const total = ref(0);
+  const municipalAreaOptions = ref([]);
+  const countiesAreaOptions = ref([{ label: '全部', value: '' }]);
+  const cityType = ref();
+  const auditProgressScreenChange = (value, type) => {
+    switch (type) {
+      case 'year':
+        year.value = value;
+        break;
+      case 'batch':
+        batch.value = value;
+        break;
+    }
+    let params = {
+      year: year.value,
+    };
+    getLoadDroneCaseInfoCount(params).then((res) => {
+      console.log(res);
+      dataList.value = res;
+    });
+  };
+  const mapListScreenChange = (value, type) => {
+    switch (type) {
+      case 'year':
+        infoScreenData.value.year = value;
+        break;
+      case 'batch':
+        infoScreenData.value.batch = value;
+        break;
+      case 'mapNo':
+        infoScreenData.value.mapNo = value;
+        break;
+      case 'countyId':
+        infoScreenData.value.countyId = value;
+        break;
+      case 'streetId':
+        infoScreenData.value.streetId = value;
+        break;
+      case 'mapType':
+        infoScreenData.value.mapType = value;
+        if (value !== 1) {
+          infoScreenData.value.illegalType = '';
+          infoScreenData.value.measure = '';
+        }
+        break;
+      case 'illegalType':
+        infoScreenData.value.illegalType = value;
+        if (value !== 0) {
+          infoScreenData.value.measure = '';
+        }
+        break;
+      case 'measure':
+        infoScreenData.value.measure = value;
+        break;
+      case 'mapStatus':
+        infoScreenData.value.mapStatus = value;
+        break;
+      case 'markType':
+        infoScreenData.value.markType = value;
+        break;
+    }
+  };
+  const changeShowInfo = (value, item) => {
+    showInfo.value = value;
+    if (item) {
+      cityType.value = item;
+      infoScreenData.value.countyId = item.areaid;
+      municipalAreaOptions.value = [{ label: item.areaname, value: item.areaid }];
+      getChildrenTree({ parentId: item.areaid }).then((res) => {
+        console.log(res);
+        res.forEach((cityItem) => {
+          countiesAreaOptions.value.push({
+            label: cityItem.name,
+            value: cityItem.id,
+          });
+        });
+      });
+      getInfoList();
+    } else {
+      cityType.value = null;
+    }
+    console.log(item);
+  };
+  const getParams = () => {
+    let result = {};
+    let params = {
+      year: infoScreenData.value.year,
+      // batch: batch.value,
+      countyid: infoScreenData.value.countyId,
+      streetid: infoScreenData.value.streetId,
+      geomid: infoScreenData.value.mapNo,
+      is_illegal: infoScreenData.value.mapType,
+      weifaleixing: infoScreenData.value.illegalType,
+      measure_name: infoScreenData.value.measure,
+      handle_status_id: infoScreenData.value.mapStatus,
+      is_build_complete: infoScreenData.value.markType,
+      areaid: cityType.value.areaid,
+      level: cityType.value.level,
+      page: pageNo.value,
+      limit: pageSize.value,
+      sort: infoScreenData.value.sort,
+      order: infoScreenData.value.order,
+      type: infoScreenData.value.type,
+    };
+    Object.keys(params).forEach((key) => {
+      if (params[key] !== '' && params[key] !== null) {
+        result[key] = params[key];
+      }
+    });
+    return result;
+  };
+  watch(
+    () => year.value,
+    (newVal) => {
+      infoScreenData.value.year = newVal;
+    },
+  );
+  watch(
+    () => batch.value,
+    (newVal) => {
+      infoScreenData.value.batch = newVal;
+    },
+  );
+  let map: Map;
+  onMounted(() => {
+    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
+    // map = initMap();
+    getLoadDroneCaseInfoCount()
+      .then((res) => {
+        dataList.value = res;
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  });
+  onUnmounted(() => {
+    map && map.remove();
+  });
+  const initMap = () => {
+    return new mapboxgl.Map({
+      container: 'showMap',
+      language: 'zh-cmn',
+      projection: 'equirectangular', // wgs84参考系
+      style: MapboxDefaultStyle,
+      maxZoom: 22,
+      minZoom: 6,
+      zoom: 10,
+      // ...props.mapOptions,
+      center: [117.984425, 35.270654],
+    });
+  };
+  const getInfoList = () => {
+    getLoadDroneCaseInfoDetail(getParams()).then((res) => {
+      total.value = res.total;
+      infoDataList.value = res.items;
+    });
+  };
+  const changeInfoPage = (page, limit) => {
+    pageNo.value = page;
+    pageSize.value = limit;
+    getInfoList();
+  };
+  const collectChange = (value) => {
+    pageNo.value = 1;
+    infoScreenData.value.type = value;
+    getInfoList();
+  };
+
+  function changeTask(val) {
+    console.log(val);
+    let getGeomPrams = {
+      TableName: 'drone_shp_data ',
+      FieldName: 'gid',
+      FieldValue: val,
+      page: 1,
+      limit: 999,
+      key: null,
+    };
+    if (val) {
+      getGeom(getGeomPrams).then((res) => {
+        let geoms = [];
+        if (res) {
+          if (res.items?.length > 0) {
+            res.items.forEach((item, index) => {
+              let geom = {
+                key: item.gid,
+                mapgeom: item.geometry,
+              };
+              geoms.push(geom);
+            });
+          }
+          // MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
+          MapboxComponent.value.handlerDraw('Details', geoms, false);
+        } else {
+          createMessage.error('当前数据没有图斑！');
+        }
+      });
+    } else {
+      createMessage.error('当前数据没有图斑！');
+    }
+  }
+  const infoDataListSort = (type, order) => {
+    switch (order) {
+      case 0:
+        infoScreenData.value.sort = '';
+        infoScreenData.value.order = '';
+        break;
+      case 1:
+        infoScreenData.value.sort = type;
+        infoScreenData.value.order = 'asc';
+        break;
+      case 2:
+        infoScreenData.value.sort = type;
+        infoScreenData.value.order = 'desc';
+        break;
+    }
+    getLoadDroneCaseInfoDetail(getParams()).then((res) => {
+      total.value = res.total;
+      infoDataList.value = res.items;
+      pageNo.value = 1;
+    });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .curb-spot-city {
+    height: 100%;
+    display: flex;
+    .show-list {
+      width: 35%;
+    }
+    .map-box-div {
+      width: 65%;
+    }
+  }
+</style>
diff --git a/src/views/demo/bootstraps/changearea/util.ts b/src/views/demo/bootstraps/changearea/util.ts
new file mode 100644
index 00000000..fc534be6
--- /dev/null
+++ b/src/views/demo/bootstraps/changearea/util.ts
@@ -0,0 +1,36 @@
+export const batchOptions = [
+  {value: '第一批', label: '第一批'},
+  {value: '第二批', label: '第二批'},
+  {value: '第三批', label: '第三批'},
+]
+export const yearOptions = [
+  { value: '2024', label: 2024 },
+  { value: '2023', label: 2023 },
+  { value: '2022', label: 2022 },
+  { value: '2021', label: 2021 },
+  { value: '2020', label: 2020 },
+]
+export const mapTypeOptions = [
+  { label: '合法', value: 0 },
+  { label: '违法', value: 1 },
+  { label: '其他', value: 2 },
+]
+export const illegalTypeOptions = [
+  { label: '非农化', value: 0 },
+  { label: '非粮化', value: 1 },
+]
+export const measureOptions = [
+  { label: '拆除复耕', value: 0},
+  { label: '补办手续', value: 1},
+]
+export const mapStatusOptions = [
+  { label: '待接收', value: 0 },
+  { label: '待判定', value: 1 },
+  { label: '待整改', value: 2 },
+  { label: '待审核', value: 3 },
+  { label: '已完成', value: 4 },
+]
+export const markTypeOptions = [
+  { label: '建设中', value: 0 },
+  { label: '已建成', value: 1 },
+]
\ No newline at end of file