From d0891860472a7e1cfd2e064e6aa37c14ad2c0ba9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Tue, 2 Jul 2024 17:42:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E6=96=91=E4=B8=BE=E8=AF=81=E5=AE=A1?=
 =?UTF-8?q?=E6=A0=B8=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MapboxMaps/MapComponent.vue    |   5 +-
 .../auditinfo/AuditProgress/index.vue         |  33 ++++--
 .../bootstraps/auditinfo/MapList/index.vue    |  67 ++++++++---
 src/views/demo/bootstraps/auditinfo/index.vue | 110 ++++++++++++++----
 4 files changed, 164 insertions(+), 51 deletions(-)

diff --git a/src/components/MapboxMaps/MapComponent.vue b/src/components/MapboxMaps/MapComponent.vue
index 238d1868..d342c6d3 100644
--- a/src/components/MapboxMaps/MapComponent.vue
+++ b/src/components/MapboxMaps/MapComponent.vue
@@ -395,9 +395,10 @@
         style: MapboxDefaultStyle,
         // maxZoom: props.mapConfig.maxZoom ? props.mapConfig.maxZoom:18,
         minZoom: props.mapConfig.minZoom ? props.mapConfig.minZoom:1,
-        zoom: props.mapConfig.zoom ? props.mapConfig.zoom:12,
+        zoom: props.mapConfig.zoom ? props.mapConfig.zoom:10,
         pitch:props.mapConfig.angle ? props.mapConfig.angle:0,
-        center: props.mapConfig.center?.split(","),
+        center: props.mapConfig.center?.split(",") ? props.mapConfig.center?.split(",") : [117.984425,35.270654],
+
 
       });
     };
diff --git a/src/views/demo/bootstraps/auditinfo/AuditProgress/index.vue b/src/views/demo/bootstraps/auditinfo/AuditProgress/index.vue
index 13f4c7ba..c14362e0 100644
--- a/src/views/demo/bootstraps/auditinfo/AuditProgress/index.vue
+++ b/src/views/demo/bootstraps/auditinfo/AuditProgress/index.vue
@@ -8,14 +8,10 @@
           style="flex: 1"
           v-model:value="props.year"
           :options="yearOptions"
-          @change="
-            (value) => {
-              emits('auditProgressScreenChange', value, 'year');
-            }
-          "
+          @change="changeParam"
         />
       </div>
-      <div class="screen-item">
+      <!-- <div class="screen-item">
         <div class="screen-item-label">批次</div>
         <a-select
           allowClear
@@ -28,17 +24,18 @@
             }
           "
         />
-      </div>
+      </div> -->
     </div>
   </div>
   <div class="data-list">
-    <div class="data-title">审核进度</div>
+    <!-- <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', item.areaid)"
+        v-if="dataList.length > 0"
       >
         <div class="name-div">
           <div class="item-mark"></div>
@@ -48,6 +45,9 @@
           <spam style="color: #086dec">{{ item.count }}</spam>
         </div>
       </div>
+      <div v-else class="no-data">
+        <a-empty :image="simpleImage" />
+      </div>
     </div>
   </div>
 </template>
@@ -55,13 +55,20 @@
 <script setup lang="ts">
   import { ref, defineProps, defineEmits, toRefs } from 'vue';
   import Icon from '@/components/Icon/Icon.vue';
+  import { Empty } from 'ant-design-vue';
+
   const props = defineProps(['year', 'batch', 'batchOptions', 'yearOptions', 'dataList']);
   const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
-  
+
+  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+  function changeParam(val) {
+    emits('auditProgressScreenChange', val, 'year');
+  }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
   .screen-div {
+    background: @component-background;
     padding: 10px;
     .screen-row {
       display: flex;
@@ -81,6 +88,8 @@
   .data-list {
     height: calc(100% - 52px);
     // background: darkgoldenrod;
+    background: @component-background;
+    margin-top: 10px;
     .data-title {
       height: 40px;
       background: #bab9b7;
@@ -93,6 +102,7 @@
     }
     .show-data-list-content {
       .data-item {
+        cursor: pointer;
         width: 100%;
         display: flex;
         height: 50px;
@@ -128,4 +138,7 @@
       }
     }
   }
+  .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 d75b8fff..24b703dc 100644
--- a/src/views/demo/bootstraps/auditinfo/MapList/index.vue
+++ b/src/views/demo/bootstraps/auditinfo/MapList/index.vue
@@ -1,10 +1,21 @@
 <template>
   <div class="content">
-    <!-- 年份、批次、标注类型（在建、已建成、持续变化）、图版号  -->
+    <div class="rollback">
+      <Icon
+        style="font-size: 20px; cursor: pointer"
+        icon="ant-design:arrow-left-outlined"
+        @click="emits('changeShowParent')"
+      />
+    </div>
     <div class="screen-div">
       <div class="screen-item">
         <div class="screen-item-label">年份</div>
-        <a-select allowClear style="flex: 1" v-model:value="params.year" :options="yearOptions" />
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="params.year"
+          :options="props.yearOptions"
+        />
       </div>
       <div class="screen-item">
         <div class="screen-item-label">标注类型</div>
@@ -33,7 +44,12 @@
       </div> -->
     </div>
     <div class="data-list-div">
-      <div v-for="(item, index) in dataList" :key="index" class="data-list-item">
+      <div
+        v-for="(item, index) in dataList"
+        :key="index"
+        class="data-list-item"
+        v-if="dataList.length > 0"
+      >
         <div class="select-mark"></div>
         <Icon
           style="font-size: 30px; color: #bf0000; cursor: pointer"
@@ -44,7 +60,7 @@
           <div class="item-info-div">
             <div class="item-info-id">{{ item.case_no }}</div>
             <div class="item-info-layout">
-              <div>{{ item.address }}</div>
+              <div class="item-info-address" :title="item.address">{{ item.address }}</div>
               <div class="item-info-batch">
                 <a-tag color="success">{{ item.unitname }}</a-tag>
               </div>
@@ -85,8 +101,11 @@
           />
         </div>
       </div>
+      <div v-else class="no-data">
+        <a-empty :image="simpleImage" />
+      </div>
     </div>
-    <div class="pagination-div">
+    <div class="pagination-div" v-if="dataList.length > 0">
       <a-pagination
         size="small"
         :total="total"
@@ -117,17 +136,21 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref, defineEmits } from 'vue';
   import { StarOutlined } from '@ant-design/icons-vue';
   import Icon from '@/components/Icon/Icon.vue';
   import { getLoadTaskDetailList } from '@/api/bootstraps/index';
   import { flowStore } from '@/store/modules/flow';
   import { getDetail } from '@/api/sys/WFSchemeInfo';
   import { Audit } from '@/views/demo/workflow/task/process/page';
+  import { Empty } from 'ant-design-vue';
+
+  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+  const emits = defineEmits(['changeTask', 'changeShowParent']);
 
   const flowWfDataStore = flowStore();
 
-  const props = defineProps(['areaId']);
+  const props = defineProps(['areaId', 'yearOptions', 'year']);
   const processId = ref('');
   const taskId = ref('');
   const isRead: any = ref(0);
@@ -139,7 +162,7 @@
     level: null,
     areaid: props.areaId,
     geomid: null,
-    year: null,
+    year: props.year,
     is_build_complete: null,
   });
   const markTypeOptions = ref([
@@ -147,12 +170,7 @@
     { label: '已建成', value: 1 },
     { label: '持续变化', value: 2 },
   ]);
-
-  const yearOptions = ref([
-    { label: '2022', value: '2022' },
-    { label: '2021', value: '2021' },
-    { label: '2020', value: '2020' },
-  ]);
+ 
   const dataList = ref([]);
   const total = ref(0);
   async function getTaskList() {
@@ -179,6 +197,7 @@
   }
   async function locationFun(record) {
     console.log(record);
+    emits('changeTask', record.geomid);
   }
   onMounted(() => {
     getTaskList();
@@ -188,14 +207,15 @@
   .full-modal {
     .ant-modal {
       max-width: 100%;
+      top: 0;
     }
 
     .ant-modal-content {
-      height: calc(80vh);
+      height: calc(100vh);
     }
 
     .ant-modal-body {
-      height: 80%;
+      height: 85%;
     }
   }
 </style>
@@ -236,6 +256,7 @@
     padding: 10px;
     background: @component-background;
     margin-top: 10px;
+    height: 60vh;
     .data-list-item {
       display: flex;
       height: 60px;
@@ -268,6 +289,12 @@
             flex: 1;
             justify-content: space-between;
           }
+          .item-info-address {
+            width: 100px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
           .item-info-batch {
             overflow: hidden;
             text-overflow: ellipsis;
@@ -326,5 +353,13 @@
   }
   .pagination-div {
     background: @component-background;
+    padding: 0 10px 10px;
+  }
+  .no-data {
+    padding: 20px 0;
+  }
+  .rollback {
+    background: @component-background;
+    padding: 10px;
   }
 </style>
diff --git a/src/views/demo/bootstraps/auditinfo/index.vue b/src/views/demo/bootstraps/auditinfo/index.vue
index 18a13f12..d9188d2d 100644
--- a/src/views/demo/bootstraps/auditinfo/index.vue
+++ b/src/views/demo/bootstraps/auditinfo/index.vue
@@ -11,22 +11,43 @@
         @auditProgressScreenChange="auditProgressScreenChange"
         @showInfo="changeShowInfo"
       />
-      <MapList :areaId="areaId" v-else />
+      <MapList
+        @changeTask="changeTask"
+        @changeShowParent="changeShowParent"
+        :areaId="areaId"
+        :year="year"
+        :yearOptions="yearOptions"
+        v-else
+      />
     </div>
-    <div id="showMap" class="map"></div>
+    <!-- <div id="showMap" class="map"></div> -->
+    <MapboxMap
+      :mapConfig="mapConfig"
+      @handlerDrawComplete="handlerDrawComplete"
+      @mapOnLoad="onMapboxLoad"
+      ref="MapboxComponent"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted } from 'vue';
+  import { ref, onMounted, onUnmounted, 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 { getLoadTaskCount } from '@/api/bootstraps/index';
+  import { getGeom } from '@/api/sys/layerManagement';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+
+  const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+  const MapboxComponent = ref();
+  const mapConfig = ref({ isShowMap: false });
 
   const showParent = ref(true);
-  const year = ref('');
+  const year = ref();
   const batch = ref('');
   const batchOptions = ref([
     { value: '第一批', label: '第一批' },
@@ -43,6 +64,7 @@
   const dataList = ref([]);
   const areaId = ref('');
   const auditProgressScreenChange = (value, type) => {
+    console.log(value, type);
     switch (type) {
       case 'year':
         year.value = value;
@@ -51,38 +73,80 @@
         batch.value = value;
         break;
     }
+    getCountList();
   };
   const changeShowInfo = (value) => {
     console.log(value);
     showParent.value = false;
     areaId.value = value;
   };
+  function changeShowParent() {
+    console.log('dedededede')
+    showParent.value = true;
+  }
   async function getCountList() {
-    const data = await getLoadTaskCount();
+    const data = await getLoadTaskCount({
+      year: year.value,
+    });
     dataList.value = data;
   }
-  let map: Map;
   onMounted(() => {
-    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
-    map = initMap();
+    getYearList();
     getCountList();
   });
-  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],
+  function getYearList() {
+    let num = 10;
+    const currentYear = new Date().getFullYear();
+    // 存储年份数据的数组
+    let list: any = [];
+    // 获取当前年份
+    year.value = Number(`${currentYear}`);
+    list.push({
+      value: Number(`${currentYear}`),
+      label: Number(`${currentYear}`),
     });
-  };
+    // 获取后面几年的数据
+    for (let i = 1; i <= num; i++) {
+      list.push({
+        value: Number(`${currentYear - i}`),
+        label: Number(`${currentYear - i}`),
+      });
+    }
+    yearOptions.value = list;
+  }
+  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('当前数据没有图斑！');
+    }
+  }
 </script>
 
 <style lang="scss" scoped>