Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

src/components/MapboxMaps/src/config.ts

@@ -1,5 +1,5 @@
 export enum MapboxConfig {
-  ACCESS_TOKEN = 'pk.eyJ1IjoiY3VybXVkZ2VvbnBoZCIsImEiOiJjbHAxZXU2dmwwajV6MmxwZzRpdXhobjB2In0.uIuuAtk1EtV7HSbjpUfeOw',
+  ACCESS_TOKEN = 'pk.eyJ1Ijoic2h1c2h1YmlvIiwiYSI6ImNsN2QxZGdxdjE2aWYzd21pazFteGY3OGMifQ.fb3z0dSPrKhHjKu50zO-sg',
   // ACCESS_TOKEN = "1234",
   TDT_TOKEN = 'b6585bc41ee16251dbe6b1af64f375d9',
   // add more config options here

src/utils/global.ts

@@ -35,6 +35,11 @@ export const mapTypeOptions = [
   { label: '非农化违法', value: 3 },
   { label: '非粮化违法', value: 4 },
 ];
+export const xcsjMapTypeOptions = [
+  { label: '合法', value: 0 },
+  { label: '违法', value: 1 },
+  { label: '其他', value: 2 },
+];
 export const keyIssuesIIMapTypeOptions = [
   { label: '合法', value: 0 },
   { label: '违法', value: 1 },
@@ -68,6 +73,13 @@ export const mapStatusOptions = [
   // { label: '市级驳回', value: '市级驳回' },
   // { label: '县级驳回', value: '县级驳回' },
 ];
+export const xcsjMapStatusOptions = [
+  { label: '待接收', value: '待接收' },
+  { label: '待填报', value: '待填报' },
+  { label: '待整改', value: '待整改' },
+  { label: '市级驳回', value: '市级驳回' },
+  { label: '县级驳回', value: '县级驳回' },
+];
 export const keyProblemSearchMapStatusOptions = [
   { label: '待接收', value: '待接收' },
   { label: '待填报', value: '待填报' },

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

@@ -129,7 +129,7 @@
                   v-model:value="props.infoScreenData.mapStatus"
                   @change="(value) => emits('mapListScreenChange',value,'mapStatus')"
                   style="width: 100%" 
-                  :options="mapStatusOptions"></a-checkbox-group>
+                  :options="xcsjMapStatusOptions"></a-checkbox-group>
                 </div>
             </div>
             <!-- <div style="display:flex;">
@@ -297,7 +297,7 @@ import {
   mapTypeOptions,
   illegalTypeOptions,
   measureOptions,
-  mapStatusOptions,
+  xcsjMapStatusOptions,
   markTypeOptions,
   inspectionAuditPatchSourceOptions,
   isOverdueOptions,

src/views/demo/inspectionaudit/patchsummary/patchsummary.data.ts

@@ -6,7 +6,7 @@ import {
   yearOptions,
   markTypeOptions,
   xcsjNowStatusOptions,
-  mapTypeOptions,
+  xcsjMapTypeOptions,
 } from '@/utils/global';
 
 export const columns: BasicColumn[] = [
@@ -205,7 +205,7 @@ export const searchFormSchema: FormSchema[] = [
     component: 'Select',
     colProps: { span: 4 },
     componentProps: {
-      options: mapTypeOptions,
+      options: xcsjMapTypeOptions,
     },
   },
   {

src/views/demo/system/geoservermanagement/clound/clound.data.ts

@@ -158,7 +158,7 @@ export const servicesColumns: BasicColumn[] = [
     },
 ];
 
-export const MAPBOX_TOKEN = "pk.eyJ1IjoiY3VybXVkZ2VvbnBoZCIsImEiOiJjbHAxZXU2dmwwajV6MmxwZzRpdXhobjB2In0.uIuuAtk1EtV7HSbjpUfeOw";
+export const MAPBOX_TOKEN = "pk.eyJ1Ijoic2h1c2h1YmlvIiwiYSI6ImNsN2QxZGdxdjE2aWYzd21pazFteGY3OGMifQ.fb3z0dSPrKhHjKu50zO-sg";
 
 export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
 

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

@@ -0,0 +1,882 @@
+<template>
+  <div class="map-list-content">
+    <div class="screen-div">
+      <div class="screen-item" style="margin-right:20px;margin-bottom:12px;">
+        <div class="screen-item-label">年份</div>
+        <a-select
+          allowClear
+          style="width:120px;"
+          v-model:value="props.infoScreenData.year"
+          :options="yearOptions"
+          @change="(value) => emits('mapListScreenChange',value,'year')"
+        />
+      </div>
+      <div class="screen-item" style="margin-right:17px;margin-bottom:12px;">
+        <div class="screen-item-label" style="margin-right: 11px;">线索来源</div>
+        <a-select
+          allowClear
+          style="width:120px;"
+          v-model:value="props.infoScreenData.patchSource"
+          :options="tubanlaiyuanOptions"
+          @change="(value) => emits('mapListScreenChange',value,'patchSource')"
+        />
+      </div>
+      <div class="screen-item" style="margin-bottom:12px;">
+        <div class="screen-item-label">批次</div>
+        <a-select
+          allowClear
+          style="width: 118px"
+          :options="batchOptions"
+          v-model:value="props.infoScreenData.batch"
+          @change="(value) => emits('mapListScreenChange',value,'batch')"
+        />
+      </div>
+      <div class="screen-item" style="margin-bottom:12px;">
+        <div class="screen-item-label" style="margin-right: 10px;">下发时间</div>
+        <a-range-picker
+          :format="'YYYY-MM-DD'"
+          allowClear
+          style="width: 306px;"
+          class="item-time-select"
+          @change="(value) => emits('mapListScreenChange',value,'time')"
+        />
+      </div>
+      <div class="screen-item" style="margin-left: 13px;">
+        <div class="screen-item-label">乡镇</div>
+        <a-select
+          allowClear
+          style="width:120px;"
+          v-model:value="props.infoScreenData.streetId"
+          :options="streetsAreaOptions"
+          @change="(value) => emits('mapListScreenChange',value,'streetId')"
+        />
+      </div>
+     
+      <div class="screen-item" style="margin-right: 14px;">
+        <a-input
+          allowClear
+          placeholder="请输入线索编号"
+          class="item-input"
+          v-model:value="props.infoScreenData.mapNo"
+          @change="(value) => emits('mapListScreenChange',value.target.value,'mapNo')"
+          style="width:404px;"
+          @press-enter="querysBtn"
+        />
+      </div>
+      <div class="screen-item" style="margin-left: 10px;cursor: pointer;">
+        <a-button 
+          class="item-button"
+          type="primary"
+          :icon="h(SearchOutlined)"
+          @click="querysBtn">查询</a-button>
+        <Icon style="font-size: 25px;margin-left: 10px;" icon="streamline:interface-time-reset-time-clock-reset-stopwatch-circle-measure-loading" @click="emits('resetScreenData')" />
+      </div>
+    </div>
+    <div class="sift-div">
+      <div class="layout-div">
+        <div class="sift-item" @click="dataListSort('area')">
+          <div class="sift-label">总面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item"  @click="dataListSort('gengdi_area')">
+          <div class="sift-label">耕地面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('gengdi_area',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item"  @click="dataListSort('synchronoustime')">
+          <div class="sift-label">下发时间</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('synchronoustime',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('synchronoustime',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+      </div>
+      <div class="collect-div">
+        <a-popover placement="bottom">
+          <template #content>
+            <div style="display:flex;align-items: center;margin-top: 4px;">
+              <div>线索面积：</div>
+              <div style="display:flex;">
+                <a-input style="width:30%;" 
+                  v-model:value="props.infoScreenData.mapAreaFirst"
+                  @change="(e) => emits('mapListScreenChange',e.target.value,'mapAreaFirst')"
+                  />
+                <span>---</span>
+                <a-input  style="width:30%;margin-right: 4px;"
+                  v-model:value="props.infoScreenData.mapAreaLast"
+                  @change="(e) => emits('mapListScreenChange',e.target.value,'mapAreaLast')"
+                  />
+                  亩
+              </div>
+            </div>
+            <div style="display:flex;margin-top: 4px;">
+              <div>耕地面积：</div>
+              <div style="display:flex;align-items: center;">
+                <a-input style="width:30%;"
+                  v-model:value="props.infoScreenData.arableAreaFirst"
+                  @change="(e) => emits('mapListScreenChange',e.target.value,'arableAreaFirst')"
+                  />
+                <span>---</span>
+                <a-input  style="width:30%;margin-right: 4px;"
+                  v-model:value="props.infoScreenData.arableAreaLast"
+                  @change="(e) => emits('mapListScreenChange',e.target.value,'arableAreaLast')"
+                  />
+                  亩
+              </div>
+            </div>
+          </template>
+          <img src="@/assets/images/tiankongdi/filt.png" class="img-box mr-r-20" />
+        </a-popover>
+        <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"  @click="getCollectList" v-if="openCollect"/>
+        <img src="@/assets/images/tiankongdi/collect.png" class="img-box"  @click="getCollectList" v-else/>
+      </div>
+    </div>
+    <div class="data-list-div" style="padding-top: 1px;">
+      <div v-for="(item, index) in props.infoDataList" :key="index" class="data-list-item">
+        <div class="back-box" v-if="showDrawBack(item,true)">{{ drawBackSpan(item,true) }}</div>
+        <div class="data-list-layout-div">
+          <div class="data-list-title-div">
+            <img src="/positioning.png" class="map-mark" style="cursor:pointer;" @click="locationFun(item)"/>
+            <div class="label-div">
+              <div class="item-label">{{item.countyname}}</div>
+              <div class="item-sub-label">
+                <div style="margin-right:12px;max-width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.streetname}}</div>
+                <span>{{item.caseno}}</span>
+              </div>
+            </div>
+            <div class="item-mark" v-if="item.isbuildname">{{item.isbuildname}}</div>
+          </div>
+          <div class="data-item-type-div" style="cursor:pointer;" @click="goAudit(item)">
+            {{item.unitname}}
+          </div>
+        </div>
+        <div class="data-list-info-div">
+          <div class="info-layout-div">
+            <div class="info-item" style="width: 130px;">
+              <div class="info-label">总面积</div>
+              <div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">农用地</div>
+              <div class="info-data" :title="dataProcessing(item.nongyongdiarea)">{{dataProcessing(item.nongyongdiarea)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">耕地</div>
+              <div class="info-data" :title="dataProcessing(item.gengdiarea)">{{dataProcessing(item.gengdiarea)}}</div>
+            </div>
+            <div class="info-item" style="width: 120px;">
+              <div class="info-label">永农面积</div>
+              <div class="info-data" :title="dataProcessing(item.yongjiujibennongtianarea)">{{dataProcessing(item.yongjiujibennongtianarea)}}</div>
+            </div>
+          </div>
+          <div class="info-layout-div">
+            <!-- <span class="info-time">{{item.createdate}}</span> -->
+            <div>
+              <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"   @click="collectItem(item)"  v-if="item.fid"/>
+              <img src="@/assets/images/tiankongdi/collect.png" class="img-box"   @click="collectItem(item)"  v-else/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination-div">
+      <a-pagination 
+        size="small" 
+        v-model:pageSize="props.pageSize"
+        v-model:current="props.pageNo" 
+        :total="props.total" 
+        :show-total="total => `共 ${total} 条数据`"
+        show-size-changer 
+        show-quick-jumper
+        @change="changePage" />
+    </div>
+    <a-modal
+      width="100%"
+      wrap-class-name="full-modal"
+      v-model:open="auditOpen"
+      title="接收办理"
+      footer=""
+      :destroyOnClose="true"
+    >
+      <template #footer> </template>
+      <div class="handoff">
+        <a-button
+          type="primary" 
+          style="margin-right: 25px;"
+          @click="prevData"
+        >上一条</a-button>
+        <a-button
+          type="primary"
+          @click="nextData"
+        >下一条</a-button>
+      </div>
+      <Audit
+        v-if="handoffShow"
+        ref="posRef"
+        :processId="processId"
+        :taskId="taskId"
+        :isRead="isRead"
+        :type="type"
+        :auditData="auditData"
+        @closeModel="closeMolder"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineEmits, defineProps, computed, h, watch } from "vue"
+import { StarOutlined, StarFilled, SearchOutlined, RollbackOutlined } from '@ant-design/icons-vue';
+import Icon from '@/components/Icon/Icon.vue';
+import { addCaseFavorite,addTaskFavorite,getCaseInfoById, deleteFavoriteCase,deleteTaskCase,getLoadStreet, getLoadDroneCaseInfoDetail } from '@/api/tiankongdi/index.ts';
+import { 
+  batchOptions,
+  yearOptions,
+  mapTypeOptions,
+  illegalTypeOptions,
+  measureOptions,
+  mapStatusOptions,
+  markTypeOptions,
+  patchSourceOptions,
+  isOverdueOptions,
+} from '@/utils/global'
+import { useUserStore } from '@/store/modules/user.ts'
+import { message } from "ant-design-vue";
+import { flowStore } from '@/store/modules/flow';
+import { getDetail } from '@/api/sys/WFSchemeInfo';
+import { Audit } from '@/views/demo/workflow/task/process/page';
+import { dataProcessing, tubanlaiyuanOptions } from '@/views/demo/tiankongdi/util.ts'
+import {showDrawBack, drawBackSpan} from '@/views/demo/util'
+const userStore = useUserStore()
+const flowWfDataStore = flowStore();
+const emits = defineEmits([
+  "closeShowInfo",
+  "mapListScreenChange",
+  "changeInfoPage",
+  "getInfoList",
+  "changeTask",
+  "infoDataListSort",
+  "collectChange",
+  "resetScreenData",
+  "changeInfoDataList",
+])
+const props = defineProps([
+  "infoScreenData",
+  "cityType",
+  "municipalAreaOptions",
+  "countiesAreaOptions",
+  "communitiesAreaOptions",
+  "pageNo",
+  "pageSize",
+  "total",
+  "infoDataList"
+])
+const order = ref(0) // 0: 不排序 1: 升序 2: 降序
+const landType = ref(0)
+const orderMark = () => {
+  switch(order.value){
+    case 0:
+      return '-'
+    case 1:
+      return '↑'
+    case 2:
+      return '↓'
+  }
+}
+const showDataId = ref()
+const nextShowDataId = ref()
+const prevShowDataId = ref()
+watch(() => showDataId.value, () => {
+  let index = props.infoDataList.findIndex(item => item.id == showDataId.value)
+  if(index < props.infoDataList.length - 1){
+    nextShowDataId.value =  props.infoDataList[index + 1].id
+  }else{
+    nextShowDataId.value = 0
+  }
+  if(index > 0){
+    prevShowDataId.value = props.infoDataList[index - 1].id
+  }else{
+    prevShowDataId.value = 0
+  }
+})
+const auditOpen = ref(false);
+const processId = ref('');
+const taskId = ref('');
+const type = ref('');
+const auditData = ref()
+const handoffShow = ref(true)
+const isRead: any = ref(0);
+const openCollect = computed(() => {
+  if(props.infoScreenData.type === '') return false
+  return true
+})
+const streetsAreaOptions =  ref([
+  { label: '全部', value: '' },
+])
+
+onMounted(() => {
+  getLoadStreet().then(res => {
+    console.log(res)
+    res.forEach(item => {
+      streetsAreaOptions.value.push({
+        label: item.Name,
+        value: item.Id,
+      })
+    })
+  })
+  console.log('onMounted')
+})
+
+async function locationFun(record) {
+  console.log(record);
+  emits('changeTask', record.geomid);
+}
+
+const changePage = (page, pageSize) => {
+  console.log(page,pageSize)
+  emits('changeInfoPage',page,pageSize)
+}
+const querysBtn = ()=>{
+  // emits('getInfoList')
+  emits('changeInfoPage',1,props.pageSize)
+
+}
+const collectItem = (item) => {
+  console.log(item)
+  if(item.fid){
+    cancelCollectItem(item)
+    return
+  }
+  let userInfo = userStore.getUserInfo
+  let params = {
+    // id: item.id,
+    taskId: item.taskid,
+    favoriteUserId: userInfo.id
+  }
+  addTaskFavorite(params).then(res => {
+    console.log(res)
+    message.success('收藏成功')
+    emits('getInfoList')
+  })
+}
+const cancelCollectItem = (item) => {
+  deleteTaskCase(item.fid).then(res => {
+    message.success('取消收藏成功')
+    emits('getInfoList')
+  })
+}
+const getCollectList = () => {
+  let collect = props.infoScreenData.type
+  let value: number|string = ''
+  if(collect === ''){
+    value = 1
+  }else if(collect === 1){
+    value = ''
+  }
+  emits('collectChange', value)
+}
+const showSortMark = (key, sort) => {
+  if(props.infoScreenData.sort === key && sort === order.value){
+    return true
+  }
+  return false
+}
+const dataListSort = (type) => {
+  if(props.infoScreenData.sort === '' || props.infoScreenData.sort === type){
+    order.value = (order.value + 1) % 3
+  }else{
+    order.value = 1
+  }
+  emits('infoDataListSort', type, order.value)
+}
+async function goAudit(record) {
+  showDataId.value = record.id
+  let data = await getDetail({ code: record.processcode });
+  let scheme = JSON.parse(data.scheme.content);
+  let wfData = scheme.wfData;
+  flowWfDataStore.setWfDataAll(wfData);
+  auditOpen.value = true;
+  processId.value = record.processid;
+  taskId.value = record.taskid;
+  type.value = record.type;
+  auditData.value = record;
+}
+const prevData = async () => {
+  if(prevShowDataId.value === 0){
+    if(props.pageNo === 1 || props.total == 0){
+      message.warning('已经是第一条数据了')
+      return
+    }
+    getLoadDroneCaseInfoDetail(getParams({page: props.pageNo - 1})).then(async res => {
+      emits('changeInfoDataList',res.items,res.total,props.pageNo - 1)
+      handoffShow.value = false
+      let record = res.items[res.items.length -1]
+      let data = await getDetail({ code: record.processcode });
+      let scheme = JSON.parse(data.scheme.content);
+      let wfData = scheme.wfData;
+      flowWfDataStore.setWfDataAll(wfData);
+      processId.value = record.processid;
+      taskId.value = record.taskid;
+      type.value = record.type;
+      handoffShow.value = true
+      showDataId.value = res.items[res.items.length -1].id
+      auditData.value = res.items[res.items.length -1];
+    })
+    return
+  }else{
+    showDataId.value = prevShowDataId.value
+  }
+  handoffShow.value = false
+  let record = props.infoDataList.find(item => item.id == showDataId.value)
+  let data = await getDetail({ code: record.processcode });
+  let scheme = JSON.parse(data.scheme.content);
+  let wfData = scheme.wfData;
+  flowWfDataStore.setWfDataAll(wfData);
+  processId.value = record.processid;
+  taskId.value = record.taskid;
+  type.value = record.type;
+  handoffShow.value = true
+  auditData.value = record;
+}
+const nextData = async () => {
+  if(nextShowDataId.value === 0){
+    if((Math.ceil(props.total / props.pageSize) <= props.pageNo) || props.total == 0){
+      message.warning('已经是最后一条数据了')
+      return
+    }
+    getLoadDroneCaseInfoDetail(getParams({page: props.pageNo + 1})).then(async res => {
+      emits('changeInfoDataList',res.items,res.total,props.pageNo + 1)
+      handoffShow.value = false
+      let record = res.items[0]
+      let data = await getDetail({ code: record.processcode });
+      let scheme = JSON.parse(data.scheme.content);
+      let wfData = scheme.wfData;
+      flowWfDataStore.setWfDataAll(wfData);
+      processId.value = record.processid;
+      taskId.value = record.taskid;
+      type.value = record.type;
+      handoffShow.value = true
+      showDataId.value = res.items[0].id
+      auditData.value = res.items[0]
+    })
+    return
+  }else{
+    showDataId.value = nextShowDataId.value
+  }
+  handoffShow.value = false
+  let record = props.infoDataList.find(item => item.id == showDataId.value)
+  let data = await getDetail({ code: record.processcode });
+  let scheme = JSON.parse(data.scheme.content);
+  let wfData = scheme.wfData;
+  flowWfDataStore.setWfDataAll(wfData);
+  processId.value = record.processid;
+  taskId.value = record.taskid;
+  type.value = record.type;
+  handoffShow.value = true
+  auditData.value = record;
+}
+const closeMolder = () => {
+  emits('getInfoList')
+}
+const getParams = (data) => {
+  let result = {}
+  let params = {
+    landType: props.infoScreenData.landType, //0 农用地 1建设用地
+    isOutTime: props.infoScreenData.isOverdue, //是否超期
+    year: props.infoScreenData.year, //年
+    tubanlaiyuan: props.infoScreenData.patchSource, //线索来源
+    picihao: props.infoScreenData.batch, //批次号
+    streetid: props.infoScreenData.streetId,
+    caseNo: props.infoScreenData.mapNo, //图版编号
+    startTime: props.infoScreenData.startTime, // 下发开始时间
+    endTime: props.infoScreenData.endTime, // 下发结束时间
+    nowStatus: props.infoScreenData.mapStatus, // 当前状态
+    isBuildName: props.infoScreenData.markType, // 标注
+    tubanArea1: props.infoScreenData.mapAreaFirst, // 线索面积1
+    tubanArea2: props.infoScreenData.mapAreaLast, // 线索面积2
+    gengdiArea1: props.infoScreenData.arableAreaFirst, //耕地面积1
+    gengdiArea2: props.infoScreenData.arableAreaLast, //耕地面积2
+    page: props.pageNo,
+    limit: props.pageSize,
+    sortType: props.infoScreenData.sort,
+    order: props.infoScreenData.order,
+    type: props.infoScreenData.type,
+    ...data,
+  }
+  Object.keys(params).forEach(key => {
+    if(params[key] !== '' && params[key] !== null){
+      if(key === 'nowStatus'){
+        result[key] = params[key].join(',')
+      }else if(key === 'isOutTime'){
+        if(params[key].length == 1){
+          result[key] = params[key][0]
+        }
+      }else{
+        result[key] = params[key]
+      }
+    }
+  })
+  return result
+}
+</script>
+
+<style lang="scss" scoped>
+.handoff{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 25px;
+}
+.full-modal {
+  .ant-modal {
+    min-width: 100vw;
+    top: 0px;
+    padding: 0px;
+    margin: 0px;
+  }
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+  }
+  .ant-modal-body {
+    flex: 1;
+  }
+}
+::v-deep .ant-modal {
+  width: 100vw!important;
+  top: 0px;
+  padding: 0px;
+  margin: 0px;
+}
+::v-deep .ant-modal-content{
+  width: 100vw!important;
+  background:red!important;
+}
+.map-list-content{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.rollback {
+  background: #fff;
+  padding: 10px;
+}
+.screen-div{
+  padding: 10px 12px 20px 13px;
+  display: flex;
+  width:590px;
+  flex-wrap: wrap;
+  .screen-item{
+    // width: 33.3%;
+    display: flex;
+    height: 39px;
+    // margin-bottom: 12px;
+    // font-family: Alibaba PuHuiTi;
+    // font-weight: 500;
+    // font-size: 17px;
+    // color: #000000;
+    .screen-item-label{
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      line-height: 30px;
+      // width: 53px;
+      // padding-left: 10px;
+      display: flex;
+      align-items: center;
+      margin-right: 9px;
+      // font-size: 15px;
+    }
+    :deep(.ant-select-selector){
+      display: flex;
+      align-items: center;
+      font-family: HarmonyOS Sans;
+      font-weight: 500;
+      font-size: 19px;
+      color: #000000;
+      line-height: 30px;
+      height: 39px;
+      box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
+    }
+    .item-input{
+      width:373px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      line-height: 30px;
+      box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
+    }
+    .item-time-select{
+      box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
+      :deep(input){
+        font-family: HarmonyOS Sans;
+        font-weight: 500;
+        font-size: 15px;
+        color: #000000;
+        line-height: 30px;
+      }
+    }
+    .item-button{
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      font-size: 19px;
+      color: #FFFFFF;
+      line-height: 30px;
+      height:39px;
+      width: 97px;
+      background: #086DEC;
+      // margin-left:12px;
+    }
+  }
+  .screen-button-div{
+    display: flex;
+    // justify-content: space-between;
+    width: 100%;
+    button{
+      margin-right: 5px;
+    }
+  }
+}
+.top-radio-button-div{
+  width:100%;
+  padding: 33px 12px 8px 13px;
+  .ant-radio-group{
+    display: flex;
+
+  }
+  :deep(.ant-radio-button-wrapper-checked){
+    font-family: Alibaba PuHuiTi;
+    font-weight: 500 !important;
+    font-size: 20px;
+    color: #FFFFFF !important;
+    line-height: 40px;
+    background: #086DEC;
+  }
+  .radio-item{
+    width:33%;
+    text-align: center;
+    height: 40px;
+    user-select: none;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    font-size: 20px;
+    color: #000000;
+    line-height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center
+  }
+}
+.sift-div{
+    background:#fff;
+     height: 77px;
+     padding:19px 13px;
+     margin-left: 10px;
+     margin-right: 10px;
+     border-radius: 10px 10px 0px 0px;
+     display: flex;
+     justify-content: space-between;
+     .layout-div{
+      display:flex;
+      .back-button{
+        font-size:22px;
+        cursor:pointer;
+      }
+      .interval-div{
+        height:100%;
+        width:1px;
+        background:#EDEDED;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+      .sift-item{
+        display: flex;
+        align-items: center;
+        margin-right:15px;
+        cursor:pointer;
+        user-select:none;
+        .sift-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 19px;
+          color: #000000;
+        }
+        .sift-icon{
+          font-size: 9px;
+          margin-left:5px;
+          opacity: 0.53;
+        }
+      }
+     }
+     .collect-div{
+      display:flex;
+      align-items:center;
+     }
+  }
+.data-list-div{
+  flex: 1;
+  overflow: auto;
+  padding: 10px;
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  .data-list-item{
+    background:#fff;
+    padding:20px 10px 10px 10px;
+    // border-radius:6px;
+    margin-bottom:1px;
+    position: relative;
+    .back-box{
+      position: absolute;
+      right: 0;
+      top:0;
+      background: #EA1C06;
+      padding: 3px 6px;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 0px 0px 0px 8px;
+    }
+    .data-list-layout-div{
+      display:flex;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #E5E5E5;
+      height: 45px;
+      .data-list-title-div{
+        display:flex;
+        align-items: center;
+        .map-mark{
+          width:17px;
+          height:17px;
+        }
+        .label-div{
+          display: flex;
+          align-items: baseline;
+          margin-right: 12px
+        }
+        .item-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 23px;
+          color: #000000;
+          margin-left: 9px;
+          margin-right:10px;
+        }
+        .item-sub-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 17px;
+          color: #000000;
+          display: flex;
+        }
+        .item-mark{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 13px;
+          margin-left: 17px;
+          color: #696969;    
+          margin-top: 4px;
+        }
+      }
+      .data-item-type-div{
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 15px;
+        color: #696969;
+        display: flex;
+        align-items: center;
+        cursor:pointer;
+        user-select: none;
+      }
+    }
+    .data-list-info-div{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      height: 40px;
+      .info-layout-div{
+        display:flex;
+        align-items: center;
+        .info-time{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 15px;
+          color: #000000;
+          margin-right: 5px;
+        }
+      }
+      .info-item{
+        display:flex;
+        background: rgba(237, 237, 237, 0.55);
+        align-items: center;
+        width: 110px;
+        border-radius: 7px;
+        margin-right: 8px;
+        height: 33px;
+        justify-content: center;
+        .info-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          font-size: 13px;
+          color: #959494;
+          // width:45%;
+          display: flex;
+          justify-content: center;
+          padding-right: 5px;
+          white-space: nowrap;
+        }
+        .info-data{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 13px;
+          color: #000000;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  } 
+  .data-list-item:nth-last-child(1){
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px
+  }
+}
+.data-list-div::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.pagination-div{
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.modal-content{
+  padding:15px;
+  width: 100%;
+  height: calc(100vh - 65px);
+  overflow: auto;
+}
+
+::v-deep .ant-modal{
+ min-width:100vw!important;
+}
+.img-box{
+  width: 25px;
+  cursor: pointer;
+}
+.mr-r-20{
+  margin-right: 20px;
+}
+.img-box.small{
+  width: 18px;
+  margin-right: 6px;
+  margin-bottom: 2px;
+}
+</style>

src/views/demo/tiankongdi/infomationconfirm/index.vue

@@ -0,0 +1,472 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <a-spin :spinning="spinning">
+        <MapList
+          :infoScreenData="infoScreenData"
+          :cityType="cityType"
+          :pageNo="pageNo"
+          :pageSize="pageSize"
+          :total="total"
+          :infoDataList="infoDataList"
+          :municipalAreaOptions="municipalAreaOptions"
+          :countiesAreaOptions="countiesAreaOptions"
+          :streetsAreaOptions="streetsAreaOptions"
+          :communitiesAreaOptions="communitiesAreaOptions"
+          @infoDataListSort="infoDataListSort"
+          @changeInfoPage="changeInfoPage"
+          @getInfoList="getInfoList"
+          @mapListScreenChange="mapListScreenChange"
+          @closeShowInfo="changeShowInfo"
+          @changeTask="changeTask"
+          @collectChange="collectChange"
+          @resetScreenData="resetScreenData"
+          @changeInfoDataList="changeInfoDataList"
+        />
+      </a-spin>
+    </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, watch, defineAsyncComponent } from 'vue';
+  import mapboxgl, { Map } from 'mapbox-gl';
+  import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config';
+  import AuditProgress from './AuditProgress/index.vue';
+  import MapList from './MapList/index.vue';
+  import {
+    getLoadDroneCaseInfoCount,
+    getLoadDroneCaseInfoDetail,
+    getLoadParents,
+  } from '@/api/tiankongdi/index.ts';
+  import { batchOptions, yearOptions } from '@/views/utils/global';
+  import { getChildrenTree } from '@/api/demo/system';
+  import { getGeom, getConfig } from '@/api/sys/layerManagement';
+  import dayjs from 'dayjs';
+
+  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 showInfo = ref(true);
+  const year = ref<number>();
+  const batch = ref();
+  const dataList = ref<any>([]);
+  const infoDataList = ref<any>([]);
+  const infoScreenData = ref({
+    landType: 0,
+    year: '',
+    batch: '',
+    patchSource: '',
+    mapNo: '',
+    mapType: '',
+    // countyId: '',
+    streetId: '',
+    // downtownId: '',
+    // communityId: '',
+    startTime: '',
+    endTime: '',
+    isOverdue: '',
+    illegalType: '',
+    measure: '',
+    mapStatus: ['待确认'],
+    markType: '',
+    sort: '',
+    order: '',
+    type: '', // 收藏
+    mapAreaFirst: '',
+    mapAreaLast: '',
+    arableAreaFirst: '',
+    arableAreaLast: '',
+  });
+  const pageNo = ref(1);
+  const pageSize = ref(10);
+  const total = ref(0);
+  const municipalAreaOptions = ref<any[]>([]);
+  const countiesAreaOptions = ref([{ label: '全部', value: '' }]);
+  const streetsAreaOptions = ref([{ label: '全部', value: '' }]);
+  const communitiesAreaOptions = ref([{ label: '全部', value: '' }]);
+  const cityType = ref();
+  const spinning = ref(false);
+  const auditProgressScreenChange = (value, type) => {
+    switch (type) {
+      case 'year':
+        year.value = value;
+        break;
+      case 'batch':
+        batch.value = value;
+        break;
+    }
+    let params = {
+      year: year.value,
+    };
+    spinning.value = true;
+    getLoadDroneCaseInfoCount(params)
+      .then((res) => {
+        console.log(res);
+        dataList.value = res;
+      })
+      .finally(() => {
+        spinning.value = false;
+      });
+  };
+  const mapListScreenChange = (value, type) => {
+    switch (type) {
+      case 'landType':
+        infoScreenData.value.landType = value;
+        pageNo.value = 1;
+        getInfoList();
+        break;
+      case 'year':
+        infoScreenData.value.year = value;
+        break;
+      case 'batch':
+        infoScreenData.value.batch = value;
+        break;
+      case 'patchSource':
+        infoScreenData.value.patchSource = value;
+        break;
+      case 'mapNo':
+        infoScreenData.value.mapNo = value;
+        break;
+      // case 'countyId':
+      //   infoScreenData.value.countyId = value
+      //   break
+      case 'streetId':
+        infoScreenData.value.streetId = value;
+        break;
+      case 'time':
+        if (value) {
+          infoScreenData.value.startTime = dayjs(value[0]).format('YYYY-MM-DD');
+          infoScreenData.value.endTime = dayjs(value[1]).format('YYYY-MM-DD');
+        } else {
+          infoScreenData.value.startTime = '';
+          infoScreenData.value.endTime = '';
+        }
+        break;
+      // case 'communityId':
+      //   infoScreenData.value.communityId = value
+      //   break
+      case 'mapType':
+        infoScreenData.value.mapType = value;
+        if (value !== 1) {
+          infoScreenData.value.illegalType = '';
+          infoScreenData.value.measure = '';
+        }
+        break;
+      case 'illegalType':
+        infoScreenData.value.illegalType = value;
+        if (value !== 0) {
+          infoScreenData.value.measure = '';
+        }
+        break;
+      case 'measure':
+        infoScreenData.value.measure = value;
+        break;
+      case 'mapStatus':
+        infoScreenData.value.mapStatus = value;
+        break;
+      case 'isOverdue':
+        infoScreenData.value.isOverdue = value;
+        break;
+      case 'markType':
+        infoScreenData.value.markType = value;
+        break;
+      case 'mapAreaFirst':
+        infoScreenData.value.mapAreaFirst = value;
+        break;
+      case 'mapAreaLast':
+        infoScreenData.value.mapAreaLast = value;
+        break;
+      case 'arableAreaFirst':
+        infoScreenData.value.arableAreaFirst = value;
+        break;
+      case 'arableAreaLast':
+        infoScreenData.value.arableAreaLast = value;
+        break;
+    }
+  };
+  const changeShowInfo = async (value, item) => {
+    if (item) {
+      cityType.value = item;
+      let childList = await getChildrenTree({ parentId: item.areaid });
+      let params = {
+        childId: item.areaid,
+      };
+      let parents = await getLoadParents(params);
+      parents.forEach((parent) => {
+        switch (parent.level) {
+          case 0:
+            municipalAreaOptions.value.push({
+              label: parent.name,
+              value: parent.id,
+            });
+            infoScreenData.value.downtownId = parent.id;
+            childList.forEach((cityItem) => {
+              countiesAreaOptions.value.push({
+                label: cityItem.name,
+                value: cityItem.id,
+              });
+            });
+            break;
+          case 1:
+            countiesAreaOptions.value.push({
+              label: parent.name,
+              value: parent.id,
+            });
+            infoScreenData.value.countyId = parent.id;
+            childList.forEach((cityItem) => {
+              streetsAreaOptions.value.push({
+                label: cityItem.name,
+                value: cityItem.id,
+              });
+            });
+            break;
+          case 2:
+            streetsAreaOptions.value.push({
+              label: parent.name,
+              value: parent.id,
+            });
+            infoScreenData.value.streetId = parent.id;
+            childList.forEach((cityItem) => {
+              communitiesAreaOptions.value.push({
+                label: cityItem.name,
+                value: cityItem.id,
+              });
+            });
+            break;
+          case 3:
+            communitiesAreaOptions.value.push({
+              label: parent.name,
+              value: parent.id,
+            });
+            infoScreenData.value.communityId = parent.id;
+            break;
+        }
+      });
+      await getInfoList();
+      showInfo.value = value;
+    } else {
+      cityType.value = null;
+      showInfo.value = value;
+    }
+    console.log(item);
+  };
+  const getParams = () => {
+    let result = {};
+    let params = {
+      landType: infoScreenData.value.landType, //0 农用地 1建设用地
+      isOutTime: infoScreenData.value.isOverdue, //是否超期
+      year: infoScreenData.value.year, //年
+      tubanlaiyuan: infoScreenData.value.patchSource, //线索来源
+      picihao: infoScreenData.value.batch, //批次号
+      // countyid: infoScreenData.value.countyId,
+      streetid: infoScreenData.value.streetId,
+      // communityId: infoScreenData.value.communityId,
+      caseNo: infoScreenData.value.mapNo, //图版编号
+      startTime: infoScreenData.value.startTime, // 下发开始时间
+      endTime: infoScreenData.value.endTime, // 下发结束时间
+      // is_illegal: infoScreenData.value.mapType,
+      // weifaleixing: infoScreenData.value.illegalType,
+      // measure_name: infoScreenData.value.measure,
+      nowStatus: infoScreenData.value.mapStatus, // 当前状态
+      isBuildName: infoScreenData.value.markType, // 标注
+      tubanArea1: infoScreenData.value.mapAreaFirst, // 线索面积1
+      tubanArea2: infoScreenData.value.mapAreaLast, // 线索面积2
+      gengdiArea1: infoScreenData.value.arableAreaFirst, //耕地面积1
+      gengdiArea2: infoScreenData.value.arableAreaLast, //耕地面积2
+      // areaid: cityType.value.areaid,
+      // level: cityType.value.level,
+      page: pageNo.value,
+      limit: pageSize.value,
+      sortType: infoScreenData.value.sort,
+      order: infoScreenData.value.order,
+      type: infoScreenData.value.type,
+    };
+    Object.keys(params).forEach((key) => {
+      if (params[key] !== '' && params[key] !== null) {
+        if (key === 'nowStatus') {
+          result[key] = params[key].join(',');
+        } else if (key === 'isOutTime') {
+          if (params[key].length == 1) {
+            result[key] = params[key][0];
+          }
+        } else {
+          result[key] = params[key];
+        }
+      }
+    });
+    return result;
+  };
+  watch(
+    () => year.value,
+    (newVal) => {
+      infoScreenData.value.year = newVal;
+    },
+  );
+  watch(
+    () => batch.value,
+    (newVal) => {
+      infoScreenData.value.batch = newVal;
+    },
+  );
+  let map: Map;
+  onMounted(() => {
+    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
+    // map = initMap();
+    getLoadDroneCaseInfoCount()
+      .then((res) => {
+        dataList.value = res;
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  });
+  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],
+    });
+  };
+  const getInfoList = () => {
+    spinning.value = true;
+    return getLoadDroneCaseInfoDetail(getParams())
+      .then((res) => {
+        total.value = res.total;
+        infoDataList.value = res.items;
+      })
+      .finally(() => {
+        spinning.value = false;
+      });
+  };
+  const changeInfoPage = async (page, limit) => {
+    pageNo.value = page;
+    pageSize.value = limit;
+    await getInfoList();
+  };
+  const changeInfoDataList = (list, totalNumber, page) => {
+    infoDataList.value = list;
+    total.value = totalNumber;
+    pageNo.value = page;
+  };
+  const collectChange = (value) => {
+    pageNo.value = 1;
+    infoScreenData.value.type = value;
+    getInfoList();
+  };
+
+  function changeTask(val) {
+    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('当前数据没有线索！');
+    }
+  }
+  const infoDataListSort = (type, order) => {
+    switch (order) {
+      case 0:
+        infoScreenData.value.sort = '';
+        infoScreenData.value.order = '';
+        break;
+      case 1:
+        infoScreenData.value.sort = type;
+        infoScreenData.value.order = 'asc';
+        break;
+      case 2:
+        infoScreenData.value.sort = type;
+        infoScreenData.value.order = 'desc';
+        break;
+    }
+    spinning.value = true;
+    getLoadDroneCaseInfoDetail(getParams())
+      .then((res) => {
+        total.value = res.total;
+        infoDataList.value = res.items;
+        // pageNo.value = 1
+      })
+      .finally(() => {
+        spinning.value = false;
+      });
+  };
+  const resetScreenData = () => {
+    infoScreenData.value.mapNo = '';
+    infoScreenData.value.streetId = '';
+    infoScreenData.value.mapType = '';
+    infoScreenData.value.illegalType = '';
+    infoScreenData.value.measure = '';
+    infoScreenData.value.mapStatus = ['待确认'];
+    infoScreenData.value.markType = '';
+    getInfoList();
+  };
+  onMounted(() => {
+    getInfoList();
+  });
+</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 {
+      width: 65%;
+      background: burlywood;
+    }
+  }
+</style>

src/views/sys/exception/Converge/config.ts

@@ -1,4 +1,4 @@
-export const MAPBOX_TOKEN = "pk.eyJ1IjoiY3VybXVkZ2VvbnBoZCIsImEiOiJjbHAxZXU2dmwwajV6MmxwZzRpdXhobjB2In0.uIuuAtk1EtV7HSbjpUfeOw";
+export const MAPBOX_TOKEN = "pk.eyJ1Ijoic2h1c2h1YmlvIiwiYSI6ImNsN2QxZGdxdjE2aWYzd21pazFteGY3OGMifQ.fb3z0dSPrKhHjKu50zO-sg";
 
 export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
 

src/views/sys/exception/Converge/src/config.ts

@@ -1,5 +1,5 @@
 export enum MapboxConfig {
-  ACCESS_TOKEN = 'pk.eyJ1IjoiY3VybXVkZ2VvbnBoZCIsImEiOiJjbHAxZXU2dmwwajV6MmxwZzRpdXhobjB2In0.uIuuAtk1EtV7HSbjpUfeOw',
+  ACCESS_TOKEN = 'pk.eyJ1Ijoic2h1c2h1YmlvIiwiYSI6ImNsN2QxZGdxdjE2aWYzd21pazFteGY3OGMifQ.fb3z0dSPrKhHjKu50zO-sg',
   // ACCESS_TOKEN = "1234",
   TDT_TOKEN = 'b6585bc41ee16251dbe6b1af64f375d9',
   // add more config options here

src/views/sys/exception/LargeScreenMap/config.ts

@@ -1,4 +1,4 @@
-export const MAPBOX_TOKEN = "pk.eyJ1IjoiY3VybXVkZ2VvbnBoZCIsImEiOiJjbHAxZXU2dmwwajV6MmxwZzRpdXhobjB2In0.uIuuAtk1EtV7HSbjpUfeOw";
+export const MAPBOX_TOKEN = "pk.eyJ1Ijoic2h1c2h1YmlvIiwiYSI6ImNsN2QxZGdxdjE2aWYzd21pazFteGY3OGMifQ.fb3z0dSPrKhHjKu50zO-sg";
 
 export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
 

src/views/sys/exception/VideoSupervision.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-container">
+  <div class="videocenter-main-container">
 
     <div class="search-container-box">
         <SearchComponent @handlerDraw="handlerDraw" @toPosition="toPosition" @handlerFilter="handlerFilter"></SearchComponent>
@@ -10,16 +10,17 @@
       <div></div>
     </div>
     <!-- layout -->
-    <div class="main-header">
+    <div class="main-header-inner">
       <div class="title">
         <img src="/statistical/logo.png" alt="" /> {{ t('sys.subject.header_title') }}
+        
+      </div>
       <div class="user-info" style="z-index: 9999">
         <span style="color: #325e95">{{ fireUserLoginName }}</span>
         &nbsp;
         <span style="color: #ddd" @click="logout">退出</span>
       </div>
     </div>
-    </div>
     <div class="main-bottom"></div>
     <!-- map -->
     <Map ref="MapboxComponent" @showMonitor="showMonitorFunction" @handlerGetDetails="handlerGetDetails" @handlerQueryIntersectTif="handlerQueryIntersectTif" />
@@ -239,15 +240,15 @@ onMounted(() => {
 </script>
 
 <style type="less" scoped>
-  .main-container {
+  .videocenter-main-container {
     width: 100vw;
     height: 100vh;
     position: relative;
     top: 0px;
     left: 0px;
     z-index: 0;
-    .main-header {
+    .main-header-inner {
-      width: 100vw;
+      width: 100%;
       height: 120px;
       background: url('/videosupervision/main-top.png');
       background-size: 100% 100%;
@@ -258,14 +259,18 @@ onMounted(() => {
       .title {
         width: 600px;
         height: 90px;
-        margin: 0px auto;
+        position:absolute;
+        left:50%;
+        transform:translate(-50%,0);
         font-size: 40px;
         color: #fff;
         font-weight: bold;
+        
+      }
       .user-info {
         width: 120px;
         color: #e1e1e1;
-          position: absolute;
+        position:absolute;
         top: 20px;
         right: 24px;
         font-size: 14px;
@@ -276,7 +281,6 @@ onMounted(() => {
         }
       }
     }
-    }
     .main-bottom {
       height: 50px;
       width: calc(100vw - 30px);

src/views/sys/exception/VideoSupervision/map/config.ts

@@ -1,4 +1,4 @@
-export const MAPBOX_TOKEN = "pk.eyJ1IjoiY3VybXVkZ2VvbnBoZCIsImEiOiJjbHAxZXU2dmwwajV6MmxwZzRpdXhobjB2In0.uIuuAtk1EtV7HSbjpUfeOw";
+export const MAPBOX_TOKEN = "pk.eyJ1Ijoic2h1c2h1YmlvIiwiYSI6ImNsN2QxZGdxdjE2aWYzd21pazFteGY3OGMifQ.fb3z0dSPrKhHjKu50zO-sg";
 
 export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
 

src/views/sys/exception/VideoSupervision/map/src/config.ts

@@ -1,5 +1,5 @@
 export enum MapboxConfig {
-  ACCESS_TOKEN = 'pk.eyJ1IjoiY3VybXVkZ2VvbnBoZCIsImEiOiJjbHAxZXU2dmwwajV6MmxwZzRpdXhobjB2In0.uIuuAtk1EtV7HSbjpUfeOw',
+  ACCESS_TOKEN = 'pk.eyJ1Ijoic2h1c2h1YmlvIiwiYSI6ImNsN2QxZGdxdjE2aWYzd21pazFteGY3OGMifQ.fb3z0dSPrKhHjKu50zO-sg',
   // ACCESS_TOKEN = "1234",
   TDT_TOKEN = 'b6585bc41ee16251dbe6b1af64f375d9',
   // add more config options here