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

<template>
  <div class="curb-spot-city">
    <div class="show-list">
      <a-spin :spinning="spinning">
        <AuditProgress
          v-if="showParent"
          :year="year"
          :batch="batch"
          :batchOptions="batchOptions"
          :yearOptions="yearOptions"
          :dataList="dataList"
          @auditProgressScreenChange="auditProgressScreenChange"
          @showInfo="changeShowInfo"
          @openLoading="openLoading"
          @closeLoading="closeLoading"
          @getCountList="getCountList"
        />
        <MapList
          @changeTask="changeTask"
          @changeShowParent="changeShowParent"
          :areaId="areaId"
          :level="level"
          :year="year"
          :batch="batch"
          :patchSource="patchSource"
          :yearOptions="yearOptions"
          :batchOptions="batchOptions"
          @openLoading="openLoading"
          @closeLoading="closeLoading"
          v-else
        />
      </a-spin>
    </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 { LoadReportCaseCount } from '@/api/degraining/index';
  import { getGeom, getConfig } from '@/api/sys/layerManagement';
  import { getDetail } from '@/api/sys/WFSchemeInfo';
  import { useMessage } from '@/hooks/web/useMessage';
  import { yearOptions } from '@/utils/global';

  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 spinning = ref(false);
  const showParent = ref(true);
  const year = ref();
  const batch = ref();
  const patchSource = ref();
  const batchOptions = ref([]);
  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) => {
    showParent.value = false;
    areaId.value = item.areaid;
    level.value = item.level;
  };
  function changeShowParent() {
    getCountList();
    showParent.value = true;
  }
  async function getCountList() {
    spinning.value = true;
    const data = await LoadReportCaseCount({
      year: year.value,
      tubanlaiyuan: patchSource.value,
      picihao: batch.value,
      illegal: 1,
    });
    spinning.value = false;
    dataList.value = data;
  }
  onMounted(() => {
    getCountList();
    // TODO 获取批次
    batchOptions.value = [];
  });
  const openLoading = () => {
    spinning.value = true;
  };
  const closeLoading = () => {
    spinning.value = false;
  };
  function changeTask(record) {
    if (record?.geomid) {
      // handlerGetMapConfigByFormId(record.processcode);
      let val = record.geomid;
      let getGeomPrams = {
        TableName: 'drone_shp_data ',
        FieldName: 'gid',
        FieldValue: val?.split(','),
        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;
      :deep(.ant-spin-nested-loading) {
        height: 100%;
      }
      :deep(.ant-spin-container) {
        height: 100%;
      }
    }
    .map-box-div {
      width: 65%;
    }
  }
</style>