图斑调整优化

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

@@ -147,7 +147,7 @@
       </div>
     </div>
     <div class="data-list-div" style="padding-top: 1px;">
-      <div v-for="(item, index) in infoDataList" :key="index" :class="item.id == selectId ? 'data-list-item checked' : 'data-list-item'">
+      <div v-for="(item, index) in infoDataList" :key="index" :class="classFun(item)">
         <div class="data-list-layout-div">
           <div class="data-list-title-div">
             <img
@@ -156,7 +156,7 @@
               style="cursor: pointer"
               @click="locationFun(item)"
             />
-            <div class="label-div" @click="selectAreaId(item.id)">
+            <div class="label-div" @click="selectAreaId(item)">
               <div class="item-label">{{ item.countyname }}</div>
               <div class="item-sub-label">
                 <span style="margin-right: 12px">{{ item.streetname }}</span>
@@ -170,7 +170,7 @@
           </div>
         </div>
         <div class="data-list-info-div">
-          <div class="info-layout-div" @click="selectAreaId(item.id)">
+          <div class="info-layout-div" @click="selectAreaId(item)">
             <div class="info-item">
               <div class="info-label">总面积</div>
               <div class="info-data">{{ item.area }}亩</div>
@@ -253,14 +253,14 @@
   patchSourceOptions,
 } from '@/views/demo/tiankongdi/curbspotcity/util';
 import Amend from './amend.vue';
-  import { Empty ,Spin,message} from 'ant-design-vue';
+import { Empty, message } from 'ant-design-vue';
 import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
 
 const modalShow = ref(false);
 const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
 const pageSize = ref(10);
 const pageNo = ref(1);
-  const total = ref(0)
+const total = ref(0);
 const mapStatusOptions = ref([
   {
     label: '正常',
@@ -270,19 +270,16 @@
     label: '分割后关闭',
     value: '分割后关闭',
   },
-  ])
-  const modalRecord = ref('');
-  const emits = defineEmits([
-    'changeSpin',
-    'changeTask'
 ]);
+const modalRecord = ref('');
+const emits = defineEmits(['changeSpin', 'changeTask']);
 const order = ref(0); // 0: 不排序 1: 升序 2: 降序
 const showSortMark = (key, sort) => {
   if (infoScreenData.value.sort === key && sort === order.value) {
-    return true
+    return true;
-  }
-  return false
   }
+  return false;
+};
 
 const infoDataList = ref([]);
 const infoScreenData: any = ref({
@@ -306,9 +303,18 @@
   order: null,
   type: null,
 });
-
+const selectItem = ref();
+const classFun = (item) => {
+  let string = 'data-list-item';
+  if (selectItem.value && item.id == selectItem.value.id) {
+    string += ' checked';
+  }
+  if (item.unitname == '已关闭') {
+    string += ' close-div';
+  }
+  return string;
+};
 const mapListScreenChange = (value, type) => {
-    console.log(value,type)
   switch (type) {
     case 'year':
       infoScreenData.value.year = value;
@@ -321,7 +327,6 @@
       break;
     case 'countyid':
       infoScreenData.value.countyid = value;
-        getStreetOrgs(value);
       break;
     case 'streetid':
       infoScreenData.value.streetid = value;
@@ -347,21 +352,23 @@
       break;
     case 'mapStatus':
       if (value.length > 0) {
-          infoScreenData.value.isSplit = value.join(',')
+        infoScreenData.value.isSplit = value.join(',');
       } else {
-          delete infoScreenData.value.isSplit
+        delete infoScreenData.value.isSplit;
       }
       break;
   }
 };
 const getInfoList = () => {
-    emits('changeSpin',true)
+  emits('changeSpin', true);
-    getLoadDroneCaseInfoDetail(infoScreenData.value).then((res) => {
+  getLoadDroneCaseInfoDetail(infoScreenData.value)
+    .then((res) => {
       infoDataList.value = res.items;
-      total.value = res.total
+      total.value = res.total;
-    }).finally(() => {
-      emits('changeSpin',false)
     })
+    .finally(() => {
+      emits('changeSpin', false);
+    });
 };
 const showInfoOpen = ref(false);
 const openCollect = computed(() => {
@@ -371,7 +378,6 @@
 const showInfoData = ref();
 onMounted(() => {
   getInfoList();
-
 });
 // 查看位置
 async function locationFun(record) {
@@ -386,29 +392,28 @@
 // 查看接受处理里收藏的
 const getCollectList = () => {
   let collect = infoScreenData.value.type;
-    console.log(collect)
   if (collect === '' || collect == null) {
     infoScreenData.value.type = 1;
   } else if (collect === 1) {
-      delete infoScreenData.value.type
+    delete infoScreenData.value.type;
   }
-    getInfoList()
+  getInfoList();
 };
 const dataListSort = (type) => {
   order.value = (order.value + 1) % 3;
   switch (order.value) {
     case 0:
-       delete infoScreenData.value.sort 
+      delete infoScreenData.value.sort;
-       delete infoScreenData.value.order 
+      delete infoScreenData.value.order;
-        break
+      break;
     case 1:
-        infoScreenData.value.sort = type
+      infoScreenData.value.sort = type;
-        infoScreenData.value.order = 'asc'
+      infoScreenData.value.order = 'asc';
-        break
+      break;
     case 2:
-        infoScreenData.value.sort = type
+      infoScreenData.value.sort = type;
-        infoScreenData.value.order = 'desc'
+      infoScreenData.value.order = 'desc';
-        break
+      break;
   }
   getInfoList();
 };
@@ -419,24 +424,27 @@
   });
 };
 function changeArea() {
-    if(!selectId.value){
+  if (!selectItem.value) {
-      message.warning('请选择一条数据进行飞地调整')
+    message.warning('请选择一条数据进行飞地调整');
-      return
+    return;
+  }
+  if (selectItem.value.unitname == '已关闭') {
+    message.warning('已关闭的不能进行飞地调整！');
+    return;
   }
   modalShow.value = true;
-    modalRecord.value = selectId.value;
+  modalRecord.value = selectItem.value.id;
 }
-  const selectId =ref()
+function selectAreaId(item) {
-  function selectAreaId(id){
+  selectItem.value = item;
-    selectId.value = id
 }
 const resetScreenData = () => {
   infoScreenData.value = {
     limit: pageSize.value,
     page: pageNo.value,
-    }
+  };
   getInfoList();
-  }
+};
 function closeModal() {
   modalShow.value = false;
 }
@@ -504,7 +512,7 @@
       font-family: Alibaba PuHuiTi;
       font-weight: 400;
       color: #ffffff;
-        background: #139AF8;
+      background: #139af8;
       margin-left: 4px;
       height: 39px;
       font-size: 17px;
@@ -579,7 +587,7 @@
     .interval-div {
       height: 100%;
       width: 1px;
-        background:#EDEDED;
+      background: #ededed;
       margin-left: 10px;
       margin-right: 10px;
     }
@@ -720,8 +728,14 @@
     border-bottom-right-radius: 6px;
   }
   .data-list-item.checked {
-      background:#EFF3FC;
+    border: 1px solid #139af8;
-      border: 1px solid #139AF8;
+  }
+  .data-list-item.close-div {
+    background: #eff3fc;
+  }
+  .data-list-item.checked.close-div {
+    background: #eff3fc;
+    border: 1px solid #139af8;
   }
 }
 </style>