HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图斑调整优化

dianlixunjian
刘妍 2024-07-18 11:36:57 +08:00
parent 4dfce8d0dd
commit 734bb3e004
1 changed files with 461 additions and 447 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

318
src/views/demo/tiankongdi/changearea/MapList/index.vue
View File

@ -147,7 +147,7 @@
</div> </div>
</div> </div>
<div class="data-list-div" style="padding-top: 1px;"> <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-layout-div">
<div class="data-list-title-div"> <div class="data-list-title-div">
<img <img
@ -156,7 +156,7 @@
style="cursor: pointer" style="cursor: pointer"
@click="locationFun(item)" @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-label">{{ item.countyname }}</div>
<div class="item-sub-label"> <div class="item-sub-label">
<span style="margin-right: 12px">{{ item.streetname }}</span> <span style="margin-right: 12px">{{ item.streetname }}</span>
@ -170,7 +170,7 @@
</div> </div>
</div> </div>
<div class="data-list-info-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-item">
<div class="info-label">总面积</div> <div class="info-label">总面积</div>
<div class="info-data">{{ item.area }}亩</div> <div class="info-data">{{ item.area }}亩</div>
@ -243,25 +243,25 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, defineEmits, computed, h } from 'vue'; import { ref, onMounted, defineEmits, computed, h } from 'vue';
import { SearchOutlined ,DownOutlined,SendOutlined} from '@ant-design/icons-vue'; import { SearchOutlined, DownOutlined, SendOutlined } from '@ant-design/icons-vue';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { getLoadDroneCaseInfoDetail,getCaseInfoById } from '@/api/tiankongdi/index'; import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';
import { import {
batchOptions, batchOptions,
yearOptions, yearOptions,
patchSourceOptions, patchSourceOptions,
} from '@/views/demo/tiankongdi/curbspotcity/util'; } from '@/views/demo/tiankongdi/curbspotcity/util';
import Amend from './amend.vue'; import Amend from './amend.vue';
import { Empty ,Spin,message} from 'ant-design-vue'; import { Empty, message } from 'ant-design-vue';
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue'; import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
const modalShow = ref(false); const modalShow = ref(false);
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE; const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const pageSize = ref(10); const pageSize = ref(10);
const pageNo = ref(1); const pageNo = ref(1);
const total = ref(0) const total = ref(0);
const mapStatusOptions = ref([ const mapStatusOptions = ref([
{ {
label: '正常', label: '正常',
value: '正常', value: '正常',
@ -270,22 +270,19 @@
label: '分割后关闭', label: '分割后关闭',
value: '分割后关闭', value: '分割后关闭',
}, },
]) ]);
const modalRecord = ref(''); const modalRecord = ref('');
const emits = defineEmits([ const emits = defineEmits(['changeSpin', 'changeTask']);
'changeSpin', const order = ref(0); // 0: 不排序 1: 升序 2: 降序
'changeTask' const showSortMark = (key, sort) => {
]); if (infoScreenData.value.sort === key && sort === order.value) {
const order = ref(0); // 0: 不排序 1: 升序 2: 降序 return true;
const showSortMark = (key, sort) => {
if(infoScreenData.value.sort === key && sort === order.value){
return true
} }
return false return false;
} };
const infoDataList = ref([]); const infoDataList = ref([]);
const infoScreenData:any = ref({ const infoScreenData: any = ref({
year: null, year: null,
picihao: null, picihao: null,
batch: null, batch: null,
@ -305,10 +302,19 @@
sort: null, sort: null,
order: null, order: null,
type: null, type: null,
}); });
const selectItem = ref();
const mapListScreenChange = (value, type) => { const classFun = (item) => {
console.log(value,type) 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) { switch (type) {
case 'year': case 'year':
infoScreenData.value.year = value; infoScreenData.value.year = value;
@ -321,7 +327,6 @@
break; break;
case 'countyid': case 'countyid':
infoScreenData.value.countyid = value; infoScreenData.value.countyid = value;
getStreetOrgs(value);
break; break;
case 'streetid': case 'streetid':
infoScreenData.value.streetid = value; infoScreenData.value.streetid = value;
@ -346,113 +351,116 @@
infoScreenData.value.isBuildName = value; infoScreenData.value.isBuildName = value;
break; break;
case 'mapStatus': case 'mapStatus':
if(value.length > 0){ if (value.length > 0) {
infoScreenData.value.isSplit = value.join(',') infoScreenData.value.isSplit = value.join(',');
}else{ } else {
delete infoScreenData.value.isSplit delete infoScreenData.value.isSplit;
} }
break; break;
} }
}; };
const getInfoList = () => { const getInfoList = () => {
emits('changeSpin',true) emits('changeSpin', true);
getLoadDroneCaseInfoDetail(infoScreenData.value).then((res) => { getLoadDroneCaseInfoDetail(infoScreenData.value)
.then((res) => {
infoDataList.value = res.items; infoDataList.value = res.items;
total.value = res.total total.value = res.total;
}).finally(() => {
emits('changeSpin',false)
}) })
}; .finally(() => {
const showInfoOpen = ref(false); emits('changeSpin', false);
const openCollect = computed(() => { });
};
const showInfoOpen = ref(false);
const openCollect = computed(() => {
if (!infoScreenData.value.type) return false; if (!infoScreenData.value.type) return false;
return true; return true;
}); });
const showInfoData = ref(); const showInfoData = ref();
onMounted(() => { onMounted(() => {
getInfoList(); getInfoList();
});
});
// 查看位置 // 查看位置
async function locationFun(record) { async function locationFun(record) {
console.log(record); console.log(record);
emits('changeTask', record.geomid); emits('changeTask', record.geomid);
} }
const changePage = (page, pageSize) => { const changePage = (page, pageSize) => {
infoScreenData.value.page = page; infoScreenData.value.page = page;
infoScreenData.value.limit = pageSize; infoScreenData.value.limit = pageSize;
getInfoList(); getInfoList();
}; };
// 查看接受处理里收藏的 // 查看接受处理里收藏的
const getCollectList = () => { const getCollectList = () => {
let collect = infoScreenData.value.type; let collect = infoScreenData.value.type;
console.log(collect)
if (collect === '' || collect == null) { if (collect === '' || collect == null) {
infoScreenData.value.type = 1; infoScreenData.value.type = 1;
} else if (collect === 1) { } else if (collect === 1) {
delete infoScreenData.value.type 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(); getInfoList();
}; };
const showInfo = (item) => { 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) => { getCaseInfoById({ id: item.processid }).then((res) => {
showInfoData.value = res; showInfoData.value = res;
showInfoOpen.value = true; showInfoOpen.value = true;
}); });
}; };
function changeArea() { function changeArea() {
if(!selectId.value){ if (!selectItem.value) {
message.warning('请选择一条数据进行飞地调整') message.warning('请选择一条数据进行飞地调整');
return return;
}
if (selectItem.value.unitname == '已关闭') {
message.warning('已关闭的不能进行飞地调整！');
return;
} }
modalShow.value = true; modalShow.value = true;
modalRecord.value = selectId.value; modalRecord.value = selectItem.value.id;
} }
const selectId =ref() function selectAreaId(item) {
function selectAreaId(id){ selectItem.value = item;
selectId.value = id }
} const resetScreenData = () => {
const resetScreenData = () => {
infoScreenData.value = { infoScreenData.value = {
limit: pageSize.value, limit: pageSize.value,
page: pageNo.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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.content { .content {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.screen-div { .screen-div {
padding: 10px 12px 20px 13px; padding: 10px 12px 20px 13px;
display: flex; display: flex;
width: 590px; width: 590px;
@ -504,8 +512,8 @@
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
background: #139AF8; background: #139af8;
margin-left:4px; margin-left: 4px;
height: 39px; height: 39px;
font-size: 17px; font-size: 17px;
} }
@ -517,30 +525,30 @@
margin-right: 5px; margin-right: 5px;
} }
} }
} }
.pagination-div { .pagination-div {
background: @component-background; background: @component-background;
padding: 0 10px 10px; padding: 0 10px 10px;
} }
.no-data { .no-data {
padding: 20px 0; padding: 20px 0;
} }
.rollback { .rollback {
background: @component-background; background: @component-background;
padding: 10px; padding: 10px;
} }
::v-deep .ant-modal-content { ::v-deep .ant-modal-content {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
border-radius: 0px; border-radius: 0px;
} }
::v-deep .ant-modal .ant-modal-content { ::v-deep .ant-modal .ant-modal-content {
border-radius: 0px !important; border-radius: 0px !important;
} }
.full-modal { .full-modal {
.ant-modal { .ant-modal {
min-width: 100vw; min-width: 100vw;
top: 0px; top: 0px;
@ -554,60 +562,60 @@
.ant-modal-body { .ant-modal-body {
flex: 1; flex: 1;
} }
} }
.modal-content { .modal-content {
padding: 15px; padding: 15px;
width: 100%; width: 100%;
height: calc(100vh - 65px); height: calc(100vh - 65px);
overflow: auto; overflow: auto;
} }
.sift-div{ .sift-div {
background:#fff; background: #fff;
height: 77px; height: 77px;
padding:19px 13px; padding: 19px 13px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.layout-div{ .layout-div {
display:flex; display: flex;
.back-button{ .back-button {
font-size:22px; font-size: 22px;
cursor:pointer; cursor: pointer;
} }
.interval-div{ .interval-div {
height:100%; height: 100%;
width:1px; width: 1px;
background:#EDEDED; background: #ededed;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
.sift-item{ .sift-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right:15px; margin-right: 15px;
cursor:pointer; cursor: pointer;
user-select:none; user-select: none;
.sift-label{ .sift-label {
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
font-weight: 500; font-weight: 500;
font-size: 19px; font-size: 19px;
color: #000000; color: #000000;
} }
.sift-icon{ .sift-icon {
font-size: 9px; font-size: 9px;
margin-left:5px; margin-left: 5px;
opacity: 0.53; opacity: 0.53;
} }
} }
} }
.collect-div{ .collect-div {
display:flex; display: flex;
align-items:center; align-items: center;
} }
} }
.data-list-div { .data-list-div {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
padding: 10px; padding: 10px;
@ -719,9 +727,15 @@
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
} }
.data-list-item.checked{ .data-list-item.checked {
background:#EFF3FC; border: 1px solid #139af8;
border: 1px solid #139AF8;
} }
.data-list-item.close-div {
background: #eff3fc;
} }
.data-list-item.checked.close-div {
background: #eff3fc;
border: 1px solid #139af8;
}
}
</style> </style>