图斑调整优化
parent
4dfce8d0dd
commit
734bb3e004
|
|
@ -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,25 +243,25 @@
|
|||
</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 {
|
||||
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';
|
||||
} 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([
|
||||
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: '正常',
|
||||
|
|
@ -270,22 +270,19 @@
|
|||
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 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
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const infoDataList = ref([]);
|
||||
const infoScreenData:any = ref({
|
||||
const infoDataList = ref([]);
|
||||
const infoScreenData: any = ref({
|
||||
year: null,
|
||||
picihao: null,
|
||||
batch: null,
|
||||
|
|
@ -305,10 +302,19 @@
|
|||
sort: null,
|
||||
order: null,
|
||||
type: null,
|
||||
});
|
||||
|
||||
const mapListScreenChange = (value, type) => {
|
||||
console.log(value,type)
|
||||
});
|
||||
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;
|
||||
|
|
@ -321,7 +327,6 @@
|
|||
break;
|
||||
case 'countyid':
|
||||
infoScreenData.value.countyid = value;
|
||||
getStreetOrgs(value);
|
||||
break;
|
||||
case 'streetid':
|
||||
infoScreenData.value.streetid = value;
|
||||
|
|
@ -346,113 +351,116 @@
|
|||
infoScreenData.value.isBuildName = value;
|
||||
break;
|
||||
case 'mapStatus':
|
||||
if(value.length > 0){
|
||||
infoScreenData.value.isSplit = value.join(',')
|
||||
}else{
|
||||
delete infoScreenData.value.isSplit
|
||||
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) => {
|
||||
};
|
||||
const getInfoList = () => {
|
||||
emits('changeSpin', true);
|
||||
getLoadDroneCaseInfoDetail(infoScreenData.value)
|
||||
.then((res) => {
|
||||
infoDataList.value = res.items;
|
||||
total.value = res.total
|
||||
}).finally(() => {
|
||||
emits('changeSpin',false)
|
||||
total.value = res.total;
|
||||
})
|
||||
};
|
||||
const showInfoOpen = ref(false);
|
||||
const openCollect = computed(() => {
|
||||
.finally(() => {
|
||||
emits('changeSpin', false);
|
||||
});
|
||||
};
|
||||
const showInfoOpen = ref(false);
|
||||
const openCollect = computed(() => {
|
||||
if (!infoScreenData.value.type) return false;
|
||||
return true;
|
||||
});
|
||||
const showInfoData = ref();
|
||||
onMounted(() => {
|
||||
});
|
||||
const showInfoData = ref();
|
||||
onMounted(() => {
|
||||
getInfoList();
|
||||
|
||||
});
|
||||
});
|
||||
// 查看位置
|
||||
async function locationFun(record) {
|
||||
async function locationFun(record) {
|
||||
console.log(record);
|
||||
emits('changeTask', record.geomid);
|
||||
}
|
||||
const changePage = (page, pageSize) => {
|
||||
}
|
||||
const changePage = (page, pageSize) => {
|
||||
infoScreenData.value.page = page;
|
||||
infoScreenData.value.limit = pageSize;
|
||||
getInfoList();
|
||||
};
|
||||
// 查看接受处理里收藏的
|
||||
const getCollectList = () => {
|
||||
};
|
||||
// 查看接受处理里收藏的
|
||||
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
|
||||
delete infoScreenData.value.type;
|
||||
}
|
||||
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) => {
|
||||
showInfoData.value = res;
|
||||
showInfoOpen.value = true;
|
||||
});
|
||||
};
|
||||
function changeArea() {
|
||||
if(!selectId.value){
|
||||
message.warning('请选择一条数据进行飞地调整')
|
||||
return
|
||||
};
|
||||
function changeArea() {
|
||||
if (!selectItem.value) {
|
||||
message.warning('请选择一条数据进行飞地调整');
|
||||
return;
|
||||
}
|
||||
if (selectItem.value.unitname == '已关闭') {
|
||||
message.warning('已关闭的不能进行飞地调整！');
|
||||
return;
|
||||
}
|
||||
modalShow.value = true;
|
||||
modalRecord.value = selectId.value;
|
||||
}
|
||||
const selectId =ref()
|
||||
function selectAreaId(id){
|
||||
selectId.value = id
|
||||
}
|
||||
const resetScreenData = () => {
|
||||
modalRecord.value = selectItem.value.id;
|
||||
}
|
||||
function selectAreaId(item) {
|
||||
selectItem.value = item;
|
||||
}
|
||||
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 {
|
||||
.content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.screen-div {
|
||||
}
|
||||
.screen-div {
|
||||
padding: 10px 12px 20px 13px;
|
||||
display: flex;
|
||||
width: 590px;
|
||||
|
|
@ -504,8 +512,8 @@
|
|||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
background: #139AF8;
|
||||
margin-left:4px;
|
||||
background: #139af8;
|
||||
margin-left: 4px;
|
||||
height: 39px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
|
@ -517,30 +525,30 @@
|
|||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination-div {
|
||||
}
|
||||
.pagination-div {
|
||||
background: @component-background;
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
.no-data {
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.rollback {
|
||||
}
|
||||
.rollback {
|
||||
background: @component-background;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ant-modal-content {
|
||||
::v-deep .ant-modal-content {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ant-modal .ant-modal-content {
|
||||
::v-deep .ant-modal .ant-modal-content {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.full-modal {
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
min-width: 100vw;
|
||||
top: 0px;
|
||||
|
|
@ -554,60 +562,60 @@
|
|||
.ant-modal-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
}
|
||||
.modal-content {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 65px);
|
||||
overflow: auto;
|
||||
}
|
||||
.sift-div{
|
||||
background:#fff;
|
||||
}
|
||||
.sift-div {
|
||||
background: #fff;
|
||||
height: 77px;
|
||||
padding:19px 13px;
|
||||
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;
|
||||
.layout-div {
|
||||
display: flex;
|
||||
.back-button {
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.interval-div{
|
||||
height:100%;
|
||||
width:1px;
|
||||
background:#EDEDED;
|
||||
.interval-div {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: #ededed;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.sift-item{
|
||||
.sift-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right:15px;
|
||||
cursor:pointer;
|
||||
user-select:none;
|
||||
.sift-label{
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.sift-label {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
color: #000000;
|
||||
}
|
||||
.sift-icon{
|
||||
.sift-icon {
|
||||
font-size: 9px;
|
||||
margin-left:5px;
|
||||
margin-left: 5px;
|
||||
opacity: 0.53;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collect-div{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
.collect-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.data-list-div {
|
||||
}
|
||||
.data-list-div {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
|
|
@ -719,9 +727,15 @@
|
|||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
.data-list-item.checked{
|
||||
background:#EFF3FC;
|
||||
border: 1px solid #139AF8;
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue