CaiYuanYiTiHua/src/views/demo/tiankongdi/auditinfo/index.vue

<template>
  <div class="curb-spot-city">
    <div class="show-list">
      <AuditProgress
        v-if="showParent"
        :year="year"
        :batch="batch"
        :batchOptions="batchOptions"
        :yearOptions="yearOptions"
        :dataList="dataList"
        @auditProgressScreenChange="auditProgressScreenChange"
        @showInfo="changeShowInfo"
      />
      <MapList
        @changeTask="changeTask"
        @changeShowParent="changeShowParent"
        :areaId="areaId"
        :level="level"
        :year="year"
        :batch="batch"
        :patchSource="patchSource"
        :yearOptions="yearOptions"
        :batchOptions="batchOptions"
        v-else
      />
    </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, 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/tiankongdi/index';
  import { getGeom,getConfig } from '@/api/sys/layerManagement';
  import { getDetail } from '@/api/sys/WFSchemeInfo';
  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 });

  function onMapboxLoad():void {
    getConfig({code:"mapsetting"}).then(res=>{
        mapConfig.value = JSON.parse(res.codeValue)
    })
  }

  const showParent = ref(true);
  const year = ref();
  const batch = ref();
  const patchSource = ref()
  const batchOptions = ref([]);
  const yearOptions = ref([
    { value: '2024', label: '2024' },
    { value: '2023', label: '2023' },
    { value: '2022', label: '2022' },
    { value: '2021', label: '2021' },
    { value: '2020', label: '2020' },
  ]);
  const dataList = ref([]);
  const areaId = ref('');
  const level = ref()
  const auditProgressScreenChange = (value, type) => {
    switch (type) {
      case 'year':
        year.value = value;
        break;
      case 'batch':
        batch.value = value;
        break;
      case 'patchSource':
        patchSource.value = value;
        break;
    }
    getCountList();
  };
  const changeShowInfo = (item) => {
    console.log(item);
    showParent.value = false;
    areaId.value = item.areaid;
    level.value = item.level
  };
  function changeShowParent() {
    getCountList()
    showParent.value = true;
  }
  async function getCountList() {
    const data = await getLoadTaskCount({
      year: year.value,
      tubanlaiyuan: patchSource.value,
      picihao: batch.value,
      illegal: 1,
    });
    dataList.value = data;
  }
  onMounted(() => {
    getYearList();
    getCountList();
    // TODO 获取批次
    batchOptions.value = []
  });
  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(record) {
    if(record?.geomid){
      // handlerGetMapConfigByFormId(record.processcode);
      let val = record.geomid
      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('当前数据没有图斑！');
      }
    }
    
  }

  // 根据发布表单的id获取地图配置
  function handlerGetMapConfigByFormId(id){
    if(id){
      getDetail({ code: id }).then(res=>{
        let data = res; 
        let scheme = JSON.parse(data.scheme.content);
        let wfData = scheme.wfData;
        let startFlow = wfData.find((item,index)=>{
          return item.type == "bpmn:StartEvent";
        })
        if(startFlow?.mapConfig){
          mapConfig.value = startFlow?.mapConfig
        }
        
      });
      
    }
  }
</script>

<style lang="scss" scoped>
  .curb-spot-city {
    height: 100%;
    display: flex;
    .show-list {
      width: 590px;
      background: #EFEFEF;
    }
    .map-box-div {
      width: 65%;
    }
  }
</style>