627 lines
18 KiB
Vue
627 lines
18 KiB
Vue
<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="patchSourceOptions"
|
|
@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 { patchSourceOptions } from '@/utils/global';
|
|
import { SearchOutlined} from '@ant-design/icons-vue'
|
|
import { getLoadTaskDetailList, deleteTaskCase, addTaskFavorite} from '@/api/keyproblem/keyissuesII/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>
|