图斑调整优化

dianlixunjian
刘妍 2024-07-18 11:36:57 +08:00
parent 4dfce8d0dd
commit 734bb3e004
1 changed files with 461 additions and 447 deletions

View File

@ -147,7 +147,7 @@
</div>
</div>
<div class="data-list-div" style="padding-top: 1px;">
<div v-for="(item, index) in infoDataList" :key="index" :class="item.id == selectId ? 'data-list-item checked' : 'data-list-item'">
<div v-for="(item, index) in infoDataList" :key="index" :class="classFun(item)">
<div class="data-list-layout-div">
<div class="data-list-title-div">
<img
@ -156,7 +156,7 @@
style="cursor: pointer"
@click="locationFun(item)"
/>
<div class="label-div" @click="selectAreaId(item.id)">
<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>
@ -170,7 +170,7 @@
</div>
</div>
<div class="data-list-info-div">
<div class="info-layout-div" @click="selectAreaId(item.id)">
<div class="info-layout-div" @click="selectAreaId(item)">
<div class="info-item">
<div class="info-label">总面积</div>
<div class="info-data">{{ item.area }}</div>
@ -243,485 +243,499 @@
</template>
<script setup lang="ts">
import { ref, onMounted, defineEmits, computed, h } from 'vue';
import { SearchOutlined ,DownOutlined,SendOutlined} from '@ant-design/icons-vue';
import Icon from '@/components/Icon/Icon.vue';
import { getLoadDroneCaseInfoDetail,getCaseInfoById } from '@/api/tiankongdi/index';
import {
batchOptions,
yearOptions,
patchSourceOptions,
} from '@/views/demo/tiankongdi/curbspotcity/util';
import Amend from './amend.vue';
import { Empty ,Spin,message} from 'ant-design-vue';
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
import { ref, onMounted, defineEmits, computed, h } from 'vue';
import { SearchOutlined, DownOutlined, SendOutlined } from '@ant-design/icons-vue';
import Icon from '@/components/Icon/Icon.vue';
import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';
import {
batchOptions,
yearOptions,
patchSourceOptions,
} from '@/views/demo/tiankongdi/curbspotcity/util';
import Amend from './amend.vue';
import { Empty, message } from 'ant-design-vue';
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
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.sort === key && sort === order.value){
return true
}
return false
}
const infoDataList = ref([]);
const infoScreenData:any = ref({
year: null,
picihao: null,
batch: null,
countyid: null,
streetid: null,
geomid: null,
nowStatus: null,
is_illegal: null,
weifaleixing: null,
measure_name: null,
handle_status_id: null,
is_build_complete: null,
areaid: null,
level: null,
page: 1,
limit: 10,
sort: null,
order: null,
type: null,
});
const mapListScreenChange = (value, type) => {
console.log(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;
getStreetOrgs(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;
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.sort === key && sort === order.value) {
return true;
});
const showInfoData = ref();
onMounted(() => {
getInfoList();
}
return false;
};
});
//
async function locationFun(record) {
console.log(record);
emits('changeTask', record.geomid);
const infoDataList = ref([]);
const infoScreenData: any = ref({
year: null,
picihao: null,
batch: null,
countyid: null,
streetid: null,
geomid: null,
nowStatus: null,
is_illegal: null,
weifaleixing: null,
measure_name: null,
handle_status_id: null,
is_build_complete: null,
areaid: null,
level: null,
page: 1,
limit: 10,
sort: null,
order: null,
type: null,
});
const selectItem = ref();
const classFun = (item) => {
let string = 'data-list-item';
if (selectItem.value && item.id == selectItem.value.id) {
string += ' checked';
}
const changePage = (page, pageSize) => {
infoScreenData.value.page = page;
infoScreenData.value.limit = pageSize;
getInfoList();
};
//
const getCollectList = () => {
let collect = infoScreenData.value.type;
console.log(collect)
if (collect === '' || collect == null) {
infoScreenData.value.type = 1;
} else if (collect === 1) {
delete infoScreenData.value.type
}
getInfoList()
};
const dataListSort = (type) => {
order.value = (order.value + 1) % 3;
switch(order.value){
case 0:
delete infoScreenData.value.sort
delete 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
}
getInfoList();
};
const showInfo = (item) => {
getCaseInfoById({ id: item.processid }).then((res) => {
showInfoData.value = res;
showInfoOpen.value = true;
if (item.unitname == '已关闭') {
string += ' close-div';
}
return string;
};
const mapListScreenChange = (value, type) => {
switch (type) {
case 'year':
infoScreenData.value.year = value;
break;
case 'batch':
infoScreenData.value.picihao = value;
break;
case 'caseNo':
infoScreenData.value.caseNo = value;
break;
case 'countyid':
infoScreenData.value.countyid = value;
break;
case 'streetid':
infoScreenData.value.streetid = value;
break;
case 'isIllegal':
infoScreenData.value.isIllegal = value;
if (value !== 1) {
infoScreenData.value.weifaleixing = null;
infoScreenData.value.measureName = null;
}
break;
case 'illegalType':
infoScreenData.value.weifaleixing = value;
if (value !== 0) {
infoScreenData.value.measureName = null;
}
break;
case 'measureName':
infoScreenData.value.measureName = value;
break;
case 'isBuildName':
infoScreenData.value.isBuildName = value;
break;
case 'mapStatus':
if (value.length > 0) {
infoScreenData.value.isSplit = value.join(',');
} else {
delete infoScreenData.value.isSplit;
}
break;
}
};
const getInfoList = () => {
emits('changeSpin', true);
getLoadDroneCaseInfoDetail(infoScreenData.value)
.then((res) => {
infoDataList.value = res.items;
total.value = res.total;
})
.finally(() => {
emits('changeSpin', false);
});
};
const showInfoOpen = ref(false);
const openCollect = computed(() => {
if (!infoScreenData.value.type) return false;
return true;
});
const showInfoData = ref();
onMounted(() => {
getInfoList();
});
//
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 dataListSort = (type) => {
order.value = (order.value + 1) % 3;
switch (order.value) {
case 0:
delete infoScreenData.value.sort;
delete 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;
}
getInfoList();
};
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: pageNo.value,
};
function changeArea() {
if(!selectId.value){
message.warning('请选择一条数据进行飞地调整')
return
}
modalShow.value = true;
modalRecord.value = selectId.value;
}
const selectId =ref()
function selectAreaId(id){
selectId.value = id
}
const resetScreenData = () => {
infoScreenData.value = {
limit: pageSize.value,
page: pageNo.value,
}
getInfoList();
}
function closeModal() {
modalShow.value = false;
}
function handleSuccess() {}
const handleOperateClick = (e: Event) => {
console.log('click', e);
};
getInfoList();
};
function closeModal() {
modalShow.value = false;
}
function handleSuccess() {}
const handleOperateClick = (e: Event) => {
console.log('click', e);
};
</script>
<style lang="less" scoped>
.content {
height: 100%;
.content {
height: 100%;
display: flex;
flex-direction: column;
}
.screen-div {
padding: 10px 12px 20px 13px;
display: flex;
width: 590px;
flex-wrap: wrap;
.screen-item {
display: flex;
height: 39px;
.screen-item-label {
font-family: Alibaba PuHuiTi;
font-weight: 500;
font-size: 17px;
color: #000000;
line-height: 30px;
display: flex;
align-items: center;
margin-right: 9px;
}
:deep(.ant-select-selector) {
display: flex;
align-items: center;
font-family: HarmonyOS Sans;
font-weight: 500;
font-size: 19px;
color: #000000;
line-height: 30px;
height: 39px;
box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
}
.item-input {
width: 223px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
font-size: 17px;
color: #000000;
line-height: 30px;
box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
}
.item-time-select {
box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
:deep(input) {
font-family: HarmonyOS Sans;
font-weight: 500;
font-size: 15px;
color: #000000;
line-height: 30px;
}
}
.item-button {
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
background: #139af8;
margin-left: 4px;
height: 39px;
font-size: 17px;
}
}
.screen-button-div {
display: flex;
width: 100%;
button {
margin-right: 5px;
}
}
}
.pagination-div {
background: @component-background;
padding: 0 10px 10px;
}
.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;
}
.screen-div {
padding: 10px 12px 20px 13px;
.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;
width: 590px;
flex-wrap: wrap;
.screen-item {
.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;
height: 39px;
.screen-item-label {
align-items: center;
margin-right: 15px;
cursor: pointer;
user-select: none;
.sift-label {
font-family: Alibaba PuHuiTi;
font-weight: 500;
font-size: 17px;
color: #000000;
line-height: 30px;
display: flex;
align-items: center;
margin-right: 9px;
}
:deep(.ant-select-selector) {
display: flex;
align-items: center;
font-family: HarmonyOS Sans;
font-weight: 500;
font-size: 19px;
color: #000000;
line-height: 30px;
height: 39px;
box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
}
.item-input {
width: 223px;
.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;
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;
}
}
.data-item-type-div {
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);
font-size: 15px;
color: #696969;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.item-time-select {
box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
:deep(input) {
}
.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;
line-height: 30px;
margin-right: 5px;
}
}
.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 {
background: @component-background;
padding: 0 10px 10px;
}
.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{
.info-item {
display: flex;
background: rgba(237, 237, 237, 0.55);
align-items: center;
margin-right:15px;
cursor:pointer;
user-select:none;
.sift-label{
width: 110px;
border-radius: 7px;
margin-right: 8px;
height: 30px;
justify-content: center;
.info-label {
font-family: Alibaba PuHuiTi;
font-weight: 400;
font-size: 16px;
color: #959494;
// width:45%;
display: flex;
justify-content: center;
padding-right: 5px;
}
.info-data {
font-family: HarmonyOS Sans;
font-weight: 500;
font-size: 19px;
font-size: 16px;
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;
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;
}
}
.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: 16px;
color: #959494;
// width:45%;
display: flex;
justify-content: center;
padding-right: 5px;
}
.info-data {
font-family: HarmonyOS Sans;
font-weight: 500;
font-size: 16px;
color: #000000;
}
}
}
}
.data-list-item:nth-last-child(1) {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.data-list-item.checked{
background:#EFF3FC;
border: 1px solid #139AF8;
}
}
.data-list-item:nth-last-child(1) {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.data-list-item.checked {
border: 1px solid #139af8;
}
.data-list-item.close-div {
background: #eff3fc;
}
.data-list-item.checked.close-div {
background: #eff3fc;
border: 1px solid #139af8;
}
}
</style>