【图斑列表】收藏&详情

src/api/bootstraps/index.ts

@@ -14,7 +14,8 @@ enum Api {
   // 收藏案件
   AddCaseFavorite = '/api/DroneCaseinfo/AddCaseFavorite',
   // 获取收藏案件列表
-  FavoriteCaseList = '/api/DroneCaseinfo/FavoriteCaseList'
+  FavoriteCaseList = '/api/DroneCaseinfo/FavoriteCaseList',
+  DeleteFavoriteCase = '/api/DroneCaseinfo/DeleteFavoriteCase',
 }
 
 /**
@@ -47,6 +48,10 @@ export function getLoadTaskDetailList(params?: taskInfoParams) {
 export function addCaseFavorite(params?: addCaseFavoriteParams) {
   return defHttp.post({ url: Api.AddCaseFavorite, params });
 }
+export function deleteFavoriteCase(params: string){
+  return defHttp.post({ url: Api.DeleteFavoriteCase, data:params });
+}
+
 export function getFavoriteCaseList(params?: {uid:string}) {
   return defHttp.get({ url: Api.FavoriteCaseList, params });
 }

src/views/demo/bootstraps/curbspotcity/MapList/ShowInfoModal/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <a-descriptions 
+    :column="2" 
+    bordered
+    :contentStyle="{
+      'text-align': 'center',
+      'min-width': '250px',
+      'word-break': 'break-all'
+    }">
+    <a-descriptions-item label="id">{{ id }}</a-descriptions-item>
+    <a-descriptions-item label="案件编号">{{ case_no }}</a-descriptions-item>
+    <a-descriptions-item label="案件名称">{{ case_name }}</a-descriptions-item>
+    <a-descriptions-item label="案件描述">{{ case_description }}</a-descriptions-item>
+    <a-descriptions-item label="案件地址">{{ address }}</a-descriptions-item>
+    <a-descriptions-item label="总面积">{{ area? area: '-' }} 亩</a-descriptions-item>
+    <a-descriptions-item label="耕地面积">{{ gengdi_area? gengdi_area: '-' }} 亩</a-descriptions-item>
+    <a-descriptions-item label="国土空间规划面积">{{ guotukongjianguihua_area? guotukongjianguihua_area: '-' }} 亩</a-descriptions-item>
+    <a-descriptions-item label="农用地面积">{{ nongyongdi_area? nongyongdi_area: '-' }} 亩</a-descriptions-item>
+    <a-descriptions-item label="生态保护红线面积">{{ shengtaibaohuhongxian_area? shengtaibaohuhongxian_area: '-' }} 亩</a-descriptions-item>
+    <a-descriptions-item label="永久基本农田面积">{{ yongjiujibennongtian_area? yongjiujibennongtian_area: '-' }} 亩</a-descriptions-item>
+    <a-descriptions-item label="重点区域面积">{{ zhongdianquyu_area? zhongdianquyu_area: '-' }} 亩</a-descriptions-item>
+    <a-descriptions-item label="创建时间">{{ createtime }}</a-descriptions-item>
+  </a-descriptions>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from "vue"
+const props = defineProps(["showInfoData"])
+const {
+  address,
+  area,
+  case_description,
+  case_name,
+  case_no,
+  createtime,
+  gengdi_area,
+  guotukongjianguihua_area,
+  id,
+  nongyongdi_area,
+  shengtaibaohuhongxian_area,
+  yongjiujibennongtian_area,
+  zhongdianquyu_area 
+} = props.showInfoData
+</script>
+
+<style lang="scss" scoped></style>

src/views/demo/bootstraps/curbspotcity/MapList/index.vue

@@ -130,7 +130,7 @@
             {{`排序(耕地面积) ${props.infoScreenData.sort === 'gengdi_area'? orderMark(): '-'}`}}
           </a-button>
           <a-button type="primary" size="small">导出</a-button>
-          <a-button type="primary" size="small" @click="getCollectList">我的收藏</a-button>
+          <a-button type="primary" :style="openCollect && 'background: #bf0000;' " size="small" @click="getCollectList">我的收藏</a-button>
           <a-button size="small" @click="emits('getInfoList')">查询</a-button>
       </div>
     </div>
@@ -167,8 +167,9 @@
           </div>
         </div>
         <div class="button-div">
-          <StarOutlined class="collect-button" @click="collectItem(item)"/>
-          <Icon style="font-size: 20px" icon="bx:detail" />
+          <StarFilled v-if="item.Fid" style="color: rgb(255, 205, 42);cursor: pointer;" @click="cancelCollectItem(item)"/>
+          <StarOutlined v-else class="collect-button" @click="collectItem(item)"/>
+          <Icon style="font-size: 20px;cursor: pointer;" icon="bx:detail"  @click="showInfo(item)"/>
         </div>
       </div>
     </div>
@@ -182,14 +183,27 @@
         show-quick-jumper
         @change="changePage" />
     </div>
+    <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 } from "vue"
-import { StarOutlined } from '@ant-design/icons-vue';
+import { ref, onMounted, defineEmits, defineProps, computed } from "vue"
+import { StarOutlined, StarFilled } from '@ant-design/icons-vue';
 import Icon from '@/components/Icon/Icon.vue';
-import { addCaseFavorite,getFavoriteCaseList } from '@/api/bootstraps/index.ts';
+import { addCaseFavorite,getFavoriteCaseList, deleteFavoriteCase } from '@/api/bootstraps/index.ts';
 import { 
   batchOptions,
   yearOptions,
@@ -201,6 +215,7 @@ import {
 } from '@/views/demo/bootstraps/curbspotcity/util.ts'
 import { useUserStore } from '@/store/modules/user.ts'
 import { message } from "ant-design-vue";
+import ShowInfoModal from './ShowInfoModal/index.vue'
 const userStore = useUserStore()
 
 const emits = defineEmits([
@@ -210,6 +225,7 @@ const emits = defineEmits([
   "getInfoList",
   "changeTask",
   "infoDataListSort",
+  "collectChange",
 ])
 const props = defineProps([
   "infoScreenData",
@@ -232,7 +248,12 @@ const orderMark = () => {
       return '↓'
   }
 }
-
+const showInfoOpen = ref(false)
+const openCollect = computed(() => {
+  if(props.infoScreenData.type === '') return false
+  return true
+})
+const showInfoData = ref()
 onMounted(() => {
   console.log('onMounted')
 })
@@ -257,21 +278,34 @@ const collectItem = (item) => {
   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 userInfo = userStore.getUserInfo
-  let params = {
-    uid: userInfo.id
+  let collect = props.infoScreenData.type
+  let value: number|string = ''
+  if(collect === ''){
+    value = 1
+  }else if(collect === 1){
+    value = ''
   }
-  getFavoriteCaseList(params).then(res => {
-    console.log(res)
-  })
+  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
+}
 </script>
 
 <style lang="scss" scoped>
@@ -397,5 +431,9 @@ const dataListSort = (type) => {
   align-items: center;
   justify-content: center;
 }
-
+.modal-content{
+  padding: 30px;
+  height: 750px;
+  overflow: auto;
+}
 </style>

src/views/demo/bootstraps/curbspotcity/index.vue

@@ -27,6 +27,7 @@
         @mapListScreenChange="mapListScreenChange"
         @closeShowInfo="changeShowInfo"
         @changeTask="changeTask"
+        @collectChange="collectChange"
         />
     </div>
     <!-- <div id="showMap" class="map"></div> -->
@@ -72,6 +73,7 @@ const infoScreenData = ref({
   markType: '',
   sort: '',
   order: '',
+  type: '', // 收藏
 })
 const pageNo = ref(1)
 const pageSize = ref(10)
@@ -179,6 +181,7 @@ const getParams = () => {
     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){
@@ -230,6 +233,11 @@ const changeInfoPage = (page, limit) => {
   pageSize.value = limit
   getInfoList()
 }
+const collectChange = (value) => {
+  pageNo.value = 1
+  infoScreenData.value.type = value
+  getInfoList()
+}
 
 function changeTask(val) {
     console.log(val);