矿产专题 工作管理 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