图斑举证审核页面优化。
parent
b155c39b32
commit
d089186047
|
|
@ -395,9 +395,10 @@
|
|||
style: MapboxDefaultStyle,
|
||||
// maxZoom: props.mapConfig.maxZoom ? props.mapConfig.maxZoom:18,
|
||||
minZoom: props.mapConfig.minZoom ? props.mapConfig.minZoom:1,
|
||||
zoom: props.mapConfig.zoom ? props.mapConfig.zoom:12,
|
||||
zoom: props.mapConfig.zoom ? props.mapConfig.zoom:10,
|
||||
pitch:props.mapConfig.angle ? props.mapConfig.angle:0,
|
||||
center: props.mapConfig.center?.split(","),
|
||||
center: props.mapConfig.center?.split(",") ? props.mapConfig.center?.split(",") : [117.984425,35.270654],
|
||||
|
||||
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,14 +8,10 @@
|
|||
style="flex: 1"
|
||||
v-model:value="props.year"
|
||||
:options="yearOptions"
|
||||
@change="
|
||||
(value) => {
|
||||
emits('auditProgressScreenChange', value, 'year');
|
||||
}
|
||||
"
|
||||
@change="changeParam"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item">
|
||||
<!-- <div class="screen-item">
|
||||
<div class="screen-item-label">批次</div>
|
||||
<a-select
|
||||
allowClear
|
||||
|
|
@ -28,17 +24,18 @@
|
|||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<div class="data-title">审核进度</div>
|
||||
<!-- <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', item.areaid)"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="name-div">
|
||||
<div class="item-mark"></div>
|
||||
|
|
@ -48,6 +45,9 @@
|
|||
<spam style="color: #086dec">{{ item.count }}</spam>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
<a-empty :image="simpleImage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -55,13 +55,20 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, defineProps, defineEmits, toRefs } from 'vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { Empty } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps(['year', 'batch', 'batchOptions', 'yearOptions', 'dataList']);
|
||||
const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
|
||||
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
function changeParam(val) {
|
||||
emits('auditProgressScreenChange', val, 'year');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.screen-div {
|
||||
background: @component-background;
|
||||
padding: 10px;
|
||||
.screen-row {
|
||||
display: flex;
|
||||
|
|
@ -81,6 +88,8 @@
|
|||
.data-list {
|
||||
height: calc(100% - 52px);
|
||||
// background: darkgoldenrod;
|
||||
background: @component-background;
|
||||
margin-top: 10px;
|
||||
.data-title {
|
||||
height: 40px;
|
||||
background: #bab9b7;
|
||||
|
|
@ -93,6 +102,7 @@
|
|||
}
|
||||
.show-data-list-content {
|
||||
.data-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
|
|
@ -128,4 +138,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.no-data{
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,21 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<!-- 年份、批次、标注类型（在建、已建成、持续变化）、图版号 -->
|
||||
<div class="rollback">
|
||||
<Icon
|
||||
style="font-size: 20px; cursor: pointer"
|
||||
icon="ant-design:arrow-left-outlined"
|
||||
@click="emits('changeShowParent')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-div">
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label">年份</div>
|
||||
<a-select allowClear style="flex: 1" v-model:value="params.year" :options="yearOptions" />
|
||||
<a-select
|
||||
allowClear
|
||||
style="flex: 1"
|
||||
v-model:value="params.year"
|
||||
:options="props.yearOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item">
|
||||
<div class="screen-item-label">标注类型</div>
|
||||
|
|
@ -33,7 +44,12 @@
|
|||
</div> -->
|
||||
</div>
|
||||
<div class="data-list-div">
|
||||
<div v-for="(item, index) in dataList" :key="index" class="data-list-item">
|
||||
<div
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
class="data-list-item"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="select-mark"></div>
|
||||
<Icon
|
||||
style="font-size: 30px; color: #bf0000; cursor: pointer"
|
||||
|
|
@ -44,7 +60,7 @@
|
|||
<div class="item-info-div">
|
||||
<div class="item-info-id">{{ item.case_no }}</div>
|
||||
<div class="item-info-layout">
|
||||
<div>{{ item.address }}</div>
|
||||
<div class="item-info-address" :title="item.address">{{ item.address }}</div>
|
||||
<div class="item-info-batch">
|
||||
<a-tag color="success">{{ item.unitname }}</a-tag>
|
||||
</div>
|
||||
|
|
@ -85,8 +101,11 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
<a-empty :image="simpleImage" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-div">
|
||||
<div class="pagination-div" v-if="dataList.length > 0">
|
||||
<a-pagination
|
||||
size="small"
|
||||
:total="total"
|
||||
|
|
@ -117,17 +136,21 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onMounted, ref, defineEmits } from 'vue';
|
||||
import { StarOutlined } from '@ant-design/icons-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getLoadTaskDetailList } from '@/api/bootstraps/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';
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
const emits = defineEmits(['changeTask', 'changeShowParent']);
|
||||
|
||||
const flowWfDataStore = flowStore();
|
||||
|
||||
const props = defineProps(['areaId']);
|
||||
const props = defineProps(['areaId', 'yearOptions', 'year']);
|
||||
const processId = ref('');
|
||||
const taskId = ref('');
|
||||
const isRead: any = ref(0);
|
||||
|
|
@ -139,7 +162,7 @@
|
|||
level: null,
|
||||
areaid: props.areaId,
|
||||
geomid: null,
|
||||
year: null,
|
||||
year: props.year,
|
||||
is_build_complete: null,
|
||||
});
|
||||
const markTypeOptions = ref([
|
||||
|
|
@ -147,12 +170,7 @@
|
|||
{ label: '已建成', value: 1 },
|
||||
{ label: '持续变化', value: 2 },
|
||||
]);
|
||||
|
||||
const yearOptions = ref([
|
||||
{ label: '2022', value: '2022' },
|
||||
{ label: '2021', value: '2021' },
|
||||
{ label: '2020', value: '2020' },
|
||||
]);
|
||||
|
||||
const dataList = ref([]);
|
||||
const total = ref(0);
|
||||
async function getTaskList() {
|
||||
|
|
@ -179,6 +197,7 @@
|
|||
}
|
||||
async function locationFun(record) {
|
||||
console.log(record);
|
||||
emits('changeTask', record.geomid);
|
||||
}
|
||||
onMounted(() => {
|
||||
getTaskList();
|
||||
|
|
@ -188,14 +207,15 @@
|
|||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
height: calc(80vh);
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
height: 80%;
|
||||
height: 85%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -236,6 +256,7 @@
|
|||
padding: 10px;
|
||||
background: @component-background;
|
||||
margin-top: 10px;
|
||||
height: 60vh;
|
||||
.data-list-item {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
|
|
@ -268,6 +289,12 @@
|
|||
flex: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.item-info-address {
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.item-info-batch {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -326,5 +353,13 @@
|
|||
}
|
||||
.pagination-div {
|
||||
background: @component-background;
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
.no-data {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.rollback {
|
||||
background: @component-background;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,22 +11,43 @@
|
|||
@auditProgressScreenChange="auditProgressScreenChange"
|
||||
@showInfo="changeShowInfo"
|
||||
/>
|
||||
<MapList :areaId="areaId" v-else />
|
||||
<MapList
|
||||
@changeTask="changeTask"
|
||||
@changeShowParent="changeShowParent"
|
||||
:areaId="areaId"
|
||||
:year="year"
|
||||
:yearOptions="yearOptions"
|
||||
v-else
|
||||
/>
|
||||
</div>
|
||||
<div id="showMap" class="map"></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 } from 'vue';
|
||||
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/bootstraps/index';
|
||||
import { getGeom } from '@/api/sys/layerManagement';
|
||||
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 });
|
||||
|
||||
const showParent = ref(true);
|
||||
const year = ref('');
|
||||
const year = ref();
|
||||
const batch = ref('');
|
||||
const batchOptions = ref([
|
||||
{ value: '第一批', label: '第一批' },
|
||||
|
|
@ -43,6 +64,7 @@
|
|||
const dataList = ref([]);
|
||||
const areaId = ref('');
|
||||
const auditProgressScreenChange = (value, type) => {
|
||||
console.log(value, type);
|
||||
switch (type) {
|
||||
case 'year':
|
||||
year.value = value;
|
||||
|
|
@ -51,38 +73,80 @@
|
|||
batch.value = value;
|
||||
break;
|
||||
}
|
||||
getCountList();
|
||||
};
|
||||
const changeShowInfo = (value) => {
|
||||
console.log(value);
|
||||
showParent.value = false;
|
||||
areaId.value = value;
|
||||
};
|
||||
function changeShowParent() {
|
||||
console.log('dedededede')
|
||||
showParent.value = true;
|
||||
}
|
||||
async function getCountList() {
|
||||
const data = await getLoadTaskCount();
|
||||
const data = await getLoadTaskCount({
|
||||
year: year.value,
|
||||
});
|
||||
dataList.value = data;
|
||||
}
|
||||
let map: Map;
|
||||
onMounted(() => {
|
||||
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||||
map = initMap();
|
||||
getYearList();
|
||||
getCountList();
|
||||
});
|
||||
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],
|
||||
function getYearList() {
|
||||
let num = 10;
|
||||
const currentYear = new Date().getFullYear();
|
||||
// 存储年份数据的数组
|
||||
let list: any = [];
|
||||
// 获取当前年份
|
||||
year.value = Number(`${currentYear}`);
|
||||
list.push({
|
||||
value: Number(`${currentYear}`),
|
||||
label: Number(`${currentYear}`),
|
||||
});
|
||||
};
|
||||
// 获取后面几年的数据
|
||||
for (let i = 1; i <= num; i++) {
|
||||
list.push({
|
||||
value: Number(`${currentYear - i}`),
|
||||
label: Number(`${currentYear - i}`),
|
||||
});
|
||||
}
|
||||
yearOptions.value = list;
|
||||
}
|
||||
function changeTask(val) {
|
||||
console.log(val);
|
||||
let getGeomPrams = {
|
||||
TableName: 'drone_shp_data ',
|
||||
FieldName: 'gid',
|
||||
FieldValue: val,
|
||||
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('当前数据没有图斑！');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue