Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
commit
57465bb891
|
|
@ -56,7 +56,7 @@
|
|||
<a-modal
|
||||
v-model:open="open"
|
||||
:footer="false"
|
||||
@cancel="open = false"
|
||||
@cancel="closeCloudQueryModal"
|
||||
:width="compare ? '1020px' : '510px'"
|
||||
style="top: 20px"
|
||||
:destroyOnClose="true"
|
||||
|
|
@ -239,6 +239,10 @@
|
|||
compare.value = value;
|
||||
console.log('compare.value', compare.value);
|
||||
};
|
||||
const closeCloudQueryModal = () => {
|
||||
open.value = false
|
||||
compare.value = false
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-header-notify';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,298 @@
|
|||
<template>
|
||||
<div class="screen-div">
|
||||
<div class="screen-row">
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label" style="margin-right:9px;">年份</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 103px"
|
||||
v-model:value="props.year"
|
||||
:options="yearOptions"
|
||||
@change=" (value) => {
|
||||
emits('auditProgressScreenChange', value, 'year');
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-left:20px;margin-right:17px;">
|
||||
<div class="screen-item-label" style="margin-right:11px;">图斑来源</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 142px"
|
||||
v-model:value="props.patchSource"
|
||||
:options="patchSourceOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'patchSource');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label" style="margin-right:9px;">批次</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 117px"
|
||||
v-model:value="props.batch"
|
||||
:options="props.batchOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'batch');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<!-- <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)"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="name-div">
|
||||
<div style="display:flex;align-items: center;">
|
||||
<img src="/positioning.png" class="item-mark"/>
|
||||
<div class="item-label">{{ item.areaname }}</div>
|
||||
</div>
|
||||
<div class="progress-div">
|
||||
<div class="progress-label reviewed-color" style="width:70px;">待审核</div>
|
||||
<div class="progress-data" style="width:37px">
|
||||
<span style="color: #EC7908;">{{item.verifytask}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-data-div">
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">下发</div>
|
||||
<div class="info-data-data">{{item.totaltask}}</div>
|
||||
</div>
|
||||
<!-- <div style="width: 1px;margin-right:27px;margin-left:31px;background-color:#EDEDED;height: 15px;"></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">接收</div>
|
||||
<div class="info-data-data">{{item.receivetask}}</div>
|
||||
</div>
|
||||
<!-- <div style="width: 1px;margin-right:15px;margin-left:30px;background-color:#EDEDED;height: 15px;"></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">举证合法</div>
|
||||
<div class="info-data-data">{{item.legalcase}}</div>
|
||||
</div>
|
||||
<!-- <div style="width: 1px;margin-right:18px;margin-left:17px;background-color:#EDEDED;height: 15px;"></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">举证其他</div>
|
||||
<div class="info-data-data">{{item.ilegalcase}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
<a-empty :image="simpleImage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps, defineEmits, toRefs } from 'vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { Empty } from 'ant-design-vue';
|
||||
import {patchSourceOptions} from '@/utils/global'
|
||||
|
||||
const props = defineProps(['year', 'batch','patchSource', 'batchOptions', 'yearOptions', 'dataList']);
|
||||
const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
// function changeParam(val,type) {
|
||||
// emits('auditProgressScreenChange', val, type);
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.screen-div {
|
||||
width:590px;
|
||||
padding: 22px 12px 14px 13px;
|
||||
.screen-row {
|
||||
display: flex;
|
||||
height: 39px;
|
||||
.screen-item {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
// width: 33.3%;
|
||||
display: flex;
|
||||
.item-input{
|
||||
width:223px;
|
||||
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);
|
||||
}
|
||||
.screen-item-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-list {
|
||||
height: calc(100% - 85px);
|
||||
// background: darkgoldenrod;
|
||||
// background: @component-background;
|
||||
margin-top: 10px;
|
||||
padding: 0px 11px 0px 13px;
|
||||
.data-title {
|
||||
height: 40px;
|
||||
background: #bab9b7;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
color: #366198;
|
||||
}
|
||||
.show-data-list-content {
|
||||
height: 76vh;
|
||||
overflow: auto;
|
||||
.data-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 11px;
|
||||
padding: 0px 15px;
|
||||
margin-bottom: 8px;
|
||||
.name-div {
|
||||
display: flex;
|
||||
height: 57px;
|
||||
align-items: center;
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.info-data-div{
|
||||
height: 61px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding-left: 27px;
|
||||
// justify-content: space-between;
|
||||
// margin-top: 10px;
|
||||
.info-data-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
border-right: 1px solid #EDEDED;
|
||||
.info-data-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #959494;
|
||||
display: flex;
|
||||
line-height: 30px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.info-data-data{
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.info-data-item:nth-last-child(1){
|
||||
border-right: 0px;
|
||||
}
|
||||
}
|
||||
.data-div {
|
||||
font-weight: 500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.item-mark {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
// background: #086dec;
|
||||
// margin-left: 7px;
|
||||
// margin-right: 7px;
|
||||
}
|
||||
.item-label {
|
||||
// width: 122px;
|
||||
padding-left: 12px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 23px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
}
|
||||
.progress-div{
|
||||
display:flex;
|
||||
// font-weight: 500;
|
||||
// font-size: 16px;
|
||||
// line-height: 30px;
|
||||
// margin-right: 17px;
|
||||
.progress-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
color: #FFFFFF;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.progress-data{
|
||||
background: #EFEFEF;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
// color: #086DEC;
|
||||
line-height: 30px;
|
||||
}
|
||||
.progress-color{
|
||||
background: #086DEC;
|
||||
}
|
||||
.extended-color{
|
||||
background: #D03542
|
||||
}
|
||||
.reviewed-color{
|
||||
background: #EC7908
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-item:hover {
|
||||
background-color: rgba(8, 109, 236, 0.08);
|
||||
}
|
||||
// .data-item:nth-child(2n) {
|
||||
// background: #ececec;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,756 @@
|
|||
<template>
|
||||
<div class="map-list-content">
|
||||
<div class="screen-div">
|
||||
<div class="screen-item" style="margin-right:20px;margin-bottom:15px;">
|
||||
<div class="screen-item-label">年份</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.year"
|
||||
:options="props.yearOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:17px;margin-bottom:15px;">
|
||||
<div class="screen-item-label">图斑来源</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.tubanlaiyuan"
|
||||
:options="patchSourceOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom:15px;">
|
||||
<div class="screen-item-label">批次</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:103px;"
|
||||
v-model:value="params.picihao"
|
||||
:options="props.batchOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:13px;">
|
||||
<div class="screen-item-label">举证</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.is_build_name"
|
||||
:options="markTypeOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:10px;">
|
||||
<!-- <div class="screen-item-label">图斑号</div> -->
|
||||
<a-input style="width:270px;" allowClear v-model:value="params.geomid" class="item-input" placeholder="请输入图斑编号"/>
|
||||
</div>
|
||||
<div class="screen-item" style="display: flex; justify-content: end;margin-bottom: 0px;">
|
||||
<a-button type="primary" class="item-button" :icon="h(SearchOutlined)" @click="query">查询</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-div">
|
||||
<div class="layout-div">
|
||||
<img style="cursor: pointer;width:20px;height: 18px" src="@/assets/images/tiankongdi/back.png" class="img-box" @click="emits('changeShowParent')"/>
|
||||
<div class="interval-div"></div>
|
||||
<div class="sift-item" @click="dataListSort('area')">
|
||||
<div class="sift-label">总面积</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">▼</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;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('yongjiujibennongtian_area')">
|
||||
<div class="sift-label">基本农田</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('yongjiujibennongtian_area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('yongjiujibennongtian_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('CreateDate')">
|
||||
<div class="sift-label">下发时间</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('CreateDate',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('CreateDate',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;">
|
||||
<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: 3px;">
|
||||
<div
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
class="data-list-item"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="back-box" v-if="item.is_drawback == 1">驳回</div>
|
||||
<div class="data-list-layout-div">
|
||||
<div class="data-list-title-div">
|
||||
<img src="/positioning.png" class="map-mark" @click="locationFun(item)"/>
|
||||
<div class="label-div">
|
||||
<div class="item-label">{{item.countyname}}</div>
|
||||
<div class="item-sub-label">
|
||||
<span style="margin-right:12px;">{{item.streetname}}</span>
|
||||
<span>{{item.case_no}}</span>
|
||||
<span class="item-mark" v-if="item.is_build_name">{{item.is_build_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button type="primary" class="button-item" @click="goAudit(item)">审核</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list-info-div">
|
||||
<div class="info-layout-div">
|
||||
<div class="info-item">
|
||||
<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.nongyongdi_area)">{{dataProcessing(item.nongyongdi_area)}}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">耕地</div>
|
||||
<div class="info-data" :title="dataProcessing(item.gengdi_area)">{{dataProcessing(item.gengdi_area)}}</div>
|
||||
</div>
|
||||
<div class="info-item" style="width:127px;">
|
||||
<div class="info-label">基本农田</div>
|
||||
<div class="info-data" :title="dataProcessing(item.yongjiujibennongtian_area)">{{dataProcessing(item.yongjiujibennongtian_area)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-layout-div">
|
||||
<!-- <div>
|
||||
<Icon
|
||||
:style="`font-size: 30px; color: #314A8C; cursor: pointer;${item.isouttime === 2? 'color: #D03542;': item.isouttime === 1? 'color: #F7710F;': 'color: #314A8C;'}`"
|
||||
icon="icon-park-solid:timer"
|
||||
@click="()=>{}"
|
||||
/>
|
||||
</div>
|
||||
<div style="background: rgb(237, 237, 237);width: 1px;height: 100%;margin-right: 10px;margin-left: 10px;"></div> -->
|
||||
<div style="cursor: pointer;">
|
||||
<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" v-if="dataList.length > 0">
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model:current="pageNumber"
|
||||
v-model:pageSize="pageSizeNumber"
|
||||
:total="total"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
@change="changePagination"
|
||||
/>
|
||||
</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"
|
||||
@closeModel="closeMolder"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, defineEmits, computed, h, watch } from 'vue';
|
||||
import { StarOutlined,StarFilled } from '@ant-design/icons-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getLoadTaskDetailList, updateSupervise, addTaskFavorite, deleteTaskCase } from '@/api/tiankongdi/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';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useUserStore } from '@/store/modules/user.ts'
|
||||
import { SearchOutlined, RollbackOutlined } from '@ant-design/icons-vue';
|
||||
import { patchSourceOptions } from '@/utils/global'
|
||||
import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
const emits = defineEmits(['changeTask', 'changeShowParent']);
|
||||
|
||||
const flowWfDataStore = flowStore();
|
||||
|
||||
const props = defineProps(['areaId', 'yearOptions', 'year','level','batch','patchSource','batchOptions']);
|
||||
const processId = ref('');
|
||||
const taskId = ref('');
|
||||
const isRead: any = ref(0);
|
||||
const type = ref('');
|
||||
const order = ref(0)
|
||||
const auditOpen = ref(false);
|
||||
const showDataId = ref()
|
||||
const handoffShow = ref(true)
|
||||
const openCollect = computed(() => {
|
||||
if(params.value.type === null) return false
|
||||
return true
|
||||
})
|
||||
const nextShowDataId = ref()
|
||||
const prevShowDataId = ref()
|
||||
watch(() => showDataId.value, () => {
|
||||
let index = dataList.value.findIndex(item => item.Id == showDataId.value)
|
||||
if(index < dataList.value.length - 1){
|
||||
nextShowDataId.value = dataList.value[index + 1].Id
|
||||
}else{
|
||||
nextShowDataId.value = 0
|
||||
}
|
||||
if(index > 0){
|
||||
prevShowDataId.value = dataList.value[index - 1].Id
|
||||
}else{
|
||||
prevShowDataId.value = 0
|
||||
}
|
||||
})
|
||||
const params = ref({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
level: props.level,
|
||||
areaid: props.areaId,
|
||||
geomid: null,
|
||||
year: props.year,
|
||||
picihao: props.batch,
|
||||
tubanlaiyuan: props.patchSource,
|
||||
is_build_name: null,
|
||||
type: null,
|
||||
sort: null,
|
||||
order: null,
|
||||
});
|
||||
const markTypeOptions = ref([
|
||||
{ label: '合法', value: '合法' },
|
||||
{ label: '其他', value: '其他' },
|
||||
]);
|
||||
|
||||
const dataList = ref([]);
|
||||
const total = ref(0);
|
||||
const pageNumber = ref(1)
|
||||
const pageSizeNumber = ref(10)
|
||||
function query() {
|
||||
params.value.page = 1;
|
||||
getTaskList();
|
||||
}
|
||||
async function getTaskList() {
|
||||
console.log(params.value);
|
||||
const data = await getLoadTaskDetailList(params.value);
|
||||
dataList.value = data.items;
|
||||
total.value = data.total;
|
||||
}
|
||||
function changePagination(page, pageSize) {
|
||||
console.log(page, pageSize);
|
||||
params.value.page = page;
|
||||
params.value.limit = pageSize;
|
||||
getTaskList();
|
||||
}
|
||||
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.taskeid;
|
||||
type.value = record.type;
|
||||
}
|
||||
async function locationFun(record) {
|
||||
emits('changeTask', record);
|
||||
}
|
||||
onMounted(() => {
|
||||
getTaskList();
|
||||
});
|
||||
const changeSupervise = (item) => {
|
||||
if(item.cancelsupervise === 0 && item.issupervise === 1){
|
||||
message.error('取消改督办权限不足')
|
||||
return
|
||||
}
|
||||
let params = {
|
||||
id: item.processid,
|
||||
supervise: 1,
|
||||
}
|
||||
if(item.issupervise === 1){
|
||||
params.supervise = 0
|
||||
}
|
||||
updateSupervise(params).then(res => {
|
||||
if(params.supervise === 1){
|
||||
message.success('成功发起督办')
|
||||
}else{
|
||||
message.success('取消督办成功')
|
||||
}
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const prevData = async () => {
|
||||
if(prevShowDataId.value === 0){
|
||||
if(params.value.page === 1 || total.value == 0){
|
||||
message.warning('已经是第一条数据了')
|
||||
return
|
||||
}
|
||||
pageNumber.value = pageNumber.value - 1
|
||||
params.value.page = params.value.page -1
|
||||
await getTaskList();
|
||||
// showDataIndex.value = dataList.value.length -1
|
||||
handoffShow.value = false
|
||||
let record = dataList.value[dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = dataList.value[dataList.value.length - 1].Id
|
||||
return
|
||||
}else{
|
||||
showDataId.value = prevShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
}
|
||||
const nextData = async () => {
|
||||
if(nextShowDataId.value === 0){
|
||||
if(Math.ceil(total.value / pageSizeNumber.value) <= pageNumber.value || total.value == 0){
|
||||
message.warning('已经是最后一条数据了')
|
||||
return
|
||||
}
|
||||
pageNumber.value = pageNumber.value + 1
|
||||
params.value.page = params.value.page + 1
|
||||
await getTaskList();
|
||||
// showDataIndex.value = 0
|
||||
handoffShow.value = false
|
||||
let record = dataList.value[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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = dataList.value[0].Id
|
||||
return
|
||||
}else{
|
||||
showDataId.value = nextShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
}
|
||||
const cancelCollectItem = (item) => {
|
||||
deleteTaskCase(item.Fid).then(res => {
|
||||
message.success('取消收藏成功')
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const collectItem = (item) => {
|
||||
if(item.Fid){
|
||||
cancelCollectItem(item)
|
||||
return
|
||||
}
|
||||
let userInfo = userStore.getUserInfo
|
||||
let params = {
|
||||
taskId: item.taskeid,
|
||||
favoriteUserId: userInfo.id
|
||||
}
|
||||
addTaskFavorite(params).then(res => {
|
||||
message.success('收藏成功')
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const getCollectList = () => {
|
||||
if(params.value.type === null){
|
||||
params.value.type = 1
|
||||
}else if(params.value.type === 1){
|
||||
params.value.type = null
|
||||
}
|
||||
params.value.page = 1
|
||||
pageNumber.value = 1
|
||||
getTaskList();
|
||||
}
|
||||
const showSortMark = (key, sort) => {
|
||||
if(params.value.sort === key && sort === order.value){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
const dataListSort = (type) => {
|
||||
if(params.value.sort === null || params.value.sort === type){
|
||||
order.value = (order.value + 1) % 3
|
||||
}else{
|
||||
order.value = 1
|
||||
}
|
||||
// emits('infoDataListSort', type, order.value)
|
||||
switch(order.value){
|
||||
case 0:
|
||||
params.value.sort = null
|
||||
params.value.order = null
|
||||
break
|
||||
case 1:
|
||||
params.value.sort = type
|
||||
params.value.order = 'asc'
|
||||
break
|
||||
case 2:
|
||||
params.value.sort = type
|
||||
params.value.order = 'desc'
|
||||
break
|
||||
}
|
||||
getTaskList();
|
||||
}
|
||||
const closeMolder = () => {
|
||||
getTaskList();
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
height: 85%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.handoff{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 25px;
|
||||
}
|
||||
.map-list-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.screen-div {
|
||||
padding: 22px 12px 19px 13px;
|
||||
display: flex;
|
||||
width: 590px;
|
||||
// margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
// background: @component-background;
|
||||
.screen-item {
|
||||
// width: 33.3%;
|
||||
display: flex;
|
||||
// margin-bottom: 15px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
height: 39px;
|
||||
.screen-item-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 9px;
|
||||
}
|
||||
: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{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
width:223px;
|
||||
box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
|
||||
}
|
||||
.item-button{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
height:38px;
|
||||
width: 97px;
|
||||
background:#086DEC;
|
||||
}
|
||||
}
|
||||
.screen-button-div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
align-items: center;
|
||||
.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;
|
||||
// margin-top: 10px;
|
||||
height: 60vh;
|
||||
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:4px;
|
||||
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;
|
||||
cursor:pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.item-mark{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #696969;
|
||||
margin-left: 17px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.button-div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.button-item{
|
||||
height: 27px;
|
||||
width: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-56deg, #0060FF, #007EFF, #0061FF);
|
||||
}
|
||||
}
|
||||
}
|
||||
.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: 9px;
|
||||
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;
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.rollback {
|
||||
background: @component-background;
|
||||
padding: 10px;
|
||||
}
|
||||
.img-box{
|
||||
width: 25px;
|
||||
cursor: pointer;
|
||||
height: 23px;
|
||||
}
|
||||
.mr-r-20{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.img-box.small{
|
||||
width: 18px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<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';
|
||||
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 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) => {
|
||||
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(() => {
|
||||
getCountList();
|
||||
// TODO 获取批次
|
||||
batchOptions.value = [];
|
||||
});
|
||||
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;
|
||||
}
|
||||
.map-box-div {
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
<template>
|
||||
<a-table
|
||||
:columns="columns.col"
|
||||
:data-source="columns.data"
|
||||
size="small"
|
||||
height="500"
|
||||
bordered
|
||||
:pagination="pagination.pagination"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'is_illegal'">
|
||||
{{ getRecordByColumn(column.dataIndex, record) }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'weifaleixing'">
|
||||
{{ getRecordByColumn(column.dataIndex, record) }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'measure_name'">
|
||||
{{ getRecordByColumn(column.dataIndex, record) }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'actual_use_to'">
|
||||
{{ getRecordByColumn(column.dataIndex, record) }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a @click="viewDetail(record)">详情</a>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
title="案件详情"
|
||||
:canFullscreen="false"
|
||||
:defaultFullscreen="true"
|
||||
:showCancelBtn="false"
|
||||
:showOkBtn="false"
|
||||
:draggable="false"
|
||||
>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, defineProps, watch } from 'vue';
|
||||
import { BasicModal, useModal } from '@/components/Modal';
|
||||
import { getCaseInfoList } from '@/api/monitor/index';
|
||||
import { getLoadCaseInfoListOffence } from '@/api/demo/system';
|
||||
import { dataProcessingCount } from '@/views/demo/tiankongdi/util.ts';
|
||||
|
||||
const [registerModal, { openModal, setModalProps }] = useModal();
|
||||
|
||||
const props = defineProps<{
|
||||
tablist: Object;
|
||||
currentListQuery: Object;
|
||||
}>();
|
||||
const caseId = ref('');
|
||||
let columns = reactive({
|
||||
data: [],
|
||||
col: [
|
||||
{
|
||||
title: '图斑编号',
|
||||
dataIndex: 'case_no',
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
title: '县区',
|
||||
dataIndex: 'countyname',
|
||||
},
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'streetname',
|
||||
},
|
||||
{
|
||||
title: '社区/村',
|
||||
dataIndex: 'communityname',
|
||||
},
|
||||
{
|
||||
title: '案件描述',
|
||||
dataIndex: 'case_description',
|
||||
},
|
||||
{
|
||||
title: '所属类型',
|
||||
dataIndex: 'typename',
|
||||
},
|
||||
{
|
||||
title: '下发时间',
|
||||
dataIndex: 'createtime',
|
||||
},
|
||||
{
|
||||
title: '图斑面积',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'gengdi_area',
|
||||
},
|
||||
{
|
||||
title: '判定结果',
|
||||
dataIndex: 'is_illegal',
|
||||
},
|
||||
{
|
||||
title: '案件状态',
|
||||
dataIndex: 'handle_status_name',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'xiangmumc',
|
||||
},
|
||||
{
|
||||
title: '项目主体',
|
||||
dataIndex: 'xiangmuzhuti',
|
||||
},
|
||||
{
|
||||
title: '实际用途',
|
||||
dataIndex: 'actual_use_to',
|
||||
},
|
||||
{
|
||||
title: '违法类型',
|
||||
dataIndex: 'weifaleixing',
|
||||
},
|
||||
{
|
||||
title: '整改措施',
|
||||
dataIndex: 'measure_name',
|
||||
},
|
||||
// {
|
||||
// title: '操作',
|
||||
// dataIndex: 'action',
|
||||
// },
|
||||
],
|
||||
});
|
||||
let total = ref(0);
|
||||
|
||||
function viewDetail(record) {
|
||||
console.log(record);
|
||||
caseId.value = record.id;
|
||||
openModal();
|
||||
}
|
||||
|
||||
let current = ref(1);
|
||||
let pageSize = ref(10);
|
||||
|
||||
let pagination = reactive({
|
||||
pagination: {
|
||||
pageSize: pageSize, // 每页显示的条数
|
||||
showSizeChanger: true, // 是否可以改变每页显示的条数
|
||||
pageSizeOptions: ['10', '50', '80', '100'], // 可选的每页显示条数
|
||||
showQuickJumper: true, // 是否可以快速跳转到指定页
|
||||
showTotal: (total) => `共${total}条`,
|
||||
current: current, // 当前页数
|
||||
total: total, // 总条数
|
||||
onChange: handlePageChange,
|
||||
},
|
||||
});
|
||||
|
||||
function handlePageChange(page, pageSize) {
|
||||
props.currentListQuery.page = page;
|
||||
props.currentListQuery.limit = pageSize;
|
||||
pagination.pagination.pageSize = pageSize;
|
||||
pagination.pagination.current = page;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.currentListQuery,
|
||||
(newValue, oldValue) => {
|
||||
pagination.pagination.pageSize = newValue.limit;
|
||||
pagination.pagination.current = newValue.page;
|
||||
handleGetList();
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
function handleGetList() {
|
||||
getLoadCaseInfoListOffence(props.currentListQuery).then((res) => {
|
||||
res.items.forEach((item) => {
|
||||
item.area = dataProcessingCount(item.area);
|
||||
item.gengdi_area = dataProcessingCount(item.gengdi_area);
|
||||
});
|
||||
columns.data = res.items;
|
||||
total.value = res.total;
|
||||
});
|
||||
}
|
||||
|
||||
function getRecordByColumn(dataIndex, record) {
|
||||
let result: string = '';
|
||||
if (dataIndex == 'is_illegal') {
|
||||
// 判定结果
|
||||
switch (record.is_illegal) {
|
||||
case 0:
|
||||
result = '合法';
|
||||
break;
|
||||
case 1:
|
||||
result = '违法';
|
||||
break;
|
||||
case 2:
|
||||
result = '其他';
|
||||
break;
|
||||
}
|
||||
} else if (dataIndex == 'weifaleixing') {
|
||||
// 违法类型
|
||||
switch (record.weifaleixing) {
|
||||
case 0:
|
||||
result = '非农化违法用地';
|
||||
break;
|
||||
case 1:
|
||||
result = '非粮化违法用地';
|
||||
break;
|
||||
}
|
||||
} else if (dataIndex == 'measure_name') {
|
||||
// 整改措施
|
||||
switch (record.measure_name) {
|
||||
case '0':
|
||||
result = '拆除复耕';
|
||||
break;
|
||||
case '1':
|
||||
result = '补办手续';
|
||||
break;
|
||||
}
|
||||
} else if (dataIndex == 'actual_use_to') {
|
||||
// 实际用途
|
||||
if (record.is_illegal == 2) {
|
||||
switch (record.qita_use_to) {
|
||||
case '1':
|
||||
result = '不改变原用地性质的光伏用地';
|
||||
break;
|
||||
case '2':
|
||||
result = '设施农业用地';
|
||||
break;
|
||||
case '3':
|
||||
result = '农村道路';
|
||||
break;
|
||||
case '4':
|
||||
result = '实地未变化';
|
||||
break;
|
||||
case '5':
|
||||
result = '临时用地';
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
result = record.actual_use_to;
|
||||
}
|
||||
|
||||
}
|
||||
return result;
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.editable-row-operations a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
::v-deep .ant-table {
|
||||
height: calc(100vh - 230px) !important;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
// 无人机发现违法行为情况统计明细表-table
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: 'countyid',
|
||||
dataIndex: '县区id',
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
title: '县区',
|
||||
dataIndex: 'countyname',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '下发图斑',
|
||||
children: [
|
||||
{
|
||||
title: '宗数',
|
||||
dataIndex: 'xftbzs',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '面积',
|
||||
dataIndex: 'xfmj',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'xfgdmj',
|
||||
width: 90,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '合法',
|
||||
children: [
|
||||
{
|
||||
title: '宗数',
|
||||
dataIndex: 'hfzs',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '面积',
|
||||
dataIndex: 'hfmj',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'hfgdmj',
|
||||
width: 90,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '违法',
|
||||
children: [
|
||||
{
|
||||
title: '小计',
|
||||
children: [
|
||||
{
|
||||
title: '宗数',
|
||||
dataIndex: 'wfzs',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '面积',
|
||||
dataIndex: 'wfmj',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'wfgdmj',
|
||||
width: 90,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '非农化',
|
||||
children: [
|
||||
{
|
||||
title: '宗数',
|
||||
dataIndex: 'fnhzs',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '面积',
|
||||
dataIndex: 'fnhmj',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'fnhgdmj',
|
||||
width: 90,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '非粮化',
|
||||
children: [
|
||||
{
|
||||
title: '宗数',
|
||||
dataIndex: 'flhzs',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '面积',
|
||||
dataIndex: 'flhmj',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'flhgdmj',
|
||||
width: 90,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '其他',
|
||||
children: [
|
||||
{
|
||||
title: '宗数',
|
||||
dataIndex: 'qtzs',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '面积',
|
||||
dataIndex: 'qtmj',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'qtgdmj',
|
||||
width: 90,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '整改情况',
|
||||
children: [
|
||||
{
|
||||
title: '补办手续',
|
||||
children: [
|
||||
{
|
||||
title: '宗数',
|
||||
dataIndex: 'bbsxzs',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '面积',
|
||||
dataIndex: 'bbsxmj',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'bbsxgdmj',
|
||||
width: 90,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '拆除复耕',
|
||||
children: [
|
||||
{
|
||||
title: '宗数',
|
||||
dataIndex: 'cczs',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '面积',
|
||||
dataIndex: 'ccmj',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'ccgdmj',
|
||||
width: 90,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '新增违法占用耕地情况',
|
||||
children: [
|
||||
{
|
||||
title: '核实后新增违法耕地',
|
||||
children: [
|
||||
{
|
||||
title: '宗数',
|
||||
dataIndex: 'hshxzwfgdzs',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'hshxzwfgdgdmj',
|
||||
width: 90,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '整改后剩余违法耕地',
|
||||
children: [
|
||||
{
|
||||
title: '宗数',
|
||||
dataIndex: 'zghsywfgdzs',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'zghsywfgdgdmj',
|
||||
width: 90,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// 无人机发现违法行为情况统计明细表-搜索
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: '[startTime, endTime]',
|
||||
label: '日期范围',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM',
|
||||
picker: 'month',
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
defaultValue: [dayjs(dayjs(), 'YYYY-MM'), dayjs(dayjs(), 'YYYY-MM')]
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,534 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #toolbar>
|
||||
<PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 县区 -->
|
||||
<!-- <template v-if="column.key === 'countyname'">
|
||||
<a @click="getOrgCaseList(column, record)">
|
||||
{{ record.countyname }}
|
||||
</a>
|
||||
</template> -->
|
||||
|
||||
<!-- 下发图斑·宗数 -->
|
||||
<template v-if="column.key === 'xftbzs' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 1)"> {{ record.xftbzs }} </a>
|
||||
</template>
|
||||
<!-- 下发图斑·面积 -->
|
||||
<template v-if="column.key === 'xfmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 1)">
|
||||
{{ record.xfmj == 0 ? 0 : record.xfmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
<!-- 下发图斑·耕地面积 -->
|
||||
<template v-if="column.key === 'xfgdmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 1)">
|
||||
{{ record.xfgdmj == 0 ? 0 : record.xfgdmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 合法·宗数 -->
|
||||
<template v-if="column.key === 'hfzs' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 2)"> {{ record.hfzs }} </a>
|
||||
</template>
|
||||
<!-- 合法·面积 -->
|
||||
<template v-if="column.key === 'hfmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 2)">
|
||||
{{ record.hfmj == 0 ? 0 : record.hfmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
<!-- 合法·耕地面积 -->
|
||||
<template v-if="column.key === 'hfgdmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 2)">
|
||||
{{ record.hfgdmj == 0 ? 0 : record.hfgdmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 违法·小计·宗数 -->
|
||||
<template v-if="column.key === 'wfzs' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 3)"> {{ record.wfzs }} </a>
|
||||
</template>
|
||||
<!-- 违法·小计·面积 -->
|
||||
<template v-if="column.key === 'wfmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 3)">
|
||||
{{ record.wfmj == 0 ? 0 : record.wfmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
<!-- 违法·小计·耕地面积 -->
|
||||
<template v-if="column.key === 'wfgdmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 3)">
|
||||
{{ record.wfgdmj == 0 ? 0 : record.wfgdmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 违法·非农化·宗数 -->
|
||||
<template v-if="column.key === 'fnhzs' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 10)"> {{ record.fnhzs }} </a>
|
||||
</template>
|
||||
<!-- 违法·非农化·面积 -->
|
||||
<template v-if="column.key === 'fnhmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 10)">
|
||||
{{ record.fnhmj == 0 ? 0 : record.fnhmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
<!-- 违法·非农化·耕地面积 -->
|
||||
<template v-if="column.key === 'fnhgdmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 10)">
|
||||
{{ record.fnhgdmj == 0 ? 0 : record.fnhgdmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 违法·非粮化·宗数 -->
|
||||
<template v-if="column.key === 'flhzs' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 5)"> {{ record.flhzs }} </a>
|
||||
</template>
|
||||
<!-- 违法·非粮化·面积 -->
|
||||
<template v-if="column.key === 'flhmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 5)">
|
||||
{{ record.flhmj == 0 ? 0 : record.flhmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
<!-- 违法·非粮化·耕地面积 -->
|
||||
<template v-if="column.key === 'flhgdmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 5)">
|
||||
{{ record.flhgdmj == 0 ? 0 : record.flhgdmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 其他·宗数 -->
|
||||
<template v-if="column.key === 'qtzs' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 4)"> {{ record.qtzs }} </a>
|
||||
</template>
|
||||
<!-- 其他·面积 -->
|
||||
<template v-if="column.key === 'qtmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 4)">
|
||||
{{ record.qtmj == 0 ? 0 : record.qtmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
<!-- 其他·耕地面积 -->
|
||||
<template v-if="column.key === 'qtgdmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 4)">
|
||||
{{ record.qtgdmj == 0 ? 0 : record.qtgdmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 整改情况·补办手续·宗数 -->
|
||||
<template v-if="column.key === 'bbsxzs' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 6)"> {{ record.bbsxzs }} </a>
|
||||
</template>
|
||||
<!-- 整改情况·补办手续·面积 -->
|
||||
<template v-if="column.key === 'bbsxmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 6)">
|
||||
{{ record.bbsxmj == 0 ? 0 : record.bbsxmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
<!-- 整改情况·补办手续·耕地面积 -->
|
||||
<template v-if="column.key === 'bbsxgdmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 6)">
|
||||
{{ record.bbsxgdmj == 0 ? 0 : record.bbsxgdmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
<!-- 整改情况·拆除复耕·宗数 -->
|
||||
<template v-if="column.key === 'cczs' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 7)"> {{ record.cczs }} </a>
|
||||
</template>
|
||||
<!-- 整改情况·拆除复耕·面积 -->
|
||||
<template v-if="column.key === 'ccmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 7)">
|
||||
{{ record.ccmj == 0 ? 0 : record.ccmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
<!-- 整改情况·拆除复耕·耕地面积 -->
|
||||
<template v-if="column.key === 'ccgdmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 7)">
|
||||
{{ record.ccgdmj == 0 ? 0 : record.ccgdmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 新增违法占用耕地情况·核实后新增违法耕地·宗数 -->
|
||||
<template v-if="column.key === 'hshxzwfgdzs' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 8)"> {{ record.hshxzwfgdzs }} </a>
|
||||
</template>
|
||||
<!-- 新增违法占用耕地情况·核实后新增违法耕地·耕地面积 -->
|
||||
<template v-if="column.key === 'hshxzwfgdgdmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 8)">
|
||||
{{ record.hshxzwfgdgdmj == 0 ? 0 : record.hshxzwfgdgdmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
<!-- 新增违法占用耕地情况·整改后剩余违法耕地·宗数 -->
|
||||
<template v-if="column.key === 'zghsywfgdzs' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 9)"> {{ record.zghsywfgdzs }} </a>
|
||||
</template>
|
||||
<!-- 新增违法占用耕地情况·整改后剩余违法耕地·耕地面积 -->
|
||||
<template v-if="column.key === 'zghsywfgdgdmj' && record.countyname != '总计'">
|
||||
<a @click="handlePreViewData(column, record, 9)">
|
||||
{{ record.zghsywfgdgdmj == 0 ? 0 : record.zghsywfgdgdmj.toFixed(2) }}
|
||||
</a>
|
||||
</template>
|
||||
<!-- 面积只取小数点后两位 -->
|
||||
<template v-if="column.key.slice(-2) === 'mj' && record.countyname == '总计'">
|
||||
{{ record[column.key].toFixed(2) }}
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
|
||||
<a-modal v-model:open="open_mingxi" title="导出表格种类" :footer="null">
|
||||
<div>
|
||||
<a-button class="exportbutton" @click="handleExport('mingxi_1')">
|
||||
无人机全域巡查图斑情况统计表
|
||||
</a-button>
|
||||
<a-button class="exportbutton" @click="handleExport('mingxi_2')">
|
||||
土地卫片新增违法占用耕地情况统计表
|
||||
</a-button>
|
||||
<a-button class="exportbutton" @click="handleExport('mingxi_3')">
|
||||
无人机全域巡查违法用地情况统计表
|
||||
</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
<a-modal v-model:open="open_chuantou" title="导出文件类型" :footer="null">
|
||||
<div>
|
||||
<a-button class="exportbutton" @click="handleExport('chuantou_execl')">
|
||||
统计明细案件信息（execl）
|
||||
</a-button>
|
||||
<a-button class="exportbutton" @click="handleExport('chuantou_shp')">
|
||||
统计明细矢量数据（shp）
|
||||
</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
<a-modal
|
||||
v-model:open="showRecordList"
|
||||
width="1710px"
|
||||
style="top: 50px; left: 105px"
|
||||
:closable="false"
|
||||
:footer="null"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<div>
|
||||
<CloseOutlined id="closeIconButton" @click="handleCloseAllRecordList" />
|
||||
<MinusOutlined id="closeIconButton" @click="handleCloseRecordList" />
|
||||
<CloudDownloadOutlined id="closeIconButton" @click="exportList" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button type="primary" @click="exportList">
|
||||
<template #icon>
|
||||
<CloudDownloadOutlined />
|
||||
</template>
|
||||
导出
|
||||
</a-button>
|
||||
</template>
|
||||
<a-tabs
|
||||
v-model:activeKey="activeKey"
|
||||
hide-add
|
||||
type="editable-card"
|
||||
@edit="onEdit"
|
||||
@change="handleTabChange"
|
||||
>
|
||||
<a-tab-pane
|
||||
v-for="(pane, index) in tablist"
|
||||
:key="index.toString()"
|
||||
:tab="pane.countyname + '-' + pane.label"
|
||||
:closable="pane.closable"
|
||||
>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<RecordList :tablist="tablist" :currentListQuery="currentListQuery.listQuery" />
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, watch, createVNode, unref } from 'vue';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { BasicTable, useTable } from '@/components/Table';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { getCaseOffence } from '@/api/demo/system';
|
||||
import { columns, searchFormSchema } from './index.data';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { RecordList } from './page';
|
||||
import { MinusOutlined, CloseOutlined, CloudDownloadOutlined } from '@ant-design/icons-vue';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
// 页面表格
|
||||
const searchParams = ref();
|
||||
const [registerTable] = useTable({
|
||||
api: getCaseOffence,
|
||||
columns: columns,
|
||||
title: '无人机全域巡查图斑情况统计表',
|
||||
titleHelpMessage: '合法、其他、非粮化、补办手续、拆除复耕均需市级审核通过才可判定为举证类型。',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
showIndexColumn: false,
|
||||
striped: false,
|
||||
bordered: true,
|
||||
canResize: false,
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
pagination: false,
|
||||
handleSearchInfoFn(info) {
|
||||
searchParams.value = info;
|
||||
return info;
|
||||
},
|
||||
beforeFetch: (data) => {
|
||||
// 接口请求前 参数处理
|
||||
var temp = {
|
||||
startTime: dayjs(data.startTime).startOf('month').format('YYYY-MM-DD'),
|
||||
endTime: dayjs(data.endTime).endOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
return temp;
|
||||
},
|
||||
afterFetch: (res) => {},
|
||||
});
|
||||
|
||||
const showRecordList = ref<boolean>(false);
|
||||
|
||||
// 标签页面数据
|
||||
let activeKey = ref('0');
|
||||
const tablist = reactive<
|
||||
{ countyname: string; label: string; listQuery: searchListSchema; closable?: boolean }[]
|
||||
>([]);
|
||||
let currentListQuery = reactive({ listQuery: {} });
|
||||
// 查询条件
|
||||
interface searchListSchema {
|
||||
AreaId?: string;
|
||||
CaseType?: number;
|
||||
startTime?: string;
|
||||
endTime?: string;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
}
|
||||
// 打开标签页面
|
||||
function handlePreViewData(column, record: Recordable, CaseType: number) {
|
||||
const searchForm = reactive<searchListSchema>({
|
||||
AreaId: record.countyid,
|
||||
CaseType: CaseType,
|
||||
startTime: dayjs(searchParams.value?.startTime).startOf('month').format('YYYY-MM-DD'),
|
||||
endTime: dayjs(searchParams.value?.endTime).endOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
||||
page: 1,
|
||||
limit: 10,
|
||||
});
|
||||
// 标签页面信息
|
||||
let tabItem: any = {
|
||||
countyname: record.countyname,
|
||||
label: '',
|
||||
listQuery: searchForm,
|
||||
};
|
||||
switch (CaseType) {
|
||||
case 1:
|
||||
tabItem.label = '下发图斑';
|
||||
break;
|
||||
case 2:
|
||||
tabItem.label = '合法';
|
||||
break;
|
||||
case 3:
|
||||
tabItem.label = '违法·小计';
|
||||
break;
|
||||
case 4:
|
||||
tabItem.label = '其他';
|
||||
break;
|
||||
case 5:
|
||||
tabItem.label = '违法·非粮化';
|
||||
break;
|
||||
case 6:
|
||||
tabItem.label = '整改情况·补办手续';
|
||||
break;
|
||||
case 7:
|
||||
tabItem.label = '整改情况·拆除复耕';
|
||||
break;
|
||||
case 8:
|
||||
tabItem.label = '核实后新增违法耕地';
|
||||
break;
|
||||
case 9:
|
||||
tabItem.label = '整改后剩余违法耕地';
|
||||
break;
|
||||
case 10:
|
||||
tabItem.label = '违法·非农化';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
tablist.push(tabItem);
|
||||
// 当前标签页面
|
||||
activeKey.value = tablist.length > 1 ? (tablist.length - 1).toString() : '0';
|
||||
// 打开标签页面
|
||||
showRecordList.value = true;
|
||||
// 标签页面的搜索条件
|
||||
currentListQuery.listQuery = searchForm;
|
||||
}
|
||||
// 编辑标签页
|
||||
function onEdit(targetKey: string) {
|
||||
tablist.splice(parseInt(targetKey), 1);
|
||||
if (tablist.length == 0) {
|
||||
showRecordList.value = false;
|
||||
}
|
||||
if (parseInt(targetKey) > 1) {
|
||||
activeKey.value = (parseInt(targetKey) - 1).toString();
|
||||
} else {
|
||||
activeKey.value = '0';
|
||||
}
|
||||
currentListQuery.listQuery = tablist[activeKey.value].listQuery;
|
||||
}
|
||||
// 修改标签页
|
||||
function handleTabChange(e) {
|
||||
currentListQuery.listQuery = tablist[e].listQuery;
|
||||
}
|
||||
// 穿透显示的明细表缩小
|
||||
function handleCloseRecordList() {
|
||||
showRecordList.value = false;
|
||||
}
|
||||
// 穿透显示的明细表关闭
|
||||
function handleCloseAllRecordList() {
|
||||
for (let i = 0; i < tablist.length; i++) {
|
||||
tablist.pop();
|
||||
}
|
||||
showRecordList.value = false;
|
||||
}
|
||||
// 穿透显示的明细表导出
|
||||
function exportList() {
|
||||
open_chuantou.value = true;
|
||||
}
|
||||
|
||||
// 导出种类
|
||||
const open_mingxi = ref<boolean>(false);
|
||||
const open_chuantou = ref<boolean>(false);
|
||||
|
||||
// 直接下载接口返回的二进制流
|
||||
function handleExport(exportType) {
|
||||
let url = '';
|
||||
let fileName = '';
|
||||
let params: any = {};
|
||||
let afterTitle = '';
|
||||
if (
|
||||
dayjs(searchParams.value?.startTime).startOf('month').format('YYYY-MM') ===
|
||||
dayjs(searchParams.value?.endTime).endOf('month').format('YYYY-MM')
|
||||
) {
|
||||
afterTitle = dayjs(searchParams.value?.startTime).startOf('month').format('YYYY-MM');
|
||||
} else {
|
||||
afterTitle =
|
||||
dayjs(searchParams.value?.startTime).startOf('month').format('YYYY-MM') +
|
||||
'至' +
|
||||
dayjs(searchParams.value?.endTime).endOf('month').format('YYYY-MM');
|
||||
}
|
||||
switch (exportType) {
|
||||
case 'chuantou_execl':
|
||||
// 穿透-导出案件明细execl
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExprotCaseListByType';
|
||||
fileName =
|
||||
'统计明细案件信息 ' +
|
||||
tablist[activeKey.value].countyname +
|
||||
'-' +
|
||||
tablist[activeKey.value].label +
|
||||
' ' +
|
||||
afterTitle +
|
||||
'.xls';
|
||||
break;
|
||||
case 'chuantou_shp':
|
||||
// 穿透-导出案件明细shp
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportShapefile';
|
||||
fileName =
|
||||
'统计明细矢量数据 ' +
|
||||
tablist[activeKey.value].countyname +
|
||||
'-' +
|
||||
tablist[activeKey.value].label +
|
||||
' ' +
|
||||
afterTitle +
|
||||
'.zip';
|
||||
break;
|
||||
case 'mingxi_1':
|
||||
// 无人机全域巡查图斑情况统计表
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/CaseOffenceToExcel';
|
||||
fileName = '无人机全域巡查图斑情况统计表 ' + afterTitle + '.xls';
|
||||
break;
|
||||
case 'mingxi_2':
|
||||
// 土地卫片新增违法占用耕地情况统计表
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/CaseOffenceSimpleToExcel';
|
||||
fileName = '土地卫片新增违法占用耕地情况统计表 ' + afterTitle + '.xls';
|
||||
break;
|
||||
case 'mingxi_3':
|
||||
// 无人机全域巡查违法用地情况统计表
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/CaseOffenceSimpleToExcel2';
|
||||
fileName = '无人机全域巡查违法用地情况统计表 ' + afterTitle + '.xls';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (['chuantou_execl', 'chuantou_shp'].includes(exportType)) {
|
||||
params = currentListQuery.listQuery;
|
||||
delete params.limit;
|
||||
delete params.page;
|
||||
}
|
||||
if (['mingxi_1', 'mingxi_2', 'mingxi_3'].includes(exportType)) {
|
||||
params = {
|
||||
startTime: dayjs(searchParams.value?.startTime).startOf('month').format('YYYY-MM-DD'),
|
||||
endTime: dayjs(searchParams.value?.endTime).endOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
}
|
||||
|
||||
axios({
|
||||
method: 'post',
|
||||
url: url,
|
||||
params: params,
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem('X-Token'),
|
||||
},
|
||||
responseType: 'blob',
|
||||
}).then((res) => {
|
||||
const elink = document.createElement('a');
|
||||
elink.download = fileName;
|
||||
elink.style.display = 'none';
|
||||
elink.href = URL.createObjectURL(res.data);
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
URL.revokeObjectURL(elink.href);
|
||||
document.body.removeChild(elink);
|
||||
});
|
||||
}
|
||||
// 按键分类
|
||||
const buttonClick = async (type) => {
|
||||
switch (type) {
|
||||
case 'btnExport':
|
||||
open_mingxi.value = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
#closeIconButton {
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
float: right;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.exportbutton {
|
||||
width: 510px;
|
||||
height: 60px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-container table {
|
||||
line-height: 1.1 !important;
|
||||
|
||||
.ant-table-row {
|
||||
td {
|
||||
padding-top: 8px !important;
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { default as RecordList} from './RecordList.vue'
|
||||
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<template>
|
||||
<div class="screen-div">
|
||||
<div class="screen-row">
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label">年份</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="flex: 1"
|
||||
v-model:value="props.year"
|
||||
:options="yearOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'year');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label">批次</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="flex: 1"
|
||||
v-model:value="props.batch"
|
||||
:options="batchOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'batch');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<!-- <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', true, item)"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="name-div">
|
||||
<div class="item-mark"></div>
|
||||
<div class="item-label">{{ item.areaname }}</div>
|
||||
<div class="progress-div">
|
||||
<div class="progress-label progress-color">进度</div>
|
||||
<div class="progress-data" style="width:97px">
|
||||
<span style="color: #086DEC;">{{item.verificatedtask}}</span>/{{item.totaltask}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-div">
|
||||
<div class="progress-label extended-color">超期</div>
|
||||
<div class="progress-data" style="width:50px">
|
||||
<span style="color: #D03542">{{item.overduetask}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-div">
|
||||
<div class="progress-label reviewed-color" style="width:70px;">待审核</div>
|
||||
<div class="progress-data" style="width:50px">
|
||||
<span style="color: #EC7908;">{{item.verifytask}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-data-div">
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">合法</div>
|
||||
<div class="info-data-data">{{item.legalcase}}</div>
|
||||
</div>
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">其他</div>
|
||||
<div class="info-data-data">{{item.ilegalcase}}</div>
|
||||
</div>
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">非粮化</div>
|
||||
<div class="info-data-data">{{item.nonfoodcase}}</div>
|
||||
</div>
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">复耕</div>
|
||||
<div class="info-data-data">{{item.rehabilitationcase}}</div>
|
||||
</div>
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">补手续</div>
|
||||
<div class="info-data-data">{{item.makeupcase}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
<a-empty :image="simpleImage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps, defineEmits, toRefs } from 'vue';
|
||||
import { batchOptions, yearOptions,patchSourceOptions } from '@/utils/global';
|
||||
import { Empty } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps(['year', 'batch', 'dataList','patchSource']);
|
||||
const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.screen-div {
|
||||
background: @component-background;
|
||||
padding: 10px;
|
||||
.screen-row {
|
||||
display: flex;
|
||||
.screen-item {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
.screen-item-label {
|
||||
width: 56px;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-list {
|
||||
height: calc(100% - 62px);
|
||||
// background: darkgoldenrod;
|
||||
// background: @component-background;
|
||||
margin-top: 10px;
|
||||
padding: 0px 10px;
|
||||
.data-title {
|
||||
height: 40px;
|
||||
background: #bab9b7;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
color: #366198;
|
||||
}
|
||||
.show-data-list-content {
|
||||
.data-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 11px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
.name-div {
|
||||
display: flex;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
.info-data-div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
.info-data-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
border-right: 1px solid #EDEDED;
|
||||
.info-data-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #959494;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
flex: 1;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.info-data-data{
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
.info-data-item:nth-last-child(1){
|
||||
border-right: 0px;
|
||||
}
|
||||
}
|
||||
.data-div {
|
||||
font-weight: 500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.item-mark {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: #086dec;
|
||||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.item-label {
|
||||
width: 100px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.progress-div{
|
||||
display:flex;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
margin-right: 17px;
|
||||
.progress-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
color: #FFFFFF;
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
border-radius: 13px 0px 0px 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.progress-data{
|
||||
background: #EFEFEF;
|
||||
height: 27px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0px 0px 11px 0px;
|
||||
}
|
||||
.progress-color{
|
||||
background: #086DEC;
|
||||
}
|
||||
.extended-color{
|
||||
background: #D03542
|
||||
}
|
||||
.reviewed-color{
|
||||
background: #EC7908
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-item:hover {
|
||||
background-color: rgba(8, 109, 236, 0.08);
|
||||
}
|
||||
// .data-item:nth-child(2n) {
|
||||
// background: #ececec;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
v-model:open="props.modalShow"
|
||||
title="图斑调整"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handlerCloseModal"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-item label="案件编号" name="case_no">
|
||||
<a-input v-model:value="formState.case_no" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item label="案件描述" name="case_description">
|
||||
<a-input v-model:value="formState.case_description" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item label="县区" name="countyid">
|
||||
<a-select
|
||||
v-model:value="formState.countyid"
|
||||
placeholder="请选择"
|
||||
:options="data.countyOptions"
|
||||
@change="handleCountyChange"
|
||||
:field-names="{ label: 'name', value: 'id' }"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="乡镇" name="streetid">
|
||||
<a-select
|
||||
v-model:value="formState.streetid"
|
||||
:options="data.streetOptions"
|
||||
:field-names="{ label: 'name', value: 'id' }"
|
||||
@change="handleStreetChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="村/社区" name="communityid">
|
||||
<a-select
|
||||
v-model:value="formState.communityid"
|
||||
:options="data.communityOptions"
|
||||
:field-names="{ label: 'name', value: 'id' }"
|
||||
@change="handleCommunityChange"
|
||||
/>
|
||||
</a-form-item> -->
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<a-modal
|
||||
v-if="false"
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
title="飞地调整"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-item label="案件编号" name="case_no">
|
||||
<a-input v-model:value="formState.case_no" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item label="案件描述" name="case_description">
|
||||
<a-input v-model:value="formState.case_description" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item label="县区" name="countyid">
|
||||
<a-select
|
||||
v-model:value="formState.countyid"
|
||||
placeholder="请选择"
|
||||
:options="data.countyOptions"
|
||||
@change="handleCountyChange"
|
||||
:field-names="{ label: 'name', value: 'id' }"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="乡镇" name="streetid">
|
||||
<a-select
|
||||
v-model:value="formState.streetid"
|
||||
:options="data.streetOptions"
|
||||
:field-names="{ label: 'name', value: 'id' }"
|
||||
@change="handleStreetChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="村/社区" name="communityid">
|
||||
<a-select
|
||||
v-model:value="formState.communityid"
|
||||
:options="data.communityOptions"
|
||||
:field-names="{ label: 'name', value: 'id' }"
|
||||
@change="handleCommunityChange"
|
||||
/>
|
||||
</a-form-item> -->
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, defineProps, watch } from 'vue';
|
||||
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { updateDroneCaseInfo, getCaseInfoById } from '@/api/tiankongdi/index.ts';
|
||||
import { getChildrenTree } from '@/api/demo/system.ts';
|
||||
const { createMessage } = useMessage();
|
||||
defineOptions({ name: 'AccountModal' });
|
||||
const formRef = ref();
|
||||
const emit = defineEmits(['success', 'register', 'closeModel']);
|
||||
|
||||
const props = defineProps({
|
||||
modalShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
readonly: false,
|
||||
},
|
||||
record: String,
|
||||
});
|
||||
|
||||
getDetail(props.record);
|
||||
const labelCol = { span: 4 };
|
||||
const wrapperCol = { span: 14 };
|
||||
const formState: any = ref({});
|
||||
const rules = ref({
|
||||
countyid: [{ required: true, message: '县区不能为空', trigger: 'blur' }],
|
||||
streetid: [{ required: true, message: '乡镇不能为空', trigger: 'blur' }],
|
||||
// communityid: [{ required: true, message: '村/社区不能为空', trigger: 'blur' }],
|
||||
});
|
||||
const data = reactive({
|
||||
countyOptions: [],
|
||||
streetOptions: [],
|
||||
// communityOptions: [],
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.modalShow,
|
||||
() => {
|
||||
if (props.modalShow) {
|
||||
getDetail(props.record);
|
||||
}
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => props.record,
|
||||
(newVal, oldVal) => {},
|
||||
);
|
||||
async function getDetail(id) {
|
||||
const data = await getCaseInfoById({
|
||||
id: id,
|
||||
});
|
||||
formState.value = data;
|
||||
getParent();
|
||||
}
|
||||
async function handleCountyChange(value, option) {
|
||||
formState.value.countyid = value;
|
||||
formState.value.countyname = option.name;
|
||||
getOptions(value).then((res) => {
|
||||
data.streetOptions = res;
|
||||
});
|
||||
formState.value.streetid = '';
|
||||
// formState.value.communityid = '';
|
||||
}
|
||||
async function handleStreetChange(value, option) {
|
||||
formState.value.streetid = value;
|
||||
formState.value.streetname = option.name;
|
||||
// getOptions(value).then((res) => {
|
||||
// data.communityOptions = res;
|
||||
// });
|
||||
}
|
||||
// async function handleCommunityChange(value, option) {
|
||||
// formState.value.communityid = value;
|
||||
// formState.value.communityname = option.name;
|
||||
// }
|
||||
async function getOptions(value) {
|
||||
const data = await getChildrenTree({
|
||||
parentId: value,
|
||||
});
|
||||
data.forEach((item) => {
|
||||
item.id = item.id.toString();
|
||||
});
|
||||
return data;
|
||||
}
|
||||
async function getParent() {
|
||||
const list = await getChildrenTree({
|
||||
parentId: 0,
|
||||
});
|
||||
// 获取县级数据
|
||||
getOptions(list[0].id).then((res) => {
|
||||
data.countyOptions = res;
|
||||
});
|
||||
// 获取乡镇数据
|
||||
getOptions(formState.value.countyid).then((res) => {
|
||||
data.streetOptions = res;
|
||||
});
|
||||
// 获取村/社区数据
|
||||
// getOptions(formState.value.streetid).then((res) => {
|
||||
// data.communityOptions = res;
|
||||
// });
|
||||
}
|
||||
|
||||
function handlerCloseModal() {
|
||||
emit('closeModel');
|
||||
}
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
var querys = {
|
||||
id: formState.value.id,
|
||||
countyid: formState.value.countyid,
|
||||
countyname: formState.value.countyname,
|
||||
streetid: formState.value.streetid,
|
||||
streetname: formState.value.streetname,
|
||||
// communityid: formState.value.communityid,
|
||||
// communityname: formState.value.communityname,
|
||||
};
|
||||
console.log(querys);
|
||||
const data = await updateDroneCaseInfo(querys);
|
||||
console.log(data);
|
||||
if (data) {
|
||||
// closeModal();
|
||||
emit('closeModel');
|
||||
emit('success');
|
||||
return createMessage.success(data);
|
||||
} else {
|
||||
return createMessage.error(data);
|
||||
}
|
||||
})
|
||||
.catch((error: ValidateErrorEntity<FormState>) => {
|
||||
console.log('error', error);
|
||||
});
|
||||
} finally {
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getParent();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,907 @@
|
|||
<template>
|
||||
<div class="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: 130px"
|
||||
v-model:value="infoScreenData.year"
|
||||
:options="yearOptions"
|
||||
@change="(value) => 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: 130px"
|
||||
v-model:value="infoScreenData.tubanlaiyuan"
|
||||
:options="patchSourceOptions"
|
||||
@change="(value) => mapListScreenChange(value, 'tubanlaiyuan')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label">批次</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 103px"
|
||||
v-model:value="infoScreenData.picihao"
|
||||
:options="batchOptions"
|
||||
@change="(value) => mapListScreenChange(value, 'batch')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right: 18px">
|
||||
<a-input
|
||||
allowClear
|
||||
placeholder="请输入图斑编号"
|
||||
class="item-input"
|
||||
v-model:value="infoScreenData.caseNo"
|
||||
@change="(value) => mapListScreenChange(value.target.value, 'caseNo')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item">
|
||||
<a-button class="item-button" style="background: #2B75E1;" type="primary" :icon="h(SearchOutlined)" @click="querysBtn"
|
||||
>查询</a-button>
|
||||
<a-button class="item-button img" type="primary" @click="changeArea">
|
||||
<img src="@/assets/images/tiankongdi/tiaozheng.png" class="img-box small" />
|
||||
调整
|
||||
</a-button>
|
||||
<a-dropdown>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleOperateClick">
|
||||
<a-menu-item key="1">图斑分割</a-menu-item>
|
||||
<a-menu-item key="2">分割还原</a-menu-item>
|
||||
<!-- <a-menu-item key="3">分宗示意图</a-menu-item> -->
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button type="primary" class="item-button img" style="background: #0CBD62">
|
||||
<img src="@/assets/images/tiankongdi/fenge.png" class="img-box small" style="width:16px;"/>
|
||||
分割
|
||||
<!-- <DownOutlined /> -->
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<Icon
|
||||
style="font-size: 25px; margin-left: 14px;cursor: pointer;"
|
||||
icon="streamline:interface-time-reset-time-clock-reset-stopwatch-circle-measure-loading"
|
||||
@click="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;' : ''}`">▲</div>
|
||||
<div :style="`${showSortMark('area',2)? 'color: #086DEC;' : ''}`">▼</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;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('createtime')">
|
||||
<div class="sift-label">下发时间</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('createtime',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('createtime',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collect-div">
|
||||
<a-popover placement="bottom">
|
||||
<template #content>
|
||||
<div style="display:flex;">
|
||||
<div>当前状态：</div>
|
||||
<div>
|
||||
<a-checkbox-group
|
||||
@change="(value) => mapListScreenChange(value,'mapStatus')"
|
||||
style="width: 100%"
|
||||
v-model:value="infoScreenData.mapStatus"
|
||||
:options="mapStatusOptions" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items: center;">
|
||||
<div>图斑面积：</div>
|
||||
<div style="display:flex;">
|
||||
<a-input style="width:30%;"
|
||||
v-model:value="infoScreenData.tubanArea1"
|
||||
@change="(e) => mapListScreenChange(e.target.value,'tubanArea1')"
|
||||
/>
|
||||
<span>---</span>
|
||||
<a-input style="width:30%;margin-right: 4px;"
|
||||
v-model:value="infoScreenData.tubanArea2"
|
||||
@change="(e) => mapListScreenChange(e.target.value,'tubanArea2')"
|
||||
/>
|
||||
亩
|
||||
</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="infoScreenData.gengdiArea1"
|
||||
@change="(e) => mapListScreenChange(e.target.value,'gengdiArea1')"
|
||||
/>
|
||||
<span>---</span>
|
||||
<a-input style="width:30%;margin-right: 4px;"
|
||||
v-model:value="infoScreenData.gengdiArea2"
|
||||
@change="(e) => mapListScreenChange(e.target.value,'gengdiArea2')"
|
||||
/>
|
||||
亩
|
||||
</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 infoDataList" :key="index" @click="selectAreaId(item)" :class="classFun(item)">
|
||||
<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" @click="selectAreaId(item)">
|
||||
<div class="item-label">{{ item.countyname }}</div>
|
||||
<div class="item-sub-label">
|
||||
<span style="margin-right: 12px">{{ item.streetname }}</span>
|
||||
<span>{{ item.caseno }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-mark" v-if="item.isbuildname">{{ item.isbuildname }}</div>
|
||||
</div>
|
||||
<div class="data-item-type-div" >
|
||||
{{ item.unitname }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list-info-div">
|
||||
<div class="info-layout-div" @click="selectAreaId(item)">
|
||||
<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">
|
||||
<div>
|
||||
<!-- <Icon
|
||||
title="飞地调整"
|
||||
style="font-size: 30px; cursor: pointer"
|
||||
icon="ant-design:send-outlined"
|
||||
@click="changeArea(item)"
|
||||
/> -->
|
||||
<!-- <Icon
|
||||
title="详情"
|
||||
style="font-size: 30px; cursor: pointer"
|
||||
icon="bx:detail"
|
||||
@click="showInfo(item)"
|
||||
/> -->
|
||||
<!-- <Icon
|
||||
title="图斑分宗"
|
||||
style="font-size: 30px; cursor: pointer"
|
||||
icon="ant-design:split-cells-outlined"
|
||||
@click="handlerSplitPolygon(item)"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="no-data" v-if="infoDataList.length == 0">
|
||||
<a-empty :image="simpleImage" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-div">
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model:pageSize="pageSize"
|
||||
v-model:current="pageNo"
|
||||
:total="total"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
@change="changePage"
|
||||
/>
|
||||
</div>
|
||||
<!-- 飞地调整 -->
|
||||
<Amend @success="handleSuccess" v-if="modalShow" :modalShow="modalShow" :record="modalRecord" @closeModel="closeModal"/>
|
||||
<!-- 详情 -->
|
||||
<a-modal
|
||||
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="showInfoOpen"
|
||||
title="详情"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
:destroyOnClose="true"
|
||||
@cancel="showInfoOpen = false"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<ShowInfoModal :showInfoData="showInfoData" />
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<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"
|
||||
@closeModel="closeMolder"
|
||||
/>
|
||||
</a-modal>
|
||||
|
||||
|
||||
<a-modal
|
||||
style="width:100vw;top:0px;left:0px;margin:0px;padding:0px;"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="showSplitPolygon"
|
||||
title="图斑分综"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
:destroyOnClose="true"
|
||||
@cancel="showSplitPolygon = false"
|
||||
>
|
||||
<div class="modal-content" >
|
||||
<SplitPolygonModal :showInfoData="showInfoData" @closeModal="handlerSplitComplete"/>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, defineEmits, computed, h } from 'vue';
|
||||
import { SearchOutlined, DownOutlined, SendOutlined } from '@ant-design/icons-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';
|
||||
import {
|
||||
batchOptions,
|
||||
yearOptions,
|
||||
patchSourceOptions,
|
||||
} from '@/utils/global';
|
||||
import Amend from './amend.vue';
|
||||
import { Empty, message,Modal } from 'ant-design-vue';
|
||||
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import SplitPolygonModal from '@/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue';
|
||||
import {recoverCase} from '@/api/tiankongdi'
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo';
|
||||
import { Audit } from '@/views/demo/workflow/task/process/page';
|
||||
import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
|
||||
|
||||
const modalShow = ref(false);
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
const pageSize = ref(10);
|
||||
const pageNo = ref(1);
|
||||
const total = ref(0);
|
||||
const mapStatusOptions = ref([
|
||||
{
|
||||
label: '正常',
|
||||
value: '正常',
|
||||
},
|
||||
{
|
||||
label: '分割后关闭',
|
||||
value: '分割后关闭',
|
||||
},
|
||||
]);
|
||||
const modalRecord = ref('');
|
||||
const emits = defineEmits(['changeSpin', 'changeTask']);
|
||||
const order = ref(0); // 0: 不排序 1: 升序 2: 降序
|
||||
const showSortMark = (key, sort) => {
|
||||
if (infoScreenData.value.sortType === key && sort === order.value) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const infoDataList = ref([]);
|
||||
const infoScreenData: any = ref({
|
||||
year: null,
|
||||
picihao: null,
|
||||
batch: null,
|
||||
countyid: null,
|
||||
streetid: null,
|
||||
geomid: null,
|
||||
nowStatus: null,
|
||||
is_illegal: null,
|
||||
weifaleixing: null,
|
||||
measure_name: null,
|
||||
handle_status_id: null,
|
||||
is_build_complete: null,
|
||||
areaid: null,
|
||||
level: null,
|
||||
page: 1,
|
||||
limit: 10,
|
||||
sort: null,
|
||||
order: null,
|
||||
type: null,
|
||||
});
|
||||
const selectItem = ref();
|
||||
const classFun = (item) => {
|
||||
let string = 'data-list-item';
|
||||
if (selectItem.value && item.id == selectItem.value.id) {
|
||||
string += ' checked';
|
||||
}
|
||||
if (item.unitname == '已关闭') {
|
||||
string += ' close-div';
|
||||
}
|
||||
return string;
|
||||
};
|
||||
const mapListScreenChange = (value, type) => {
|
||||
switch (type) {
|
||||
case 'year':
|
||||
infoScreenData.value.year = value;
|
||||
break;
|
||||
case 'batch':
|
||||
infoScreenData.value.picihao = value;
|
||||
break;
|
||||
case 'caseNo':
|
||||
infoScreenData.value.caseNo = value;
|
||||
break;
|
||||
case 'countyid':
|
||||
infoScreenData.value.countyid = value;
|
||||
break;
|
||||
case 'streetid':
|
||||
infoScreenData.value.streetid = value;
|
||||
break;
|
||||
case 'isIllegal':
|
||||
infoScreenData.value.isIllegal = value;
|
||||
if (value !== 1) {
|
||||
infoScreenData.value.weifaleixing = null;
|
||||
infoScreenData.value.measureName = null;
|
||||
}
|
||||
break;
|
||||
case 'illegalType':
|
||||
infoScreenData.value.weifaleixing = value;
|
||||
if (value !== 0) {
|
||||
infoScreenData.value.measureName = null;
|
||||
}
|
||||
break;
|
||||
case 'measureName':
|
||||
infoScreenData.value.measureName = value;
|
||||
break;
|
||||
case 'isBuildName':
|
||||
infoScreenData.value.isBuildName = value;
|
||||
break;
|
||||
case 'mapStatus':
|
||||
if (value.length > 0) {
|
||||
infoScreenData.value.isSplit = value.join(',');
|
||||
} else {
|
||||
delete infoScreenData.value.isSplit;
|
||||
}
|
||||
break;
|
||||
}
|
||||
};
|
||||
const getInfoList = () => {
|
||||
emits('changeSpin', true);
|
||||
getLoadDroneCaseInfoDetail(infoScreenData.value)
|
||||
.then((res) => {
|
||||
infoDataList.value = res.items;
|
||||
total.value = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
emits('changeSpin', false);
|
||||
});
|
||||
};
|
||||
const showInfoOpen = ref(false);
|
||||
const openCollect = computed(() => {
|
||||
if (!infoScreenData.value.type) return false;
|
||||
return true;
|
||||
});
|
||||
const showInfoData = ref();
|
||||
onMounted(() => {
|
||||
getInfoList();
|
||||
});
|
||||
|
||||
const showSplitPolygon = ref(false);
|
||||
|
||||
function handlerSplitComplete(){
|
||||
showSplitPolygon.value=false;
|
||||
getInfoList();
|
||||
}
|
||||
// 查看位置
|
||||
async function locationFun(record) {
|
||||
console.log(record);
|
||||
emits('changeTask', record.geomid);
|
||||
}
|
||||
const changePage = (page, pageSize) => {
|
||||
infoScreenData.value.page = page;
|
||||
infoScreenData.value.limit = pageSize;
|
||||
getInfoList();
|
||||
};
|
||||
// 查看接受处理里收藏的
|
||||
const getCollectList = () => {
|
||||
let collect = infoScreenData.value.type;
|
||||
if (collect === '' || collect == null) {
|
||||
infoScreenData.value.type = 1;
|
||||
} else if (collect === 1) {
|
||||
delete infoScreenData.value.type;
|
||||
}
|
||||
getInfoList();
|
||||
};
|
||||
const handlerRevertPolygon = (item)=>{
|
||||
Modal.confirm({
|
||||
title:'是否确认还原分割图斑?',
|
||||
onCancel() {
|
||||
},
|
||||
async onOk() {
|
||||
let params = {
|
||||
"caseid": selectItem.value.id,
|
||||
"parts": [
|
||||
{
|
||||
"caseid": null
|
||||
}
|
||||
],
|
||||
"type": 0,
|
||||
};
|
||||
recoverCase(params).then(res=>{
|
||||
if(res){
|
||||
message.info(res);
|
||||
getInfoList();
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const handlerSplitPolygon = (item) => {
|
||||
getCaseInfoById({id:item.processid}).then(res => {
|
||||
if(res){
|
||||
showInfoData.value = res
|
||||
showInfoData.value['processid'] = item.processid;
|
||||
showSplitPolygon.value = true
|
||||
}else{
|
||||
message.error("数据为空");
|
||||
}
|
||||
})
|
||||
}
|
||||
const dataListSort = (type) => {
|
||||
order.value = (order.value + 1) % 3;
|
||||
switch (order.value) {
|
||||
case 0:
|
||||
delete infoScreenData.value.sortType;
|
||||
delete infoScreenData.value.order;
|
||||
break;
|
||||
case 1:
|
||||
infoScreenData.value.sortType = type;
|
||||
infoScreenData.value.order = 'asc';
|
||||
break;
|
||||
case 2:
|
||||
infoScreenData.value.sortType = type;
|
||||
infoScreenData.value.order = 'desc';
|
||||
break;
|
||||
}
|
||||
getInfoList();
|
||||
};
|
||||
|
||||
|
||||
const showDataIndex = ref()
|
||||
const auditOpen = ref(false);
|
||||
const processId = ref('');
|
||||
const taskId = ref('');
|
||||
const type = ref('');
|
||||
const handoffShow = ref(true)
|
||||
const isRead: any = ref(0);
|
||||
const flowWfDataStore = flowStore();
|
||||
async function goAudit(record) {
|
||||
|
||||
// showDataIndex.value = props.infoDataList.findIndex(item => item.taskid === record.taskid)
|
||||
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;
|
||||
}
|
||||
|
||||
const showInfo = (item) => {
|
||||
getCaseInfoById({ id: item.processid }).then((res) => {
|
||||
showInfoData.value = res;
|
||||
showInfoOpen.value = true;
|
||||
});
|
||||
};
|
||||
function changeArea() {
|
||||
if (!selectItem.value) {
|
||||
message.warning('请选择一条数据进行飞地调整');
|
||||
return;
|
||||
}
|
||||
if (selectItem.value.unitname == '已关闭') {
|
||||
message.warning('已关闭的不能进行飞地调整！');
|
||||
return;
|
||||
}
|
||||
modalShow.value = true;
|
||||
modalRecord.value = selectItem.value.id;
|
||||
}
|
||||
function selectAreaId(item) {
|
||||
selectItem.value = item;
|
||||
}
|
||||
const resetScreenData = () => {
|
||||
infoScreenData.value = {
|
||||
limit: pageSize.value,
|
||||
page: 1,
|
||||
};
|
||||
pageNo.value = 1;
|
||||
getInfoList();
|
||||
};
|
||||
function closeModal() {
|
||||
modalShow.value = false;
|
||||
getInfoList();
|
||||
}
|
||||
function handleSuccess() {
|
||||
getInfoList();
|
||||
}
|
||||
const handleOperateClick = (e: Event) => {
|
||||
|
||||
if(!selectItem.value){
|
||||
message.warning("选择需要操作的数据");
|
||||
return;
|
||||
}
|
||||
if (selectItem.value.unitname == '已关闭') {
|
||||
message.warning('已关闭的不能进行分割操作！');
|
||||
return;
|
||||
}
|
||||
if(e['key'] == 1){
|
||||
handlerSplitPolygon(selectItem.value);
|
||||
}else if(e['key'] == 2){
|
||||
handlerRevertPolygon(selectItem.value);
|
||||
}
|
||||
|
||||
};
|
||||
function querysBtn(){
|
||||
pageNo.value = 1;
|
||||
infoScreenData.value.page = 1
|
||||
getInfoList();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.screen-div {
|
||||
padding: 10px 12px 20px 13px;
|
||||
display: flex;
|
||||
width: 590px;
|
||||
flex-wrap: wrap;
|
||||
.screen-item {
|
||||
display: flex;
|
||||
height: 39px;
|
||||
.screen-item-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 9px;
|
||||
}
|
||||
: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: 223px;
|
||||
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;
|
||||
color: #ffffff;
|
||||
background: #139af8;
|
||||
margin-left: 4px;
|
||||
height: 39px;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
.screen-button-div {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination-div {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.rollback {
|
||||
background: @component-background;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
::v-deep .ant-modal-content {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::v-deep .ant-modal .ant-modal-content {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 65px);
|
||||
overflow: auto;
|
||||
}
|
||||
.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: 10px;
|
||||
// border-radius:6px;
|
||||
border:2px solid #fff;
|
||||
margin-bottom: 1px;
|
||||
|
||||
.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;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
padding-top: 10px;
|
||||
.info-layout-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.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: 30px;
|
||||
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-item.checked {
|
||||
border: 2px solid #139af8;
|
||||
}
|
||||
.data-list-item.close-div {
|
||||
background: #eff3fc;
|
||||
}
|
||||
.data-list-item.checked.close-div {
|
||||
background: #eff3fc;
|
||||
border: 1px solid #139af8;
|
||||
}
|
||||
}
|
||||
.img-box{
|
||||
width: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mr-r-20{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.img-box.small{
|
||||
width: 18px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,363 @@
|
|||
<template>
|
||||
<div class="curb-spot-city">
|
||||
<div class="show-list">
|
||||
<a-spin :spinning="spinning">
|
||||
<AuditProgress
|
||||
v-if="false"
|
||||
:year="year"
|
||||
:batch="batch"
|
||||
:batchOptions="batchOptions"
|
||||
:yearOptions="yearOptions"
|
||||
:dataList="dataList"
|
||||
@auditProgressScreenChange="auditProgressScreenChange"
|
||||
@showInfo="changeShowInfo"
|
||||
/>
|
||||
|
||||
<!-- <AuthImage
|
||||
style="width:180px;height:180px;"
|
||||
src="http://120.222.154.48:6050/DroneEnforcement/2024/20240712/2024071209474128610039.jpg"
|
||||
type="native"
|
||||
:preview="true"
|
||||
@perviewImage="perviewImage"
|
||||
></AuthImage>
|
||||
|
||||
<AuthImage
|
||||
style="width:180px;height:180px;"
|
||||
src="http://120.222.154.48:6050/S_Common/2024/20240712/2024071209201354610087.jpg"
|
||||
type="native"
|
||||
:preview="true"
|
||||
@perviewImage="perviewImage"
|
||||
></AuthImage>
|
||||
|
||||
<AuthImage
|
||||
style="width:180px;height:180px;"
|
||||
src="http://111.17.207.220:9001/2023/20231220/2023122014532130590143.png"
|
||||
type="ant"
|
||||
:preview="true"
|
||||
@perviewImage="perviewImage"
|
||||
></AuthImage> -->
|
||||
|
||||
<MapList
|
||||
v-if="showInfo"
|
||||
:infoScreenData="infoScreenData"
|
||||
:cityType="cityType"
|
||||
:pageNo="pageNo"
|
||||
:pageSize="pageSize"
|
||||
:total="total"
|
||||
:infoDataList="infoDataList"
|
||||
:municipalAreaOptions="municipalAreaOptions"
|
||||
:countiesAreaOptions="countiesAreaOptions"
|
||||
@infoDataListSort="infoDataListSort"
|
||||
@changeInfoPage="changeInfoPage"
|
||||
@mapListScreenChange="mapListScreenChange"
|
||||
@closeShowInfo="changeShowInfo"
|
||||
@changeTask="changeTask"
|
||||
@collectChange="collectChange"
|
||||
@changeSpin="changeSpin"
|
||||
/>
|
||||
</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 AuthImage from '@/components/Upload/src/components/AuthImage.vue'
|
||||
import { ref, onMounted, onUnmounted, watch, 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 { getLoadDroneCaseInfoCount, getLoadDroneCaseInfoDetail } from '@/api/tiankongdi/index.ts';
|
||||
import { batchOptions, yearOptions } from '@/utils/global';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
import { getGeom, getConfig } from '@/api/sys/layerManagement';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import axios from 'axios';
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
function perviewImage(e): void {}
|
||||
|
||||
const spinning = ref(false);
|
||||
|
||||
const showInfo = ref(false);
|
||||
const year = ref<number>();
|
||||
const batch = ref();
|
||||
const dataList = ref<any>([]);
|
||||
const infoDataList = ref<any>([]);
|
||||
const infoScreenData = ref({
|
||||
year: '',
|
||||
batch: '',
|
||||
mapNo: '',
|
||||
countyId: '',
|
||||
streetId: '',
|
||||
mapType: '',
|
||||
illegalType: '',
|
||||
measure: '',
|
||||
mapStatus: '',
|
||||
markType: '',
|
||||
sort: '',
|
||||
order: '',
|
||||
type: '', // 收藏
|
||||
});
|
||||
const pageNo = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const municipalAreaOptions = ref([{ label: '全部', value: '' }]);
|
||||
const countiesAreaOptions = ref([{ label: '全部', value: '' }]);
|
||||
const cityType = ref();
|
||||
const auditProgressScreenChange = (value, type) => {
|
||||
switch (type) {
|
||||
case 'year':
|
||||
year.value = value;
|
||||
break;
|
||||
case 'batch':
|
||||
batch.value = value;
|
||||
break;
|
||||
}
|
||||
let params = {
|
||||
year: year.value,
|
||||
};
|
||||
getLoadDroneCaseInfoCount(params).then((res) => {
|
||||
dataList.value = res;
|
||||
});
|
||||
};
|
||||
const mapListScreenChange = (value, type) => {
|
||||
switch (type) {
|
||||
case 'year':
|
||||
infoScreenData.value.year = value;
|
||||
break;
|
||||
case 'batch':
|
||||
infoScreenData.value.batch = value;
|
||||
break;
|
||||
case 'mapNo':
|
||||
infoScreenData.value.mapNo = value;
|
||||
break;
|
||||
case 'countyId':
|
||||
infoScreenData.value.countyId = value;
|
||||
break;
|
||||
case 'streetId':
|
||||
infoScreenData.value.streetId = 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 'markType':
|
||||
infoScreenData.value.markType = value;
|
||||
break;
|
||||
}
|
||||
};
|
||||
const changeShowInfo = (value, item) => {
|
||||
showInfo.value = value;
|
||||
if (item) {
|
||||
cityType.value = 0;
|
||||
// cityType.value = item;
|
||||
// infoScreenData.value.countyId = item.areaid;
|
||||
|
||||
// municipalAreaOptions.value = [{ label: item.areaname, value: item.areaid }];
|
||||
// getChildrenTree({ parentId: item.areaid }).then((res) => {
|
||||
// res.forEach((cityItem) => {
|
||||
// countiesAreaOptions.value.push({
|
||||
// label: cityItem.name,
|
||||
// value: cityItem.id,
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
|
||||
// console.log("countiesAreaOptions",municipalAreaOptions,countiesAreaOptions)
|
||||
// debugger
|
||||
} else {
|
||||
cityType.value = 0;
|
||||
}
|
||||
};
|
||||
|
||||
const getParams = () => {
|
||||
let result = {};
|
||||
let params = {
|
||||
year: infoScreenData.value.year,
|
||||
// batch: batch.value,
|
||||
countyid: infoScreenData.value.countyId,
|
||||
streetid: infoScreenData.value.streetId,
|
||||
geomid: infoScreenData.value.mapNo,
|
||||
is_illegal: infoScreenData.value.mapType,
|
||||
weifaleixing: infoScreenData.value.illegalType,
|
||||
measure_name: infoScreenData.value.measure,
|
||||
handle_status_id: infoScreenData.value.mapStatus,
|
||||
is_build_complete: infoScreenData.value.markType,
|
||||
areaid: cityType.value.areaid,
|
||||
level: cityType.value.level,
|
||||
page: pageNo.value,
|
||||
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) {
|
||||
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);
|
||||
});
|
||||
|
||||
changeShowInfo(true, null);
|
||||
});
|
||||
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 changeInfoPage = (page, limit) => {
|
||||
pageNo.value = page;
|
||||
pageSize.value = limit;
|
||||
};
|
||||
const collectChange = (value) => {
|
||||
pageNo.value = 1;
|
||||
infoScreenData.value.type = value;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
getLoadDroneCaseInfoDetail(getParams()).then((res) => {
|
||||
total.value = res.total;
|
||||
infoDataList.value = res.items;
|
||||
pageNo.value = 1;
|
||||
});
|
||||
};
|
||||
const changeSpin = (val) => {
|
||||
spinning.value = val;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.curb-spot-city {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.show-list {
|
||||
width: 590px;
|
||||
:deep(.ant-spin-nested-loading) {
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.ant-spin-container) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.map-box-div {
|
||||
width: calc(100% - 590px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
export const batchOptions = [];
|
||||
export const yearOptions = [
|
||||
{ value: '2024', label: 2024 },
|
||||
{ value: '2023', label: 2023 },
|
||||
{ value: '2022', label: 2022 },
|
||||
{ value: '2021', label: 2021 },
|
||||
{ value: '2020', label: 2020 },
|
||||
];
|
||||
export const mapTypeOptions = [
|
||||
{ label: '合法', value: 0 },
|
||||
{ label: '违法', value: 1 },
|
||||
{ label: '其他', value: 2 },
|
||||
];
|
||||
export const illegalTypeOptions = [
|
||||
{ label: '非农化', value: 0 },
|
||||
{ label: '非粮化', value: 1 },
|
||||
];
|
||||
export const measureOptions = [
|
||||
{ label: '拆除复耕', value: 0 },
|
||||
{ label: '补办手续', value: 1 },
|
||||
];
|
||||
export const mapStatusOptions = [
|
||||
{ label: '待接收', value: 0 },
|
||||
{ label: '待判定', value: 1 },
|
||||
{ label: '待整改', value: 2 },
|
||||
{ label: '待审核', value: 3 },
|
||||
{ label: '已完成', value: 4 },
|
||||
];
|
||||
export const markTypeOptions = [
|
||||
{ label: '建设中', value: 0 },
|
||||
{ label: '已建成', value: 1 },
|
||||
];
|
||||
|
|
@ -0,0 +1,568 @@
|
|||
<template>
|
||||
<div class="detail-container">
|
||||
<div class="map-container">
|
||||
<MapboxMap
|
||||
:geomsList="geomsList"
|
||||
:mapConfig="mapConfig"
|
||||
@handlerDrawComplete="handlerDrawComplete"
|
||||
@mapOnLoad="onMapboxLoad"
|
||||
ref="MapboxComponent"
|
||||
/>
|
||||
</div>
|
||||
<div class="info-container" id="info-container">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="线索下发">
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
bordered
|
||||
:contentStyle="{
|
||||
'text-align': 'center',
|
||||
'min-width': '250px',
|
||||
'word-break': 'break-all',
|
||||
}"
|
||||
>
|
||||
<a-descriptions-item label="图斑编号">{{ case_no }}</a-descriptions-item>
|
||||
<a-descriptions-item label="图斑类型">{{ typename }}</a-descriptions-item>
|
||||
<a-descriptions-item label="县区">{{ countyname }}</a-descriptions-item>
|
||||
<a-descriptions-item label="乡镇">{{ streetname }}</a-descriptions-item>
|
||||
<a-descriptions-item label="社区/村">{{ communityname }}</a-descriptions-item>
|
||||
<a-descriptions-item label="图斑面积(亩)">{{
|
||||
dataProcessing(area)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="农用地面积(亩)">{{
|
||||
dataProcessing(nongyongdi_area)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="耕地面积(亩)">{{
|
||||
dataProcessing(gengdi_area)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="基本农田面积(亩)">{{
|
||||
dataProcessing(yongjiujibennongtian_area)
|
||||
}}</a-descriptions-item>
|
||||
<!-- <a-descriptions-item label="占重点区域面积(亩)">{{ dataProcessing(zhongdianquyu_area) }}</a-descriptions-item> -->
|
||||
<a-descriptions-item label="占生态红线面积(亩)">{{
|
||||
dataProcessing(shengtaibaohuhongxian_area)
|
||||
}}</a-descriptions-item>
|
||||
<!-- <a-descriptions-item label="占空间规划面积(亩)">{{ dataProcessing(guotukongjianguihua_area) }}</a-descriptions-item> -->
|
||||
<a-descriptions-item label="图斑描述">{{ case_description }}</a-descriptions-item>
|
||||
<!-- <a-descriptions-item label="图斑地址">{{ address }}</a-descriptions-item> -->
|
||||
<a-descriptions-item label="备注">{{ remark }}</a-descriptions-item>
|
||||
<a-descriptions-item label="经度">{{ lng }}</a-descriptions-item>
|
||||
<a-descriptions-item label="纬度">{{ lat }}</a-descriptions-item>
|
||||
<a-descriptions-item label="下发时间">{{ createtime }}</a-descriptions-item>
|
||||
<a-descriptions-item label="图斑照片">
|
||||
<div class="image-div">
|
||||
<template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
|
||||
<a-image
|
||||
v-if="imageItem"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item>
|
||||
<a-descriptions-item label="接收时间">{{ jieshou_time?.split('.')[0] }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
key="2"
|
||||
v-if="!['建设用地', '推堆土'].includes(typename)"
|
||||
tab="线索填报"
|
||||
force-render
|
||||
>
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
bordered
|
||||
:contentStyle="{
|
||||
'text-align': 'center',
|
||||
'min-width': '250px',
|
||||
'word-break': 'break-all',
|
||||
}"
|
||||
>
|
||||
<a-descriptions-item label="判定结果">{{
|
||||
getLabel('is_illegal', is_illegal)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 1" label="项目名称">{{
|
||||
xiangmumc
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 1" label="项目主体">{{
|
||||
xiangmuzhuti
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 1" label="实际用途">{{
|
||||
actual_use_to
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 1" label="违法类型">{{
|
||||
getLabel('weifaleixing', weifaleixing)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 1" label="附件">
|
||||
<template v-for="(item, itemIndex) in fujianList" :key="itemIndex">
|
||||
<div v-if="item" style="margin-top: 10px">
|
||||
<Icon
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 0" label="附件">
|
||||
<template v-for="(item, itemIndex) in hefafujianList" :key="itemIndex">
|
||||
<div v-if="item" style="margin-top: 10px">
|
||||
<Icon
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 2" label="实际用途">{{
|
||||
getLabel('qita_use_to', qita_use_to)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 2" label="附件">
|
||||
<template v-for="(item, itemIndex) in qitafujianList" :key="itemIndex">
|
||||
<div v-if="item" style="margin-top: 10px">
|
||||
<Icon
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="判定依据说明">{{
|
||||
pandingyijushuoming
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="照片">
|
||||
<div class="image-div">
|
||||
<template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
|
||||
<a-image
|
||||
v-if="imageItem"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="填报时间">{{ examine_time }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
key="3"
|
||||
tab="整改情况"
|
||||
v-if="weifaleixing == 0 && !['建设用地', '推堆土'].includes(typename)"
|
||||
>
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
bordered
|
||||
:contentStyle="{
|
||||
'text-align': 'center',
|
||||
'min-width': '250px',
|
||||
'word-break': 'break-all',
|
||||
}"
|
||||
>
|
||||
<a-descriptions-item label="整改措施">{{
|
||||
getLabel('measure_name', measure_name)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="measure_name == 0" label="附件">
|
||||
<template v-for="(item, itemIndex) in yanshoubiaoList" :key="itemIndex">
|
||||
<div v-if="item">
|
||||
<Icon
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="measure_name == 0" label="照片">
|
||||
<div class="image-div">
|
||||
<template
|
||||
v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
|
||||
:key="imageIndex"
|
||||
>
|
||||
<a-image
|
||||
v-if="imageItem"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="measure_name == 1" label="附件">
|
||||
<template v-for="(item, itemIndex) in zhenggaifujianList" :key="itemIndex">
|
||||
<div v-if="item">
|
||||
<Icon
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
</div>
|
||||
</template>
|
||||
<!-- {{ zhenggaifujian }} -->
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="measure_name == 1" label="照片">
|
||||
<div class="image-div">
|
||||
<template v-for="(imageItem, imageIndex) in bubanzhaopianList" :key="imageIndex">
|
||||
<a-image
|
||||
v-if="imageItem"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="办理时间">{{ transact_time }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4" v-if="!['建设用地', '推堆土'].includes(typename)" tab="审核">
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
bordered
|
||||
:contentStyle="{
|
||||
'text-align': 'center',
|
||||
'min-width': '250px',
|
||||
'word-break': 'break-all',
|
||||
}"
|
||||
>
|
||||
<a-descriptions-item label="审核人">{{ verifyuser }}</a-descriptions-item>
|
||||
<a-descriptions-item label="审核时间">{{ verifytime }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, ref, computed } from 'vue';
|
||||
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
|
||||
import { getConfig } from '@/api/sys/layerManagement';
|
||||
import { getGeom } from '@/api/sys/layerManagement';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createMessage } = useMessage();
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
|
||||
import {
|
||||
mapTypeOptions,
|
||||
illegalTypeOptions,
|
||||
measureOptions,
|
||||
mapStatusOptions,
|
||||
markTypeOptions,
|
||||
illegalTypeList,
|
||||
resultOptions,
|
||||
qitaUseTOOptions,
|
||||
} from '@/utils/global';
|
||||
|
||||
console.log('');
|
||||
|
||||
const MapboxComponent = ref();
|
||||
const mapConfig = ref({});
|
||||
getConfig({ code: 'mapsetting' }).then((res) => {
|
||||
mapConfig.value = JSON.parse(res.codeValue);
|
||||
});
|
||||
|
||||
const props = defineProps(['showInfoData']);
|
||||
const activeKey = ref('1');
|
||||
|
||||
console.log('showInfoData123', props.showInfoData);
|
||||
const geomsList = ref();
|
||||
const {
|
||||
id,
|
||||
case_no,
|
||||
case_name,
|
||||
case_description,
|
||||
start_time,
|
||||
end_time,
|
||||
address,
|
||||
lng,
|
||||
lat,
|
||||
typeid,
|
||||
typename,
|
||||
handle_status_id,
|
||||
handle_status_name,
|
||||
case_status_i,
|
||||
case_status_name,
|
||||
createtime,
|
||||
createuser,
|
||||
drone_no,
|
||||
deal_userid,
|
||||
deal_username,
|
||||
createusername,
|
||||
is_delete,
|
||||
countyid,
|
||||
countyname,
|
||||
streetid,
|
||||
streetname,
|
||||
communityid,
|
||||
communityname,
|
||||
remark,
|
||||
is_closed,
|
||||
area,
|
||||
is_illegal,
|
||||
close_user,
|
||||
close_time,
|
||||
identification_user,
|
||||
identification_time,
|
||||
is_intact,
|
||||
close_userid,
|
||||
identification_userid,
|
||||
verifyuserid,
|
||||
verifyuser,
|
||||
verifytime,
|
||||
is_improve,
|
||||
improve_reason,
|
||||
is_dispense,
|
||||
dispense_userid,
|
||||
dispense_time,
|
||||
dispense_username,
|
||||
verifystatus,
|
||||
verifystatusname,
|
||||
is_checked,
|
||||
deal_time,
|
||||
is_drawback,
|
||||
examiner_id,
|
||||
examiner_name,
|
||||
examine_time,
|
||||
measure_name,
|
||||
casepic,
|
||||
opinion,
|
||||
result,
|
||||
result_name,
|
||||
opinion_name,
|
||||
handletime,
|
||||
handleuser,
|
||||
handleusername,
|
||||
is_assist,
|
||||
measure_name_deal,
|
||||
qita_use_to,
|
||||
illegal_contact,
|
||||
illegal_shenfenzhenghao,
|
||||
investigation_type,
|
||||
investigation_result,
|
||||
registr_number,
|
||||
is_build_complete,
|
||||
actual_use_to,
|
||||
transactor_id,
|
||||
transactor_name,
|
||||
transact_time,
|
||||
geomid,
|
||||
nongyongdi_area,
|
||||
gengdi_area,
|
||||
yongjiujibennongtian_area,
|
||||
zhongdianquyu_area,
|
||||
shengtaibaohuhongxian_area,
|
||||
guotukongjianguihua_area,
|
||||
fujian,
|
||||
hefafujian,
|
||||
qitafujian,
|
||||
jieshou_people,
|
||||
jieshou_time,
|
||||
pandingyijushuoming,
|
||||
xiangmumc,
|
||||
xiangmuzhuti,
|
||||
weifaleixing,
|
||||
yanshoubiao,
|
||||
zhenggaifujian,
|
||||
chaichufugenghoupic,
|
||||
bubanzhaopian,
|
||||
is_jieshou,
|
||||
anjianzhaopian,
|
||||
} = props.showInfoData;
|
||||
const anjianzhaopianList = computed(() => {
|
||||
return anjianzhaopian ? anjianzhaopian.split(',') : [];
|
||||
});
|
||||
const casepicList = computed(() => {
|
||||
return casepic ? casepic.split(',') : [];
|
||||
});
|
||||
const chaichufugenghoupicList = computed(() => {
|
||||
return chaichufugenghoupic ? chaichufugenghoupic.split(',') : [];
|
||||
});
|
||||
const bubanzhaopianList = computed(() => {
|
||||
return bubanzhaopian ? bubanzhaopian.split(',') : [];
|
||||
});
|
||||
const fujianList = computed(() => {
|
||||
return fujian ? fujian.split(',') : [];
|
||||
});
|
||||
const hefafujianList = computed(() => {
|
||||
return hefafujian ? hefafujian.split(',') : [];
|
||||
});
|
||||
const qitafujianList = computed(() => {
|
||||
return qitafujian ? qitafujian.split(',') : [];
|
||||
});
|
||||
const zhenggaifujianList = computed(() => {
|
||||
return zhenggaifujian ? zhenggaifujian.split(',') : [];
|
||||
});
|
||||
const yanshoubiaoList = computed(() => {
|
||||
return yanshoubiao ? yanshoubiao.split(',') : [];
|
||||
});
|
||||
|
||||
function onMapboxLoad() {
|
||||
changeTask();
|
||||
}
|
||||
const getLabel = (type, value) => {
|
||||
let result: any[] = [];
|
||||
let label = '';
|
||||
switch (type) {
|
||||
case 'is_illegal':
|
||||
result = mapTypeOptions;
|
||||
break;
|
||||
case 'weifaleixing':
|
||||
result = illegalTypeList;
|
||||
break;
|
||||
case 'measure_name':
|
||||
result = measureOptions;
|
||||
break;
|
||||
case 'result_name':
|
||||
result = resultOptions;
|
||||
break;
|
||||
case 'qita_use_to':
|
||||
result = qitaUseTOOptions;
|
||||
break;
|
||||
}
|
||||
result.forEach((item) => {
|
||||
if (item.value == value) {
|
||||
label = item.label;
|
||||
}
|
||||
});
|
||||
return label;
|
||||
};
|
||||
function changeTask() {
|
||||
let getGeomPrams = {
|
||||
TableName: 'drone_shp_data ',
|
||||
FieldName: 'gid',
|
||||
FieldValue: props.showInfoData.geomid?.split(','),
|
||||
page: 1,
|
||||
limit: 999,
|
||||
key: null,
|
||||
};
|
||||
if (props.showInfoData.geomid) {
|
||||
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);
|
||||
geomsList.value = geoms;
|
||||
});
|
||||
}
|
||||
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
|
||||
MapboxComponent.value.handlerDraw('Details', geoms, false);
|
||||
} else {
|
||||
geomsList.value = null;
|
||||
createMessage.error('当前数据没有图斑！');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
createMessage.error('当前数据没有图斑！');
|
||||
}
|
||||
}
|
||||
const downLoadFile = (url) => {
|
||||
window.open(`${VITE_GLOB_INFO_IMAGE_URL}/${url}`, 'mozillaTab');
|
||||
};
|
||||
const getContainer = () => {
|
||||
return document.getElementById('info-container');
|
||||
};
|
||||
const dataProcessing = (value) => {
|
||||
if (!value) {
|
||||
return '0';
|
||||
}
|
||||
if (value.indexOf('.') == -1) {
|
||||
return value;
|
||||
} else {
|
||||
if (value.split('.')[1].length <= 2) {
|
||||
return value;
|
||||
}
|
||||
let resultString = value.replace('㎡', '');
|
||||
return Number(resultString).toFixed(2);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image-div {
|
||||
width: 300px;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
.detail-container {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 120px);
|
||||
display: flex;
|
||||
}
|
||||
.detail-container::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 0;
|
||||
visibility: none;
|
||||
}
|
||||
.map-container {
|
||||
float: left;
|
||||
width: 50vw;
|
||||
height: calc(100vh - 100px);
|
||||
margin-right: 20px;
|
||||
}
|
||||
.info-container {
|
||||
// float: left;
|
||||
position: relative;
|
||||
:deep(.ant-image-preview-wrap) {
|
||||
position: absolute;
|
||||
}
|
||||
:deep(.ant-image-preview-mask) {
|
||||
position: absolute;
|
||||
}
|
||||
:deep(.ant-image-preview-operations-wrapper) {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
.ant-image-preview-operations {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
.ant-image-preview-operations-operation{
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
.ant-image-preview-operations-operation:nth-last-child(1){
|
||||
display: none;
|
||||
}
|
||||
.ant-image-preview-operations-operation:nth-last-child(2){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .ant-tabs .ant-tabs-content-holder {
|
||||
overflow: auto;
|
||||
height: 80vh;
|
||||
overflow: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,941 @@
|
|||
<template>
|
||||
<div class="map-list-content">
|
||||
<!-- <div class="top-radio-button-div">
|
||||
<a-radio-group
|
||||
v-model:value="props.infoScreenData.landType"
|
||||
@change="(e) => emits('mapListScreenChange',e.target.value,'landType')"
|
||||
button-style="solid"
|
||||
style="width:100%">
|
||||
<a-radio-button :value="0" class="radio-item">农用地</a-radio-button>
|
||||
<a-radio-button :value="1" class="radio-item">建设用地</a-radio-button>
|
||||
<a-radio-button :value="2" class="radio-item">推堆土</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div> -->
|
||||
<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="patchSourceOptions"
|
||||
@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-right:15px;margin-bottom:12px;">
|
||||
<div class="screen-item-label">标注</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="props.infoScreenData.markType"
|
||||
:options="markTypeOptions"
|
||||
@change="(value) => emits('mapListScreenChange',value,'markType')"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="screen-item" style="margin-right: 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-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-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;"
|
||||
/>
|
||||
</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">
|
||||
<!-- <RollbackOutlined class="back-button" @click="emits('closeShowInfo', false)"/> -->
|
||||
<!-- <div class="interval-div"></div> -->
|
||||
<div class="sift-item" @click="dataListSort('area')">
|
||||
<div class="sift-label">总面积</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">▼</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;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('createtime')">
|
||||
<div class="sift-label">下发时间</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('createtime',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('createtime',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collect-div">
|
||||
<a-popover placement="bottom">
|
||||
<template #content>
|
||||
<div style="display:flex;">
|
||||
<div>当前状态：</div>
|
||||
<div>
|
||||
<a-checkbox-group
|
||||
v-model:value="props.infoScreenData.mapStatus"
|
||||
@change="(value) => emits('mapListScreenChange',value,'mapStatus')"
|
||||
style="width: 100%"
|
||||
:options="mapStatusOptions"></a-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="display:flex;">
|
||||
<div>是否超期：</div>
|
||||
<div>
|
||||
<a-checkbox-group
|
||||
v-model:value="props.infoScreenData.isOverdue"
|
||||
@change="(value) => emits('mapListScreenChange',value,'isOverdue')"
|
||||
style="width: 100%"
|
||||
:options="isOverdueOptions"></a-checkbox-group>
|
||||
</div>
|
||||
</div> -->
|
||||
<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="item.isdrawback == 1">驳回</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">
|
||||
<span style="margin-right:12px;">{{item.streetname}}</span>
|
||||
<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-size-changer
|
||||
show-quick-jumper
|
||||
@change="changePage" />
|
||||
</div>
|
||||
<a-modal
|
||||
style="width:100vw;top:0px;left:0px;margin:0px;padding:0px;"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="showInfoOpen"
|
||||
title="详情"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
:destroyOnClose="true"
|
||||
@cancel="showInfoOpen = false"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<ShowInfoModal :showInfoData="showInfoData"/>
|
||||
</div>
|
||||
</a-modal>
|
||||
<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"
|
||||
@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 ShowInfoModal from './ShowInfoModal/index.vue'
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo';
|
||||
import { Audit } from '@/views/demo/workflow/task/process/page';
|
||||
import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
|
||||
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 showInfoOpen = ref(false)
|
||||
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 handoffShow = ref(true)
|
||||
const isRead: any = ref(0);
|
||||
const openCollect = computed(() => {
|
||||
if(props.infoScreenData.type === '') return false
|
||||
return true
|
||||
})
|
||||
const showInfoData = ref()
|
||||
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)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const showInfo = (item) => {
|
||||
getCaseInfoById({id:item.id}).then(res => {
|
||||
showInfoData.value = res
|
||||
showInfoOpen.value = true
|
||||
})
|
||||
}
|
||||
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;
|
||||
}
|
||||
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
|
||||
})
|
||||
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
|
||||
}
|
||||
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
|
||||
})
|
||||
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
|
||||
}
|
||||
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: 22px 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;
|
||||
}
|
||||
.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>
|
||||
|
|
@ -0,0 +1,471 @@
|
|||
<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 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>
|
||||
|
|
@ -0,0 +1,364 @@
|
|||
<template>
|
||||
<div class="screen-div">
|
||||
<div class="screen-row">
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label" style="margin-right: 9px">年份</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 103px"
|
||||
v-model:value="props.year"
|
||||
:options="yearOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'year');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-left: 20px; margin-right: 17px">
|
||||
<div class="screen-item-label" style="margin-right: 11px">图斑来源</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 142px"
|
||||
v-model:value="props.patchSource"
|
||||
:options="patchSourceOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'patchSource');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label" style="margin-right: 9px">批次</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 117px"
|
||||
v-model:value="props.batch"
|
||||
:options="props.batchOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'batch');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<!-- <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)"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="name-div">
|
||||
<!-- <div class="item-mark"></div> -->
|
||||
<div class="icon-name">
|
||||
<img src="/positioning.png" class="item-mark" />
|
||||
<div class="item-label">{{ item.areaname }}</div>
|
||||
</div>
|
||||
<!-- <div class="progress-div">
|
||||
<div class="progress-label progress-color">进度</div>
|
||||
<div class="progress-data" style="width:97px">
|
||||
<span style="color: #086DEC;">{{item.verificatedtask}}</span>/{{item.totaltask}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-div">
|
||||
<div class="progress-label extended-color">超期</div>
|
||||
<div class="progress-data" style="width:40px">
|
||||
<span style="color: #D03542">{{item.overduetask}}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="progress-div">
|
||||
<div class="progress-label reviewed-color" style="width: 70px">待审核</div>
|
||||
<div class="progress-data" style="width: 40px">
|
||||
<span style="color: #ec7908">{{ item.verifytask }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-data-div">
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">下发</div>
|
||||
<div class="info-data-data">{{ item.totaltask }}</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 1px;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
background-color: #ededed;
|
||||
height: 15px;
|
||||
"
|
||||
></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">接收</div>
|
||||
<div class="info-data-data">{{ item.receivetask }}</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 1px;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
background-color: #ededed;
|
||||
height: 15px;
|
||||
"
|
||||
></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">非粮化</div>
|
||||
<div class="info-data-data">{{ item.nonfoodcase }}</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 1px;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
background-color: #ededed;
|
||||
height: 15px;
|
||||
"
|
||||
></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">拆除复耕</div>
|
||||
<div class="info-data-data">{{ item.rehabilitationcase }}</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 1px;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
background-color: #ededed;
|
||||
height: 15px;
|
||||
"
|
||||
></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">补办手续</div>
|
||||
<div class="info-data-data">{{ item.makeupcase }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="data-div">
|
||||
<spam style="color: #086dec">{{ item.count }}</spam>
|
||||
</div> -->
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
<a-empty :image="simpleImage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps, defineEmits, toRefs } from 'vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { Empty } from 'ant-design-vue';
|
||||
import { patchSourceOptions } from '@/utils/global';
|
||||
|
||||
const props = defineProps([
|
||||
'year',
|
||||
'batch',
|
||||
'patchSource',
|
||||
'batchOptions',
|
||||
'yearOptions',
|
||||
'dataList',
|
||||
]);
|
||||
const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
// function changeParam(val,type) {
|
||||
// emits('auditProgressScreenChange', val, type);
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.screen-div {
|
||||
padding: 22px 12px 14px 13px;
|
||||
.screen-row {
|
||||
display: flex;
|
||||
height: 39px;
|
||||
.screen-item {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
// width: 33.3%;
|
||||
display: flex;
|
||||
.item-input {
|
||||
width: 223px;
|
||||
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);
|
||||
}
|
||||
.screen-item-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-list {
|
||||
height: calc(100% - 85px);
|
||||
// background: darkgoldenrod;
|
||||
// background: @component-background;
|
||||
margin-top: 10px;
|
||||
padding: 0px 11px 0px 13px;
|
||||
.data-title {
|
||||
height: 40px;
|
||||
background: #bab9b7;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
color: #366198;
|
||||
}
|
||||
.show-data-list-content {
|
||||
height: 76vh;
|
||||
overflow: auto;
|
||||
.data-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 11px;
|
||||
padding: 0px 12px;
|
||||
margin-bottom: 8px;
|
||||
.name-div {
|
||||
display: flex;
|
||||
height: 57px;
|
||||
align-items: center;
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
justify-content: space-between;
|
||||
.icon-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.info-data-div {
|
||||
height: 61px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding-left: 2px;
|
||||
// justify-content: space-between;
|
||||
// margin-top: 10px;
|
||||
.info-data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
border-right: 1px solid #ededed;
|
||||
.info-data-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #959494;
|
||||
display: flex;
|
||||
line-height: 30px;
|
||||
margin-right: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.info-data-data {
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.info-data-item:nth-last-child(1) {
|
||||
border-right: 0px;
|
||||
}
|
||||
}
|
||||
.data-div {
|
||||
font-weight: 500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.item-mark {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
// background: #086dec;
|
||||
// margin-left: 7px;
|
||||
// margin-right: 7px;
|
||||
}
|
||||
.item-label {
|
||||
// width: 122px;
|
||||
padding-left: 9px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 23px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
}
|
||||
.progress-div {
|
||||
display: flex;
|
||||
// font-weight: 500;
|
||||
// font-size: 16px;
|
||||
// line-height: 30px;
|
||||
// margin-right: 17px;
|
||||
.progress-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
color: #ffffff;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.progress-data {
|
||||
background: #efefef;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
// color: #086DEC;
|
||||
line-height: 30px;
|
||||
}
|
||||
.progress-color {
|
||||
background: #086dec;
|
||||
}
|
||||
.extended-color {
|
||||
background: #d03542;
|
||||
}
|
||||
.reviewed-color {
|
||||
background: #ec7908;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-item:hover {
|
||||
background-color: rgba(8, 109, 236, 0.08);
|
||||
}
|
||||
// .data-item:nth-child(2n) {
|
||||
// background: #ececec;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,782 @@
|
|||
<template>
|
||||
<div class="map-list-content">
|
||||
<div class="screen-div">
|
||||
<div class="screen-item" style="margin-right:20px;margin-bottom:15px;">
|
||||
<div class="screen-item-label">年份</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.year"
|
||||
:options="props.yearOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:17px;margin-bottom:15px;">
|
||||
<div class="screen-item-label">图斑来源</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.tubanlaiyuan"
|
||||
:options="patchSourceOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom:15px;">
|
||||
<div class="screen-item-label">批次</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:103px;"
|
||||
v-model:value="params.picihao"
|
||||
:options="props.batchOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:13px;">
|
||||
<div class="screen-item-label">举证</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.is_build_name"
|
||||
:options="markTypeOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:10px;">
|
||||
<!-- <div class="screen-item-label">图斑号</div> -->
|
||||
<a-input style="width:270px;" allowClear v-model:value="params.geomid" class="item-input" placeholder="请输入图斑编号"/>
|
||||
</div>
|
||||
<div class="screen-item" style="display: flex; justify-content: end;margin-bottom: 0px;">
|
||||
<a-button type="primary" class="item-button" :icon="h(SearchOutlined)" @click="query">查询</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-div">
|
||||
<div class="layout-div">
|
||||
<img style="cursor: pointer;width:20px;height: 18px" src="@/assets/images/tiankongdi/back.png" class="img-box" @click="emits('changeShowParent')"/>
|
||||
<div class="interval-div"></div>
|
||||
<div class="sift-item" @click="dataListSort('area')">
|
||||
<div class="sift-label">总面积</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">▼</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;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('yongjiujibennongtian_area')">
|
||||
<div class="sift-label">基本农田</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('yongjiujibennongtian_area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('yongjiujibennongtian_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('CreateDate')">
|
||||
<div class="sift-label">下发时间</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('CreateDate',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('CreateDate',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collect-div">
|
||||
<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: 3px;">
|
||||
<div
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
class="data-list-item"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="back-box" v-if="item.is_drawback == 1">驳回</div>
|
||||
<div class="data-list-layout-div">
|
||||
<div class="data-list-title-div">
|
||||
<img src="/positioning.png" class="map-mark" @click="locationFun(item)"/>
|
||||
<div class="label-div">
|
||||
<div class="item-label">{{item.countyname}}</div>
|
||||
<div class="item-sub-label">
|
||||
<span style="margin-right:12px;">{{item.streetname}}</span>
|
||||
<span>{{item.case_no}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-mark" v-if="item.is_build_name">{{item.is_build_name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="button-div">
|
||||
<a-button type="primary" class="button-item" @click="goAudit(item)">审核</a-button>
|
||||
</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.nongyongdi_area)">{{dataProcessing(item.nongyongdi_area)}}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">耕地</div>
|
||||
<div class="info-data" :title="dataProcessing(item.gengdi_area)">{{dataProcessing(item.gengdi_area)}}</div>
|
||||
</div>
|
||||
<div class="info-item" style="width:120px;">
|
||||
<div class="info-label">基本农田</div>
|
||||
<div class="info-data" :title="dataProcessing(item.yongjiujibennongtian_area)">{{dataProcessing(item.yongjiujibennongtian_area)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-layout-div">
|
||||
<!-- <div>
|
||||
<Icon
|
||||
:style="`font-size: 30px; color: #314A8C; cursor: pointer;${item.isouttime === 2 ? 'color: #D03542;' : item.isouttime === 1? 'color: #F7710F;' : 'color: #314A8C;'}`"
|
||||
icon="icon-park-solid:timer"
|
||||
@click="()=>{}"
|
||||
/>
|
||||
</div> -->
|
||||
<div style="background: rgb(237, 237, 237);width: 1px;height: 100%;margin-right: 10px;margin-left: 10px;"></div>
|
||||
<div style="cursor: pointer;">
|
||||
<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" v-if="dataList.length > 0">
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model:current="pageNumber"
|
||||
v-model:pageSize="pageSizeNumber"
|
||||
:total="total"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
@change="changePagination"
|
||||
/>
|
||||
</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"
|
||||
@closeModel="closeMolder"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, defineEmits, computed, h, watch } from 'vue';
|
||||
import { StarOutlined,StarFilled } from '@ant-design/icons-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getLoadTaskIllegalDetailList, updateSupervise, addTaskFavorite, deleteTaskCase } from '@/api/tiankongdi/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';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useUserStore } from '@/store/modules/user.ts'
|
||||
import { SearchOutlined, RollbackOutlined } from '@ant-design/icons-vue';
|
||||
import { patchSourceOptions } from '@/utils/global'
|
||||
import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
const emits = defineEmits(['changeTask', 'changeShowParent']);
|
||||
|
||||
const flowWfDataStore = flowStore();
|
||||
|
||||
const props = defineProps(['areaId', 'yearOptions', 'year','level','batch','patchSource','batchOptions']);
|
||||
const processId = ref('');
|
||||
const taskId = ref('');
|
||||
const isRead: any = ref(0);
|
||||
const type = ref('');
|
||||
const order = ref(0)
|
||||
const auditOpen = ref(false);
|
||||
const showDataId = ref()
|
||||
const nextShowDataId = ref()
|
||||
const prevShowDataId = ref()
|
||||
watch(() => showDataId.value, () => {
|
||||
let index = dataList.value.findIndex(item => item.Id == showDataId.value)
|
||||
if(index < dataList.value.length - 1){
|
||||
nextShowDataId.value = dataList.value[index + 1].Id
|
||||
}else{
|
||||
nextShowDataId.value = 0
|
||||
}
|
||||
if(index > 0){
|
||||
prevShowDataId.value = dataList.value[index - 1].Id
|
||||
}else{
|
||||
prevShowDataId.value = 0
|
||||
}
|
||||
})
|
||||
const handoffShow = ref(true)
|
||||
const openCollect = computed(() => {
|
||||
if(params.value.type === null) return false
|
||||
return true
|
||||
})
|
||||
const params = ref({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
level: props.level,
|
||||
areaid: props.areaId,
|
||||
geomid: null,
|
||||
year: props.year,
|
||||
picihao: props.batch,
|
||||
tubanlaiyuan: props.patchSource,
|
||||
is_build_name: null,
|
||||
type: null,
|
||||
sort: null,
|
||||
order: null,
|
||||
});
|
||||
const markTypeOptions = ref([
|
||||
{ label: '非粮化', value: '非粮化' },
|
||||
{ label: '拆除复耕', value: '拆除复耕' },
|
||||
{ label: '补办手续', value: '补办手续' },
|
||||
]);
|
||||
|
||||
const dataList = ref([]);
|
||||
const total = ref(0);
|
||||
const pageNumber = ref(1)
|
||||
const pageSizeNumber = ref(10)
|
||||
function query() {
|
||||
params.value.page = 1;
|
||||
getTaskList();
|
||||
}
|
||||
async function getTaskList() {
|
||||
console.log(params.value);
|
||||
const data = await getLoadTaskIllegalDetailList(params.value);
|
||||
dataList.value = data.items;
|
||||
total.value = data.total;
|
||||
}
|
||||
function changePagination(page, pageSize) {
|
||||
console.log(page, pageSize);
|
||||
params.value.page = page;
|
||||
params.value.limit = pageSize;
|
||||
getTaskList();
|
||||
}
|
||||
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.taskeid;
|
||||
type.value = record.type;
|
||||
}
|
||||
async function locationFun(record) {
|
||||
emits('changeTask', record);
|
||||
}
|
||||
onMounted(() => {
|
||||
getTaskList();
|
||||
});
|
||||
const changeSupervise = (item) => {
|
||||
if(item.cancelsupervise === 0 && item.issupervise === 1){
|
||||
message.error('取消改督办权限不足')
|
||||
return
|
||||
}
|
||||
let params = {
|
||||
id: item.processid,
|
||||
supervise: 1,
|
||||
}
|
||||
if(item.issupervise === 1){
|
||||
params.supervise = 0
|
||||
}
|
||||
updateSupervise(params).then(res => {
|
||||
if(params.supervise === 1){
|
||||
message.success('成功发起督办')
|
||||
}else{
|
||||
message.success('取消督办成功')
|
||||
}
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const prevData = async () => {
|
||||
if(prevShowDataId.value === 0){
|
||||
if(params.value.page === 1 || total.value == 0){
|
||||
message.warning('已经是第一条数据了')
|
||||
return
|
||||
}
|
||||
pageNumber.value = pageNumber.value - 1
|
||||
params.value.page = params.value.page -1
|
||||
await getTaskList();
|
||||
// showDataIndex.value = dataList.value.length -1
|
||||
handoffShow.value = false
|
||||
let record = dataList.value[dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = dataList.value[dataList.value.length - 1].Id
|
||||
return
|
||||
}else{
|
||||
showDataId.value = prevShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
}
|
||||
const nextData = async () => {
|
||||
if(nextShowDataId.value === 0){
|
||||
if(Math.ceil(total.value / pageSizeNumber.value) <= pageNumber.value || total.value == 0){
|
||||
message.warning('已经是最后一条数据了')
|
||||
return
|
||||
}
|
||||
pageNumber.value = pageNumber.value + 1
|
||||
params.value.page = params.value.page + 1
|
||||
await getTaskList();
|
||||
// showDataIndex.value = 0
|
||||
handoffShow.value = false
|
||||
let record = dataList.value[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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = dataList.value[0].Id
|
||||
return
|
||||
}else{
|
||||
showDataId.value = nextShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
}
|
||||
const cancelCollectItem = (item) => {
|
||||
deleteTaskCase(item.Fid).then(res => {
|
||||
message.success('取消收藏成功')
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const collectItem = (item) => {
|
||||
if(item.Fid){
|
||||
cancelCollectItem(item)
|
||||
return
|
||||
}
|
||||
let userInfo = userStore.getUserInfo
|
||||
let params = {
|
||||
taskId: item.taskeid,
|
||||
favoriteUserId: userInfo.id
|
||||
}
|
||||
addTaskFavorite(params).then(res => {
|
||||
message.success('收藏成功')
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const getCollectList = () => {
|
||||
if(params.value.type === null){
|
||||
params.value.type = 1
|
||||
}else if(params.value.type === 1){
|
||||
params.value.type = null
|
||||
}
|
||||
params.value.page = 1
|
||||
pageNumber.value = 1
|
||||
getTaskList();
|
||||
}
|
||||
const showSortMark = (key, sort) => {
|
||||
if(params.value.sort === key && sort === order.value){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
const dataListSort = (type) => {
|
||||
if(params.value.sort === null || params.value.sort === type){
|
||||
order.value = (order.value + 1) % 3
|
||||
}else{
|
||||
order.value = 1
|
||||
}
|
||||
// emits('infoDataListSort', type, order.value)
|
||||
switch(order.value){
|
||||
case 0:
|
||||
params.value.sort = null
|
||||
params.value.order = null
|
||||
break
|
||||
case 1:
|
||||
params.value.sort = type
|
||||
params.value.order = 'asc'
|
||||
break
|
||||
case 2:
|
||||
params.value.sort = type
|
||||
params.value.order = 'desc'
|
||||
break
|
||||
}
|
||||
getTaskList();
|
||||
}
|
||||
const closeMolder = () => {
|
||||
getTaskList();
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
height: 85%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.handoff{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 25px;
|
||||
}
|
||||
.map-list-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.screen-div {
|
||||
padding: 22px 12px 19px 13px;
|
||||
display: flex;
|
||||
width: 590px;
|
||||
// margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
// background: @component-background;
|
||||
.screen-item {
|
||||
// width: 33.3%;
|
||||
display: flex;
|
||||
// margin-bottom: 15px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
height: 39px;
|
||||
.screen-item-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 9px;
|
||||
}
|
||||
: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{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
width:223px;
|
||||
box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
|
||||
}
|
||||
.item-button{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
height:38px;
|
||||
width: 97px;
|
||||
background:#086DEC;
|
||||
}
|
||||
}
|
||||
.screen-button-div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
align-items: center;
|
||||
.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;
|
||||
// margin-top: 10px;
|
||||
height: 60vh;
|
||||
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:4px;
|
||||
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;
|
||||
cursor:pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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: #000000;
|
||||
border: 1px solid;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.type-title{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: center;
|
||||
}
|
||||
.type-data{
|
||||
background:#086DEC;
|
||||
color:#fff;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.button-div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.button-item{
|
||||
height: 27px;
|
||||
width: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-56deg, #0060FF, #007EFF, #0061FF);
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.rollback {
|
||||
background: @component-background;
|
||||
padding: 10px;
|
||||
}
|
||||
.img-box{
|
||||
width: 25px;
|
||||
height: 23px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mr-r-20{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.img-box.small{
|
||||
width: 18px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
import {
|
||||
resultNameOptions,
|
||||
patchSourceOptions,
|
||||
nowStatusOptions,
|
||||
markTypeOptions,
|
||||
} from '@/utils/global';
|
||||
|
||||
const getYearList = () => {
|
||||
const num = 10;
|
||||
const currentYear = new Date().getFullYear();
|
||||
// 存储年份数据的数组
|
||||
const 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}`),
|
||||
});
|
||||
}
|
||||
return list;
|
||||
};
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '区县',
|
||||
dataIndex: 'countyname',
|
||||
},
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'streetname',
|
||||
},
|
||||
{
|
||||
title: '图斑编号',
|
||||
dataIndex: 'caseno',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '下发时间',
|
||||
dataIndex: 'identificationtime',
|
||||
},
|
||||
{
|
||||
title: '图斑面积',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'gengdiarea',
|
||||
},
|
||||
{
|
||||
title: '判定结果',
|
||||
dataIndex: 'isillegal',
|
||||
},
|
||||
{
|
||||
title: '当前状态',
|
||||
dataIndex: 'handlestatusname',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'xiangmumc',
|
||||
},
|
||||
{
|
||||
title: '项目主体',
|
||||
dataIndex: 'xiangmuzhuti',
|
||||
},
|
||||
{
|
||||
title: '违法类型',
|
||||
dataIndex: 'weifaleixing',
|
||||
},
|
||||
{
|
||||
title: '整改措施',
|
||||
dataIndex: 'measurename',
|
||||
},
|
||||
{
|
||||
title: '处理方式',
|
||||
dataIndex: 'resultname',
|
||||
editRow: true,
|
||||
editComponent: 'Select',
|
||||
editComponentProps: {
|
||||
options: resultNameOptions,
|
||||
},
|
||||
fixed: 'right',
|
||||
},
|
||||
{
|
||||
title: '立案号',
|
||||
dataIndex: 'registrnumber',
|
||||
editRow: true,
|
||||
editComponent: 'Input',
|
||||
fixed: 'right',
|
||||
},
|
||||
{
|
||||
title: '违法联系人',
|
||||
dataIndex: 'illegalcontact',
|
||||
editRow: true,
|
||||
editComponent: 'Input',
|
||||
fixed: 'right',
|
||||
},
|
||||
{
|
||||
title: '违法人身份证号',
|
||||
dataIndex: 'illegalshenfenzhenghao',
|
||||
editRow: true,
|
||||
editComponent: 'Input',
|
||||
fixed: 'right',
|
||||
width: 160,
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'year',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
label: '年份',
|
||||
componentProps: {
|
||||
options: getYearList(),
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'tubanlaiyuan',
|
||||
label: '图斑来源',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: patchSourceOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'picihao',
|
||||
label: '批次',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'isBuildName',
|
||||
label: '标注类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: markTypeOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'nowStatus',
|
||||
label: '当前状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: nowStatusOptions,
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'countyid',
|
||||
label: '区县',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ tableAction, formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: 371300 },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
onChange: () => {
|
||||
formModel.streetid = '';
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'streetid',
|
||||
label: '乡镇',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: formModel.countyid },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'caseNo',
|
||||
label: '图斑编号',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #toolbar>
|
||||
<PermissionBtn @btn-event="onBtnClicked" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction :actions="createActions(record)" />
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<a-modal
|
||||
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||
wrap-class-name="full-modal"
|
||||
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 lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { BasicTable, useTable, TableAction, EditRecordRow } from '@/components/Table';
|
||||
import { loadCaseInfoIllegalList, dealIllegalCaseInfo } from '@/api/demo/system';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { columns, searchFormSchema } from './illegaltreatment.data';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import { getCaseInfoById } from '@/api/tiankongdi/index';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
const { createMessage } = useMessage();
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
|
||||
const searchInfo = reactive<Recordable>({
|
||||
countyid: null,
|
||||
});
|
||||
const showInfoData = ref();
|
||||
const showInfoOpen = ref(false);
|
||||
const searchParams = ref();
|
||||
const [registerTable] = useTable({
|
||||
title: '违法处理',
|
||||
api: loadCaseInfoIllegalList,
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
showAdvancedButton: false,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
tableSetting: { fullScreen: true },
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
searchParams.value = info;
|
||||
return info;
|
||||
},
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
// slots: { customRender: 'action' },
|
||||
},
|
||||
});
|
||||
|
||||
const currentEditKeyRef = ref('');
|
||||
function createActions(record: EditRecordRow): ActionItem[] {
|
||||
if (!record.editable) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.Id : false,
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
// icon: 'ant-design:ellipsis-outlined',
|
||||
label: '查看',
|
||||
onClick: viewAccount.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
return [
|
||||
{
|
||||
label: '保存',
|
||||
onClick: handleSave.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
popConfirm: {
|
||||
title: '是否取消编辑',
|
||||
confirm: handleCancel.bind(null, record),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
function handleEdit(record: EditRecordRow) {
|
||||
console.log(record);
|
||||
currentEditKeyRef.value = record.Id;
|
||||
record.onEdit?.(true);
|
||||
}
|
||||
|
||||
function handleCancel(record: EditRecordRow) {
|
||||
currentEditKeyRef.value = '';
|
||||
record.onEdit?.(false, false);
|
||||
}
|
||||
|
||||
async function handleSave(record: EditRecordRow) {
|
||||
console.log(record);
|
||||
// 校验
|
||||
createMessage.loading({ content: '正在保存...', duration: 0, key: 'saving' });
|
||||
const valid = await record.onValid?.();
|
||||
console.log(valid);
|
||||
if (valid) {
|
||||
try {
|
||||
const data = cloneDeep(record.editValueRefs);
|
||||
console.log(data);
|
||||
let querys = { ...data };
|
||||
querys.id = record.Id;
|
||||
console.log(querys);
|
||||
//TODO 此处将数据提交给服务器保存
|
||||
const res = await dealIllegalCaseInfo(querys);
|
||||
console.log(res);
|
||||
if (res) {
|
||||
// 保存之后提交编辑状态
|
||||
const pass = await record.onEdit?.(false, true);
|
||||
if (pass) {
|
||||
currentEditKeyRef.value = '';
|
||||
}
|
||||
createMessage.success({ content: '数据已保存', key: 'saving' });
|
||||
}
|
||||
} catch (error) {
|
||||
createMessage.error({ content: '保存失败', key: 'saving' });
|
||||
}
|
||||
} else {
|
||||
// const pass = await record.onEdit?.(false, true);
|
||||
createMessage.error({ content: '请填写正确的数据', key: 'saving' });
|
||||
}
|
||||
}
|
||||
|
||||
// 直接下载接口返回的二进制流
|
||||
function handleExport() {
|
||||
let params = { ...searchParams.value };
|
||||
params.countyid = searchInfo?.countyid;
|
||||
axios({
|
||||
method: 'post',
|
||||
url: VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoIllegalList',
|
||||
params: params,
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem('X-Token'),
|
||||
},
|
||||
responseType: 'blob',
|
||||
}).then((res) => {
|
||||
console.log('excel', res);
|
||||
let fileName = '违法处理统计报表' + new Date().getTime() + '.xls';
|
||||
const elink = document.createElement('a');
|
||||
elink.download = fileName;
|
||||
elink.style.display = 'none';
|
||||
elink.href = URL.createObjectURL(res.data);
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
URL.revokeObjectURL(elink.href);
|
||||
document.body.removeChild(elink);
|
||||
});
|
||||
}
|
||||
|
||||
function onBtnClicked(domId) {
|
||||
switch (domId) {
|
||||
case 'btnExport':
|
||||
handleExport();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
function viewAccount(record) {
|
||||
console.log(record);
|
||||
getCaseInfoById({ id: record.Id }).then((res) => {
|
||||
showInfoData.value = res;
|
||||
showInfoOpen.value = true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-preview-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 0px);
|
||||
position: absolute;
|
||||
padding: 30px 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #fff;
|
||||
}
|
||||
.data-preview-container-option {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0px;
|
||||
}
|
||||
.data-preview-container-option div {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<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';
|
||||
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 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) => {
|
||||
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,
|
||||
});
|
||||
dataList.value = data;
|
||||
}
|
||||
onMounted(() => {
|
||||
getCountList();
|
||||
});
|
||||
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;
|
||||
}
|
||||
.map-box-div {
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight>
|
||||
<div class="search-box">
|
||||
<BasicForm
|
||||
@register="registerForm"
|
||||
:labelWidth="100"
|
||||
:schemas="searchFormSchema"
|
||||
:actionColOptions="{ span: 24 }"
|
||||
/>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
|
||||
<template #toolbar>
|
||||
<PermissionBtn @btn-event="onBtnClicked" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="['area', 'gengdiarea'].includes(column.key)">
|
||||
{{ dataProcessingCount(record[column.key]) }}
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
// icon: 'ant-design:ellipsis-outlined',
|
||||
label: '查看',
|
||||
onClick: viewAccount.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
<a-modal v-model:open="open" title="导出文件类型" :footer="null">
|
||||
<div>
|
||||
<a-button class="exportbutton" @click="handleExport('excel')">
|
||||
图斑汇总统计报表（execl）
|
||||
</a-button>
|
||||
<a-button class="exportbutton" @click="handleExport('shp')">
|
||||
图斑汇总矢量数据（shp）
|
||||
</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
<a-modal
|
||||
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="showInfoOpen"
|
||||
title="详情"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
:destroyOnClose="true"
|
||||
@cancel="showInfoOpen = false"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<ShowInfoModal :showInfoData="showInfoData" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { loadCaseInfoTuBanList } from '@/api/demo/system';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { columns, searchFormSchema } from './patchsummary.data';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import { getCaseInfoById } from '@/api/tiankongdi/index';
|
||||
import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
|
||||
const searchInfo = reactive<Recordable>({
|
||||
countyid: null,
|
||||
});
|
||||
const showInfoData = ref();
|
||||
const showInfoOpen = ref(false);
|
||||
const searchParams = ref({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
});
|
||||
const tableData = ref([]);
|
||||
const tablePaginationRight = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
size: 'small',
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '50', '80', '100'],
|
||||
showQuickJumper: true,
|
||||
total: 0,
|
||||
});
|
||||
const [registerForm, { validate, getFieldsValue }] = useForm({
|
||||
schemas: searchFormSchema,
|
||||
labelWidth: 80,
|
||||
baseColProps: { span: 6 },
|
||||
actionColOptions: { span: 24 },
|
||||
autoSubmitOnEnter: true,
|
||||
submitFunc: handleSubmit,
|
||||
});
|
||||
const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
|
||||
useTable({
|
||||
title: '图斑汇总',
|
||||
dataSource: tableData.value,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
useSearchForm: false,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
searchParams.value = info;
|
||||
return info;
|
||||
},
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
// slots: { customRender: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
pagination: tablePaginationRight.value,
|
||||
});
|
||||
|
||||
// 直接下载接口返回的二进制流
|
||||
function handleExport(exportType) {
|
||||
console.log(searchParams);
|
||||
let params = { ...searchParams.value };
|
||||
let url = '';
|
||||
let fileName = '';
|
||||
if (exportType == 'excel') {
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoTuBanList';
|
||||
fileName = '图斑汇总统计报表' + new Date().getTime() + '.xls';
|
||||
} else if (exportType == 'shp') {
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoShapefile';
|
||||
fileName = '图斑汇总矢量数据' + new Date().getTime() + '.zip';
|
||||
}
|
||||
axios({
|
||||
method: 'post',
|
||||
url: url,
|
||||
params: params,
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem('X-Token'),
|
||||
},
|
||||
responseType: 'blob',
|
||||
}).then((res) => {
|
||||
const elink = document.createElement('a');
|
||||
elink.download = fileName;
|
||||
elink.style.display = 'none';
|
||||
elink.href = URL.createObjectURL(res.data);
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
URL.revokeObjectURL(elink.href);
|
||||
document.body.removeChild(elink);
|
||||
});
|
||||
}
|
||||
|
||||
const open = ref<boolean>(false);
|
||||
function onBtnClicked(domId) {
|
||||
switch (domId) {
|
||||
case 'btnExport':
|
||||
open.value = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
function viewAccount(record) {
|
||||
getCaseInfoById({ id: record.Id }).then((res) => {
|
||||
showInfoData.value = res;
|
||||
showInfoOpen.value = true;
|
||||
});
|
||||
}
|
||||
function handleChange(data) {
|
||||
searchParams.value.page = data.current;
|
||||
searchParams.value.limit = data.pageSize;
|
||||
tablePaginationRight.value = data;
|
||||
getTableData();
|
||||
}
|
||||
function handleSubmit() {
|
||||
searchParams.value = getFieldsValue();
|
||||
searchParams.value.page = 1;
|
||||
tablePaginationRight.value.current = 1;
|
||||
searchParams.value.limit = tablePaginationRight.value.pageSize;
|
||||
getTableData();
|
||||
}
|
||||
function getTableData() {
|
||||
setLoading(true);
|
||||
loadCaseInfoTuBanList(searchParams.value).then((res) => {
|
||||
tableData.value = res.items;
|
||||
tablePaginationRight.value.total = res.total;
|
||||
setTableData(tableData.value);
|
||||
setPagination(tablePaginationRight.value);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.data-preview-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 0px);
|
||||
position: absolute;
|
||||
padding: 30px 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #fff;
|
||||
}
|
||||
.data-preview-container-option {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0px;
|
||||
}
|
||||
.data-preview-container-option div {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.exportbutton {
|
||||
width: 510px;
|
||||
height: 60px;
|
||||
margin: 5px;
|
||||
}
|
||||
.search-box {
|
||||
background: @component-background;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
::v-deep .ant-col-24 {
|
||||
display: inline-block;
|
||||
max-width: fit-content;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.table-box {
|
||||
margin: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
import {
|
||||
patchSourceOptions,
|
||||
yearOptions,
|
||||
markTypeOptions,
|
||||
nowStatusOptions,
|
||||
mapTypeOptions,
|
||||
} from '@/utils/global';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '图斑来源',
|
||||
dataIndex: 'tubanlaiyuan',
|
||||
},
|
||||
{
|
||||
title: '区县',
|
||||
dataIndex: 'countyname',
|
||||
},
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'streetname',
|
||||
},
|
||||
{
|
||||
title: '社区/村',
|
||||
dataIndex: 'communityname',
|
||||
},
|
||||
{
|
||||
title: '图斑编号',
|
||||
dataIndex: 'caseno',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '图斑类型',
|
||||
dataIndex: 'typename',
|
||||
},
|
||||
{
|
||||
title: '下发时间',
|
||||
dataIndex: 'identificationtime',
|
||||
},
|
||||
{
|
||||
title: '图斑面积',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'gengdiarea',
|
||||
},
|
||||
{
|
||||
title: '判定结果',
|
||||
dataIndex: 'isillegal',
|
||||
},
|
||||
{
|
||||
title: '当前状态',
|
||||
dataIndex: 'handlestatusname',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'xiangmumc',
|
||||
},
|
||||
{
|
||||
title: '项目主体',
|
||||
dataIndex: 'xiangmuzhuti',
|
||||
},
|
||||
{
|
||||
title: '实际用途',
|
||||
dataIndex: 'actualuseto',
|
||||
},
|
||||
{
|
||||
title: '违法类型',
|
||||
dataIndex: 'weifaleixing',
|
||||
},
|
||||
{
|
||||
title: '整改措施',
|
||||
dataIndex: 'measurename',
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'year',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
label: '年份',
|
||||
componentProps: {
|
||||
options: yearOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'tubanlaiyuan',
|
||||
label: '图斑来源',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: patchSourceOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'picihao',
|
||||
label: '批次',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'typename',
|
||||
label: '图斑类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '农用地', value: '农用地' },
|
||||
{ label: '建设用地', value: '建设用地' },
|
||||
{ label: '推堆土', value: '推堆土' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'isBuildName',
|
||||
label: '标注类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: markTypeOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'isIllegal',
|
||||
label: '判定结果',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: mapTypeOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'nowStatus',
|
||||
label: '当前状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: nowStatusOptions,
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'measureName',
|
||||
label: '整改措施',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '拆除复耕', value: '0' },
|
||||
{ label: '补办手续', value: '1' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'countyid',
|
||||
label: '区县',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ tableAction, formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: 371300 },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
onChange: () => {
|
||||
formModel.streetid = '';
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'streetid',
|
||||
label: '乡镇',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: formModel.countyid && getChildrenTree,
|
||||
params: { parentId: formModel.countyid },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'caseNo',
|
||||
label: '图斑编号',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
<template>
|
||||
<div class="screen-div">
|
||||
<div class="screen-row">
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label" style="margin-right:9px;">年份</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 103px"
|
||||
v-model:value="props.year"
|
||||
:options="yearOptions"
|
||||
@change=" (value) => {
|
||||
emits('auditProgressScreenChange', value, 'year');
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-left:20px;margin-right:17px;">
|
||||
<div class="screen-item-label" style="margin-right:11px;">图斑来源</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 142px"
|
||||
v-model:value="props.patchSource"
|
||||
:options="patchSourceOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'patchSource');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label" style="margin-right:9px;">批次</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 117px"
|
||||
v-model:value="props.batch"
|
||||
:options="props.batchOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'batch');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<!-- <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)"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="name-div">
|
||||
<div style="display:flex;align-items: center;">
|
||||
<img src="/positioning.png" class="item-mark"/>
|
||||
<div class="item-label">{{ item.areaname }}</div>
|
||||
</div>
|
||||
<div class="progress-div">
|
||||
<div class="progress-label reviewed-color" style="width:70px;">待审核</div>
|
||||
<div class="progress-data" style="width:37px">
|
||||
<span style="color: #EC7908;">{{item.verifytask}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-data-div">
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">下发</div>
|
||||
<div class="info-data-data">{{item.totaltask}}</div>
|
||||
</div>
|
||||
<!-- <div style="width: 1px;margin-right:27px;margin-left:31px;background-color:#EDEDED;height: 15px;"></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">接收</div>
|
||||
<div class="info-data-data">{{item.receivetask}}</div>
|
||||
</div>
|
||||
<!-- <div style="width: 1px;margin-right:15px;margin-left:30px;background-color:#EDEDED;height: 15px;"></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">举证合法</div>
|
||||
<div class="info-data-data">{{item.legalcase}}</div>
|
||||
</div>
|
||||
<!-- <div style="width: 1px;margin-right:18px;margin-left:17px;background-color:#EDEDED;height: 15px;"></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">举证其他</div>
|
||||
<div class="info-data-data">{{item.ilegalcase}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
<a-empty :image="simpleImage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps, defineEmits, toRefs } from 'vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { Empty } from 'ant-design-vue';
|
||||
import {patchSourceOptions} from '@/utils/global'
|
||||
|
||||
const props = defineProps(['year', 'batch','patchSource', 'batchOptions', 'yearOptions', 'dataList']);
|
||||
const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
// function changeParam(val,type) {
|
||||
// emits('auditProgressScreenChange', val, type);
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.screen-div {
|
||||
width:590px;
|
||||
padding: 22px 12px 14px 13px;
|
||||
.screen-row {
|
||||
display: flex;
|
||||
height: 39px;
|
||||
.screen-item {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
// width: 33.3%;
|
||||
display: flex;
|
||||
.item-input{
|
||||
width:223px;
|
||||
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);
|
||||
}
|
||||
.screen-item-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-list {
|
||||
height: calc(100% - 85px);
|
||||
// background: darkgoldenrod;
|
||||
// background: @component-background;
|
||||
margin-top: 10px;
|
||||
padding: 0px 11px 0px 13px;
|
||||
.data-title {
|
||||
height: 40px;
|
||||
background: #bab9b7;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
color: #366198;
|
||||
}
|
||||
.show-data-list-content {
|
||||
height: 76vh;
|
||||
overflow: auto;
|
||||
.data-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 11px;
|
||||
padding: 0px 15px;
|
||||
margin-bottom: 8px;
|
||||
.name-div {
|
||||
display: flex;
|
||||
height: 57px;
|
||||
align-items: center;
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.info-data-div{
|
||||
height: 61px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding-left: 27px;
|
||||
// justify-content: space-between;
|
||||
// margin-top: 10px;
|
||||
.info-data-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
border-right: 1px solid #EDEDED;
|
||||
.info-data-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #959494;
|
||||
display: flex;
|
||||
line-height: 30px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.info-data-data{
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.info-data-item:nth-last-child(1){
|
||||
border-right: 0px;
|
||||
}
|
||||
}
|
||||
.data-div {
|
||||
font-weight: 500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.item-mark {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
// background: #086dec;
|
||||
// margin-left: 7px;
|
||||
// margin-right: 7px;
|
||||
}
|
||||
.item-label {
|
||||
// width: 122px;
|
||||
padding-left: 12px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 23px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
}
|
||||
.progress-div{
|
||||
display:flex;
|
||||
// font-weight: 500;
|
||||
// font-size: 16px;
|
||||
// line-height: 30px;
|
||||
// margin-right: 17px;
|
||||
.progress-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
color: #FFFFFF;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.progress-data{
|
||||
background: #EFEFEF;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
// color: #086DEC;
|
||||
line-height: 30px;
|
||||
}
|
||||
.progress-color{
|
||||
background: #086DEC;
|
||||
}
|
||||
.extended-color{
|
||||
background: #D03542
|
||||
}
|
||||
.reviewed-color{
|
||||
background: #EC7908
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-item:hover {
|
||||
background-color: rgba(8, 109, 236, 0.08);
|
||||
}
|
||||
// .data-item:nth-child(2n) {
|
||||
// background: #ececec;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,756 @@
|
|||
<template>
|
||||
<div class="map-list-content">
|
||||
<div class="screen-div">
|
||||
<div class="screen-item" style="margin-right:20px;margin-bottom:15px;">
|
||||
<div class="screen-item-label">年份</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.year"
|
||||
:options="props.yearOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:17px;margin-bottom:15px;">
|
||||
<div class="screen-item-label">图斑来源</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.tubanlaiyuan"
|
||||
:options="patchSourceOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom:15px;">
|
||||
<div class="screen-item-label">批次</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:103px;"
|
||||
v-model:value="params.picihao"
|
||||
:options="props.batchOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:13px;">
|
||||
<div class="screen-item-label">举证</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.is_build_name"
|
||||
:options="markTypeOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:10px;">
|
||||
<!-- <div class="screen-item-label">图斑号</div> -->
|
||||
<a-input style="width:270px;" allowClear v-model:value="params.geomid" class="item-input" placeholder="请输入图斑编号"/>
|
||||
</div>
|
||||
<div class="screen-item" style="display: flex; justify-content: end;margin-bottom: 0px;">
|
||||
<a-button type="primary" class="item-button" :icon="h(SearchOutlined)" @click="query">查询</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-div">
|
||||
<div class="layout-div">
|
||||
<img style="cursor: pointer;width:20px;height: 18px" src="@/assets/images/tiankongdi/back.png" class="img-box" @click="emits('changeShowParent')"/>
|
||||
<div class="interval-div"></div>
|
||||
<div class="sift-item" @click="dataListSort('area')">
|
||||
<div class="sift-label">总面积</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">▼</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;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('yongjiujibennongtian_area')">
|
||||
<div class="sift-label">基本农田</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('yongjiujibennongtian_area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('yongjiujibennongtian_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('CreateDate')">
|
||||
<div class="sift-label">下发时间</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('CreateDate',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('CreateDate',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;">
|
||||
<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: 3px;">
|
||||
<div
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
class="data-list-item"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="back-box" v-if="item.is_drawback == 1">驳回</div>
|
||||
<div class="data-list-layout-div">
|
||||
<div class="data-list-title-div">
|
||||
<img src="/positioning.png" class="map-mark" @click="locationFun(item)"/>
|
||||
<div class="label-div">
|
||||
<div class="item-label">{{item.countyname}}</div>
|
||||
<div class="item-sub-label">
|
||||
<span style="margin-right:12px;">{{item.streetname}}</span>
|
||||
<span>{{item.case_no}}</span>
|
||||
<span class="item-mark" v-if="item.is_build_name">{{item.is_build_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button type="primary" class="button-item" @click="goAudit(item)">审核</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list-info-div">
|
||||
<div class="info-layout-div">
|
||||
<div class="info-item">
|
||||
<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.nongyongdi_area)">{{dataProcessing(item.nongyongdi_area)}}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">耕地</div>
|
||||
<div class="info-data" :title="dataProcessing(item.gengdi_area)">{{dataProcessing(item.gengdi_area)}}</div>
|
||||
</div>
|
||||
<div class="info-item" style="width:127px;">
|
||||
<div class="info-label">基本农田</div>
|
||||
<div class="info-data" :title="dataProcessing(item.yongjiujibennongtian_area)">{{dataProcessing(item.yongjiujibennongtian_area)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-layout-div">
|
||||
<!-- <div>
|
||||
<Icon
|
||||
:style="`font-size: 30px; color: #314A8C; cursor: pointer;${item.isouttime === 2? 'color: #D03542;': item.isouttime === 1? 'color: #F7710F;': 'color: #314A8C;'}`"
|
||||
icon="icon-park-solid:timer"
|
||||
@click="()=>{}"
|
||||
/>
|
||||
</div>
|
||||
<div style="background: rgb(237, 237, 237);width: 1px;height: 100%;margin-right: 10px;margin-left: 10px;"></div> -->
|
||||
<div style="cursor: pointer;">
|
||||
<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" v-if="dataList.length > 0">
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model:current="pageNumber"
|
||||
v-model:pageSize="pageSizeNumber"
|
||||
:total="total"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
@change="changePagination"
|
||||
/>
|
||||
</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"
|
||||
@closeModel="closeMolder"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, defineEmits, computed, h, watch } from 'vue';
|
||||
import { StarOutlined,StarFilled } from '@ant-design/icons-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getLoadTaskDetailList, updateSupervise, addTaskFavorite, deleteTaskCase } from '@/api/tiankongdi/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';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useUserStore } from '@/store/modules/user.ts'
|
||||
import { SearchOutlined, RollbackOutlined } from '@ant-design/icons-vue';
|
||||
import { patchSourceOptions } from '@/utils/global'
|
||||
import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
const emits = defineEmits(['changeTask', 'changeShowParent']);
|
||||
|
||||
const flowWfDataStore = flowStore();
|
||||
|
||||
const props = defineProps(['areaId', 'yearOptions', 'year','level','batch','patchSource','batchOptions']);
|
||||
const processId = ref('');
|
||||
const taskId = ref('');
|
||||
const isRead: any = ref(0);
|
||||
const type = ref('');
|
||||
const order = ref(0)
|
||||
const auditOpen = ref(false);
|
||||
const showDataId = ref()
|
||||
const handoffShow = ref(true)
|
||||
const openCollect = computed(() => {
|
||||
if(params.value.type === null) return false
|
||||
return true
|
||||
})
|
||||
const nextShowDataId = ref()
|
||||
const prevShowDataId = ref()
|
||||
watch(() => showDataId.value, () => {
|
||||
let index = dataList.value.findIndex(item => item.Id == showDataId.value)
|
||||
if(index < dataList.value.length - 1){
|
||||
nextShowDataId.value = dataList.value[index + 1].Id
|
||||
}else{
|
||||
nextShowDataId.value = 0
|
||||
}
|
||||
if(index > 0){
|
||||
prevShowDataId.value = dataList.value[index - 1].Id
|
||||
}else{
|
||||
prevShowDataId.value = 0
|
||||
}
|
||||
})
|
||||
const params = ref({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
level: props.level,
|
||||
areaid: props.areaId,
|
||||
geomid: null,
|
||||
year: props.year,
|
||||
picihao: props.batch,
|
||||
tubanlaiyuan: props.patchSource,
|
||||
is_build_name: null,
|
||||
type: null,
|
||||
sort: null,
|
||||
order: null,
|
||||
});
|
||||
const markTypeOptions = ref([
|
||||
{ label: '合法', value: '合法' },
|
||||
{ label: '其他', value: '其他' },
|
||||
]);
|
||||
|
||||
const dataList = ref([]);
|
||||
const total = ref(0);
|
||||
const pageNumber = ref(1)
|
||||
const pageSizeNumber = ref(10)
|
||||
function query() {
|
||||
params.value.page = 1;
|
||||
getTaskList();
|
||||
}
|
||||
async function getTaskList() {
|
||||
console.log(params.value);
|
||||
const data = await getLoadTaskDetailList(params.value);
|
||||
dataList.value = data.items;
|
||||
total.value = data.total;
|
||||
}
|
||||
function changePagination(page, pageSize) {
|
||||
console.log(page, pageSize);
|
||||
params.value.page = page;
|
||||
params.value.limit = pageSize;
|
||||
getTaskList();
|
||||
}
|
||||
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.taskeid;
|
||||
type.value = record.type;
|
||||
}
|
||||
async function locationFun(record) {
|
||||
emits('changeTask', record);
|
||||
}
|
||||
onMounted(() => {
|
||||
getTaskList();
|
||||
});
|
||||
const changeSupervise = (item) => {
|
||||
if(item.cancelsupervise === 0 && item.issupervise === 1){
|
||||
message.error('取消改督办权限不足')
|
||||
return
|
||||
}
|
||||
let params = {
|
||||
id: item.processid,
|
||||
supervise: 1,
|
||||
}
|
||||
if(item.issupervise === 1){
|
||||
params.supervise = 0
|
||||
}
|
||||
updateSupervise(params).then(res => {
|
||||
if(params.supervise === 1){
|
||||
message.success('成功发起督办')
|
||||
}else{
|
||||
message.success('取消督办成功')
|
||||
}
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const prevData = async () => {
|
||||
if(prevShowDataId.value === 0){
|
||||
if(params.value.page === 1 || total.value == 0){
|
||||
message.warning('已经是第一条数据了')
|
||||
return
|
||||
}
|
||||
pageNumber.value = pageNumber.value - 1
|
||||
params.value.page = params.value.page -1
|
||||
await getTaskList();
|
||||
// showDataIndex.value = dataList.value.length -1
|
||||
handoffShow.value = false
|
||||
let record = dataList.value[dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = dataList.value[dataList.value.length - 1].Id
|
||||
return
|
||||
}else{
|
||||
showDataId.value = prevShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
}
|
||||
const nextData = async () => {
|
||||
if(nextShowDataId.value === 0){
|
||||
if(Math.ceil(total.value / pageSizeNumber.value) <= pageNumber.value || total.value == 0){
|
||||
message.warning('已经是最后一条数据了')
|
||||
return
|
||||
}
|
||||
pageNumber.value = pageNumber.value + 1
|
||||
params.value.page = params.value.page + 1
|
||||
await getTaskList();
|
||||
// showDataIndex.value = 0
|
||||
handoffShow.value = false
|
||||
let record = dataList.value[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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = dataList.value[0].Id
|
||||
return
|
||||
}else{
|
||||
showDataId.value = nextShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
}
|
||||
const cancelCollectItem = (item) => {
|
||||
deleteTaskCase(item.Fid).then(res => {
|
||||
message.success('取消收藏成功')
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const collectItem = (item) => {
|
||||
if(item.Fid){
|
||||
cancelCollectItem(item)
|
||||
return
|
||||
}
|
||||
let userInfo = userStore.getUserInfo
|
||||
let params = {
|
||||
taskId: item.taskeid,
|
||||
favoriteUserId: userInfo.id
|
||||
}
|
||||
addTaskFavorite(params).then(res => {
|
||||
message.success('收藏成功')
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const getCollectList = () => {
|
||||
if(params.value.type === null){
|
||||
params.value.type = 1
|
||||
}else if(params.value.type === 1){
|
||||
params.value.type = null
|
||||
}
|
||||
params.value.page = 1
|
||||
pageNumber.value = 1
|
||||
getTaskList();
|
||||
}
|
||||
const showSortMark = (key, sort) => {
|
||||
if(params.value.sort === key && sort === order.value){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
const dataListSort = (type) => {
|
||||
if(params.value.sort === null || params.value.sort === type){
|
||||
order.value = (order.value + 1) % 3
|
||||
}else{
|
||||
order.value = 1
|
||||
}
|
||||
// emits('infoDataListSort', type, order.value)
|
||||
switch(order.value){
|
||||
case 0:
|
||||
params.value.sort = null
|
||||
params.value.order = null
|
||||
break
|
||||
case 1:
|
||||
params.value.sort = type
|
||||
params.value.order = 'asc'
|
||||
break
|
||||
case 2:
|
||||
params.value.sort = type
|
||||
params.value.order = 'desc'
|
||||
break
|
||||
}
|
||||
getTaskList();
|
||||
}
|
||||
const closeMolder = () => {
|
||||
getTaskList();
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
height: 85%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.handoff{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 25px;
|
||||
}
|
||||
.map-list-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.screen-div {
|
||||
padding: 22px 12px 19px 13px;
|
||||
display: flex;
|
||||
width: 590px;
|
||||
// margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
// background: @component-background;
|
||||
.screen-item {
|
||||
// width: 33.3%;
|
||||
display: flex;
|
||||
// margin-bottom: 15px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
height: 39px;
|
||||
.screen-item-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 9px;
|
||||
}
|
||||
: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{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
width:223px;
|
||||
box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
|
||||
}
|
||||
.item-button{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
height:38px;
|
||||
width: 97px;
|
||||
background:#086DEC;
|
||||
}
|
||||
}
|
||||
.screen-button-div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
align-items: center;
|
||||
.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;
|
||||
// margin-top: 10px;
|
||||
height: 60vh;
|
||||
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:4px;
|
||||
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;
|
||||
cursor:pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.item-mark{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #696969;
|
||||
margin-left: 17px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.button-div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.button-item{
|
||||
height: 27px;
|
||||
width: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-56deg, #0060FF, #007EFF, #0061FF);
|
||||
}
|
||||
}
|
||||
}
|
||||
.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: 9px;
|
||||
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;
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.rollback {
|
||||
background: @component-background;
|
||||
padding: 10px;
|
||||
}
|
||||
.img-box{
|
||||
width: 25px;
|
||||
cursor: pointer;
|
||||
height: 23px;
|
||||
}
|
||||
.mr-r-20{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.img-box.small{
|
||||
width: 18px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<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';
|
||||
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 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) => {
|
||||
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(() => {
|
||||
getCountList();
|
||||
// TODO 获取批次
|
||||
batchOptions.value = [];
|
||||
});
|
||||
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;
|
||||
}
|
||||
.map-box-div {
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,568 @@
|
|||
<template>
|
||||
<div class="detail-container">
|
||||
<div class="map-container">
|
||||
<MapboxMap
|
||||
:geomsList="geomsList"
|
||||
:mapConfig="mapConfig"
|
||||
@handlerDrawComplete="handlerDrawComplete"
|
||||
@mapOnLoad="onMapboxLoad"
|
||||
ref="MapboxComponent"
|
||||
/>
|
||||
</div>
|
||||
<div class="info-container" id="info-container">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="线索下发">
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
bordered
|
||||
:contentStyle="{
|
||||
'text-align': 'center',
|
||||
'min-width': '250px',
|
||||
'word-break': 'break-all',
|
||||
}"
|
||||
>
|
||||
<a-descriptions-item label="图斑编号">{{ case_no }}</a-descriptions-item>
|
||||
<a-descriptions-item label="图斑类型">{{ typename }}</a-descriptions-item>
|
||||
<a-descriptions-item label="县区">{{ countyname }}</a-descriptions-item>
|
||||
<a-descriptions-item label="乡镇">{{ streetname }}</a-descriptions-item>
|
||||
<a-descriptions-item label="社区/村">{{ communityname }}</a-descriptions-item>
|
||||
<a-descriptions-item label="图斑面积(亩)">{{
|
||||
dataProcessing(area)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="农用地面积(亩)">{{
|
||||
dataProcessing(nongyongdi_area)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="耕地面积(亩)">{{
|
||||
dataProcessing(gengdi_area)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="基本农田面积(亩)">{{
|
||||
dataProcessing(yongjiujibennongtian_area)
|
||||
}}</a-descriptions-item>
|
||||
<!-- <a-descriptions-item label="占重点区域面积(亩)">{{ dataProcessing(zhongdianquyu_area) }}</a-descriptions-item> -->
|
||||
<a-descriptions-item label="占生态红线面积(亩)">{{
|
||||
dataProcessing(shengtaibaohuhongxian_area)
|
||||
}}</a-descriptions-item>
|
||||
<!-- <a-descriptions-item label="占空间规划面积(亩)">{{ dataProcessing(guotukongjianguihua_area) }}</a-descriptions-item> -->
|
||||
<a-descriptions-item label="图斑描述">{{ case_description }}</a-descriptions-item>
|
||||
<!-- <a-descriptions-item label="图斑地址">{{ address }}</a-descriptions-item> -->
|
||||
<a-descriptions-item label="备注">{{ remark }}</a-descriptions-item>
|
||||
<a-descriptions-item label="经度">{{ lng }}</a-descriptions-item>
|
||||
<a-descriptions-item label="纬度">{{ lat }}</a-descriptions-item>
|
||||
<a-descriptions-item label="下发时间">{{ createtime }}</a-descriptions-item>
|
||||
<a-descriptions-item label="图斑照片">
|
||||
<div class="image-div">
|
||||
<template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
|
||||
<a-image
|
||||
v-if="imageItem"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item>
|
||||
<a-descriptions-item label="接收时间">{{ jieshou_time?.split('.')[0] }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
key="2"
|
||||
v-if="!['建设用地', '推堆土'].includes(typename)"
|
||||
tab="线索填报"
|
||||
force-render
|
||||
>
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
bordered
|
||||
:contentStyle="{
|
||||
'text-align': 'center',
|
||||
'min-width': '250px',
|
||||
'word-break': 'break-all',
|
||||
}"
|
||||
>
|
||||
<a-descriptions-item label="判定结果">{{
|
||||
getLabel('is_illegal', is_illegal)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 1" label="项目名称">{{
|
||||
xiangmumc
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 1" label="项目主体">{{
|
||||
xiangmuzhuti
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 1" label="实际用途">{{
|
||||
actual_use_to
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 1" label="违法类型">{{
|
||||
getLabel('weifaleixing', weifaleixing)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 1" label="附件">
|
||||
<template v-for="(item, itemIndex) in fujianList" :key="itemIndex">
|
||||
<div v-if="item" style="margin-top: 10px">
|
||||
<Icon
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 0" label="附件">
|
||||
<template v-for="(item, itemIndex) in hefafujianList" :key="itemIndex">
|
||||
<div v-if="item" style="margin-top: 10px">
|
||||
<Icon
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 2" label="实际用途">{{
|
||||
getLabel('qita_use_to', qita_use_to)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="is_illegal == 2" label="附件">
|
||||
<template v-for="(item, itemIndex) in qitafujianList" :key="itemIndex">
|
||||
<div v-if="item" style="margin-top: 10px">
|
||||
<Icon
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="判定依据说明">{{
|
||||
pandingyijushuoming
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="照片">
|
||||
<div class="image-div">
|
||||
<template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
|
||||
<a-image
|
||||
v-if="imageItem"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="填报时间">{{ examine_time }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
key="3"
|
||||
tab="整改情况"
|
||||
v-if="weifaleixing == 0 && !['建设用地', '推堆土'].includes(typename)"
|
||||
>
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
bordered
|
||||
:contentStyle="{
|
||||
'text-align': 'center',
|
||||
'min-width': '250px',
|
||||
'word-break': 'break-all',
|
||||
}"
|
||||
>
|
||||
<a-descriptions-item label="整改措施">{{
|
||||
getLabel('measure_name', measure_name)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="measure_name == 0" label="附件">
|
||||
<template v-for="(item, itemIndex) in yanshoubiaoList" :key="itemIndex">
|
||||
<div v-if="item">
|
||||
<Icon
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="measure_name == 0" label="照片">
|
||||
<div class="image-div">
|
||||
<template
|
||||
v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
|
||||
:key="imageIndex"
|
||||
>
|
||||
<a-image
|
||||
v-if="imageItem"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="measure_name == 1" label="附件">
|
||||
<template v-for="(item, itemIndex) in zhenggaifujianList" :key="itemIndex">
|
||||
<div v-if="item">
|
||||
<Icon
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
</div>
|
||||
</template>
|
||||
<!-- {{ zhenggaifujian }} -->
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="measure_name == 1" label="照片">
|
||||
<div class="image-div">
|
||||
<template v-for="(imageItem, imageIndex) in bubanzhaopianList" :key="imageIndex">
|
||||
<a-image
|
||||
v-if="imageItem"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="办理时间">{{ transact_time }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4" v-if="!['建设用地', '推堆土'].includes(typename)" tab="审核">
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
bordered
|
||||
:contentStyle="{
|
||||
'text-align': 'center',
|
||||
'min-width': '250px',
|
||||
'word-break': 'break-all',
|
||||
}"
|
||||
>
|
||||
<a-descriptions-item label="审核人">{{ verifyuser }}</a-descriptions-item>
|
||||
<a-descriptions-item label="审核时间">{{ verifytime }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, ref, computed } from 'vue';
|
||||
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
|
||||
import { getConfig } from '@/api/sys/layerManagement';
|
||||
import { getGeom } from '@/api/sys/layerManagement';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createMessage } = useMessage();
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
|
||||
import {
|
||||
mapTypeOptions,
|
||||
illegalTypeOptions,
|
||||
measureOptions,
|
||||
mapStatusOptions,
|
||||
markTypeOptions,
|
||||
illegalTypeList,
|
||||
resultOptions,
|
||||
qitaUseTOOptions,
|
||||
} from '@/utils/global';
|
||||
|
||||
console.log('');
|
||||
|
||||
const MapboxComponent = ref();
|
||||
const mapConfig = ref({});
|
||||
getConfig({ code: 'mapsetting' }).then((res) => {
|
||||
mapConfig.value = JSON.parse(res.codeValue);
|
||||
});
|
||||
|
||||
const props = defineProps(['showInfoData']);
|
||||
const activeKey = ref('1');
|
||||
|
||||
console.log('showInfoData123', props.showInfoData);
|
||||
const geomsList = ref();
|
||||
const {
|
||||
id,
|
||||
case_no,
|
||||
case_name,
|
||||
case_description,
|
||||
start_time,
|
||||
end_time,
|
||||
address,
|
||||
lng,
|
||||
lat,
|
||||
typeid,
|
||||
typename,
|
||||
handle_status_id,
|
||||
handle_status_name,
|
||||
case_status_i,
|
||||
case_status_name,
|
||||
createtime,
|
||||
createuser,
|
||||
drone_no,
|
||||
deal_userid,
|
||||
deal_username,
|
||||
createusername,
|
||||
is_delete,
|
||||
countyid,
|
||||
countyname,
|
||||
streetid,
|
||||
streetname,
|
||||
communityid,
|
||||
communityname,
|
||||
remark,
|
||||
is_closed,
|
||||
area,
|
||||
is_illegal,
|
||||
close_user,
|
||||
close_time,
|
||||
identification_user,
|
||||
identification_time,
|
||||
is_intact,
|
||||
close_userid,
|
||||
identification_userid,
|
||||
verifyuserid,
|
||||
verifyuser,
|
||||
verifytime,
|
||||
is_improve,
|
||||
improve_reason,
|
||||
is_dispense,
|
||||
dispense_userid,
|
||||
dispense_time,
|
||||
dispense_username,
|
||||
verifystatus,
|
||||
verifystatusname,
|
||||
is_checked,
|
||||
deal_time,
|
||||
is_drawback,
|
||||
examiner_id,
|
||||
examiner_name,
|
||||
examine_time,
|
||||
measure_name,
|
||||
casepic,
|
||||
opinion,
|
||||
result,
|
||||
result_name,
|
||||
opinion_name,
|
||||
handletime,
|
||||
handleuser,
|
||||
handleusername,
|
||||
is_assist,
|
||||
measure_name_deal,
|
||||
qita_use_to,
|
||||
illegal_contact,
|
||||
illegal_shenfenzhenghao,
|
||||
investigation_type,
|
||||
investigation_result,
|
||||
registr_number,
|
||||
is_build_complete,
|
||||
actual_use_to,
|
||||
transactor_id,
|
||||
transactor_name,
|
||||
transact_time,
|
||||
geomid,
|
||||
nongyongdi_area,
|
||||
gengdi_area,
|
||||
yongjiujibennongtian_area,
|
||||
zhongdianquyu_area,
|
||||
shengtaibaohuhongxian_area,
|
||||
guotukongjianguihua_area,
|
||||
fujian,
|
||||
hefafujian,
|
||||
qitafujian,
|
||||
jieshou_people,
|
||||
jieshou_time,
|
||||
pandingyijushuoming,
|
||||
xiangmumc,
|
||||
xiangmuzhuti,
|
||||
weifaleixing,
|
||||
yanshoubiao,
|
||||
zhenggaifujian,
|
||||
chaichufugenghoupic,
|
||||
bubanzhaopian,
|
||||
is_jieshou,
|
||||
anjianzhaopian,
|
||||
} = props.showInfoData;
|
||||
const anjianzhaopianList = computed(() => {
|
||||
return anjianzhaopian ? anjianzhaopian.split(',') : [];
|
||||
});
|
||||
const casepicList = computed(() => {
|
||||
return casepic ? casepic.split(',') : [];
|
||||
});
|
||||
const chaichufugenghoupicList = computed(() => {
|
||||
return chaichufugenghoupic ? chaichufugenghoupic.split(',') : [];
|
||||
});
|
||||
const bubanzhaopianList = computed(() => {
|
||||
return bubanzhaopian ? bubanzhaopian.split(',') : [];
|
||||
});
|
||||
const fujianList = computed(() => {
|
||||
return fujian ? fujian.split(',') : [];
|
||||
});
|
||||
const hefafujianList = computed(() => {
|
||||
return hefafujian ? hefafujian.split(',') : [];
|
||||
});
|
||||
const qitafujianList = computed(() => {
|
||||
return qitafujian ? qitafujian.split(',') : [];
|
||||
});
|
||||
const zhenggaifujianList = computed(() => {
|
||||
return zhenggaifujian ? zhenggaifujian.split(',') : [];
|
||||
});
|
||||
const yanshoubiaoList = computed(() => {
|
||||
return yanshoubiao ? yanshoubiao.split(',') : [];
|
||||
});
|
||||
|
||||
function onMapboxLoad() {
|
||||
changeTask();
|
||||
}
|
||||
const getLabel = (type, value) => {
|
||||
let result: any[] = [];
|
||||
let label = '';
|
||||
switch (type) {
|
||||
case 'is_illegal':
|
||||
result = mapTypeOptions;
|
||||
break;
|
||||
case 'weifaleixing':
|
||||
result = illegalTypeList;
|
||||
break;
|
||||
case 'measure_name':
|
||||
result = measureOptions;
|
||||
break;
|
||||
case 'result_name':
|
||||
result = resultOptions;
|
||||
break;
|
||||
case 'qita_use_to':
|
||||
result = qitaUseTOOptions;
|
||||
break;
|
||||
}
|
||||
result.forEach((item) => {
|
||||
if (item.value == value) {
|
||||
label = item.label;
|
||||
}
|
||||
});
|
||||
return label;
|
||||
};
|
||||
function changeTask() {
|
||||
let getGeomPrams = {
|
||||
TableName: 'drone_shp_data ',
|
||||
FieldName: 'gid',
|
||||
FieldValue: props.showInfoData.geomid?.split(','),
|
||||
page: 1,
|
||||
limit: 999,
|
||||
key: null,
|
||||
};
|
||||
if (props.showInfoData.geomid) {
|
||||
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);
|
||||
geomsList.value = geoms;
|
||||
});
|
||||
}
|
||||
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
|
||||
MapboxComponent.value.handlerDraw('Details', geoms, false);
|
||||
} else {
|
||||
geomsList.value = null;
|
||||
createMessage.error('当前数据没有图斑！');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
createMessage.error('当前数据没有图斑！');
|
||||
}
|
||||
}
|
||||
const downLoadFile = (url) => {
|
||||
window.open(`${VITE_GLOB_INFO_IMAGE_URL}/${url}`, 'mozillaTab');
|
||||
};
|
||||
const getContainer = () => {
|
||||
return document.getElementById('info-container');
|
||||
};
|
||||
const dataProcessing = (value) => {
|
||||
if (!value) {
|
||||
return '0';
|
||||
}
|
||||
if (value.indexOf('.') == -1) {
|
||||
return value;
|
||||
} else {
|
||||
if (value.split('.')[1].length <= 2) {
|
||||
return value;
|
||||
}
|
||||
let resultString = value.replace('㎡', '');
|
||||
return Number(resultString).toFixed(2);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image-div {
|
||||
width: 300px;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
.detail-container {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 120px);
|
||||
display: flex;
|
||||
}
|
||||
.detail-container::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 0;
|
||||
visibility: none;
|
||||
}
|
||||
.map-container {
|
||||
float: left;
|
||||
width: 50vw;
|
||||
height: calc(100vh - 100px);
|
||||
margin-right: 20px;
|
||||
}
|
||||
.info-container {
|
||||
// float: left;
|
||||
position: relative;
|
||||
:deep(.ant-image-preview-wrap) {
|
||||
position: absolute;
|
||||
}
|
||||
:deep(.ant-image-preview-mask) {
|
||||
position: absolute;
|
||||
}
|
||||
:deep(.ant-image-preview-operations-wrapper) {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
.ant-image-preview-operations {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
.ant-image-preview-operations-operation{
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
.ant-image-preview-operations-operation:nth-last-child(1){
|
||||
display: none;
|
||||
}
|
||||
.ant-image-preview-operations-operation:nth-last-child(2){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .ant-tabs .ant-tabs-content-holder {
|
||||
overflow: auto;
|
||||
height: 80vh;
|
||||
overflow: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,941 @@
|
|||
<template>
|
||||
<div class="map-list-content">
|
||||
<!-- <div class="top-radio-button-div">
|
||||
<a-radio-group
|
||||
v-model:value="props.infoScreenData.landType"
|
||||
@change="(e) => emits('mapListScreenChange',e.target.value,'landType')"
|
||||
button-style="solid"
|
||||
style="width:100%">
|
||||
<a-radio-button :value="0" class="radio-item">农用地</a-radio-button>
|
||||
<a-radio-button :value="1" class="radio-item">建设用地</a-radio-button>
|
||||
<a-radio-button :value="2" class="radio-item">推堆土</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div> -->
|
||||
<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="patchSourceOptions"
|
||||
@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-right:15px;margin-bottom:12px;">
|
||||
<div class="screen-item-label">标注</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="props.infoScreenData.markType"
|
||||
:options="markTypeOptions"
|
||||
@change="(value) => emits('mapListScreenChange',value,'markType')"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="screen-item" style="margin-right: 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-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-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;"
|
||||
/>
|
||||
</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">
|
||||
<!-- <RollbackOutlined class="back-button" @click="emits('closeShowInfo', false)"/> -->
|
||||
<!-- <div class="interval-div"></div> -->
|
||||
<div class="sift-item" @click="dataListSort('area')">
|
||||
<div class="sift-label">总面积</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">▼</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;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('createtime')">
|
||||
<div class="sift-label">下发时间</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('createtime',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('createtime',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collect-div">
|
||||
<a-popover placement="bottom">
|
||||
<template #content>
|
||||
<div style="display:flex;">
|
||||
<div>当前状态：</div>
|
||||
<div>
|
||||
<a-checkbox-group
|
||||
v-model:value="props.infoScreenData.mapStatus"
|
||||
@change="(value) => emits('mapListScreenChange',value,'mapStatus')"
|
||||
style="width: 100%"
|
||||
:options="mapStatusOptions"></a-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="display:flex;">
|
||||
<div>是否超期：</div>
|
||||
<div>
|
||||
<a-checkbox-group
|
||||
v-model:value="props.infoScreenData.isOverdue"
|
||||
@change="(value) => emits('mapListScreenChange',value,'isOverdue')"
|
||||
style="width: 100%"
|
||||
:options="isOverdueOptions"></a-checkbox-group>
|
||||
</div>
|
||||
</div> -->
|
||||
<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="item.isdrawback == 1">驳回</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">
|
||||
<span style="margin-right:12px;">{{item.streetname}}</span>
|
||||
<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-size-changer
|
||||
show-quick-jumper
|
||||
@change="changePage" />
|
||||
</div>
|
||||
<a-modal
|
||||
style="width:100vw;top:0px;left:0px;margin:0px;padding:0px;"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="showInfoOpen"
|
||||
title="详情"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
:destroyOnClose="true"
|
||||
@cancel="showInfoOpen = false"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<ShowInfoModal :showInfoData="showInfoData"/>
|
||||
</div>
|
||||
</a-modal>
|
||||
<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"
|
||||
@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 ShowInfoModal from './ShowInfoModal/index.vue'
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo';
|
||||
import { Audit } from '@/views/demo/workflow/task/process/page';
|
||||
import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
|
||||
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 showInfoOpen = ref(false)
|
||||
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 handoffShow = ref(true)
|
||||
const isRead: any = ref(0);
|
||||
const openCollect = computed(() => {
|
||||
if(props.infoScreenData.type === '') return false
|
||||
return true
|
||||
})
|
||||
const showInfoData = ref()
|
||||
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)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const showInfo = (item) => {
|
||||
getCaseInfoById({id:item.id}).then(res => {
|
||||
showInfoData.value = res
|
||||
showInfoOpen.value = true
|
||||
})
|
||||
}
|
||||
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;
|
||||
}
|
||||
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
|
||||
})
|
||||
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
|
||||
}
|
||||
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
|
||||
})
|
||||
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
|
||||
}
|
||||
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: 22px 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;
|
||||
}
|
||||
.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>
|
||||
|
|
@ -0,0 +1,470 @@
|
|||
<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>
|
||||
<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 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>
|
||||
|
|
@ -0,0 +1,364 @@
|
|||
<template>
|
||||
<div class="screen-div">
|
||||
<div class="screen-row">
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label" style="margin-right: 9px">年份</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 103px"
|
||||
v-model:value="props.year"
|
||||
:options="yearOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'year');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-left: 20px; margin-right: 17px">
|
||||
<div class="screen-item-label" style="margin-right: 11px">图斑来源</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 142px"
|
||||
v-model:value="props.patchSource"
|
||||
:options="patchSourceOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'patchSource');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label" style="margin-right: 9px">批次</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 117px"
|
||||
v-model:value="props.batch"
|
||||
:options="props.batchOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'batch');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<!-- <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)"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="name-div">
|
||||
<!-- <div class="item-mark"></div> -->
|
||||
<div class="icon-name">
|
||||
<img src="/positioning.png" class="item-mark" />
|
||||
<div class="item-label">{{ item.areaname }}</div>
|
||||
</div>
|
||||
<!-- <div class="progress-div">
|
||||
<div class="progress-label progress-color">进度</div>
|
||||
<div class="progress-data" style="width:97px">
|
||||
<span style="color: #086DEC;">{{item.verificatedtask}}</span>/{{item.totaltask}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-div">
|
||||
<div class="progress-label extended-color">超期</div>
|
||||
<div class="progress-data" style="width:40px">
|
||||
<span style="color: #D03542">{{item.overduetask}}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="progress-div">
|
||||
<div class="progress-label reviewed-color" style="width: 70px">待审核</div>
|
||||
<div class="progress-data" style="width: 40px">
|
||||
<span style="color: #ec7908">{{ item.verifytask }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-data-div">
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">下发</div>
|
||||
<div class="info-data-data">{{ item.totaltask }}</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 1px;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
background-color: #ededed;
|
||||
height: 15px;
|
||||
"
|
||||
></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">接收</div>
|
||||
<div class="info-data-data">{{ item.receivetask }}</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 1px;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
background-color: #ededed;
|
||||
height: 15px;
|
||||
"
|
||||
></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">非粮化</div>
|
||||
<div class="info-data-data">{{ item.nonfoodcase }}</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 1px;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
background-color: #ededed;
|
||||
height: 15px;
|
||||
"
|
||||
></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">拆除复耕</div>
|
||||
<div class="info-data-data">{{ item.rehabilitationcase }}</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 1px;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
background-color: #ededed;
|
||||
height: 15px;
|
||||
"
|
||||
></div> -->
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">补办手续</div>
|
||||
<div class="info-data-data">{{ item.makeupcase }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="data-div">
|
||||
<spam style="color: #086dec">{{ item.count }}</spam>
|
||||
</div> -->
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
<a-empty :image="simpleImage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps, defineEmits, toRefs } from 'vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { Empty } from 'ant-design-vue';
|
||||
import { patchSourceOptions } from '@/utils/global';
|
||||
|
||||
const props = defineProps([
|
||||
'year',
|
||||
'batch',
|
||||
'patchSource',
|
||||
'batchOptions',
|
||||
'yearOptions',
|
||||
'dataList',
|
||||
]);
|
||||
const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
// function changeParam(val,type) {
|
||||
// emits('auditProgressScreenChange', val, type);
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.screen-div {
|
||||
padding: 22px 12px 14px 13px;
|
||||
.screen-row {
|
||||
display: flex;
|
||||
height: 39px;
|
||||
.screen-item {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
// width: 33.3%;
|
||||
display: flex;
|
||||
.item-input {
|
||||
width: 223px;
|
||||
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);
|
||||
}
|
||||
.screen-item-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-list {
|
||||
height: calc(100% - 85px);
|
||||
// background: darkgoldenrod;
|
||||
// background: @component-background;
|
||||
margin-top: 10px;
|
||||
padding: 0px 11px 0px 13px;
|
||||
.data-title {
|
||||
height: 40px;
|
||||
background: #bab9b7;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
color: #366198;
|
||||
}
|
||||
.show-data-list-content {
|
||||
height: 76vh;
|
||||
overflow: auto;
|
||||
.data-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 11px;
|
||||
padding: 0px 12px;
|
||||
margin-bottom: 8px;
|
||||
.name-div {
|
||||
display: flex;
|
||||
height: 57px;
|
||||
align-items: center;
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
justify-content: space-between;
|
||||
.icon-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.info-data-div {
|
||||
height: 61px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding-left: 2px;
|
||||
// justify-content: space-between;
|
||||
// margin-top: 10px;
|
||||
.info-data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
border-right: 1px solid #ededed;
|
||||
.info-data-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #959494;
|
||||
display: flex;
|
||||
line-height: 30px;
|
||||
margin-right: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.info-data-data {
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.info-data-item:nth-last-child(1) {
|
||||
border-right: 0px;
|
||||
}
|
||||
}
|
||||
.data-div {
|
||||
font-weight: 500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.item-mark {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
// background: #086dec;
|
||||
// margin-left: 7px;
|
||||
// margin-right: 7px;
|
||||
}
|
||||
.item-label {
|
||||
// width: 122px;
|
||||
padding-left: 9px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 23px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
}
|
||||
.progress-div {
|
||||
display: flex;
|
||||
// font-weight: 500;
|
||||
// font-size: 16px;
|
||||
// line-height: 30px;
|
||||
// margin-right: 17px;
|
||||
.progress-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
color: #ffffff;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.progress-data {
|
||||
background: #efefef;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
// color: #086DEC;
|
||||
line-height: 30px;
|
||||
}
|
||||
.progress-color {
|
||||
background: #086dec;
|
||||
}
|
||||
.extended-color {
|
||||
background: #d03542;
|
||||
}
|
||||
.reviewed-color {
|
||||
background: #ec7908;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-item:hover {
|
||||
background-color: rgba(8, 109, 236, 0.08);
|
||||
}
|
||||
// .data-item:nth-child(2n) {
|
||||
// background: #ececec;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,782 @@
|
|||
<template>
|
||||
<div class="map-list-content">
|
||||
<div class="screen-div">
|
||||
<div class="screen-item" style="margin-right:20px;margin-bottom:15px;">
|
||||
<div class="screen-item-label">年份</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.year"
|
||||
:options="props.yearOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:17px;margin-bottom:15px;">
|
||||
<div class="screen-item-label">图斑来源</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.tubanlaiyuan"
|
||||
:options="patchSourceOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom:15px;">
|
||||
<div class="screen-item-label">批次</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:103px;"
|
||||
v-model:value="params.picihao"
|
||||
:options="props.batchOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:13px;">
|
||||
<div class="screen-item-label">举证</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="params.is_build_name"
|
||||
:options="markTypeOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:10px;">
|
||||
<!-- <div class="screen-item-label">图斑号</div> -->
|
||||
<a-input style="width:270px;" allowClear v-model:value="params.geomid" class="item-input" placeholder="请输入图斑编号"/>
|
||||
</div>
|
||||
<div class="screen-item" style="display: flex; justify-content: end;margin-bottom: 0px;">
|
||||
<a-button type="primary" class="item-button" :icon="h(SearchOutlined)" @click="query">查询</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-div">
|
||||
<div class="layout-div">
|
||||
<img style="cursor: pointer;width:20px;height: 18px" src="@/assets/images/tiankongdi/back.png" class="img-box" @click="emits('changeShowParent')"/>
|
||||
<div class="interval-div"></div>
|
||||
<div class="sift-item" @click="dataListSort('area')">
|
||||
<div class="sift-label">总面积</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">▼</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;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('yongjiujibennongtian_area')">
|
||||
<div class="sift-label">基本农田</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('yongjiujibennongtian_area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('yongjiujibennongtian_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('CreateDate')">
|
||||
<div class="sift-label">下发时间</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('CreateDate',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('CreateDate',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collect-div">
|
||||
<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: 3px;">
|
||||
<div
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
class="data-list-item"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="back-box" v-if="item.is_drawback == 1">驳回</div>
|
||||
<div class="data-list-layout-div">
|
||||
<div class="data-list-title-div">
|
||||
<img src="/positioning.png" class="map-mark" @click="locationFun(item)"/>
|
||||
<div class="label-div">
|
||||
<div class="item-label">{{item.countyname}}</div>
|
||||
<div class="item-sub-label">
|
||||
<span style="margin-right:12px;">{{item.streetname}}</span>
|
||||
<span>{{item.case_no}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-mark" v-if="item.is_build_name">{{item.is_build_name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="button-div">
|
||||
<a-button type="primary" class="button-item" @click="goAudit(item)">审核</a-button>
|
||||
</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.nongyongdi_area)">{{dataProcessing(item.nongyongdi_area)}}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">耕地</div>
|
||||
<div class="info-data" :title="dataProcessing(item.gengdi_area)">{{dataProcessing(item.gengdi_area)}}</div>
|
||||
</div>
|
||||
<div class="info-item" style="width:120px;">
|
||||
<div class="info-label">基本农田</div>
|
||||
<div class="info-data" :title="dataProcessing(item.yongjiujibennongtian_area)">{{dataProcessing(item.yongjiujibennongtian_area)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-layout-div">
|
||||
<!-- <div>
|
||||
<Icon
|
||||
:style="`font-size: 30px; color: #314A8C; cursor: pointer;${item.isouttime === 2 ? 'color: #D03542;' : item.isouttime === 1? 'color: #F7710F;' : 'color: #314A8C;'}`"
|
||||
icon="icon-park-solid:timer"
|
||||
@click="()=>{}"
|
||||
/>
|
||||
</div> -->
|
||||
<div style="background: rgb(237, 237, 237);width: 1px;height: 100%;margin-right: 10px;margin-left: 10px;"></div>
|
||||
<div style="cursor: pointer;">
|
||||
<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" v-if="dataList.length > 0">
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model:current="pageNumber"
|
||||
v-model:pageSize="pageSizeNumber"
|
||||
:total="total"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
@change="changePagination"
|
||||
/>
|
||||
</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"
|
||||
@closeModel="closeMolder"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, defineEmits, computed, h, watch } from 'vue';
|
||||
import { StarOutlined,StarFilled } from '@ant-design/icons-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getLoadTaskIllegalDetailList, updateSupervise, addTaskFavorite, deleteTaskCase } from '@/api/tiankongdi/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';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useUserStore } from '@/store/modules/user.ts'
|
||||
import { SearchOutlined, RollbackOutlined } from '@ant-design/icons-vue';
|
||||
import { patchSourceOptions } from '@/utils/global'
|
||||
import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
const emits = defineEmits(['changeTask', 'changeShowParent']);
|
||||
|
||||
const flowWfDataStore = flowStore();
|
||||
|
||||
const props = defineProps(['areaId', 'yearOptions', 'year','level','batch','patchSource','batchOptions']);
|
||||
const processId = ref('');
|
||||
const taskId = ref('');
|
||||
const isRead: any = ref(0);
|
||||
const type = ref('');
|
||||
const order = ref(0)
|
||||
const auditOpen = ref(false);
|
||||
const showDataId = ref()
|
||||
const nextShowDataId = ref()
|
||||
const prevShowDataId = ref()
|
||||
watch(() => showDataId.value, () => {
|
||||
let index = dataList.value.findIndex(item => item.Id == showDataId.value)
|
||||
if(index < dataList.value.length - 1){
|
||||
nextShowDataId.value = dataList.value[index + 1].Id
|
||||
}else{
|
||||
nextShowDataId.value = 0
|
||||
}
|
||||
if(index > 0){
|
||||
prevShowDataId.value = dataList.value[index - 1].Id
|
||||
}else{
|
||||
prevShowDataId.value = 0
|
||||
}
|
||||
})
|
||||
const handoffShow = ref(true)
|
||||
const openCollect = computed(() => {
|
||||
if(params.value.type === null) return false
|
||||
return true
|
||||
})
|
||||
const params = ref({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
level: props.level,
|
||||
areaid: props.areaId,
|
||||
geomid: null,
|
||||
year: props.year,
|
||||
picihao: props.batch,
|
||||
tubanlaiyuan: props.patchSource,
|
||||
is_build_name: null,
|
||||
type: null,
|
||||
sort: null,
|
||||
order: null,
|
||||
});
|
||||
const markTypeOptions = ref([
|
||||
{ label: '非粮化', value: '非粮化' },
|
||||
{ label: '拆除复耕', value: '拆除复耕' },
|
||||
{ label: '补办手续', value: '补办手续' },
|
||||
]);
|
||||
|
||||
const dataList = ref([]);
|
||||
const total = ref(0);
|
||||
const pageNumber = ref(1)
|
||||
const pageSizeNumber = ref(10)
|
||||
function query() {
|
||||
params.value.page = 1;
|
||||
getTaskList();
|
||||
}
|
||||
async function getTaskList() {
|
||||
console.log(params.value);
|
||||
const data = await getLoadTaskIllegalDetailList(params.value);
|
||||
dataList.value = data.items;
|
||||
total.value = data.total;
|
||||
}
|
||||
function changePagination(page, pageSize) {
|
||||
console.log(page, pageSize);
|
||||
params.value.page = page;
|
||||
params.value.limit = pageSize;
|
||||
getTaskList();
|
||||
}
|
||||
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.taskeid;
|
||||
type.value = record.type;
|
||||
}
|
||||
async function locationFun(record) {
|
||||
emits('changeTask', record);
|
||||
}
|
||||
onMounted(() => {
|
||||
getTaskList();
|
||||
});
|
||||
const changeSupervise = (item) => {
|
||||
if(item.cancelsupervise === 0 && item.issupervise === 1){
|
||||
message.error('取消改督办权限不足')
|
||||
return
|
||||
}
|
||||
let params = {
|
||||
id: item.processid,
|
||||
supervise: 1,
|
||||
}
|
||||
if(item.issupervise === 1){
|
||||
params.supervise = 0
|
||||
}
|
||||
updateSupervise(params).then(res => {
|
||||
if(params.supervise === 1){
|
||||
message.success('成功发起督办')
|
||||
}else{
|
||||
message.success('取消督办成功')
|
||||
}
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const prevData = async () => {
|
||||
if(prevShowDataId.value === 0){
|
||||
if(params.value.page === 1 || total.value == 0){
|
||||
message.warning('已经是第一条数据了')
|
||||
return
|
||||
}
|
||||
pageNumber.value = pageNumber.value - 1
|
||||
params.value.page = params.value.page -1
|
||||
await getTaskList();
|
||||
// showDataIndex.value = dataList.value.length -1
|
||||
handoffShow.value = false
|
||||
let record = dataList.value[dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = dataList.value[dataList.value.length - 1].Id
|
||||
return
|
||||
}else{
|
||||
showDataId.value = prevShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
}
|
||||
const nextData = async () => {
|
||||
if(nextShowDataId.value === 0){
|
||||
if(Math.ceil(total.value / pageSizeNumber.value) <= pageNumber.value || total.value == 0){
|
||||
message.warning('已经是最后一条数据了')
|
||||
return
|
||||
}
|
||||
pageNumber.value = pageNumber.value + 1
|
||||
params.value.page = params.value.page + 1
|
||||
await getTaskList();
|
||||
// showDataIndex.value = 0
|
||||
handoffShow.value = false
|
||||
let record = dataList.value[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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = dataList.value[0].Id
|
||||
return
|
||||
}else{
|
||||
showDataId.value = nextShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = dataList.value.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.taskeid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
}
|
||||
const cancelCollectItem = (item) => {
|
||||
deleteTaskCase(item.Fid).then(res => {
|
||||
message.success('取消收藏成功')
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const collectItem = (item) => {
|
||||
if(item.Fid){
|
||||
cancelCollectItem(item)
|
||||
return
|
||||
}
|
||||
let userInfo = userStore.getUserInfo
|
||||
let params = {
|
||||
taskId: item.taskeid,
|
||||
favoriteUserId: userInfo.id
|
||||
}
|
||||
addTaskFavorite(params).then(res => {
|
||||
message.success('收藏成功')
|
||||
getTaskList();
|
||||
})
|
||||
}
|
||||
const getCollectList = () => {
|
||||
if(params.value.type === null){
|
||||
params.value.type = 1
|
||||
}else if(params.value.type === 1){
|
||||
params.value.type = null
|
||||
}
|
||||
params.value.page = 1
|
||||
pageNumber.value = 1
|
||||
getTaskList();
|
||||
}
|
||||
const showSortMark = (key, sort) => {
|
||||
if(params.value.sort === key && sort === order.value){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
const dataListSort = (type) => {
|
||||
if(params.value.sort === null || params.value.sort === type){
|
||||
order.value = (order.value + 1) % 3
|
||||
}else{
|
||||
order.value = 1
|
||||
}
|
||||
// emits('infoDataListSort', type, order.value)
|
||||
switch(order.value){
|
||||
case 0:
|
||||
params.value.sort = null
|
||||
params.value.order = null
|
||||
break
|
||||
case 1:
|
||||
params.value.sort = type
|
||||
params.value.order = 'asc'
|
||||
break
|
||||
case 2:
|
||||
params.value.sort = type
|
||||
params.value.order = 'desc'
|
||||
break
|
||||
}
|
||||
getTaskList();
|
||||
}
|
||||
const closeMolder = () => {
|
||||
getTaskList();
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
height: 85%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.handoff{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 25px;
|
||||
}
|
||||
.map-list-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.screen-div {
|
||||
padding: 22px 12px 19px 13px;
|
||||
display: flex;
|
||||
width: 590px;
|
||||
// margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
// background: @component-background;
|
||||
.screen-item {
|
||||
// width: 33.3%;
|
||||
display: flex;
|
||||
// margin-bottom: 15px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
height: 39px;
|
||||
.screen-item-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 9px;
|
||||
}
|
||||
: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{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
width:223px;
|
||||
box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
|
||||
}
|
||||
.item-button{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
height:38px;
|
||||
width: 97px;
|
||||
background:#086DEC;
|
||||
}
|
||||
}
|
||||
.screen-button-div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
align-items: center;
|
||||
.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;
|
||||
// margin-top: 10px;
|
||||
height: 60vh;
|
||||
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:4px;
|
||||
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;
|
||||
cursor:pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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: #000000;
|
||||
border: 1px solid;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.type-title{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: center;
|
||||
}
|
||||
.type-data{
|
||||
background:#086DEC;
|
||||
color:#fff;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.button-div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.button-item{
|
||||
height: 27px;
|
||||
width: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-56deg, #0060FF, #007EFF, #0061FF);
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.rollback {
|
||||
background: @component-background;
|
||||
padding: 10px;
|
||||
}
|
||||
.img-box{
|
||||
width: 25px;
|
||||
height: 23px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mr-r-20{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.img-box.small{
|
||||
width: 18px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
import {
|
||||
resultNameOptions,
|
||||
patchSourceOptions,
|
||||
nowStatusOptions,
|
||||
markTypeOptions,
|
||||
} from '@/utils/global';
|
||||
|
||||
const getYearList = () => {
|
||||
const num = 10;
|
||||
const currentYear = new Date().getFullYear();
|
||||
// 存储年份数据的数组
|
||||
const 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}`),
|
||||
});
|
||||
}
|
||||
return list;
|
||||
};
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '区县',
|
||||
dataIndex: 'countyname',
|
||||
},
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'streetname',
|
||||
},
|
||||
{
|
||||
title: '图斑编号',
|
||||
dataIndex: 'caseno',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '下发时间',
|
||||
dataIndex: 'identificationtime',
|
||||
},
|
||||
{
|
||||
title: '图斑面积',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'gengdiarea',
|
||||
},
|
||||
{
|
||||
title: '判定结果',
|
||||
dataIndex: 'isillegal',
|
||||
},
|
||||
{
|
||||
title: '当前状态',
|
||||
dataIndex: 'handlestatusname',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'xiangmumc',
|
||||
},
|
||||
{
|
||||
title: '项目主体',
|
||||
dataIndex: 'xiangmuzhuti',
|
||||
},
|
||||
{
|
||||
title: '违法类型',
|
||||
dataIndex: 'weifaleixing',
|
||||
},
|
||||
{
|
||||
title: '整改措施',
|
||||
dataIndex: 'measurename',
|
||||
},
|
||||
{
|
||||
title: '处理方式',
|
||||
dataIndex: 'resultname',
|
||||
editRow: true,
|
||||
editComponent: 'Select',
|
||||
editComponentProps: {
|
||||
options: resultNameOptions,
|
||||
},
|
||||
fixed: 'right',
|
||||
},
|
||||
{
|
||||
title: '立案号',
|
||||
dataIndex: 'registrnumber',
|
||||
editRow: true,
|
||||
editComponent: 'Input',
|
||||
fixed: 'right',
|
||||
},
|
||||
{
|
||||
title: '违法联系人',
|
||||
dataIndex: 'illegalcontact',
|
||||
editRow: true,
|
||||
editComponent: 'Input',
|
||||
fixed: 'right',
|
||||
},
|
||||
{
|
||||
title: '违法人身份证号',
|
||||
dataIndex: 'illegalshenfenzhenghao',
|
||||
editRow: true,
|
||||
editComponent: 'Input',
|
||||
fixed: 'right',
|
||||
width: 160,
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'year',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
label: '年份',
|
||||
componentProps: {
|
||||
options: getYearList(),
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'tubanlaiyuan',
|
||||
label: '图斑来源',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: patchSourceOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'picihao',
|
||||
label: '批次',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'isBuildName',
|
||||
label: '标注类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: markTypeOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'nowStatus',
|
||||
label: '当前状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: nowStatusOptions,
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'countyid',
|
||||
label: '区县',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ tableAction, formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: 371300 },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
onChange: () => {
|
||||
formModel.streetid = '';
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'streetid',
|
||||
label: '乡镇',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: formModel.countyid },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'caseNo',
|
||||
label: '图斑编号',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #toolbar>
|
||||
<PermissionBtn @btn-event="onBtnClicked" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction :actions="createActions(record)" />
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<a-modal
|
||||
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||
wrap-class-name="full-modal"
|
||||
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 lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { BasicTable, useTable, TableAction, EditRecordRow } from '@/components/Table';
|
||||
import { loadCaseInfoIllegalList, dealIllegalCaseInfo } from '@/api/demo/system';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { columns, searchFormSchema } from './illegaltreatment.data';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import { getCaseInfoById } from '@/api/tiankongdi/index';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
const { createMessage } = useMessage();
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
|
||||
const searchInfo = reactive<Recordable>({
|
||||
countyid: null,
|
||||
});
|
||||
const showInfoData = ref();
|
||||
const showInfoOpen = ref(false);
|
||||
const searchParams = ref();
|
||||
const [registerTable] = useTable({
|
||||
title: '违法处理',
|
||||
api: loadCaseInfoIllegalList,
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
showAdvancedButton: false,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
tableSetting: { fullScreen: true },
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
searchParams.value = info;
|
||||
return info;
|
||||
},
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
// slots: { customRender: 'action' },
|
||||
},
|
||||
});
|
||||
|
||||
const currentEditKeyRef = ref('');
|
||||
function createActions(record: EditRecordRow): ActionItem[] {
|
||||
if (!record.editable) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.Id : false,
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
// icon: 'ant-design:ellipsis-outlined',
|
||||
label: '查看',
|
||||
onClick: viewAccount.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
return [
|
||||
{
|
||||
label: '保存',
|
||||
onClick: handleSave.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
popConfirm: {
|
||||
title: '是否取消编辑',
|
||||
confirm: handleCancel.bind(null, record),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
function handleEdit(record: EditRecordRow) {
|
||||
console.log(record);
|
||||
currentEditKeyRef.value = record.Id;
|
||||
record.onEdit?.(true);
|
||||
}
|
||||
|
||||
function handleCancel(record: EditRecordRow) {
|
||||
currentEditKeyRef.value = '';
|
||||
record.onEdit?.(false, false);
|
||||
}
|
||||
|
||||
async function handleSave(record: EditRecordRow) {
|
||||
console.log(record);
|
||||
// 校验
|
||||
createMessage.loading({ content: '正在保存...', duration: 0, key: 'saving' });
|
||||
const valid = await record.onValid?.();
|
||||
console.log(valid);
|
||||
if (valid) {
|
||||
try {
|
||||
const data = cloneDeep(record.editValueRefs);
|
||||
console.log(data);
|
||||
let querys = { ...data };
|
||||
querys.id = record.Id;
|
||||
console.log(querys);
|
||||
//TODO 此处将数据提交给服务器保存
|
||||
const res = await dealIllegalCaseInfo(querys);
|
||||
console.log(res);
|
||||
if (res) {
|
||||
// 保存之后提交编辑状态
|
||||
const pass = await record.onEdit?.(false, true);
|
||||
if (pass) {
|
||||
currentEditKeyRef.value = '';
|
||||
}
|
||||
createMessage.success({ content: '数据已保存', key: 'saving' });
|
||||
}
|
||||
} catch (error) {
|
||||
createMessage.error({ content: '保存失败', key: 'saving' });
|
||||
}
|
||||
} else {
|
||||
// const pass = await record.onEdit?.(false, true);
|
||||
createMessage.error({ content: '请填写正确的数据', key: 'saving' });
|
||||
}
|
||||
}
|
||||
|
||||
// 直接下载接口返回的二进制流
|
||||
function handleExport() {
|
||||
let params = { ...searchParams.value };
|
||||
params.countyid = searchInfo?.countyid;
|
||||
axios({
|
||||
method: 'post',
|
||||
url: VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoIllegalList',
|
||||
params: params,
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem('X-Token'),
|
||||
},
|
||||
responseType: 'blob',
|
||||
}).then((res) => {
|
||||
console.log('excel', res);
|
||||
let fileName = '违法处理统计报表' + new Date().getTime() + '.xls';
|
||||
const elink = document.createElement('a');
|
||||
elink.download = fileName;
|
||||
elink.style.display = 'none';
|
||||
elink.href = URL.createObjectURL(res.data);
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
URL.revokeObjectURL(elink.href);
|
||||
document.body.removeChild(elink);
|
||||
});
|
||||
}
|
||||
|
||||
function onBtnClicked(domId) {
|
||||
switch (domId) {
|
||||
case 'btnExport':
|
||||
handleExport();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
function viewAccount(record) {
|
||||
console.log(record);
|
||||
getCaseInfoById({ id: record.Id }).then((res) => {
|
||||
showInfoData.value = res;
|
||||
showInfoOpen.value = true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-preview-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 0px);
|
||||
position: absolute;
|
||||
padding: 30px 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #fff;
|
||||
}
|
||||
.data-preview-container-option {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0px;
|
||||
}
|
||||
.data-preview-container-option div {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<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';
|
||||
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 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) => {
|
||||
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,
|
||||
});
|
||||
dataList.value = data;
|
||||
}
|
||||
onMounted(() => {
|
||||
getCountList();
|
||||
});
|
||||
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;
|
||||
}
|
||||
.map-box-div {
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight>
|
||||
<div class="search-box">
|
||||
<BasicForm
|
||||
@register="registerForm"
|
||||
:labelWidth="100"
|
||||
:schemas="searchFormSchema"
|
||||
:actionColOptions="{ span: 24 }"
|
||||
/>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
|
||||
<template #toolbar>
|
||||
<PermissionBtn @btn-event="onBtnClicked" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="['area', 'gengdiarea'].includes(column.key)">
|
||||
{{ dataProcessingCount(record[column.key]) }}
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
// icon: 'ant-design:ellipsis-outlined',
|
||||
label: '查看',
|
||||
onClick: viewAccount.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
<a-modal v-model:open="open" title="导出文件类型" :footer="null">
|
||||
<div>
|
||||
<a-button class="exportbutton" @click="handleExport('excel')">
|
||||
图斑汇总统计报表（execl）
|
||||
</a-button>
|
||||
<a-button class="exportbutton" @click="handleExport('shp')">
|
||||
图斑汇总矢量数据（shp）
|
||||
</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
<a-modal
|
||||
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="showInfoOpen"
|
||||
title="详情"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
:destroyOnClose="true"
|
||||
@cancel="showInfoOpen = false"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<ShowInfoModal :showInfoData="showInfoData" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { loadCaseInfoTuBanList } from '@/api/demo/system';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { columns, searchFormSchema } from './patchsummary.data';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import { getCaseInfoById } from '@/api/tiankongdi/index';
|
||||
import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
|
||||
const searchInfo = reactive<Recordable>({
|
||||
countyid: null,
|
||||
});
|
||||
const showInfoData = ref();
|
||||
const showInfoOpen = ref(false);
|
||||
const searchParams = ref({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
});
|
||||
const tableData = ref([]);
|
||||
const tablePaginationRight = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
size: 'small',
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '50', '80', '100'],
|
||||
showQuickJumper: true,
|
||||
total: 0,
|
||||
});
|
||||
const [registerForm, { validate, getFieldsValue }] = useForm({
|
||||
schemas: searchFormSchema,
|
||||
labelWidth: 80,
|
||||
baseColProps: { span: 6 },
|
||||
actionColOptions: { span: 24 },
|
||||
autoSubmitOnEnter: true,
|
||||
submitFunc: handleSubmit,
|
||||
});
|
||||
const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
|
||||
useTable({
|
||||
title: '图斑汇总',
|
||||
dataSource: tableData.value,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
useSearchForm: false,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
searchParams.value = info;
|
||||
return info;
|
||||
},
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
// slots: { customRender: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
pagination: tablePaginationRight.value,
|
||||
});
|
||||
|
||||
// 直接下载接口返回的二进制流
|
||||
function handleExport(exportType) {
|
||||
console.log(searchParams);
|
||||
let params = { ...searchParams.value };
|
||||
let url = '';
|
||||
let fileName = '';
|
||||
if (exportType == 'excel') {
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoTuBanList';
|
||||
fileName = '图斑汇总统计报表' + new Date().getTime() + '.xls';
|
||||
} else if (exportType == 'shp') {
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoShapefile';
|
||||
fileName = '图斑汇总矢量数据' + new Date().getTime() + '.zip';
|
||||
}
|
||||
axios({
|
||||
method: 'post',
|
||||
url: url,
|
||||
params: params,
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem('X-Token'),
|
||||
},
|
||||
responseType: 'blob',
|
||||
}).then((res) => {
|
||||
const elink = document.createElement('a');
|
||||
elink.download = fileName;
|
||||
elink.style.display = 'none';
|
||||
elink.href = URL.createObjectURL(res.data);
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
URL.revokeObjectURL(elink.href);
|
||||
document.body.removeChild(elink);
|
||||
});
|
||||
}
|
||||
|
||||
const open = ref<boolean>(false);
|
||||
function onBtnClicked(domId) {
|
||||
switch (domId) {
|
||||
case 'btnExport':
|
||||
open.value = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
function viewAccount(record) {
|
||||
getCaseInfoById({ id: record.Id }).then((res) => {
|
||||
showInfoData.value = res;
|
||||
showInfoOpen.value = true;
|
||||
});
|
||||
}
|
||||
function handleChange(data) {
|
||||
searchParams.value.page = data.current;
|
||||
searchParams.value.limit = data.pageSize;
|
||||
tablePaginationRight.value = data;
|
||||
getTableData();
|
||||
}
|
||||
function handleSubmit() {
|
||||
searchParams.value = getFieldsValue();
|
||||
searchParams.value.page = 1;
|
||||
tablePaginationRight.value.current = 1;
|
||||
searchParams.value.limit = tablePaginationRight.value.pageSize;
|
||||
getTableData();
|
||||
}
|
||||
function getTableData() {
|
||||
setLoading(true);
|
||||
loadCaseInfoTuBanList(searchParams.value).then((res) => {
|
||||
tableData.value = res.items;
|
||||
tablePaginationRight.value.total = res.total;
|
||||
setTableData(tableData.value);
|
||||
setPagination(tablePaginationRight.value);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.data-preview-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 0px);
|
||||
position: absolute;
|
||||
padding: 30px 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #fff;
|
||||
}
|
||||
.data-preview-container-option {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0px;
|
||||
}
|
||||
.data-preview-container-option div {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.exportbutton {
|
||||
width: 510px;
|
||||
height: 60px;
|
||||
margin: 5px;
|
||||
}
|
||||
.search-box {
|
||||
background: @component-background;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
::v-deep .ant-col-24 {
|
||||
display: inline-block;
|
||||
max-width: fit-content;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.table-box {
|
||||
margin: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
import {
|
||||
patchSourceOptions,
|
||||
yearOptions,
|
||||
markTypeOptions,
|
||||
nowStatusOptions,
|
||||
mapTypeOptions,
|
||||
} from '@/utils/global';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '图斑来源',
|
||||
dataIndex: 'tubanlaiyuan',
|
||||
},
|
||||
{
|
||||
title: '区县',
|
||||
dataIndex: 'countyname',
|
||||
},
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'streetname',
|
||||
},
|
||||
{
|
||||
title: '社区/村',
|
||||
dataIndex: 'communityname',
|
||||
},
|
||||
{
|
||||
title: '图斑编号',
|
||||
dataIndex: 'caseno',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '图斑类型',
|
||||
dataIndex: 'typename',
|
||||
},
|
||||
{
|
||||
title: '下发时间',
|
||||
dataIndex: 'identificationtime',
|
||||
},
|
||||
{
|
||||
title: '图斑面积',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'gengdiarea',
|
||||
},
|
||||
{
|
||||
title: '判定结果',
|
||||
dataIndex: 'isillegal',
|
||||
},
|
||||
{
|
||||
title: '当前状态',
|
||||
dataIndex: 'handlestatusname',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'xiangmumc',
|
||||
},
|
||||
{
|
||||
title: '项目主体',
|
||||
dataIndex: 'xiangmuzhuti',
|
||||
},
|
||||
{
|
||||
title: '实际用途',
|
||||
dataIndex: 'actualuseto',
|
||||
},
|
||||
{
|
||||
title: '违法类型',
|
||||
dataIndex: 'weifaleixing',
|
||||
},
|
||||
{
|
||||
title: '整改措施',
|
||||
dataIndex: 'measurename',
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'year',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
label: '年份',
|
||||
componentProps: {
|
||||
options: yearOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'tubanlaiyuan',
|
||||
label: '图斑来源',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: patchSourceOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'picihao',
|
||||
label: '批次',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'typename',
|
||||
label: '图斑类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '农用地', value: '农用地' },
|
||||
{ label: '建设用地', value: '建设用地' },
|
||||
{ label: '推堆土', value: '推堆土' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'isBuildName',
|
||||
label: '标注类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: markTypeOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'isIllegal',
|
||||
label: '判定结果',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: mapTypeOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'nowStatus',
|
||||
label: '当前状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: nowStatusOptions,
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'measureName',
|
||||
label: '整改措施',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '拆除复耕', value: '0' },
|
||||
{ label: '补办手续', value: '1' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'countyid',
|
||||
label: '区县',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ tableAction, formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: 371300 },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
onChange: () => {
|
||||
formModel.streetid = '';
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'streetid',
|
||||
label: '乡镇',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: formModel.countyid && getChildrenTree,
|
||||
params: { parentId: formModel.countyid },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'caseNo',
|
||||
label: '图斑编号',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue