矿产专题 工作管理 demo
Zhufu
1 year ago
parent
513d656798
commit
0e5f0e6cb6
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="pagination-div">
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model:pageSize="props.pageData.limit"
|
||||
v-model:current="props.pageData.page"
|
||||
:total="props.total"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
@change="changePage" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits } from "vue"
|
||||
|
||||
const props = defineProps(["pageData","total"])
|
||||
const emits = defineEmits(["changePageData"])
|
||||
|
||||
const changePage = (page, pageSize) => {
|
||||
console.log(page,pageSize)
|
||||
emits('changePageData',page,pageSize)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pagination-div{
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div class="screen-div">
|
||||
<div class="screen-item" style="margin-right:20px;margin-bottom:12px;">
|
||||
<div class="screen-item-label">年份</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:99px;"
|
||||
v-model:value="props.screenData.year"
|
||||
:options="yearOptions"
|
||||
@change="(value) => emits('screenDataChange',value,'year')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right:17px;margin-bottom:12px;">
|
||||
<div class="screen-item-label" style="margin-right: 11px;">图斑来源</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:144px;"
|
||||
v-model:value="props.screenData.tubanlaiyuan"
|
||||
:options="polygonSourceOptions"
|
||||
@change="(value) => emits('screenDataChange',value,'tubanlaiyuan')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom:12px;">
|
||||
<div class="screen-item-label">县区</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:120px;"
|
||||
v-model:value="props.screenData.countyid"
|
||||
:options="countiesOptions"
|
||||
@change="(value) => changeCounties(value)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="screen-item" style="margin-right: 13px;margin-bottom:12px;">
|
||||
<div class="screen-item-label">乡镇</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width:120px;"
|
||||
v-model:value="props.screenData.streetId"
|
||||
:options="streetsOptions"
|
||||
@change="(value) => emits('screenDataChange',value,'streetId')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom:12px;">
|
||||
<div class="screen-item-label">处理状态</div>
|
||||
<a-select
|
||||
allowClear
|
||||
mode="multiple"
|
||||
style="width:312px;"
|
||||
v-model:value="props.screenData.nowStatus"
|
||||
:options="statusOptions"
|
||||
:max-tag-count="1"
|
||||
@change="(value) => emits('screenDataChange',value,'nowStatus')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right: 13px;margin-bottom:12px;">
|
||||
<div class="screen-item-label">图斑类型</div>
|
||||
<a-select
|
||||
allowClear
|
||||
style="width: 97px"
|
||||
:options="polygonTypeOptions"
|
||||
v-model:value="props.screenData.typename"
|
||||
@change="(value) => emits('screenDataChange',value,'typename')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-bottom:12px;">
|
||||
<div class="screen-item-label" style="margin-right: 10px;">下发时间</div>
|
||||
<a-range-picker
|
||||
:format="'YYYY-MM-DD'"
|
||||
allowClear
|
||||
style="width: 300px;"
|
||||
class="item-time-select"
|
||||
v-model:value="props.screenData.time"
|
||||
@change="(value) => emits('screenDataChange',value,'time')"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-right: 14px;">
|
||||
<a-input
|
||||
allowClear
|
||||
placeholder="请输入图斑编号"
|
||||
class="item-input"
|
||||
v-model:value="props.screenData.mapNo"
|
||||
@change="(value) => emits('screenDataChange',value.target.value,'mapNo')"
|
||||
style="width:404px;"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen-item" style="margin-left: 10px;cursor: pointer;">
|
||||
<a-button
|
||||
class="item-button"
|
||||
type="primary"
|
||||
:icon="h(SearchOutlined)"
|
||||
@click="emits('search')">查询</a-button>
|
||||
<Icon style="font-size: 25px;margin-left: 10px;" icon="streamline:interface-time-reset-time-clock-reset-stopwatch-circle-measure-loading" @click="emits('resetScreenData')" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits, ref, h } from "vue"
|
||||
import { SearchOutlined } from "@ant-design/icons-vue"
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { yearOptions } from '@/utils/global'
|
||||
import { polygonSourceOptions, polygonTypeOptions, countiesOptions, statusOptions } from '@/components/illegalmining/util'
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
|
||||
const props = defineProps(["screenData"])
|
||||
const emits = defineEmits(["screenDataChange","search","resetScreenData"])
|
||||
|
||||
const streetsOptions = ref([])
|
||||
|
||||
const changeCounties = (value) => {
|
||||
emits('screenDataChange',value,'countyid')
|
||||
emits('screenDataChange','','streetId')
|
||||
if(value){
|
||||
getChildrenTree({ parentId: value }).then(res => {
|
||||
let data = res
|
||||
streetsOptions.value = data.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.screen-div{
|
||||
padding: 22px 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:373px;
|
||||
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;
|
||||
font-size: 19px;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
height:39px;
|
||||
width: 97px;
|
||||
background: #086DEC;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="data-list-div" style="padding-top: 1px;">
|
||||
<div v-for="(item, index) in props.dataList" :key="index" class="data-list-item">
|
||||
<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" style="cursor:pointer;" @click="locationFun(item)"/>
|
||||
<div class="label-div">
|
||||
<div class="item-label">{{item.countyname}}</div>
|
||||
<div class="item-sub-label">
|
||||
<span style="margin-right:12px;">{{item.streetname}}</span>
|
||||
<span>{{item.caseno}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-mark" v-if="item.isbuildname">{{item.isbuildname}}</div>
|
||||
</div>
|
||||
<div class="data-item-type-div" style="cursor:pointer;" @click="goAudit(item)">
|
||||
{{item.unitname}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list-info-div">
|
||||
<div class="info-layout-div">
|
||||
<div class="info-item" style="width: 130px;">
|
||||
<div class="info-label">总面积</div>
|
||||
<div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
|
||||
</div>
|
||||
<div class="info-item" style="width: 130px;">
|
||||
<div class="info-label">违法</div>
|
||||
<div class="info-data" :title="dataProcessing(item.nongyongdiarea)">{{dataProcessing(item.nongyongdiarea)}}</div>
|
||||
</div>
|
||||
<div class="info-item" style="width: 130px;">
|
||||
<div class="info-label">耕地</div>
|
||||
<div class="info-data" :title="dataProcessing(item.gengdiarea)">{{dataProcessing(item.gengdiarea)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-layout-div">
|
||||
<div>
|
||||
<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>
|
||||
<a-modal
|
||||
width="100%"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="auditOpen"
|
||||
title="接收办理"
|
||||
footer=""
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<template #footer> </template>
|
||||
<div class="handoff">
|
||||
<a-button
|
||||
type="primary"
|
||||
style="margin-right: 25px;"
|
||||
@click="prevData"
|
||||
>上一条</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="nextData"
|
||||
>下一条</a-button>
|
||||
</div>
|
||||
<Audit
|
||||
v-if="handoffShow"
|
||||
ref="posRef"
|
||||
:processId="processId"
|
||||
:taskId="taskId"
|
||||
:isRead="isRead"
|
||||
:type="type"
|
||||
@closeModel="closeMolder"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits, ref } from "vue"
|
||||
import {showDrawBack, drawBackSpan} from '@/views/demo/util'
|
||||
import { dataProcessing } from '@/views/demo/tiankongdi/util'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo';
|
||||
import { Audit } from '@/views/demo/workflow/task/process/page';
|
||||
// TODO 更换接口
|
||||
import { addTaskFavorite,deleteTaskCase } from '@/api/tiankongdi/index';
|
||||
|
||||
const userStore = useUserStore()
|
||||
const flowWfDataStore = flowStore();
|
||||
|
||||
const props = defineProps(["dataList"])
|
||||
const emits = defineEmits(["changeTask","query"])
|
||||
|
||||
const mapNo = ref('')
|
||||
const searchList = ref([])
|
||||
const showDataId = ref()
|
||||
const auditOpen = ref(false);
|
||||
const processId = ref('');
|
||||
const taskId = ref('');
|
||||
const type = ref('');
|
||||
const isRead: any = ref(0);
|
||||
const handoffShow = ref(true)
|
||||
|
||||
const locationFun = (record) => {
|
||||
console.log(record);
|
||||
emits('changeTask', record.geomid);
|
||||
}
|
||||
const goAudit = async (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.taskid;
|
||||
type.value = record.type;
|
||||
}
|
||||
const collectItem = (item) => {
|
||||
console.log(item,userStore.getUserInfo)
|
||||
if(item.fid){
|
||||
cancelCollectItem(item)
|
||||
return
|
||||
}
|
||||
let userInfo = userStore.getUserInfo
|
||||
let params = {
|
||||
taskId: item.taskid,
|
||||
favoriteUserId: userInfo.id
|
||||
}
|
||||
addTaskFavorite(params).then(res => {
|
||||
console.log(res)
|
||||
message.success('收藏成功')
|
||||
emits('query')
|
||||
})
|
||||
}
|
||||
const cancelCollectItem = (item) => {
|
||||
deleteTaskCase(item.fid).then(res => {
|
||||
message.success('取消收藏成功')
|
||||
emits('query')
|
||||
})
|
||||
}
|
||||
const prevData = () => {
|
||||
}
|
||||
const nextData = () => {
|
||||
}
|
||||
const closeMolder = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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:20px 10px 10px 10px;
|
||||
// border-radius:6px;
|
||||
margin-bottom:1px;
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.item-mark{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
margin-left: 17px;
|
||||
color: #696969;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
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: 8px;
|
||||
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
|
||||
}
|
||||
}
|
||||
.data-list-div::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
.img-box{
|
||||
width: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.handoff{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 25px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="sift-div">
|
||||
<div class="layout-div">
|
||||
<div class="sift-item" @click="dataListSort('area')">
|
||||
<div class="sift-label">总面积</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('gengdi_area')">
|
||||
<div class="sift-label">耕地面积</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('gengdi_area',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sift-item" @click="dataListSort('synchronoustime')">
|
||||
<div class="sift-label">下发时间</div>
|
||||
<div class="sift-icon">
|
||||
<div :style="`${showSortMark('synchronoustime',1)? 'color: #086DEC;': ''}`">▲</div>
|
||||
<div :style="`${showSortMark('synchronoustime',2)? 'color: #086DEC;': ''}`">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collect-div">
|
||||
<img src="@/assets/images/tiankongdi/collect-active.png" class="img-box" @click="getCollectList(0)" v-if="openCollect"/>
|
||||
<img src="@/assets/images/tiankongdi/collect.png" class="img-box" @click="getCollectList(1)" v-else/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits, ref, computed } from "vue"
|
||||
import { orderUtils } from '@/components/illegalmining/util'
|
||||
|
||||
const props = defineProps(["sortData","screenData"])
|
||||
const emits = defineEmits(["changeSort","collectChange"])
|
||||
|
||||
const order = ref(0) // 0: 不排序 1: 升序 2: 降序
|
||||
const openCollect = computed(() => {
|
||||
if(props.screenData.type === '') return false
|
||||
return true
|
||||
})
|
||||
|
||||
const dataListSort = (type) => {
|
||||
if(props.sortData.sortType === '' || props.sortData.sortType === type){
|
||||
order.value = (order.value + 1) % 3
|
||||
}else{
|
||||
order.value = 1
|
||||
}
|
||||
let str_order = orderUtils[order.value]
|
||||
if(order.value == 0){
|
||||
type = null
|
||||
}
|
||||
emits('changeSort', type, str_order)
|
||||
}
|
||||
const showSortMark = (key, sort) => {
|
||||
if(props.sortData.sortType === key && sort === order.value){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
const getCollectList = (type) => {
|
||||
if(type == 0){
|
||||
type = ""
|
||||
}
|
||||
emits('collectChange', type)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right:15px;
|
||||
cursor:pointer;
|
||||
user-select:none;
|
||||
.sift-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
color: #000000;
|
||||
}
|
||||
.sift-icon{
|
||||
font-size: 9px;
|
||||
margin-left:5px;
|
||||
opacity: 0.53;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collect-div{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
}
|
||||
.img-box{
|
||||
width: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
/**
|
||||
* 年份 year
|
||||
* 图斑来源 tubanlaiyuan
|
||||
* 图斑类型 typename
|
||||
* 县区 countyid
|
||||
* 乡镇 streetid
|
||||
* 处理状态 nowStatus
|
||||
* 下发时间段 startTime-endTime
|
||||
* 图斑号 caseNo
|
||||
*/
|
||||
// 图斑来源
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
const counties = await getChildrenTree({ parentId: 371300 })
|
||||
console.log(counties,'counties')
|
||||
export const polygonSourceOptions= [
|
||||
{ label: '群众举报', value: '群众举报'},
|
||||
{ label: '舆情', value: '舆情'},
|
||||
{ label: '12345', value: '12345'},
|
||||
{ label: '矿产卫片', value: '矿产卫片'},
|
||||
{ label: '无人机巡查', value: '无人机巡查'},
|
||||
{ label: '其他部门移交', value: '其他部门移交'},
|
||||
{ label: '上级领导交班', value: '上级领导交班'},
|
||||
{ label: '县级自查上报', value: '县级自查上报'},
|
||||
]
|
||||
// 图斑类型
|
||||
export const polygonTypeOptions= [
|
||||
{ label: '开采', value: '开采'},
|
||||
{ label: '加工', value: '加工'},
|
||||
]
|
||||
// 当前状态
|
||||
export const statusOptions = [
|
||||
{ label: '待填报', value: '1'},
|
||||
{ label: '待整改', value: '2'},
|
||||
{ label: '待县级审核', value: '3'},
|
||||
{ label: '待市级审核', value: '4'},
|
||||
{ label: '待查处', value: '5'},
|
||||
{ label: '查处待县级审核', value: '6'},
|
||||
{ label: '查处待市级审核', value: '7'},
|
||||
{ label: '查处后待整改', value: '8'},
|
||||
{ label: '整改后待县级审核', value: '9'},
|
||||
{ label: '整改后待市级审核', value: '10'},
|
||||
{ label: '已归档', value: '99'},
|
||||
]
|
||||
// 整改类型
|
||||
export const rectifyTypeOptions = [
|
||||
{ label: '取缔', value: '取缔'},
|
||||
{ label: '保留', value: '保留'},
|
||||
]
|
||||
// 违法类型(开采)
|
||||
export const mineIllegalTypeOptions = [
|
||||
{ label: '无证开采类', value: '无证开采类'},
|
||||
{ label: '越界开采类', value: '越界开采类'},
|
||||
{ label: '持证矿山类', value: '持证矿山类'},
|
||||
{ label: '以项目名义类', value: '以项目名义类'},
|
||||
{ label: '其他', value: '其他'},
|
||||
]
|
||||
// 违法类型(加工)
|
||||
export const processIllegalTypeOptions = [
|
||||
{ label: '违法占地', value: '违法占地'},
|
||||
{ label: '购销非法开采矿产品', value: '购销非法开采矿产品'},
|
||||
{ label: '其他', value: '其他'},
|
||||
]
|
||||
export const countiesOptions = counties.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
export const orderUtils = {
|
||||
0: null,
|
||||
1: 'asc',
|
||||
2: 'desc',
|
||||
}
|
||||
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="out-div">
|
||||
<SearchComponent
|
||||
:screenData="screenData"
|
||||
@screenDataChange="screenDataChange"
|
||||
@search="search"
|
||||
@resetScreenData="resetScreenData"/>
|
||||
<SortComponent
|
||||
:sortData="sortData"
|
||||
:screenData="screenData"
|
||||
@changeSort="changeSort"
|
||||
@collectChange="collectChange"/>
|
||||
<ShowListComponent
|
||||
:dataList="dataList"
|
||||
@changeTask="changeTask"
|
||||
@query="query"/>
|
||||
<PaginationComponent
|
||||
:pageData="pageData"
|
||||
:total="total"
|
||||
@changePageData="changePageData"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, defineEmits } from "vue"
|
||||
import SearchComponent from '@/components/illegalmining/SearchComponent/index.vue'
|
||||
import SortComponent from '@/components/illegalmining/SortComponent/index.vue'
|
||||
import ShowListComponent from '@/components/illegalmining/ShowListComponent/index.vue'
|
||||
import PaginationComponent from '@/components/illegalmining/PaginationComponent/index.vue'
|
||||
import dayjs from 'dayjs';
|
||||
// TODO 换接口
|
||||
import { getLoadDroneCaseInfoDetail } from '@/api/tiankongdi/index';
|
||||
|
||||
const emits = defineEmits(['changeLoading','changeTask'])
|
||||
|
||||
const screenData = ref({
|
||||
year: '',
|
||||
tubanlaiyuan: '',
|
||||
typename: '',
|
||||
countyid:'',
|
||||
streetid: '',
|
||||
nowStatus: [],
|
||||
time: null,
|
||||
caseNo: '',
|
||||
type: '',
|
||||
})
|
||||
const sortData = ref({
|
||||
sortType: null,
|
||||
order: null,
|
||||
})
|
||||
const pageData = ref({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
})
|
||||
const total = ref(0)
|
||||
const dataList = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
query()
|
||||
})
|
||||
|
||||
const query = () => {
|
||||
let params = {
|
||||
...pageData.value,
|
||||
...sortData.value,
|
||||
}
|
||||
Object.keys(screenData.value).forEach(key => {
|
||||
switch(key){
|
||||
case 'time':
|
||||
if(screenData.value.time){
|
||||
params['startTime'] = dayjs(screenData.value.time[0]).format('YYYY-MM-DD')
|
||||
params['endTime'] = dayjs(screenData.value.time[1]).format('YYYY-MM-DD')
|
||||
}
|
||||
break
|
||||
case 'nowStatus':
|
||||
if(screenData.value.nowStatus.length > 0){
|
||||
params['nowStatus'] = screenData.value.nowStatus.join(',')
|
||||
}
|
||||
break
|
||||
default:
|
||||
if(screenData.value[key] && screenData.value[key] !== ''){
|
||||
params[key] = screenData.value[key]
|
||||
}
|
||||
break
|
||||
}
|
||||
})
|
||||
emits('changeLoading',true)
|
||||
// TODO 换接口
|
||||
getLoadDroneCaseInfoDetail(params).then(res => {
|
||||
console.log(res)
|
||||
dataList.value = res.items
|
||||
total.value = res.total
|
||||
}).finally(() => {
|
||||
emits('changeLoading',false)
|
||||
})
|
||||
}
|
||||
const screenDataChange = (value, type) => {
|
||||
console.log(value,type)
|
||||
screenData.value[type] = value
|
||||
}
|
||||
const search = () => {
|
||||
query()
|
||||
console.log(screenData.value)
|
||||
}
|
||||
const changeSort = (sortType, order) => {
|
||||
sortData.value.sortType = sortType
|
||||
sortData.value.order = order
|
||||
query()
|
||||
}
|
||||
const collectChange = (type) => {
|
||||
screenData.value.type = type
|
||||
query()
|
||||
}
|
||||
const resetScreenData = () => {
|
||||
screenData.value = {
|
||||
year: '',
|
||||
tubanlaiyuan: '',
|
||||
typename: '',
|
||||
countyid:'',
|
||||
streetid: '',
|
||||
nowStatus: [],
|
||||
time: null,
|
||||
caseNo: '',
|
||||
type: screenData.value.type,
|
||||
}
|
||||
query()
|
||||
}
|
||||
const changePageData = (page, limit) => {
|
||||
pageData.value.page = page
|
||||
pageData.value.limit = limit
|
||||
query()
|
||||
}
|
||||
const changeTask = (id) => {
|
||||
emits('changeTask',id)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.out-div{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// background-color: aqua;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="curb-spot-city">
|
||||
<div class="show-list">
|
||||
<a-spin :spinning="spinning">
|
||||
<MapList
|
||||
@changeLoading="changeLoading"
|
||||
@changeTask="changeTask"/>
|
||||
</a-spin>
|
||||
</div>
|
||||
<MapboxMap
|
||||
:mapConfig="mapConfig"
|
||||
@mapOnLoad="onMapboxLoad"
|
||||
ref="MapboxComponent"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineAsyncComponent, onMounted } from "vue"
|
||||
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
|
||||
import { getGeom, getConfig } from '@/api/sys/layerManagement';
|
||||
import { message } from 'ant-design-vue'
|
||||
import MapList from './MapList/index.vue'
|
||||
|
||||
const spinning = ref(false)
|
||||
const mapConfig = ref({ isShowMap: false });
|
||||
const MapboxComponent = ref();
|
||||
|
||||
const changeLoading = (value: boolean) => {
|
||||
spinning.value = value
|
||||
}
|
||||
function onMapboxLoad(): void {
|
||||
getConfig({ code: 'mapsetting' }).then((res) => {
|
||||
mapConfig.value = JSON.parse(res.codeValue);
|
||||
});
|
||||
}
|
||||
function changeTask(val) {
|
||||
let getGeomPrams = {
|
||||
TableName: 'drone_shp_data ',
|
||||
FieldName: 'gid',
|
||||
FieldValue: val?.split(','),
|
||||
page: 1,
|
||||
limit: 999,
|
||||
key: null,
|
||||
};
|
||||
if (val) {
|
||||
getGeom(getGeomPrams).then((res) => {
|
||||
let geoms:any[] = [];
|
||||
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('Details', geoms, false);
|
||||
} else {
|
||||
message.error('当前数据没有图斑！');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
message.error('当前数据没有图斑！');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.curb-spot-city {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.show-list {
|
||||
width: 590px;
|
||||
background: #efefef;
|
||||
:deep(.ant-spin-nested-loading) {
|
||||
height: 100%;
|
||||
width: 590px;
|
||||
}
|
||||
:deep(.ant-spin-container) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue