Compare commits
2 Commits
d4e4ba9d42
...
cc9e32ea57
| Author | SHA1 | Date |
|---|---|---|
 刘妍
|
cc9e32ea57 | |
|
刘妍
|
fceaf9cea4 |
|
|
@ -0,0 +1,169 @@
|
|||
// WFProcess 流程模版基本信息
|
||||
import { defHttp } from '@/utils/http/axios';
|
||||
|
||||
enum Api {
|
||||
// 获取待办任务统计数据
|
||||
LoadTaskCount = '/api/DroneCaseInfoSTHX/LoadTaskCount',
|
||||
// 获取图斑信息统计数据
|
||||
LoadDroneCaseInfoCount = '/api/DroneCaseInfoZdwt1/LoadDroneCaseInfoCount',
|
||||
// 分页获取图斑信息列表
|
||||
LoadDroneCaseInfoDetail = '/api/DroneCaseInfoSTHX/LoadTasklList',
|
||||
// 分页获取任务信息列表
|
||||
LoadTaskDetailList = '/api/DroneCaseInfoSTHX/LoadTaskDetailList',
|
||||
// 收藏图斑
|
||||
AddCaseFavorite = '/api/DroneCaseInfoZdwt1/AddCaseFavorite',
|
||||
// // 获取收藏图斑列表
|
||||
// FavoriteCaseList = '/api/DroneCaseinfo/FavoriteCaseList',
|
||||
DeleteFavoriteCase = '/api/DroneCaseInfoZdwt1/DeleteFavoriteCase',
|
||||
// 获取图斑详情
|
||||
GetCaseInfoById = '/api/DroneCaseInfoSTHX/GetCaseInfoById',
|
||||
// 更新图斑行政区划
|
||||
UpdateDroneCaseInfo = '/api/DroneCaseInfoSTHX/UpdateDroneCaseInfo',
|
||||
// // 督办流程
|
||||
// Supervise = '/api/WFProcess/Supervise',
|
||||
// 获取部门父级
|
||||
LoadParents = '/api/Orgs/LoadParents',
|
||||
// 审核列表收藏
|
||||
AddtaskFavorite = '/api/DroneCaseInfoSTHX/AddtaskFavorite',
|
||||
// 审核列表删除收藏
|
||||
DeleteTaskCase = '/api/DroneCaseInfoSTHX/DeleteTaskCase',
|
||||
// 获取当前账号可以看见的乡镇
|
||||
loadStreet = '/api/DroneCaseInfoSTHX/loadStreet',
|
||||
// 违法处理，待办任务列表
|
||||
LoadTaskIllegalDetailList = '/api/DroneCaseInfoZdwt1/LoadTaskIllegalDetailList',
|
||||
// 分割图斑
|
||||
SplitCase = '/api/DroneCaseInfoSTHX/CaseSplit',
|
||||
// 恢复还原
|
||||
RecoverCase = '/api/DroneCaseInfoSTHX/CaseRecover',
|
||||
// 获取图斑中心点
|
||||
GetPolygonCenter = '/api/DroneCaseInfoZdwt1/GetCenterPoints',
|
||||
// 获取用户访问机构权限
|
||||
// GetUserOrgs = '/api/Check/GetOrgs',
|
||||
// // 大屏下发图斑统计
|
||||
// IssuedStatitical = "/api/DroneScreenDisplay/CaseOffenceXiaFa",
|
||||
// // 大屏核实新增统计
|
||||
// VerifyStatitical = "/api/DroneScreenDisplay/CaseOffenceCheckAdd",
|
||||
// // 大屏整改剩余统计
|
||||
// RectificationStatitical = "/api/DroneScreenDisplay/CaseOffenceModifyRemain",
|
||||
// 获取案件图片坐标、方位角信息
|
||||
LoadCaseImgList = '/api/DroneCaseInfoSTHX/LoadCaseImgList',
|
||||
// 图斑列表
|
||||
LoadCaseInfoTuBanList = '/api/DroneCaseInfoSTHX/LoadCaseInfoTuBanList',
|
||||
CaseOffence = '/api/DroneCaseInfoZdwt1/CaseOffence',
|
||||
LoadCaseInfoListOffence = '/api/DroneCaseInfoZdwt1/LoadCaseInfoListOffence',
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: getCaseFlowLog
|
||||
*/
|
||||
export function getLoadTaskCount(params?) {
|
||||
return defHttp.get({ url: Api.LoadTaskCount, params });
|
||||
}
|
||||
export function getLoadStreet() {
|
||||
return defHttp.get({ url: Api.loadStreet });
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: getCaseFlowLog
|
||||
*/
|
||||
export function getLoadDroneCaseInfoCount(params) {
|
||||
return defHttp.get({ url: Api.LoadDroneCaseInfoCount, params });
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: getCaseFlowLog
|
||||
*/
|
||||
export function getLoadDroneCaseInfoDetail(params) {
|
||||
return defHttp.get({ url: Api.LoadDroneCaseInfoDetail, params });
|
||||
}
|
||||
/**
|
||||
* @description: getCaseFlowLog
|
||||
*/
|
||||
export function getLoadTaskDetailList(params) {
|
||||
return defHttp.get({ url: Api.LoadTaskDetailList, params });
|
||||
}
|
||||
|
||||
export function addCaseFavorite(params) {
|
||||
return defHttp.post({ url: Api.AddCaseFavorite, params });
|
||||
}
|
||||
export function addTaskFavorite(params?: { taskId: string; favoriteUserId: string }) {
|
||||
return defHttp.post({ url: Api.AddtaskFavorite, params });
|
||||
}
|
||||
export function deleteFavoriteCase(params: string) {
|
||||
return defHttp.post({ url: Api.DeleteFavoriteCase, data: params });
|
||||
}
|
||||
export function deleteTaskCase(params: string) {
|
||||
return defHttp.post({ url: Api.DeleteTaskCase, data: params });
|
||||
}
|
||||
|
||||
// export function getFavoriteCaseList(params?: { uid: string }) {
|
||||
// return defHttp.get({ url: Api.FavoriteCaseList, params });
|
||||
// }
|
||||
export function getCaseInfoById(params?: { id: string }) {
|
||||
return defHttp.get({ url: Api.GetCaseInfoById, params });
|
||||
}
|
||||
export const updateDroneCaseInfo = (params) =>
|
||||
defHttp.post({ url: Api.UpdateDroneCaseInfo, params });
|
||||
|
||||
// export const updateSupervise = (params: { id: string; supervise: number }) =>
|
||||
// defHttp.post({ url: `${Api.Supervise}?id=${params.id}&supervise=${params.supervise}`, params });
|
||||
|
||||
export const getLoadParents = (params: { childId: Number }) =>
|
||||
defHttp.get({ url: `${Api.LoadParents}?childId=${params.childId}` });
|
||||
|
||||
export function getLoadTaskIllegalDetailList(params) {
|
||||
return defHttp.get({ url: Api.LoadTaskIllegalDetailList, params });
|
||||
}
|
||||
|
||||
export function splitCase(params) {
|
||||
return defHttp.post({ url: Api.SplitCase, data: params });
|
||||
}
|
||||
|
||||
export function recoverCase(params) {
|
||||
return defHttp.post({ url: Api.RecoverCase, data: params });
|
||||
}
|
||||
|
||||
export function getPolygonCenter(params) {
|
||||
return defHttp.get({ url: Api.GetPolygonCenter, params });
|
||||
}
|
||||
|
||||
// export function getUserOrgs(params){
|
||||
// return defHttp.get({ url: Api.GetUserOrgs, params });
|
||||
// }
|
||||
|
||||
// export function getIssuedStatitical(params) {
|
||||
// return defHttp.get({
|
||||
// url: Api.IssuedStatitical,
|
||||
// params,
|
||||
// });
|
||||
// }
|
||||
|
||||
// export function getVerifyStatitical(params) {
|
||||
// return defHttp.get({
|
||||
// url: Api.VerifyStatitical,
|
||||
// params,
|
||||
// });
|
||||
// }
|
||||
|
||||
// export function getRectificationStatitical(params) {
|
||||
// return defHttp.get({
|
||||
// url: Api.RectificationStatitical,
|
||||
// params,
|
||||
// });
|
||||
// }
|
||||
|
||||
export function getLoadCaseImgList(params) {
|
||||
return defHttp.get({
|
||||
url: Api.LoadCaseImgList,
|
||||
params,
|
||||
});
|
||||
}
|
||||
export function loadCaseInfoTuBanList(params) {
|
||||
return defHttp.get({
|
||||
url: Api.LoadCaseInfoTuBanList,
|
||||
params,
|
||||
});
|
||||
}
|
||||
export const getCaseOffence = (params) => defHttp.get({ url: Api.CaseOffence, params });
|
||||
export const getLoadCaseInfoListOffence = (params) =>
|
||||
defHttp.get({ url: Api.LoadCaseInfoListOffence, params });
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<div class="pagination-div">
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model:pageSize="props.pageData.limit"
|
||||
v-model:current="props.pageData.page"
|
||||
:show-total="total => `共 ${total} 条数据`"
|
||||
:total="props.total"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
@change="changePage" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits } from "vue"
|
||||
|
||||
const props = defineProps(["pageData","total"])
|
||||
const emits = defineEmits(["changePageData"])
|
||||
|
||||
const changePage = (page, pageSize) => {
|
||||
console.log(page,pageSize)
|
||||
emits('changePageData',page,pageSize)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pagination-div{
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<template>
|
||||
<div class="screen-div">
|
||||
<div class="screen-item" style="margin-right:20px;margin-bottom:12px;" v-if="showItem('year')">
|
||||
<div class="screen-item-label">年份</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:99px;"
|
||||
v-model:value="props.screenData.year"
|
||||
:options="yearOptions"
|
||||
@change="(value) => emits('screenDataChange',value,'year')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:17px;margin-bottom:12px;" v-if="showItem('tubanlaiyuan')">
|
||||
<div class="screen-item-label" style="margin-right: 11px;">图斑来源</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:144px;"
|
||||
v-model:value="props.screenData.tubanlaiyuan"
|
||||
:options="polygonSourceOptions"
|
||||
@change="(value) => emits('screenDataChange',value,'tubanlaiyuan')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom:12px;" v-if="showItem('countyid')">
|
||||
<div class="screen-item-label">县区</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:120px;"
|
||||
v-model:value="props.screenData.countyid"
|
||||
:options="countiesOptions"
|
||||
@change="(value) => changeCounties(value)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="screen-item" style="margin-right: 13px;margin-bottom:12px;" v-if="showItem('streetid')">
|
||||
<div class="screen-item-label">乡镇</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:120px;"
|
||||
v-model:value="props.screenData.streetid"
|
||||
:options="streetsOptions"
|
||||
@change="(value) => emits('screenDataChange',value,'streetid')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom:12px;" v-if="showItem('nowStatus')">
|
||||
<div class="screen-item-label">处理状态</div>
|
||||
<a-select
|
||||
allowClear
|
||||
mode="multiple"
|
||||
style="width:312px;"
|
||||
v-model:value="props.screenData.nowStatus"
|
||||
:options="statusOptions"
|
||||
:max-tag-count="1"
|
||||
@change="(value) => emits('screenDataChange',value,'nowStatus')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right: 13px;margin-bottom:12px;" v-if="showItem('typename')">
|
||||
<div class="screen-item-label">图斑类型</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 97px"
|
||||
:options="polygonTypeOptions"
|
||||
v-model:value="props.screenData.typename"
|
||||
@change="(value) => emits('screenDataChange',value,'typename')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right: 13px;margin-bottom:12px;" v-if="showItem('register')">
|
||||
<div class="screen-item-label">是否立案</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 97px"
|
||||
:options="registerOptions"
|
||||
v-model:value="props.screenData.register"
|
||||
@change="(value) => emits('screenDataChange',value,'register')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom:12px;" v-if="showItem('time')">
|
||||
<div class="screen-item-label" style="margin-right: 10px;">下发时间</div>
|
||||
<a-range-picker
|
||||
:format="'YYYY-MM-DD'"
|
||||
allowClear
|
||||
style="width: 300px;"
|
||||
class="item-time-select"
|
||||
v-model:value="props.screenData.time"
|
||||
@change="(value) => emits('screenDataChange',value,'time')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right: 14px;" v-if="showItem('caseNo')">
|
||||
<a-input
|
||||
allowClear
|
||||
placeholder="请输入图斑编号"
|
||||
class="item-input"
|
||||
v-model:value="props.screenData.caseNo"
|
||||
@change="(value) => emits('screenDataChange',value.target.value,'caseNo')"
|
||||
:style="`width:${smallInput.includes(props.usePage)? '219': '404'}px;`"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-left: 10px;cursor: pointer;">
|
||||
<a-button
|
||||
class="item-button"
|
||||
type="primary"
|
||||
:icon="h(SearchOutlined)"
|
||||
@click="emits('search')">查询</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>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits, ref, h } from "vue"
|
||||
import { SearchOutlined } from "@ant-design/icons-vue"
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { yearOptions } from '@/utils/global'
|
||||
import { polygonSourceOptions, polygonTypeOptions, countiesOptions, statusOptions, usePageGetSearchItem, smallInput, registerOptions } from '@/components/illegalmining/util'
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
|
||||
const props = defineProps(["screenData","usePage"])
|
||||
const emits = defineEmits(["screenDataChange","search","resetScreenData"])
|
||||
|
||||
const streetsOptions = ref([])
|
||||
|
||||
const changeCounties = (value) => {
|
||||
emits('screenDataChange',value,'countyid')
|
||||
emits('screenDataChange','','streetId')
|
||||
if(value && usePageGetSearchItem[props.usePage].includes('streetid')){
|
||||
getChildrenTree({ parentId: value }).then(res => {
|
||||
let data = res
|
||||
streetsOptions.value = data.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const showItem = (key) => {
|
||||
if(usePageGetSearchItem[props.usePage].includes(key)){
|
||||
return true
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.screen-div{
|
||||
padding: 22px 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: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,429 @@
|
|||
<template>
|
||||
<div class="data-list-div" style="padding-top: 1px;">
|
||||
<div v-for="(item, index) in props.dataList" :key="index" class="data-list-item">
|
||||
<div class="back-box" v-if="showDrawBack(item)">{{ illegalminingDrawBackSpan(item) }}</div>
|
||||
<div class="data-list-layout-div">
|
||||
<div class="data-list-title-div">
|
||||
<img src="/positioning.png" class="map-mark" style="cursor:pointer;" @click="locationFun(item)"/>
|
||||
<div class="label-div">
|
||||
<div class="item-label">{{item.countyname}}</div>
|
||||
<div class="item-sub-label">
|
||||
<div style="margin-right:12px;max-width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.streetname}}</div>
|
||||
<span>{{item.caseno}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-mark" v-if="item.typename">{{item.typename}}</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.weifaarea_base)">{{dataProcessing(item.weifaarea_base)}}</div>
|
||||
</div>
|
||||
<div class="info-item" style="width: 130px;">
|
||||
<div class="info-label">违法</div>
|
||||
<div class="info-data" :title="dataProcessing(item.illegalarea)">{{dataProcessing(item.illegalarea)}}</div>
|
||||
</div>
|
||||
<div class="info-item" style="width: 130px;">
|
||||
<div class="info-label">耕地</div>
|
||||
<div class="info-data" :title="dataProcessing(item.gengdi_area)">{{dataProcessing(item.gengdi_area)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-layout-div">
|
||||
<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>
|
||||
<a-modal
|
||||
width="100%"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="auditOpen"
|
||||
:title="modalTitle"
|
||||
footer=""
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<template #footer> </template>
|
||||
<div class="handoff">
|
||||
<a-button
|
||||
type="primary"
|
||||
style="margin-right: 25px;"
|
||||
@click="prevData"
|
||||
>上一条</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="nextData"
|
||||
>下一条</a-button>
|
||||
</div>
|
||||
<Audit
|
||||
v-if="handoffShow"
|
||||
ref="posRef"
|
||||
:processId="processId"
|
||||
:taskId="taskId"
|
||||
:isRead="isRead"
|
||||
:type="type"
|
||||
:auditData="auditData"
|
||||
@closeModel="closeMolder"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits, ref, watch } from "vue"
|
||||
import {showDrawBack, illegalminingDrawBackSpan} from '@/views/demo/util'
|
||||
import { dataProcessing } from '@/views/demo/tiankongdi/util'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo';
|
||||
import { Audit } from '@/views/demo/workflow/task/process/page';
|
||||
import dayjs from 'dayjs';
|
||||
import { usePageRequestUrl } from '@/components/illegalmining/util'
|
||||
import { defHttp } from '@/utils/http/axios';
|
||||
import { AddTaskFavorite, CancelTaskFavorite } from '@/api/illegalmining/index'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const flowWfDataStore = flowStore();
|
||||
|
||||
const props = defineProps(["usePage","dataList","screenData","sortData","pageData","total"])
|
||||
const emits = defineEmits(["changeTask","query","flipChange"])
|
||||
|
||||
const mapNo = ref('')
|
||||
const searchList = ref([])
|
||||
const auditOpen = ref(false);
|
||||
const processId = ref('');
|
||||
const taskId = ref('');
|
||||
const type = ref('');
|
||||
const auditData = ref()
|
||||
const isRead: any = ref(0);
|
||||
const handoffShow = ref(true)
|
||||
const showDataId = ref()
|
||||
const nextShowDataId = ref()
|
||||
const prevShowDataId = ref()
|
||||
const modalTitle = ref('')
|
||||
|
||||
watch(() => showDataId.value, () => {
|
||||
let index = props.dataList.findIndex(item => item.id == showDataId.value)
|
||||
if(index < props.dataList.length - 1){
|
||||
nextShowDataId.value = props.dataList[index + 1].id
|
||||
}else{
|
||||
nextShowDataId.value = 0
|
||||
}
|
||||
if(index > 0){
|
||||
prevShowDataId.value = props.dataList[index - 1].id
|
||||
}else{
|
||||
prevShowDataId.value = 0
|
||||
}
|
||||
})
|
||||
|
||||
const locationFun = (record) => {
|
||||
console.log(record);
|
||||
emits('changeTask', record.geomid);
|
||||
}
|
||||
const goAudit = async (record) => {
|
||||
modalTitle.value = record.unitname
|
||||
showDataId.value = record.id
|
||||
let data = await getDetail({ code: record.processcode });
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData;
|
||||
flowWfDataStore.setWfDataAll(wfData);
|
||||
auditOpen.value = true;
|
||||
processId.value = record.processid;
|
||||
taskId.value = record.taskid;
|
||||
type.value = record.type;
|
||||
auditData.value = record;
|
||||
}
|
||||
const collectItem = (item) => {
|
||||
console.log(item,userStore.getUserInfo)
|
||||
if(item.Fid){
|
||||
cancelCollectItem(item)
|
||||
return
|
||||
}
|
||||
let userInfo = userStore.getUserInfo
|
||||
let params = {
|
||||
taskId: item.taskid,
|
||||
favoriteUserId: userInfo.id
|
||||
}
|
||||
AddTaskFavorite(params).then(res => {
|
||||
console.log(res)
|
||||
message.success('收藏成功')
|
||||
emits('query')
|
||||
})
|
||||
}
|
||||
const cancelCollectItem = (item) => {
|
||||
CancelTaskFavorite(item.Fid).then(res => {
|
||||
message.success('取消收藏成功')
|
||||
emits('query')
|
||||
})
|
||||
}
|
||||
const prevData = async () => {
|
||||
if(prevShowDataId.value === 0){
|
||||
if(props.pageData.page === 1 || props.total == 0){
|
||||
message.warning('已经是第一条数据了')
|
||||
return
|
||||
}
|
||||
defHttp.get({ url: usePageRequestUrl[props.usePage], params: getParams({page: props.pageData.page - 1})}).then(async res => {
|
||||
emits('flipChange',res.items,res.total,props.pageData.page - 1)
|
||||
handoffShow.value = false
|
||||
let record = res.items[res.items.length -1]
|
||||
let data = await getDetail({ code: record.processcode });
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData;
|
||||
flowWfDataStore.setWfDataAll(wfData);
|
||||
processId.value = record.processid;
|
||||
taskId.value = record.taskid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = res.items[res.items.length -1].id
|
||||
auditData.value = res.items[res.items.length -1]
|
||||
})
|
||||
return
|
||||
}else{
|
||||
showDataId.value = prevShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = props.dataList.find(item => item.id == showDataId.value)
|
||||
let data = await getDetail({ code: record.processcode });
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData;
|
||||
flowWfDataStore.setWfDataAll(wfData);
|
||||
processId.value = record.processid;
|
||||
taskId.value = record.taskid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
auditData.value = record
|
||||
}
|
||||
const nextData = async () => {
|
||||
if(nextShowDataId.value === 0){
|
||||
if((Math.ceil(props.total / props.pageData.limit) <= props.pageData.page) || props.total == 0){
|
||||
message.warning('已经是最后一条数据了')
|
||||
return
|
||||
}
|
||||
defHttp.get({ url: usePageRequestUrl[props.usePage], params: getParams({page: props.pageData.page + 1}) }).then(async res => {
|
||||
emits('flipChange',res.items,res.total,props.pageData.page + 1)
|
||||
handoffShow.value = false
|
||||
let record = res.items[0]
|
||||
let data = await getDetail({ code: record.processcode });
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData;
|
||||
flowWfDataStore.setWfDataAll(wfData);
|
||||
processId.value = record.processid;
|
||||
taskId.value = record.taskid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = res.items[0].id
|
||||
auditData.value = res.items[0]
|
||||
})
|
||||
return
|
||||
}else{
|
||||
showDataId.value = nextShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = props.dataList.find(item => item.id == showDataId.value)
|
||||
let data = await getDetail({ code: record.processcode });
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData;
|
||||
flowWfDataStore.setWfDataAll(wfData);
|
||||
processId.value = record.processid;
|
||||
taskId.value = record.taskid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
auditData.value = record
|
||||
}
|
||||
const getParams = (data) => {
|
||||
let params = {
|
||||
...props.pageData,
|
||||
...props.sortData,
|
||||
}
|
||||
Object.keys(props.screenData).forEach(key => {
|
||||
switch(key){
|
||||
case 'time':
|
||||
if(props.screenData.time){
|
||||
params['startTime'] = dayjs(props.screenData.time[0]).format('YYYY-MM-DD')
|
||||
params['endTime'] = dayjs(props.screenData.time[1]).format('YYYY-MM-DD')
|
||||
}
|
||||
break
|
||||
case 'nowStatus':
|
||||
if(props.screenData.nowStatus.length > 0){
|
||||
params['nowStatus'] = props.screenData.nowStatus.join(',')
|
||||
}
|
||||
break
|
||||
default:
|
||||
if(props.screenData[key] !== null && props.screenData[key] !== undefined && props.screenData[key] !== ''){
|
||||
params[key] = props.screenData[key]
|
||||
}
|
||||
break
|
||||
}
|
||||
})
|
||||
return {...params, ...data}
|
||||
}
|
||||
const closeMolder = () => {
|
||||
emits('query')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.data-list-div{
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
scrollbar-width: none; /* firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
.data-list-item{
|
||||
background:#fff;
|
||||
padding:20px 10px 10px 10px;
|
||||
// border-radius:6px;
|
||||
margin-bottom:1px;
|
||||
position: relative;
|
||||
.back-box{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:0;
|
||||
background: #EA1C06;
|
||||
padding: 3px 6px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
border-radius: 0px 0px 0px 8px;
|
||||
}
|
||||
.data-list-layout-div{
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
height: 45px;
|
||||
.data-list-title-div{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
.map-mark{
|
||||
width:17px;
|
||||
height:17px;
|
||||
}
|
||||
.label-div{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-right: 12px
|
||||
}
|
||||
.item-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 23px;
|
||||
color: #000000;
|
||||
margin-left: 9px;
|
||||
margin-right:10px;
|
||||
}
|
||||
.item-sub-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
}
|
||||
.item-mark{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
margin-left: 17px;
|
||||
color: #696969;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.data-item-type-div{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #696969;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor:pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
.data-list-info-div{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
height: 40px;
|
||||
.info-layout-div{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
.info-time{
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.info-item{
|
||||
display:flex;
|
||||
background: rgba(237, 237, 237, 0.55);
|
||||
align-items: center;
|
||||
width: 110px;
|
||||
border-radius: 7px;
|
||||
margin-right: 8px;
|
||||
height: 33px;
|
||||
justify-content: center;
|
||||
.info-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #959494;
|
||||
// width:45%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.info-data{
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #000000;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-list-item:nth-last-child(1){
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px
|
||||
}
|
||||
}
|
||||
.data-list-div::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
.img-box{
|
||||
width: 25px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.handoff{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 25px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div class="sift-div">
|
||||
<div class="layout-div">
|
||||
<div class="sift-item" @click="dataListSort('weifaarea_base')">
|
||||
<div class="sift-label">总面积</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('weifaarea_base',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('weifaarea_base',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('synchronoustime')">
|
||||
<div class="sift-label">下发时间</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('synchronoustime',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('synchronoustime',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.reject"
|
||||
style="width: 100%"
|
||||
@change="(e) => emits('rejectDataChange', e)"
|
||||
:options="auditMapStatusOptions"></a-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<img src="@/assets/images/tiankongdi/filt.png" class="img-box mr-r-20" style="margin-right: 20px;"/>
|
||||
</a-popover>
|
||||
<img src="@/assets/images/tiankongdi/collect-active.png" class="img-box" @click="getCollectList(0)" v-if="openCollect"/>
|
||||
<img src="@/assets/images/tiankongdi/collect.png" class="img-box" @click="getCollectList(1)" v-else/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits, ref, computed } from "vue"
|
||||
import { orderUtils } from '@/components/illegalmining/util'
|
||||
|
||||
const props = defineProps(["sortData","screenData","reject"])
|
||||
const emits = defineEmits(["changeSort","collectChange","rejectDataChange"])
|
||||
|
||||
const order = ref(0) // 0: 不排序 1: 升序 2: 降序
|
||||
const openCollect = computed(() => {
|
||||
if(props.screenData.type === '') return false
|
||||
return true
|
||||
})
|
||||
const auditMapStatusOptions = [
|
||||
{ label: '市级驳回', value: '市级驳回' },
|
||||
{ label: '县级驳回', value: '县级驳回' },
|
||||
];
|
||||
|
||||
const dataListSort = (type) => {
|
||||
if(props.sortData.sortType === '' || props.sortData.sortType === type){
|
||||
order.value = (order.value + 1) % 3
|
||||
}else{
|
||||
order.value = 1
|
||||
}
|
||||
let str_order = orderUtils[order.value]
|
||||
if(order.value == 0){
|
||||
type = null
|
||||
}
|
||||
emits('changeSort', type, str_order)
|
||||
}
|
||||
const showSortMark = (key, sort) => {
|
||||
if(props.sortData.sortType === key && sort === order.value){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
const getCollectList = (type) => {
|
||||
if(type == 0){
|
||||
type = ""
|
||||
}
|
||||
emits('collectChange', type)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.img-box{
|
||||
width: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* 年份 year
|
||||
* 图斑来源 tubanlaiyuan
|
||||
* 图斑类型 typename
|
||||
* 县区 countyid
|
||||
* 乡镇 streetid
|
||||
* 处理状态 nowStatus
|
||||
* 下发时间段 startTime-endTime
|
||||
* 图斑号 caseNo
|
||||
* 是否立案 register
|
||||
*/
|
||||
// 图斑来源
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
import { asyncGetOptions } from '@/utils/global';
|
||||
|
||||
const counties = await getChildrenTree({ parentId: 371300 })
|
||||
|
||||
export const polygonSourceOptions= await asyncGetOptions('tubanlaiyuan')
|
||||
// 图斑类型
|
||||
export const polygonTypeOptions= await asyncGetOptions('kctubanleixing')
|
||||
// 当前状态
|
||||
export const statusOptions = await asyncGetOptions('kcdangqianzhuangtai')
|
||||
// 是否立案
|
||||
export const registerOptions =await asyncGetOptions('kcregister')
|
||||
export const countiesOptions = counties.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
export const orderUtils = {
|
||||
0: null,
|
||||
1: 'asc',
|
||||
2: 'desc',
|
||||
}
|
||||
export const usePageRequestUrl = {
|
||||
'patternfilling': '/api/DroneCaseInfoMinerals/LoadReportingTaskList',
|
||||
'fillingaudit': '/api/DroneCaseInfoMinerals/LoadReportingAuditTaskList',
|
||||
'patternexamining': '/api/DroneCaseInfoMinerals/LoadExaminingTaskList',
|
||||
'examiningaudit': '/api/DroneCaseInfoMinerals/LoadExaminingAuditTaskList',
|
||||
'patternrectification': '/api/DroneCaseInfoMinerals/LoadRectifyingTaskList',
|
||||
'rectificationaudit': '/api/DroneCaseInfoMinerals/LoadRectifyingAuditTaskList',
|
||||
'patternadjust': '/api/DroneCaseInfoMinerals/LoadModifyingTaskList',
|
||||
}
|
||||
export const usePageGetSearchItem = {
|
||||
'patternfilling': ["year", "tubanlaiyuan", "typename", "countyid", "streetid", "nowStatus", "time", "caseNo"],
|
||||
'fillingaudit': ["year", "tubanlaiyuan", "typename", "countyid", "caseNo"],
|
||||
'patternexamining': ["year", "tubanlaiyuan", "register", "countyid", "caseNo"],
|
||||
'examiningaudit': ["year", "tubanlaiyuan", "register", "countyid", "caseNo"],
|
||||
'patternrectification': ["year", "tubanlaiyuan", "countyid", "caseNo"],
|
||||
'rectificationaudit': ["year", "tubanlaiyuan", "countyid", "caseNo"],
|
||||
'patternadjust': ["year", "tubanlaiyuan", "countyid", "caseNo"],
|
||||
}
|
||||
export const smallInput:any = ['fillingaudit','patternexamining','examiningaudit']
|
||||
|
|
@ -50,11 +50,11 @@ export const measureOptions = [
|
|||
export const keyIssuesIMeasureOptions = [
|
||||
{ label: '拆除', value: 1 },
|
||||
{ label: '拆除复耕', value: 2 },
|
||||
]
|
||||
];
|
||||
export const keyIssuesIIMeasureOptions = [
|
||||
{ label: '拆除', value: 1 },
|
||||
{ label: '没收', value: 2 },
|
||||
]
|
||||
];
|
||||
export const mapStatusOptions = [
|
||||
{ label: '待接收', value: '待接收' },
|
||||
{ label: '待填报', value: '待填报' },
|
||||
|
|
@ -74,7 +74,6 @@ export const keyProblemMapStatusOptions = [
|
|||
{ label: '市级审核', value: '市级审核' },
|
||||
{ label: '县级审核', value: '县级审核' },
|
||||
{ label: '已归档', value: '已归档' },
|
||||
|
||||
];
|
||||
export const auditMapStatusOptions = [
|
||||
{ label: '市级驳回', value: '市级驳回' },
|
||||
|
|
@ -221,8 +220,9 @@ export const asyncGetOptions = async (code: string) => {
|
|||
export const isChuliOptions = [
|
||||
{ label: '是', value: '1' },
|
||||
{ label: '否', value: '2' },
|
||||
]
|
||||
export const keyIssusesIPatchSourceOptions = await asyncGetOptions('zd1tbly')
|
||||
export const keyIssusesIIPatchSourceOptions = await asyncGetOptions('zd2tbly')
|
||||
export const inspectionAuditPatchSourceOptions = await asyncGetOptions('xcsjtbly')
|
||||
export const degrainingPatchSourceOptions = await asyncGetOptions('gdflhtbly')
|
||||
];
|
||||
export const keyIssusesIPatchSourceOptions = await asyncGetOptions('zd1tbly');
|
||||
export const keyIssusesIIPatchSourceOptions = await asyncGetOptions('zd2tbly');
|
||||
export const inspectionAuditPatchSourceOptions = await asyncGetOptions('xcsjtbly');
|
||||
export const degrainingPatchSourceOptions = await asyncGetOptions('gdflhtbly');
|
||||
export const redLinePatchSourceOptions = await asyncGetOptions('redlinetbly');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,664 @@
|
|||
<template>
|
||||
<div class="screen-div">
|
||||
<!-- <div class="screen-row"> -->
|
||||
<div class="screen-item" style="margin-bottom: 12px">
|
||||
<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; margin-bottom: 12px">
|
||||
<div class="screen-item-label" style="margin-right: 11px">图斑来源</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 142px"
|
||||
v-model:value="props.patchSource"
|
||||
:options="redLinePatchSourceOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'patchSource');
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom: 12px">
|
||||
<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 class="screen-item" style="margin-right: 14px">
|
||||
<a-input
|
||||
allowClear
|
||||
placeholder="请输入图斑编号(模糊查询获取近十条数据)"
|
||||
class="item-input"
|
||||
v-model:value="mapNo"
|
||||
style="width: 443px"
|
||||
@press-enter="querysBtn"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-left: 10px; cursor: pointer">
|
||||
<a-button class="item-button" type="primary" :icon="h(SearchOutlined)" @click="querysBtn"
|
||||
>查询</a-button
|
||||
>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<div class="search-list-div">
|
||||
<div
|
||||
v-for="(item, index) in searchList"
|
||||
:key="index"
|
||||
class="data-list-item"
|
||||
v-if="searchList.length > 0"
|
||||
>
|
||||
<div class="back-box" v-if="showDrawBack(item)">{{ drawBackSpan(item) }}</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">
|
||||
<div
|
||||
style="
|
||||
margin-right: 12px;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
"
|
||||
>{{ item.streetname }}</div
|
||||
>
|
||||
<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 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="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 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: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>
|
||||
<a-modal
|
||||
width="100%"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="auditOpen"
|
||||
title="填报审核"
|
||||
footer=""
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<template #footer> </template>
|
||||
<Audit
|
||||
ref="posRef"
|
||||
:processId="processId"
|
||||
:taskId="taskId"
|
||||
:isRead="isRead"
|
||||
:type="type"
|
||||
:auditData="auditData"
|
||||
@closeModel="closeMolder"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps, defineEmits, toRefs, h } from 'vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { Empty, message } from 'ant-design-vue';
|
||||
import { redLinePatchSourceOptions } from '@/utils/global';
|
||||
import { SearchOutlined } from '@ant-design/icons-vue';
|
||||
import {
|
||||
getLoadTaskDetailList,
|
||||
deleteTaskCase,
|
||||
addTaskFavorite,
|
||||
} from '@/api/redlinesupervision/index';
|
||||
import { showDrawBack, drawBackSpan } from '@/views/demo/util';
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo';
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
import { Audit } from '@/views/demo/workflow/task/process/page';
|
||||
import { dataProcessing } from '@/views/demo/tiankongdi/util';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const props = defineProps([
|
||||
'year',
|
||||
'batch',
|
||||
'patchSource',
|
||||
'batchOptions',
|
||||
'yearOptions',
|
||||
'dataList',
|
||||
]);
|
||||
const emits = defineEmits([
|
||||
'auditProgressScreenChange',
|
||||
'showInfo',
|
||||
'changeTask',
|
||||
'openLoading',
|
||||
'closeLoading',
|
||||
'getCountList',
|
||||
]);
|
||||
|
||||
const flowWfDataStore = flowStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const mapNo = ref('');
|
||||
const searchList = ref([]);
|
||||
const showDataId = ref();
|
||||
const auditOpen = ref(false);
|
||||
const processId = ref('');
|
||||
const taskId = ref('');
|
||||
const type = ref('');
|
||||
const auditData = ref();
|
||||
const isRead: any = ref(0);
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
// function changeParam(val,type) {
|
||||
// emits('auditProgressScreenChange', val, type);
|
||||
// }
|
||||
const querysBtn = () => {
|
||||
let params = {
|
||||
geomid: mapNo.value,
|
||||
year: props.year,
|
||||
batch: props.batch,
|
||||
tubanlaiyuan: props.patchSource,
|
||||
page: 1,
|
||||
limit: 10,
|
||||
};
|
||||
if (mapNo.value == '') {
|
||||
params.page = 0;
|
||||
params.limit = 0;
|
||||
}
|
||||
emits('openLoading');
|
||||
getLoadTaskDetailList(params)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
searchList.value = res.items;
|
||||
})
|
||||
.finally(() => {
|
||||
emits('closeLoading');
|
||||
});
|
||||
};
|
||||
async function locationFun(record) {
|
||||
emits('changeTask', record);
|
||||
}
|
||||
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;
|
||||
auditData.value = record;
|
||||
}
|
||||
const cancelCollectItem = (item) => {
|
||||
deleteTaskCase(item.Fid).then((res) => {
|
||||
message.success('取消收藏成功');
|
||||
querysBtn();
|
||||
});
|
||||
};
|
||||
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('收藏成功');
|
||||
querysBtn();
|
||||
});
|
||||
};
|
||||
const closeMolder = () => {
|
||||
querysBtn();
|
||||
emits('getCountList');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.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-div {
|
||||
width: 590px;
|
||||
padding: 22px 12px 14px 13px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.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% - 137px);
|
||||
margin-top: 10px;
|
||||
padding: 0px 11px 0px 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.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;
|
||||
flex: 1;
|
||||
.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;
|
||||
}
|
||||
.data-list-item {
|
||||
background: #fff;
|
||||
padding: 20px 10px 10px 10px;
|
||||
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;
|
||||
display: flex;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.img-box {
|
||||
width: 25px;
|
||||
cursor: pointer;
|
||||
height: 23px;
|
||||
}
|
||||
.search-list-div {
|
||||
max-height: 387px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,769 @@
|
|||
<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="keyIssusesIPatchSourceOptions"
|
||||
/>
|
||||
</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="请输入图斑编号" @press-enter="query"/>
|
||||
</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;">
|
||||
<a-popover placement="bottom">
|
||||
<template #content>
|
||||
<div style="display:flex;">
|
||||
<div>当前状态：</div>
|
||||
<div>
|
||||
<a-checkbox-group
|
||||
v-model:value="params.nowStatus"
|
||||
style="width: 100%"
|
||||
:options="auditMapStatusOptions"></a-checkbox-group>
|
||||
</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: 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="showDrawBack(item)">{{ drawBackSpan(item) }}</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">
|
||||
<div style="margin-right:12px;max-width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.streetname}}</div>
|
||||
<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-total="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"
|
||||
:auditData="auditData"
|
||||
@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, addTaskFavorite, deleteTaskCase } from '@/api/redlinesupervision/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 { keyIssusesIPatchSourceOptions, auditMapStatusOptions } from '@/utils/global'
|
||||
import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
|
||||
import {showDrawBack, drawBackSpan} from '@/views/demo/util'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
const emits = defineEmits(['changeTask', 'changeShowParent','openLoading','closeLoading']);
|
||||
|
||||
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 auditData = 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,
|
||||
nowStatus: [],
|
||||
});
|
||||
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);
|
||||
let requestData = {...params.value}
|
||||
if(requestData.nowStatus.length > 0){
|
||||
requestData.nowStatus = requestData.nowStatus.join(',')
|
||||
}else{
|
||||
requestData.nowStatus = null
|
||||
}
|
||||
emits('openLoading')
|
||||
const data = await getLoadTaskDetailList(requestData);
|
||||
emits('closeLoading')
|
||||
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;
|
||||
auditData.value = record;
|
||||
}
|
||||
async function locationFun(record) {
|
||||
emits('changeTask', record);
|
||||
}
|
||||
onMounted(() => {
|
||||
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
|
||||
auditData.value = dataList.value[dataList.value.length - 1]
|
||||
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
|
||||
auditData.value = record
|
||||
}
|
||||
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
|
||||
auditData.value = dataList.value[0]
|
||||
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
|
||||
auditData.value = record
|
||||
}
|
||||
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;
|
||||
display: flex;
|
||||
}
|
||||
.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,198 @@
|
|||
<template>
|
||||
<div class="curb-spot-city">
|
||||
<div class="show-list">
|
||||
<a-spin :spinning="spinning">
|
||||
<AuditProgress
|
||||
v-if="showParent"
|
||||
:year="year"
|
||||
:batch="batch"
|
||||
:batchOptions="batchOptions"
|
||||
:yearOptions="yearOptions"
|
||||
:dataList="dataList"
|
||||
@auditProgressScreenChange="auditProgressScreenChange"
|
||||
@showInfo="changeShowInfo"
|
||||
@changeTask="changeTask"
|
||||
@openLoading="openLoading"
|
||||
@closeLoading="closeLoading"
|
||||
@getCountList="getCountList"
|
||||
/>
|
||||
<MapList
|
||||
@changeTask="changeTask"
|
||||
@changeShowParent="changeShowParent"
|
||||
:areaId="areaId"
|
||||
:level="level"
|
||||
:year="year"
|
||||
:batch="batch"
|
||||
:patchSource="patchSource"
|
||||
:yearOptions="yearOptions"
|
||||
:batchOptions="batchOptions"
|
||||
@openLoading="openLoading"
|
||||
@closeLoading="closeLoading"
|
||||
v-else
|
||||
/>
|
||||
</a-spin>
|
||||
</div>
|
||||
<div class="map-box-div">
|
||||
<MapboxMap
|
||||
:mapConfig="mapConfig"
|
||||
@handlerDrawComplete="handlerDrawComplete"
|
||||
@mapOnLoad="onMapboxLoad"
|
||||
ref="MapboxComponent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, defineAsyncComponent } from 'vue';
|
||||
import mapboxgl, { Map } from 'mapbox-gl';
|
||||
import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config.ts';
|
||||
import AuditProgress from './AuditProgress/index.vue';
|
||||
import MapList from './MapList/index.vue';
|
||||
import { getLoadTaskCount } from '@/api/redlinesupervision/index';
|
||||
import { getGeom, getConfig } from '@/api/sys/layerManagement';
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { yearOptions } from '@/utils/global';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
|
||||
const MapboxComponent = ref();
|
||||
const mapConfig = ref({ isShowMap: false });
|
||||
|
||||
function onMapboxLoad(): void {
|
||||
getConfig({ code: 'mapsetting' }).then((res) => {
|
||||
mapConfig.value = JSON.parse(res.codeValue);
|
||||
});
|
||||
}
|
||||
|
||||
const spinning = ref(false)
|
||||
const showParent = ref(true);
|
||||
const year = ref();
|
||||
const batch = ref();
|
||||
const patchSource = ref();
|
||||
const batchOptions = ref([]);
|
||||
const dataList = ref([]);
|
||||
const areaId = ref('');
|
||||
const level = ref();
|
||||
const auditProgressScreenChange = (value, type) => {
|
||||
switch (type) {
|
||||
case 'year':
|
||||
year.value = value;
|
||||
break;
|
||||
case 'batch':
|
||||
batch.value = value;
|
||||
break;
|
||||
case 'patchSource':
|
||||
patchSource.value = value;
|
||||
break;
|
||||
}
|
||||
getCountList();
|
||||
};
|
||||
const changeShowInfo = (item) => {
|
||||
console.log(item);
|
||||
showParent.value = false;
|
||||
areaId.value = item.areaid;
|
||||
level.value = item.level;
|
||||
};
|
||||
function changeShowParent() {
|
||||
getCountList();
|
||||
showParent.value = true;
|
||||
}
|
||||
async function getCountList() {
|
||||
spinning.value = true
|
||||
const data = await getLoadTaskCount({
|
||||
year: year.value,
|
||||
tubanlaiyuan: patchSource.value,
|
||||
picihao: batch.value,
|
||||
illegal: 1,
|
||||
});
|
||||
spinning.value = false
|
||||
dataList.value = data;
|
||||
}
|
||||
onMounted(() => {
|
||||
getCountList();
|
||||
// TODO 获取批次
|
||||
batchOptions.value = [];
|
||||
});
|
||||
const openLoading = () => {
|
||||
spinning.value = true
|
||||
}
|
||||
const closeLoading = () => {
|
||||
spinning.value = false
|
||||
}
|
||||
function changeTask(record) {
|
||||
if (record?.geomid) {
|
||||
// handlerGetMapConfigByFormId(record.processcode);
|
||||
let val = record.geomid;
|
||||
let getGeomPrams = {
|
||||
TableName: 'drone_shp_data ',
|
||||
FieldName: 'gid',
|
||||
FieldValue: val?.split(','),
|
||||
page: 1,
|
||||
limit: 999,
|
||||
key: null,
|
||||
};
|
||||
if (val) {
|
||||
getGeom(getGeomPrams).then((res) => {
|
||||
let geoms = [];
|
||||
if (res) {
|
||||
if (res.items?.length > 0) {
|
||||
res.items.forEach((item, index) => {
|
||||
let geom = {
|
||||
key: item.gid,
|
||||
mapgeom: item.geometry,
|
||||
};
|
||||
geoms.push(geom);
|
||||
});
|
||||
}
|
||||
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
|
||||
MapboxComponent.value.handlerDraw('Details', geoms, false);
|
||||
} else {
|
||||
createMessage.error('当前数据没有图斑！');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
createMessage.error('当前数据没有图斑！');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 根据发布表单的id获取地图配置
|
||||
function handlerGetMapConfigByFormId(id) {
|
||||
if (id) {
|
||||
getDetail({ code: id }).then((res) => {
|
||||
let data = res;
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData;
|
||||
let startFlow = wfData.find((item, index) => {
|
||||
return item.type == 'bpmn:StartEvent';
|
||||
});
|
||||
if (startFlow?.mapConfig) {
|
||||
mapConfig.value = startFlow?.mapConfig;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.curb-spot-city {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.show-list {
|
||||
width: 590px;
|
||||
background: #efefef;
|
||||
:deep(.ant-spin-nested-loading) {
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.ant-spin-container) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.map-box-div {
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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,239 @@
|
|||
<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/redlinesupervision/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;
|
||||
});
|
||||
formState.value.communityid = '';
|
||||
}
|
||||
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,968 @@
|
|||
<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="redLinePatchSourceOptions"
|
||||
@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: 56px;margin-bottom: 12px">
|
||||
<div class="screen-item-label">县区</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="infoScreenData.countyid"
|
||||
:options="countyOptions"
|
||||
:field-names="{ label: 'name', value: 'id' }"
|
||||
@change="changeCounty"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right: 13px;margin-bottom: 12px">
|
||||
<div class="screen-item-label">乡镇</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:130px;"
|
||||
v-model:value="infoScreenData.streetid"
|
||||
:options="streetsAreaOptions"
|
||||
:field-names="{ label: 'name', value: 'id' }"
|
||||
@change="(value) => mapListScreenChange(value, 'streetid')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom: 12px;width:240px">
|
||||
<a-input
|
||||
allowClear
|
||||
placeholder="请输入图斑编号"
|
||||
class="item-input"
|
||||
v-model:value="infoScreenData.caseNo"
|
||||
@change="(value) => mapListScreenChange(value.target.value, 'caseNo')"
|
||||
@press-enter="querysBtn"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="flex: 1;justify-content: flex-end;">
|
||||
<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('synchronoustime')">
|
||||
<div class="sift-label">下发时间</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('synchronoustime',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('synchronoustime',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-total="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, getLoadStreet ,recoverCase} from '@/api/redlinesupervision/index.ts';
|
||||
import {
|
||||
batchOptions,
|
||||
yearOptions,
|
||||
redLinePatchSourceOptions,
|
||||
} from '@/utils/global';
|
||||
import Amend from './amend.vue';
|
||||
import { Empty, message,Modal } from 'ant-design-vue';
|
||||
import ShowInfoModal from '@/views/demo/redlinesupervision/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import SplitPolygonModal from '@/views/demo/redlinesupervision/curbspotcity/MapList/SplitPolygonModal/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'
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
|
||||
|
||||
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 streetsAreaOptions = ref<{ label: string; value: string}[]>([])
|
||||
const countyOptions = ref<[]>([])
|
||||
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,
|
||||
display:1,
|
||||
});
|
||||
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(() => {
|
||||
// getLoadStreet().then(res => {
|
||||
// console.log(res)
|
||||
// res.forEach(item => {
|
||||
// streetsAreaOptions.value.push({
|
||||
// label: item.Name,
|
||||
// value: item.Id,
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
getCountyOptions()
|
||||
getInfoList();
|
||||
});
|
||||
// 获取区县
|
||||
function getCountyOptions(){
|
||||
getChildrenTree({ parentId: 371300}).then(res => {
|
||||
console.log(res)
|
||||
countyOptions.value = res
|
||||
})
|
||||
}
|
||||
// 选中区县，获取乡镇
|
||||
function changeCounty(value){
|
||||
console.log(value)
|
||||
infoScreenData.value.streetid = ''
|
||||
getChildrenTree({ parentId: value}).then(res => {
|
||||
console.log(res)
|
||||
streetsAreaOptions.value = res
|
||||
})
|
||||
mapListScreenChange(value, 'countyid')
|
||||
}
|
||||
// 分割
|
||||
const splitPolygon = (record) => {
|
||||
showSplitPolygon.value = true;
|
||||
emits('changeTask', record.geomid);
|
||||
}
|
||||
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,
|
||||
display: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: 389px;
|
||||
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/redlinesupervision/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,118 @@
|
|||
<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="show-data-list-content">
|
||||
<div class="data-item" v-for="(item, index) in dataList" :key="index" @click="emits('showInfo',true,item)">
|
||||
<div class="name-div">
|
||||
<div class="item-mark"></div>
|
||||
<div class="item-label">{{ item.areaname }}</div>
|
||||
</div>
|
||||
<div class="data-div">
|
||||
<span>{{ item.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps, defineEmits, toRefs } from "vue"
|
||||
import { batchOptions, yearOptions} from '@/utils/global'
|
||||
const props = defineProps(["year","batch","dataList"])
|
||||
const emits = defineEmits(["auditProgressScreenChange","showInfo"])
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.screen-div{
|
||||
padding: 10px;
|
||||
.screen-row{
|
||||
display: flex;
|
||||
.screen-item{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
.screen-item-label{
|
||||
width: 55px;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-list{
|
||||
height: calc(100% - 52px);
|
||||
// background: darkgoldenrod;
|
||||
.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{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
.name-div{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
.data-div{
|
||||
font-weight: 500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.item-mark{
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: #086DEC;
|
||||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.item-label {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.data-item:hover{
|
||||
background-color: rgba(8, 109, 236, 0.08)
|
||||
}
|
||||
.data-item:nth-child(2n){
|
||||
background: #ececec;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,685 @@
|
|||
<template>
|
||||
<div class="detail-container">
|
||||
<div class="map-container">
|
||||
<MapboxMap
|
||||
:caseno="props.showInfoData.case_no"
|
||||
:countyname="props.showInfoData.countyname"
|
||||
:imageList="imageList"
|
||||
: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="图斑编号">{{
|
||||
props.showInfoData.case_no
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="图斑类型">{{
|
||||
props.showInfoData.typename
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="县区">{{
|
||||
props.showInfoData.countyname
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="乡镇">{{
|
||||
props.showInfoData.streetname
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="社区/村">{{
|
||||
props.showInfoData.communityname
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="图斑面积(亩)">{{
|
||||
dataProcessing(props.showInfoData.area)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="农用地面积(亩)">{{
|
||||
dataProcessing(props.showInfoData.nongyongdi_area)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="耕地面积(亩)">{{
|
||||
dataProcessing(props.showInfoData.gengdi_area)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="永农面积(亩)">{{
|
||||
dataProcessing(props.showInfoData.yongjiujibennongtian_area)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="占生态红线面积(亩)">{{
|
||||
dataProcessing(props.showInfoData.shengtaibaohuhongxian_area)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="图斑描述">{{
|
||||
props.showInfoData.case_description
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="备注">{{ props.showInfoData.remark }}</a-descriptions-item>
|
||||
<a-descriptions-item label="经度">{{ props.showInfoData.lng }}</a-descriptions-item>
|
||||
<a-descriptions-item label="纬度">{{ props.showInfoData.lat }}</a-descriptions-item>
|
||||
<a-descriptions-item label="下发时间">{{
|
||||
props.showInfoData.synchronoustime
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="图斑照片">
|
||||
<div class="image-div">
|
||||
<a-image-preview-group
|
||||
:preview="{
|
||||
getContainer: getContainer,
|
||||
}"
|
||||
>
|
||||
<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>
|
||||
</a-image-preview-group>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
key="2"
|
||||
v-if="!['建设用地', '推堆土'].includes(props.showInfoData.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', props.showInfoData.is_illegal)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="props.showInfoData.is_illegal == 1" label="项目名称">{{
|
||||
props.showInfoData.xiangmumc
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="props.showInfoData.is_illegal == 1" label="项目主体">{{
|
||||
props.showInfoData.xiangmuzhuti
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="props.showInfoData.is_illegal == 1" label="实际用途">{{
|
||||
props.showInfoData.actual_use_to
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="props.showInfoData.is_illegal == 1" label="整改措施">{{
|
||||
getLabel('measure_name', props.showInfoData.measure_name)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="props.showInfoData.is_illegal == 1" label="是否对人处理">{{
|
||||
getLabel('is_chuli', props.showInfoData.is_chuli)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="props.showInfoData.is_illegal == 1" label="处理情况说明">{{
|
||||
props.showInfoData.chuliqingkuangsm
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="props.showInfoData.is_illegal == 1" label="附件">
|
||||
<a-image-preview-group :preview="{ getContainer }">
|
||||
<template v-for="(item, itemIndex) in fujianList" :key="itemIndex">
|
||||
<a-image
|
||||
v-if="showImage(item)"
|
||||
style="width: 100px; height: 100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
|
||||
:preview="{ getContainer }"
|
||||
></a-image>
|
||||
<div v-else>
|
||||
<Icon
|
||||
v-if="item"
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="hanlderPreViewFile(item)"
|
||||
/>
|
||||
{{ handlerDealFileName(item) }}
|
||||
</div>
|
||||
</template>
|
||||
</a-image-preview-group>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="props.showInfoData.is_illegal == 0" label="附件">
|
||||
<a-image-preview-group :preview="{ getContainer }">
|
||||
<template v-for="(item, itemIndex) in hefafujianList" :key="itemIndex">
|
||||
<a-image
|
||||
v-if="showImage(item)"
|
||||
style="width: 100px; height: 100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
|
||||
:preview="{ getContainer }"
|
||||
></a-image>
|
||||
<div v-else>
|
||||
<Icon
|
||||
v-if="item"
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="hanlderPreViewFile(item)"
|
||||
/>
|
||||
{{ handlerDealFileName(item) }}
|
||||
</div>
|
||||
</template>
|
||||
</a-image-preview-group>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="props.showInfoData.is_illegal == 2" label="实际用途">{{
|
||||
getLabel('qita_use_to', props.showInfoData.qita_use_to)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
v-if="props.showInfoData.is_illegal == 2"
|
||||
label="实际用途其他说明"
|
||||
>{{ props.showInfoData.qita_shuoming }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item v-if="props.showInfoData.is_illegal == 2" label="附件">
|
||||
<a-image-preview-group :preview="{ getContainer }">
|
||||
<template v-for="(item, itemIndex) in qitafujianList" :key="itemIndex">
|
||||
<a-image
|
||||
v-if="showImage(item)"
|
||||
style="width: 100px; height: 100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
|
||||
:preview="{ getContainer }"
|
||||
></a-image>
|
||||
<div v-else>
|
||||
<Icon
|
||||
v-if="item"
|
||||
:style="`font-size: 30px; cursor: pointer;`"
|
||||
icon="ion:document-attach-outline"
|
||||
@click="hanlderPreViewFile(item)"
|
||||
/>
|
||||
{{ handlerDealFileName(item) }}
|
||||
</div>
|
||||
</template>
|
||||
</a-image-preview-group>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="判定依据说明">{{
|
||||
props.showInfoData.pandingyijushuoming
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="照片">
|
||||
<div class="image-div">
|
||||
<a-image-preview-group
|
||||
:preview="{
|
||||
getContainer: getContainer,
|
||||
onVisibleChange: handlerImageChange,
|
||||
}"
|
||||
>
|
||||
<template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
|
||||
<a-image
|
||||
v-if="imageItem"
|
||||
@click="handlerPreviewImage(imageIndex, imageItem)"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</a-image-preview-group>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="填报人">{{
|
||||
props.showInfoData.examiner_name
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="填报时间">{{
|
||||
props.showInfoData.examine_time
|
||||
}}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
key="4"
|
||||
v-if="!['建设用地', '推堆土'].includes(props.showInfoData.typename)"
|
||||
tab="审核情况"
|
||||
>
|
||||
<a-divider>区县审核</a-divider>
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
bordered
|
||||
:contentStyle="{
|
||||
'text-align': 'center',
|
||||
'min-width': '250px',
|
||||
'word-break': 'break-all',
|
||||
}"
|
||||
>
|
||||
<a-descriptions-item label="审核结果">{{
|
||||
props.showInfoData.xjshenhejieguo
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="审核意见">{{
|
||||
props.showInfoData.xianjiyijian
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="审核人">{{
|
||||
props.showInfoData.verifyuser
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="审核时间">{{
|
||||
props.showInfoData.verifytime
|
||||
}}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<a-divider>市局审核</a-divider>
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
bordered
|
||||
:contentStyle="{
|
||||
'text-align': 'center',
|
||||
'min-width': '250px',
|
||||
'word-break': 'break-all',
|
||||
}"
|
||||
>
|
||||
<a-descriptions-item label="审核结果">{{
|
||||
props.showInfoData.sjshenhejieguo
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="审核意见">{{
|
||||
props.showInfoData.shijiyijian
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="审核人">{{
|
||||
props.showInfoData.hexiaoren
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="审核时间">{{
|
||||
props.showInfoData.hexiaotime?.split('.')[0]
|
||||
}}</a-descriptions-item>
|
||||
<!-- <a-descriptions-item v-if="weifaleixing == 0" label="无人机复飞照片" :span="2">
|
||||
<div class="image-div">
|
||||
<a-image-preview-group
|
||||
:preview="{
|
||||
getContainer:getContainer,
|
||||
}"
|
||||
>
|
||||
<template v-for="(imageItem, imageIndex) in wrjffzhaopianList" :key="imageIndex">
|
||||
<a-image
|
||||
v-if="imageItem"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</a-image-preview-group>
|
||||
</div>
|
||||
</a-descriptions-item> -->
|
||||
<!-- <a-descriptions-item label="现场核查照片" :span="2">
|
||||
<div class="image-div">
|
||||
<a-image-preview-group
|
||||
:preview="{
|
||||
getContainer:getContainer,
|
||||
}"
|
||||
>
|
||||
<template v-for="(imageItem, imageIndex) in xchczhaopianList" :key="imageIndex">
|
||||
<a-image
|
||||
v-if="imageItem"
|
||||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</a-image-preview-group>
|
||||
</div>
|
||||
</a-descriptions-item> -->
|
||||
</a-descriptions>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- File Preview && Download Start -->
|
||||
<a-modal
|
||||
v-model:open="previewFileModalVisible"
|
||||
style="width: 100vw"
|
||||
title="文件预览"
|
||||
wrap-class-name="full-modal"
|
||||
>
|
||||
<FilePreview v-if="previewFileModalVisible" :fileUrl="previewFileUrl"></FilePreview>
|
||||
<template #footer>
|
||||
<a-button key="cancel" @click="handleCancelPreviewFile">取消</a-button>
|
||||
<a-button key="confirm" type="primary" @click="handlerDownloadFle">下载</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
<!--File Preview && Download End -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, ref, computed, onBeforeMount, watch } from 'vue';
|
||||
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
|
||||
import { getConfig } from '@/api/sys/layerManagement';
|
||||
import { getGeom } from '@/api/sys/layerManagement';
|
||||
import { getLoadCaseImgList } from '@/api/redlinesupervision/index';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import axios from 'axios';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import {
|
||||
mapTypeOptions,
|
||||
keyIssuesIMeasureOptions,
|
||||
illegalTypeList,
|
||||
resultOptions,
|
||||
qitaUseTOOptions,
|
||||
isChuliOptions,
|
||||
} from '@/utils/global';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
|
||||
const MapboxComponent = ref();
|
||||
const mapConfig = ref({});
|
||||
watch(
|
||||
() => props.showInfoData,
|
||||
() => {
|
||||
getConfig({ code: 'mapsetting' }).then((res) => {
|
||||
mapConfig.value = JSON.parse(res.codeValue);
|
||||
});
|
||||
changeTask();
|
||||
},
|
||||
);
|
||||
|
||||
const props = defineProps(['showInfoData']);
|
||||
const activeKey = ref('1');
|
||||
const geomsList = ref();
|
||||
const imageList = ref([]);
|
||||
|
||||
async function getCaseImgList() {
|
||||
imageList.value = await getLoadCaseImgList({
|
||||
caseid: props.showInfoData.id,
|
||||
category: '生态红线',
|
||||
});
|
||||
MapboxComponent.value.handlerLoadPictureAzimuth(imageList.value);
|
||||
|
||||
// 匹配去除无效图片
|
||||
// let zhengshiImageList = [];
|
||||
// imageList.value?.forEach((item,index)=>{
|
||||
// let obj = anjianzhaopianList.value?.find((it,idx)=>{
|
||||
// return item.filePath == it;
|
||||
// })
|
||||
// if(obj){
|
||||
// zhengshiImageList.push(imageList.value[index]);
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
function handlerDealFileName(path) {
|
||||
const regex = /([^/\\]+)(?=\.[^/\\]*$|$)/;
|
||||
const matchStr = path.match(regex);
|
||||
if (matchStr?.length) {
|
||||
return matchStr[0];
|
||||
}
|
||||
}
|
||||
|
||||
function handlerPreviewImage(index, url) {
|
||||
const regex = /([^/\\]+)(?=\.[^/\\]*$|$)/;
|
||||
const match = url.match(regex);
|
||||
if (match) {
|
||||
MapboxComponent.value.handlerCurrentImageChange(match[1]);
|
||||
}
|
||||
}
|
||||
|
||||
const isInitImageLisener = ref<Boolean>(false);
|
||||
// 监听预览图片地址变化进行箭头切换
|
||||
function handlerImageChange(e): void {
|
||||
isInitImageLisener.value = false;
|
||||
if (e && !isInitImageLisener.value) {
|
||||
setTimeout(function () {
|
||||
const targetNode = document.getElementsByClassName('ant-image-preview-img');
|
||||
targetNode?.forEach((node,index)=>{
|
||||
let imageObserver = new MutationObserver((mutationsList)=>{
|
||||
for(const mutation of mutationsList){
|
||||
if (node.getAttribute(mutation.attributeName).match('http')){
|
||||
handlerPreviewImage(0, node.getAttribute(mutation.attributeName));
|
||||
}
|
||||
}
|
||||
})
|
||||
const config = { attributes: true };
|
||||
imageObserver.observe(node, config);
|
||||
isInitImageLisener.value = true;
|
||||
})
|
||||
}, 250);
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeMount(() => {});
|
||||
|
||||
const anjianzhaopianList = computed(() => {
|
||||
getCaseImgList();
|
||||
return props.showInfoData.anjianzhaopian ? props.showInfoData.anjianzhaopian.split(',') : [];
|
||||
});
|
||||
const casepicList = computed(() => {
|
||||
return props.showInfoData.casepic ? props.showInfoData.casepic.split(',') : [];
|
||||
});
|
||||
const chaichufugenghoupicList = computed(() => {
|
||||
return props.showInfoData.chaichufugenghoupic
|
||||
? props.showInfoData.chaichufugenghoupic.split(',')
|
||||
: [];
|
||||
});
|
||||
const bubanzhaopianList = computed(() => {
|
||||
return props.showInfoData.bubanzhaopian ? props.showInfoData.bubanzhaopian.split(',') : [];
|
||||
});
|
||||
const fujianList = computed(() => {
|
||||
return props.showInfoData.fujian ? props.showInfoData.fujian.split(',') : [];
|
||||
});
|
||||
const hefafujianList = computed(() => {
|
||||
return props.showInfoData.hefafujian ? props.showInfoData.hefafujian.split(',') : [];
|
||||
});
|
||||
const qitafujianList = computed(() => {
|
||||
return props.showInfoData.qitafujian ? props.showInfoData.qitafujian.split(',') : [];
|
||||
});
|
||||
const zhenggaifujianList = computed(() => {
|
||||
return props.showInfoData.zhenggaifujian ? props.showInfoData.zhenggaifujian.split(',') : [];
|
||||
});
|
||||
const yanshoubiaoList = computed(() => {
|
||||
return props.showInfoData.yanshoubiao ? props.showInfoData.yanshoubiao.split(',') : [];
|
||||
});
|
||||
const wrjffzhaopianList = computed(() => {
|
||||
return props.showInfoData.wrjffzhaopian ? props.showInfoData.wrjffzhaopian.split(',') : [];
|
||||
});
|
||||
const xchczhaopianList = computed(() => {
|
||||
return props.showInfoData.xchczhaopian ? props.showInfoData.xchczhaopian.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 = keyIssuesIMeasureOptions;
|
||||
break;
|
||||
case 'result_name':
|
||||
result = resultOptions;
|
||||
break;
|
||||
case 'qita_use_to':
|
||||
result = qitaUseTOOptions;
|
||||
break;
|
||||
case 'is_chuli':
|
||||
result = isChuliOptions;
|
||||
}
|
||||
result.forEach((item) => {
|
||||
if (item.value == value) {
|
||||
label = item.label;
|
||||
}
|
||||
});
|
||||
return label;
|
||||
};
|
||||
async 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 hanlderPreViewFile = (url) => {
|
||||
// if (url.indexOf('.pdf') !== -1) {
|
||||
// axios({
|
||||
// method: 'get',
|
||||
// url: `${VITE_GLOB_INFO_IMAGE_URL}/${url}`,
|
||||
// responseType: 'blob',
|
||||
// headers: {
|
||||
// 'Content-Disposition': 'inline',
|
||||
// },
|
||||
// })
|
||||
// .then((response) => {
|
||||
// let blob = new Blob([response.data], { type: 'application/pdf' });
|
||||
// let url = window.URL.createObjectURL(blob);
|
||||
// window.open(url);
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error(error);
|
||||
// });
|
||||
// } else {
|
||||
// window.open(`${VITE_GLOB_INFO_IMAGE_URL}/${url}`, '_blank');
|
||||
// }
|
||||
// };
|
||||
|
||||
///////// File Preview && Download ////////
|
||||
|
||||
import FilePreview from '@/components/Upload/src/components/FilePreview.vue';
|
||||
|
||||
const previewFileModalVisible = ref(false);
|
||||
const previewFileUrl = ref("");
|
||||
|
||||
const hanlderPreViewFile = (url)=>{
|
||||
previewFileUrl.value = `${VITE_GLOB_INFO_IMAGE_URL}/${url}`;
|
||||
previewFileModalVisible.value = true;
|
||||
}
|
||||
|
||||
const handlerDownloadFle = ()=>{
|
||||
window.open(previewFileUrl.value, 'mozillaTab');
|
||||
}
|
||||
|
||||
const handleCancelPreviewFile = ()=>{
|
||||
previewFileModalVisible.value = false;
|
||||
}
|
||||
///////
|
||||
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);
|
||||
}
|
||||
};
|
||||
const showImage = (url) => {
|
||||
if (url.indexOf('.png') !== -1 || url.indexOf('.jpg') !== -1 || url.indexOf('.jpeg') !== -1) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image-div {
|
||||
min-width: 340px;
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
.detail-container {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 120px);
|
||||
display: flex;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.detail-container::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 0;
|
||||
visibility: none;
|
||||
}
|
||||
.map-container {
|
||||
float: left;
|
||||
width: 45vw;
|
||||
height: calc(100vh - 100px);
|
||||
margin-right: 20px;
|
||||
}
|
||||
:deep(.ant-image) {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
:deep(.ant-image-preview-switch-left) {
|
||||
position: absolute;
|
||||
}
|
||||
:deep(.ant-image-preview-switch-right) {
|
||||
position: absolute;
|
||||
}
|
||||
.info-container {
|
||||
// float: left;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
: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;
|
||||
top: 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,929 @@
|
|||
<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="redLinePatchSourceOptions"
|
||||
@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-bottom:12px;">
|
||||
<div class="screen-item-label" style="margin-right: 10px;">下发时间</div>
|
||||
<a-range-picker
|
||||
:format="'YYYY-MM-DD'"
|
||||
allowClear
|
||||
style="width: 306px;"
|
||||
class="item-time-select"
|
||||
@change="(value) => emits('mapListScreenChange',value,'time')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-left: 13px;">
|
||||
<div class="screen-item-label">乡镇</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:120px;"
|
||||
v-model:value="props.infoScreenData.streetId"
|
||||
:options="streetsAreaOptions"
|
||||
@change="(value) => emits('mapListScreenChange',value,'streetId')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="screen-item" style="margin-right: 14px;">
|
||||
<a-input
|
||||
allowClear
|
||||
placeholder="请输入图斑编号"
|
||||
class="item-input"
|
||||
v-model:value="props.infoScreenData.mapNo"
|
||||
@change="(value) => emits('mapListScreenChange',value.target.value,'mapNo')"
|
||||
style="width:404px;"
|
||||
@press-enter="querysBtn"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-left: 10px;cursor: pointer;">
|
||||
<a-button
|
||||
class="item-button"
|
||||
type="primary"
|
||||
:icon="h(SearchOutlined)"
|
||||
@click="querysBtn">查询</a-button>
|
||||
<Icon style="font-size: 25px;margin-left: 10px;" icon="streamline:interface-time-reset-time-clock-reset-stopwatch-circle-measure-loading" @click="emits('resetScreenData')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-div">
|
||||
<div class="layout-div">
|
||||
<!-- <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('synchronoustime')">
|
||||
<div class="sift-label">下发时间</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('synchronoustime',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('synchronoustime',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="keyProblemSearchMapStatusOptions"></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="showDrawBack(item,true)">{{ drawBackSpan(item,true) }}</div>
|
||||
<div class="data-list-layout-div">
|
||||
<div class="data-list-title-div">
|
||||
<img src="/positioning.png" class="map-mark" style="cursor:pointer;" @click="locationFun(item)"/>
|
||||
<div class="label-div">
|
||||
<div class="item-label">{{item.countyname}}</div>
|
||||
<div class="item-sub-label">
|
||||
<div style="margin-right:12px;max-width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.streetname}}</div>
|
||||
<span>{{item.caseno}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-mark" v-if="item.isbuildname">{{item.isbuildname}}</div>
|
||||
</div>
|
||||
<div class="data-item-type-div" style="cursor:pointer;" @click="goAudit(item)">
|
||||
{{item.unitname}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list-info-div">
|
||||
<div class="info-layout-div">
|
||||
<div class="info-item" style="width: 130px;">
|
||||
<div class="info-label">总面积</div>
|
||||
<div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">农用地</div>
|
||||
<div class="info-data" :title="dataProcessing(item.nongyongdiarea)">{{dataProcessing(item.nongyongdiarea)}}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">耕地</div>
|
||||
<div class="info-data" :title="dataProcessing(item.gengdiarea)">{{dataProcessing(item.gengdiarea)}}</div>
|
||||
</div>
|
||||
<div class="info-item" style="width: 120px;">
|
||||
<div class="info-label">永农面积</div>
|
||||
<div class="info-data" :title="dataProcessing(item.yongjiujibennongtianarea)">{{dataProcessing(item.yongjiujibennongtianarea)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-layout-div">
|
||||
<!-- <span class="info-time">{{item.createdate}}</span> -->
|
||||
<div>
|
||||
<img src="@/assets/images/tiankongdi/collect-active.png" class="img-box" @click="collectItem(item)" v-if="item.fid"/>
|
||||
<img src="@/assets/images/tiankongdi/collect.png" class="img-box" @click="collectItem(item)" v-else/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-div">
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model:pageSize="props.pageSize"
|
||||
v-model:current="props.pageNo"
|
||||
:total="props.total"
|
||||
:show-total="total => `共 ${total} 条数据`"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
@change="changePage" />
|
||||
</div>
|
||||
<a-modal
|
||||
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"
|
||||
:auditData="auditData"
|
||||
@closeModel="closeMolder"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, defineEmits, defineProps, computed, h, watch } from "vue"
|
||||
import { SearchOutlined } from '@ant-design/icons-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { addTaskFavorite,getCaseInfoById,deleteTaskCase,getLoadStreet, getLoadDroneCaseInfoDetail } from '@/api/redlinesupervision/index';
|
||||
import {
|
||||
batchOptions,
|
||||
yearOptions,
|
||||
keyProblemSearchMapStatusOptions,
|
||||
redLinePatchSourceOptions,
|
||||
} 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'
|
||||
import {showDrawBack, drawBackSpan} from '@/views/demo/util'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const flowWfDataStore = flowStore();
|
||||
const emits = defineEmits([
|
||||
"closeShowInfo",
|
||||
"mapListScreenChange",
|
||||
"changeInfoPage",
|
||||
"getInfoList",
|
||||
"changeTask",
|
||||
"infoDataListSort",
|
||||
"collectChange",
|
||||
"resetScreenData",
|
||||
"changeInfoDataList",
|
||||
])
|
||||
const props = defineProps([
|
||||
"infoScreenData",
|
||||
"cityType",
|
||||
"municipalAreaOptions",
|
||||
"countiesAreaOptions",
|
||||
"communitiesAreaOptions",
|
||||
"pageNo",
|
||||
"pageSize",
|
||||
"total",
|
||||
"infoDataList"
|
||||
])
|
||||
const order = ref(0) // 0: 不排序 1: 升序 2: 降序
|
||||
const 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 auditData = 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)
|
||||
}
|
||||
|
||||
async function goAudit(record) {
|
||||
showDataId.value = record.id
|
||||
let data = await getDetail({ code: record.processcode });
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData;
|
||||
flowWfDataStore.setWfDataAll(wfData);
|
||||
auditOpen.value = true;
|
||||
processId.value = record.processid;
|
||||
taskId.value = record.taskid;
|
||||
type.value = record.type;
|
||||
auditData.value = record;
|
||||
}
|
||||
const prevData = async () => {
|
||||
if(prevShowDataId.value === 0){
|
||||
if(props.pageNo === 1 || props.total == 0){
|
||||
message.warning('已经是第一条数据了')
|
||||
return
|
||||
}
|
||||
getLoadDroneCaseInfoDetail(getParams({page: props.pageNo - 1})).then(async res => {
|
||||
emits('changeInfoDataList',res.items,res.total,props.pageNo - 1)
|
||||
handoffShow.value = false
|
||||
let record = res.items[res.items.length -1]
|
||||
let data = await getDetail({ code: record.processcode });
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData;
|
||||
flowWfDataStore.setWfDataAll(wfData);
|
||||
processId.value = record.processid;
|
||||
taskId.value = record.taskid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = res.items[res.items.length -1].id
|
||||
auditData.value = res.items[res.items.length -1];
|
||||
})
|
||||
return
|
||||
}else{
|
||||
showDataId.value = prevShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = props.infoDataList.find(item => item.id == showDataId.value)
|
||||
let data = await getDetail({ code: record.processcode });
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData;
|
||||
flowWfDataStore.setWfDataAll(wfData);
|
||||
processId.value = record.processid;
|
||||
taskId.value = record.taskid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
auditData.value = record;
|
||||
}
|
||||
const nextData = async () => {
|
||||
if(nextShowDataId.value === 0){
|
||||
if((Math.ceil(props.total / props.pageSize) <= props.pageNo) || props.total == 0){
|
||||
message.warning('已经是最后一条数据了')
|
||||
return
|
||||
}
|
||||
getLoadDroneCaseInfoDetail(getParams({page: props.pageNo + 1})).then(async res => {
|
||||
emits('changeInfoDataList',res.items,res.total,props.pageNo + 1)
|
||||
handoffShow.value = false
|
||||
let record = res.items[0]
|
||||
let data = await getDetail({ code: record.processcode });
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData;
|
||||
flowWfDataStore.setWfDataAll(wfData);
|
||||
processId.value = record.processid;
|
||||
taskId.value = record.taskid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
showDataId.value = res.items[0].id
|
||||
auditData.value = res.items[0]
|
||||
})
|
||||
return
|
||||
}else{
|
||||
showDataId.value = nextShowDataId.value
|
||||
}
|
||||
handoffShow.value = false
|
||||
let record = props.infoDataList.find(item => item.id == showDataId.value)
|
||||
let data = await getDetail({ code: record.processcode });
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData;
|
||||
flowWfDataStore.setWfDataAll(wfData);
|
||||
processId.value = record.processid;
|
||||
taskId.value = record.taskid;
|
||||
type.value = record.type;
|
||||
handoffShow.value = true
|
||||
auditData.value = record;
|
||||
}
|
||||
const closeMolder = () => {
|
||||
emits('getInfoList')
|
||||
}
|
||||
const getParams = (data) => {
|
||||
let result = {}
|
||||
let params = {
|
||||
landType: props.infoScreenData.landType, //0 农用地 1建设用地
|
||||
isOutTime: props.infoScreenData.isOverdue, //是否超期
|
||||
year: props.infoScreenData.year, //年
|
||||
tubanlaiyuan: props.infoScreenData.patchSource, //图斑来源
|
||||
picihao: props.infoScreenData.batch, //批次号
|
||||
streetid: props.infoScreenData.streetId,
|
||||
caseNo: props.infoScreenData.mapNo, //图版编号
|
||||
startTime: props.infoScreenData.startTime, // 下发开始时间
|
||||
endTime: props.infoScreenData.endTime, // 下发结束时间
|
||||
nowStatus: props.infoScreenData.mapStatus, // 当前状态
|
||||
isBuildName: props.infoScreenData.markType, // 标注
|
||||
tubanArea1: props.infoScreenData.mapAreaFirst, // 图斑面积1
|
||||
tubanArea2: props.infoScreenData.mapAreaLast, // 图斑面积2
|
||||
gengdiArea1: props.infoScreenData.arableAreaFirst, //耕地面积1
|
||||
gengdiArea2: props.infoScreenData.arableAreaLast, //耕地面积2
|
||||
page: props.pageNo,
|
||||
limit: props.pageSize,
|
||||
sortType: props.infoScreenData.sort,
|
||||
order: props.infoScreenData.order,
|
||||
type: props.infoScreenData.type,
|
||||
...data,
|
||||
}
|
||||
Object.keys(params).forEach(key => {
|
||||
if(params[key] !== '' && params[key] !== null){
|
||||
if(key === 'nowStatus'){
|
||||
result[key] = params[key].join(',')
|
||||
}else if(key === 'isOutTime'){
|
||||
if(params[key].length == 1){
|
||||
result[key] = params[key][0]
|
||||
}
|
||||
}else{
|
||||
result[key] = params[key]
|
||||
}
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.handoff{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 25px;
|
||||
}
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
min-width: 100vw;
|
||||
top: 0px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.ant-modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-modal-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
::v-deep .ant-modal {
|
||||
width: 100vw!important;
|
||||
top: 0px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
::v-deep .ant-modal-content{
|
||||
width: 100vw!important;
|
||||
background:red!important;
|
||||
}
|
||||
.map-list-content{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.rollback {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
.screen-div{
|
||||
padding: 10px 12px 20px 13px;
|
||||
display: flex;
|
||||
width:590px;
|
||||
flex-wrap: wrap;
|
||||
.screen-item{
|
||||
// width: 33.3%;
|
||||
display: flex;
|
||||
height: 39px;
|
||||
// margin-bottom: 12px;
|
||||
// font-family: Alibaba PuHuiTi;
|
||||
// font-weight: 500;
|
||||
// font-size: 17px;
|
||||
// color: #000000;
|
||||
.screen-item-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
// width: 53px;
|
||||
// padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 9px;
|
||||
// font-size: 15px;
|
||||
}
|
||||
:deep(.ant-select-selector){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
height: 39px;
|
||||
box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
|
||||
}
|
||||
.item-input{
|
||||
width:373px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
|
||||
}
|
||||
.item-time-select{
|
||||
box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
|
||||
:deep(input){
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.item-button{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
height:39px;
|
||||
width: 97px;
|
||||
background: #086DEC;
|
||||
// margin-left:12px;
|
||||
}
|
||||
}
|
||||
.screen-button-div{
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
width: 100%;
|
||||
button{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-radio-button-div{
|
||||
width:100%;
|
||||
padding: 33px 12px 8px 13px;
|
||||
.ant-radio-group{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
:deep(.ant-radio-button-wrapper-checked){
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500 !important;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF !important;
|
||||
line-height: 40px;
|
||||
background: #086DEC;
|
||||
}
|
||||
.radio-item{
|
||||
width:33%;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
user-select: none;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
}
|
||||
.sift-div{
|
||||
background:#fff;
|
||||
height: 77px;
|
||||
padding:19px 13px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.layout-div{
|
||||
display:flex;
|
||||
.back-button{
|
||||
font-size:22px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.interval-div{
|
||||
height:100%;
|
||||
width:1px;
|
||||
background:#EDEDED;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.sift-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right:15px;
|
||||
cursor:pointer;
|
||||
user-select:none;
|
||||
.sift-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
color: #000000;
|
||||
}
|
||||
.sift-icon{
|
||||
font-size: 9px;
|
||||
margin-left:5px;
|
||||
opacity: 0.53;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collect-div{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
}
|
||||
.data-list-div{
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
scrollbar-width: none; /* firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
.data-list-item{
|
||||
background:#fff;
|
||||
padding:20px 10px 10px 10px;
|
||||
// border-radius:6px;
|
||||
margin-bottom:1px;
|
||||
position: relative;
|
||||
.back-box{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:0;
|
||||
background: #EA1C06;
|
||||
padding: 3px 6px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
border-radius: 0px 0px 0px 8px;
|
||||
}
|
||||
.data-list-layout-div{
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
height: 45px;
|
||||
.data-list-title-div{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
.map-mark{
|
||||
width:17px;
|
||||
height:17px;
|
||||
}
|
||||
.label-div{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-right: 12px
|
||||
}
|
||||
.item-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 23px;
|
||||
color: #000000;
|
||||
margin-left: 9px;
|
||||
margin-right:10px;
|
||||
}
|
||||
.item-sub-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
}
|
||||
.item-mark{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
margin-left: 17px;
|
||||
color: #696969;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.data-item-type-div{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #696969;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor:pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
.data-list-info-div{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
height: 40px;
|
||||
.info-layout-div{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
.info-time{
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.info-item{
|
||||
display:flex;
|
||||
background: rgba(237, 237, 237, 0.55);
|
||||
align-items: center;
|
||||
width: 110px;
|
||||
border-radius: 7px;
|
||||
margin-right: 8px;
|
||||
height: 33px;
|
||||
justify-content: center;
|
||||
.info-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #959494;
|
||||
// width:45%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.info-data{
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #000000;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-list-item:nth-last-child(1){
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px
|
||||
}
|
||||
}
|
||||
.data-list-div::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
.pagination-div{
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal-content{
|
||||
padding:15px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 65px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
::v-deep .ant-modal{
|
||||
min-width:100vw!important;
|
||||
}
|
||||
.img-box{
|
||||
width: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mr-r-20{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.img-box.small{
|
||||
width: 18px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,484 @@
|
|||
<template>
|
||||
<div class="curb-spot-city">
|
||||
<div class="show-list">
|
||||
<a-spin :spinning="spinning">
|
||||
<!-- <AuditProgress
|
||||
v-if="!showInfo"
|
||||
:year="year"
|
||||
:batch="batch"
|
||||
:batchOptions="batchOptions"
|
||||
:yearOptions="yearOptions"
|
||||
:dataList="dataList"
|
||||
@auditProgressScreenChange="auditProgressScreenChange"
|
||||
@showInfo="changeShowInfo"
|
||||
/> -->
|
||||
<MapList
|
||||
:infoScreenData="infoScreenData"
|
||||
:cityType="cityType"
|
||||
:pageNo="pageNo"
|
||||
:pageSize="pageSize"
|
||||
:total="total"
|
||||
:infoDataList="infoDataList"
|
||||
:municipalAreaOptions="municipalAreaOptions"
|
||||
:countiesAreaOptions="countiesAreaOptions"
|
||||
:streetsAreaOptions="streetsAreaOptions"
|
||||
:communitiesAreaOptions="communitiesAreaOptions"
|
||||
@infoDataListSort="infoDataListSort"
|
||||
@changeInfoPage="changeInfoPage"
|
||||
@getInfoList="getInfoList"
|
||||
@mapListScreenChange="mapListScreenChange"
|
||||
@closeShowInfo="changeShowInfo"
|
||||
@changeTask="changeTask"
|
||||
@collectChange="collectChange"
|
||||
@resetScreenData="resetScreenData"
|
||||
@changeInfoDataList="changeInfoDataList"
|
||||
/>
|
||||
</a-spin>
|
||||
</div>
|
||||
<!-- <div id="showMap" class="map"></div> -->
|
||||
<MapboxMap
|
||||
:mapConfig="mapConfig"
|
||||
@handlerDrawComplete="handlerDrawComplete"
|
||||
@mapOnLoad="onMapboxLoad"
|
||||
ref="MapboxComponent"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch, defineAsyncComponent } from 'vue';
|
||||
import mapboxgl, { Map } from 'mapbox-gl';
|
||||
import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config';
|
||||
import AuditProgress from './AuditProgress/index.vue';
|
||||
import MapList from './MapList/index.vue';
|
||||
import {
|
||||
getLoadDroneCaseInfoCount,
|
||||
getLoadDroneCaseInfoDetail,
|
||||
getLoadParents,
|
||||
} from '@/api/redlinesupervision/index';
|
||||
import { batchOptions, yearOptions } from '@/views/utils/global';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
import { getGeom, getConfig } from '@/api/sys/layerManagement';
|
||||
import dayjs from 'dayjs';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
|
||||
const MapboxComponent = ref();
|
||||
const mapConfig = ref({ isShowMap: false });
|
||||
|
||||
function onMapboxLoad(): void {
|
||||
getConfig({ code: 'mapsetting' }).then((res) => {
|
||||
mapConfig.value = JSON.parse(res.codeValue);
|
||||
});
|
||||
}
|
||||
const 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,421 @@
|
|||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight>
|
||||
<div class="search-box">
|
||||
<BasicForm
|
||||
@register="registerForm"
|
||||
:labelWidth="100"
|
||||
:schemas="searchFormSchema"
|
||||
:actionColOptions="{ span: 24 }"
|
||||
>
|
||||
<template #dangqianzhuangtai>
|
||||
<a-select
|
||||
allowClear
|
||||
showArrow
|
||||
mode="multiple"
|
||||
v-model:value="nowStatus"
|
||||
:options="keyProblemMapStatusOptions"
|
||||
:max-tag-count="1"
|
||||
placeholder="请选择"
|
||||
@change="changeStatus"
|
||||
/>
|
||||
</template>
|
||||
<template #tubanmianji>
|
||||
<div class="scope-box">
|
||||
<a-input v-model:value="areaParams.tubanArea1" placeholder="请输入" />
|
||||
-
|
||||
<a-input v-model:value="areaParams.tubanArea2" placeholder="请输入" />
|
||||
</div>
|
||||
</template>
|
||||
<template #gengdimianji>
|
||||
<div class="scope-box">
|
||||
<a-input v-model:value="areaParams.gengdiArea1" placeholder="请输入" />
|
||||
-
|
||||
<a-input v-model:value="areaParams.gengdiArea2" placeholder="请输入" />
|
||||
</div>
|
||||
</template>
|
||||
<template #jibennongtianmianji>
|
||||
<div class="scope-box">
|
||||
<a-input v-model:value="areaParams.jibenArea1" placeholder="请输入" />
|
||||
-
|
||||
<a-input v-model:value="areaParams.jibenArea2" placeholder="请输入" />
|
||||
</div>
|
||||
</template>
|
||||
</BasicForm>
|
||||
</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', 'nongyongdiarea'].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">
|
||||
<div class="handoff">
|
||||
<a-button type="primary" style="margin-right: 25px" @click="prevData">上一条</a-button>
|
||||
<a-button type="primary" @click="nextData">下一条</a-button>
|
||||
</div>
|
||||
<ShowInfoModal :showInfoData="showInfoData" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
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/redlinesupervision/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import { getCaseInfoById, loadCaseInfoTuBanList } from '@/api/redlinesupervision/index';
|
||||
import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import dayjs from 'dayjs';
|
||||
import { keyProblemMapStatusOptions } from '@/utils/global';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
const nextShowDataId = ref();
|
||||
const prevShowDataId = ref();
|
||||
const showInfoId = ref();
|
||||
|
||||
const searchInfo = reactive<Recordable>({
|
||||
countyid: null,
|
||||
});
|
||||
const showInfoData = ref();
|
||||
const showInfoOpen = ref(false);
|
||||
const searchParams = ref({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
});
|
||||
const nowStatus = ref(undefined);
|
||||
const areaParams = ref({
|
||||
tubanArea1: null,
|
||||
tubanArea2: null,
|
||||
gengdiArea1: null,
|
||||
gengdiArea2: null,
|
||||
jibenArea1: null,
|
||||
jibenArea2: null,
|
||||
nowStatus: undefined,
|
||||
});
|
||||
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: 100,
|
||||
baseColProps: { span: 6 },
|
||||
actionColOptions: { span: 24 },
|
||||
autoSubmitOnEnter: true,
|
||||
submitFunc: handleSubmit,
|
||||
resetFunc: handleReset,
|
||||
autoSubmitOnEnter: 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/DroneCaseInfoSTHX/ExportCaseInfoTuBanList';
|
||||
fileName = '图斑列表统计报表' + new Date().getTime() + '.xls';
|
||||
} else if (exportType == 'shp') {
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSTHX/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) {
|
||||
showInfoId.value = record.Id;
|
||||
getDetailData();
|
||||
}
|
||||
function getDetailData() {
|
||||
getCaseInfoById({ id: showInfoId.value }).then((res) => {
|
||||
showInfoData.value = res;
|
||||
showInfoOpen.value = true;
|
||||
});
|
||||
}
|
||||
function handleChange(data) {
|
||||
searchParams.value.page = data.current;
|
||||
searchParams.value.limit = data.pageSize;
|
||||
tablePaginationRight.value = data;
|
||||
const querys = Object.assign(searchParams.value, areaParams.value);
|
||||
getTableData(querys);
|
||||
}
|
||||
function changeStatus(val) {
|
||||
areaParams.value.nowStatus = val.join(',');
|
||||
}
|
||||
function handleSubmit() {
|
||||
searchParams.value = getFieldsValue();
|
||||
searchParams.value.page = 1;
|
||||
tablePaginationRight.value.current = 1;
|
||||
searchParams.value.limit = tablePaginationRight.value.pageSize;
|
||||
const querys = Object.assign(searchParams.value, areaParams.value);
|
||||
getTableData(querys);
|
||||
}
|
||||
async function getTableData(querys) {
|
||||
if (querys.startTime && querys.endTime) {
|
||||
querys.startTime = dayjs(querys.startTime).format('YYYY-MM-DD');
|
||||
querys.endTime = dayjs(querys.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
setLoading(true);
|
||||
await loadCaseInfoTuBanList(querys).then((res) => {
|
||||
tableData.value = res.items;
|
||||
tablePaginationRight.value.total = res.total;
|
||||
setTableData(tableData.value);
|
||||
setPagination(tablePaginationRight.value);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
function handleReset() {
|
||||
searchParams.value = {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
};
|
||||
areaParams.value = {
|
||||
tubanArea1: null,
|
||||
tubanArea2: null,
|
||||
gengdiArea1: null,
|
||||
gengdiArea2: null,
|
||||
jibenArea1: null,
|
||||
jibenArea2: null,
|
||||
nowStatus: undefined,
|
||||
};
|
||||
nowStatus.value = undefined;
|
||||
tablePaginationRight.value.current = 1;
|
||||
getTableData(searchParams.value);
|
||||
}
|
||||
onMounted(() => {
|
||||
getTableData(searchParams.value);
|
||||
});
|
||||
watch(
|
||||
() => showInfoId.value,
|
||||
() => {
|
||||
let index = tableData.value.findIndex((item) => item.Id == showInfoId.value);
|
||||
getDetailData();
|
||||
if (index < tableData.value.length - 1) {
|
||||
nextShowDataId.value = tableData.value[index + 1].Id;
|
||||
} else {
|
||||
nextShowDataId.value = 0;
|
||||
}
|
||||
if (index > 0) {
|
||||
prevShowDataId.value = tableData.value[index - 1].Id;
|
||||
} else {
|
||||
prevShowDataId.value = 0;
|
||||
}
|
||||
},
|
||||
);
|
||||
async function prevData() {
|
||||
if (prevShowDataId.value === 0) {
|
||||
if (searchParams.value.page === 1) {
|
||||
message.warning('已经是第一条数据了');
|
||||
return;
|
||||
}
|
||||
searchParams.value.page--;
|
||||
tablePaginationRight.value.current--;
|
||||
await getTableData(searchParams.value);
|
||||
setTimeout(() => {
|
||||
showInfoId.value = tableData.value[tableData.value.length - 1].Id;
|
||||
}, 10);
|
||||
return;
|
||||
} else {
|
||||
showInfoId.value = prevShowDataId.value;
|
||||
}
|
||||
}
|
||||
async function nextData() {
|
||||
if (nextShowDataId.value === 0) {
|
||||
if (
|
||||
Math.ceil(tablePaginationRight.value.total / searchParams.value.limit) <=
|
||||
searchParams.value.page
|
||||
) {
|
||||
message.warning('已经是最后一条数据了');
|
||||
return;
|
||||
}
|
||||
searchParams.value.page++;
|
||||
tablePaginationRight.value.current++;
|
||||
await getTableData(searchParams.value);
|
||||
setTimeout(() => {
|
||||
showInfoId.value = tableData.value[0].Id;
|
||||
}, 10);
|
||||
} else {
|
||||
showInfoId.value = nextShowDataId.value;
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.scope-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.ant-input {
|
||||
width: 48% !important;
|
||||
max-width: 48%;
|
||||
min-width: 48%;
|
||||
}
|
||||
}
|
||||
::v-deep .ant-select-selection-overflow-item:first-child .ant-select-selection-item {
|
||||
width: 80px;
|
||||
}
|
||||
.handoff {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 25px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,292 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
import { getLoad } from '@/api/sys/sysDataItemDetail';
|
||||
import {
|
||||
patchSourceOptions,
|
||||
yearOptions,
|
||||
markTypeOptions,
|
||||
keyProblemMapStatusOptions,
|
||||
mapTypeOptions,
|
||||
} from '@/utils/global';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '图斑来源',
|
||||
dataIndex: 'tubanlaiyuan',
|
||||
},
|
||||
{
|
||||
title: '区县',
|
||||
dataIndex: 'countyname',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'streetname',
|
||||
},
|
||||
{
|
||||
title: '社区/村',
|
||||
dataIndex: 'communityname',
|
||||
},
|
||||
{
|
||||
title: '图斑编号',
|
||||
dataIndex: 'caseno',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '图斑类型',
|
||||
dataIndex: 'typename',
|
||||
},
|
||||
{
|
||||
title: '图斑面积',
|
||||
dataIndex: 'area',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '农用地面积',
|
||||
dataIndex: 'nongyongdiarea',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'gengdiarea',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '永农面积',
|
||||
dataIndex: 'yongjiujibennongtianarea',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '当前状态',
|
||||
dataIndex: 'handlestatusname',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '判定结果',
|
||||
dataIndex: 'isillegal',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '下发时间',
|
||||
dataIndex: 'identificationtime',
|
||||
},
|
||||
{
|
||||
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: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getLoad,
|
||||
params: { code: 'redlinetbly' },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'itemName',
|
||||
valueField: 'itemValue',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'picihao',
|
||||
label: '批次',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [],
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'typename',
|
||||
label: '图斑类型',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getLoad,
|
||||
params: { code: 'redlinetblx' },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'itemName',
|
||||
valueField: 'itemValue',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'isBuildName',
|
||||
label: '标注类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: markTypeOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
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: 'communityid',
|
||||
// label: '村',
|
||||
// component: 'ApiSelect',
|
||||
// colProps: { span: 4 },
|
||||
// componentProps: ({ formModel }) => {
|
||||
// return {
|
||||
// api: formModel.countyid && formModel.streetid && getChildrenTree,
|
||||
// params: { parentId: formModel.streetid },
|
||||
// // 接口参数
|
||||
// resultField: 'result',
|
||||
// labelField: 'name',
|
||||
// valueField: 'id',
|
||||
// };
|
||||
// },
|
||||
// },
|
||||
{
|
||||
field: 'nowStatus',
|
||||
label: '当前状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: keyProblemMapStatusOptions,
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
slot: 'dangqianzhuangtai',
|
||||
},
|
||||
{
|
||||
field: 'isIllegal',
|
||||
label: '判定结果',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: mapTypeOptions,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// field: 'weifaleixing',
|
||||
// label: '违法类型',
|
||||
// component: 'Select',
|
||||
// colProps: { span: 4 },
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// { label: '非农化违法用地', value: '0' },
|
||||
// { label: '非粮化违法用地', value: '1' },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
{
|
||||
field: 'measureName',
|
||||
label: '整改措施',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '拆除', value: '1' },
|
||||
{ label: '拆除复耕', value: '2' },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
// 增加图斑面积、耕地面积、永农面积的筛选项；
|
||||
{
|
||||
field: 'tubanmianji',
|
||||
label: '图斑面积',
|
||||
colProps: { span: 4 },
|
||||
slot: 'tubanmianji',
|
||||
},
|
||||
{
|
||||
field: 'gengdimianji',
|
||||
label: '耕地面积',
|
||||
colProps: { span: 4 },
|
||||
slot: 'gengdimianji',
|
||||
},
|
||||
{
|
||||
field: 'jibennongtianmianji',
|
||||
label: '永农面积',
|
||||
colProps: { span: 4 },
|
||||
slot: 'jibennongtianmianji',
|
||||
},
|
||||
{
|
||||
field: 'originalcaseno',
|
||||
label: '标识号',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: '[startTime, endTime]',
|
||||
label: '下发时间',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 5 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'caseNo',
|
||||
label: '图斑编号',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
|
|
@ -145,16 +145,37 @@
|
|||
<span
|
||||
class="subject_box_btn_div_span"
|
||||
v-html="renderedTitle(item.title)"
|
||||
:style="{
|
||||
:style="
|
||||
item.title.length > 6
|
||||
? {
|
||||
fontSize: `${fotSize * bi}px`,
|
||||
lineHeight: `30px`,
|
||||
top: `${(180 - (fotSize / 2) * spanWrap) * bi - 30}px`,
|
||||
width: `${fotSize * 6 * bi}px`,
|
||||
height: `${(fotSize + 3) * spanWrap * (bi + 2)}px`,
|
||||
}
|
||||
: {
|
||||
fontSize: `${fotSize * bi}px`,
|
||||
top: `${(180 - (fotSize / 2) * spanWrap) * bi}px`,
|
||||
width: `${fotSize * 6 * bi}px`,
|
||||
height: `${(fotSize + 3) * spanWrap * bi}px`,
|
||||
}"
|
||||
}
|
||||
"
|
||||
/>
|
||||
<img
|
||||
src="/subject_lindidiaocha/nochoose.png"
|
||||
:style="{
|
||||
:style="
|
||||
item.title.length > 6
|
||||
? {
|
||||
display: 'block',
|
||||
position: 'relative',
|
||||
top: `${(20 - fotSize * spanWrap) * bi - 64}px`,
|
||||
left: `${55 * bi}px`,
|
||||
width: `${100 * bi}px`,
|
||||
height: `${100 * bi}px`,
|
||||
zIndex: 2,
|
||||
}
|
||||
: {
|
||||
display: 'block',
|
||||
position: 'relative',
|
||||
top: `${(20 - fotSize * spanWrap) * bi}px`,
|
||||
|
|
@ -162,11 +183,23 @@
|
|||
width: `${100 * bi}px`,
|
||||
height: `${100 * bi}px`,
|
||||
zIndex: 2,
|
||||
}"
|
||||
}
|
||||
"
|
||||
/>
|
||||
<img
|
||||
:src="getImageUrl(item.imgUrl)"
|
||||
:style="{
|
||||
:style="
|
||||
item.title.length > 6
|
||||
? {
|
||||
display: 'block',
|
||||
position: 'relative',
|
||||
top: `${(-55 - fotSize * spanWrap) * bi - 64}px`,
|
||||
left: `${75 * bi}px`,
|
||||
width: `${60 * bi}px`,
|
||||
height: `${58 * bi}px`,
|
||||
zIndex: 3,
|
||||
}
|
||||
: {
|
||||
display: 'block',
|
||||
position: 'relative',
|
||||
top: `${(-55 - fotSize * spanWrap) * bi}px`,
|
||||
|
|
@ -174,18 +207,29 @@
|
|||
width: `${60 * bi}px`,
|
||||
height: `${58 * bi}px`,
|
||||
zIndex: 3,
|
||||
}"
|
||||
}
|
||||
"
|
||||
/>
|
||||
<img
|
||||
v-show="item.isHover"
|
||||
src="/subject_lindidiaocha/choose.png"
|
||||
:style="{
|
||||
:style="
|
||||
item.title.length > 6
|
||||
? {
|
||||
position: 'relative',
|
||||
top: `${(-127 - fotSize * spanWrap) * bi - 64}px`,
|
||||
width: `${70 * bi}px`,
|
||||
height: `${75 * bi}px`,
|
||||
zIndex: 4,
|
||||
}
|
||||
: {
|
||||
position: 'relative',
|
||||
top: `${(-127 - fotSize * spanWrap) * bi}px`,
|
||||
width: `${70 * bi}px`,
|
||||
height: `${75 * bi}px`,
|
||||
zIndex: 4,
|
||||
}"
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue