|
|
|
|
@ -1,46 +1,50 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="interpretation-box">
|
|
|
|
|
<InterpretMap :interpretData="interpretData" @setArea="setArea"></InterpretMap>
|
|
|
|
|
<InterpretMap :interpretData="interpretData" @setArea="setArea" />
|
|
|
|
|
<div :class="prefixCls" v-if="disabledType">
|
|
|
|
|
<div :class="`${prefixCls}__top`">
|
|
|
|
|
<a-form ref="formRef" :model="listQuery" labelAlign="left">
|
|
|
|
|
<a-form-item placeholder="状态">
|
|
|
|
|
<a-form-item label="案件状态" placeholder="状态">
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="listQuery.is_intact"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="data.intactDatas"
|
|
|
|
|
:field-names="{ label: 'name', value: 'id' }"
|
|
|
|
|
>
|
|
|
|
|
</a-select>
|
|
|
|
|
:allow-clear="true"
|
|
|
|
|
/>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item placeholder="办理状态">
|
|
|
|
|
<a-form-item label="办理状态">
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="listQuery.handle_status_id"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="data.handleDealOptions"
|
|
|
|
|
:field-names="{ label: 'name', value: 'id' }"
|
|
|
|
|
>
|
|
|
|
|
</a-select>
|
|
|
|
|
:allow-clear="true"
|
|
|
|
|
/>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item placeholder="办理状态">
|
|
|
|
|
<a-form-item label="查询地区">
|
|
|
|
|
<a-tree-select
|
|
|
|
|
v-model:value="value"
|
|
|
|
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|
|
|
|
v-model:value="listQuery.orgId"
|
|
|
|
|
:dropdown-style="{ maxHeight: '400px', width: '600px', overflow: 'auto' }"
|
|
|
|
|
:tree-data="data.OrgList"
|
|
|
|
|
:field-names="{ label: 'name', value: 'id' }"
|
|
|
|
|
placeholder="查询地区"
|
|
|
|
|
:allow-clear="true"
|
|
|
|
|
/>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item>
|
|
|
|
|
<a-input v-model:value="listQuery.key" placeholder="请输入关键字" />
|
|
|
|
|
<a-form-item label="关 键 字 ">
|
|
|
|
|
<a-input v-model:value="listQuery.key" placeholder="请输入关键字" :allow-clear="true" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item>
|
|
|
|
|
<a-input v-model:value="listQuery.identification_user" placeholder="判读人姓名" />
|
|
|
|
|
<a-form-item label="姓名">
|
|
|
|
|
<a-input
|
|
|
|
|
v-model:value="listQuery.identification_user"
|
|
|
|
|
placeholder="判读人姓名"
|
|
|
|
|
:allow-clear="true"
|
|
|
|
|
/>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item class="btn_item">
|
|
|
|
|
<a-button @click="getList">
|
|
|
|
|
<template #icon><SearchOutlined /></template>
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button type="primary" @click="getList">查询</a-button>
|
|
|
|
|
<a-button>
|
|
|
|
|
<template #icon><VerticalAlignBottomOutlined /></template>
|
|
|
|
|
</a-button>
|
|
|
|
|
@ -55,7 +59,11 @@
|
|
|
|
|
<List.Item class="list">
|
|
|
|
|
<List.Item.Meta>
|
|
|
|
|
<template #avatar>
|
|
|
|
|
<a-image :width="60" :src="uploadUrl + '/' + item.case_pic_list[0]" />
|
|
|
|
|
<a-image
|
|
|
|
|
:width="60"
|
|
|
|
|
:height="80"
|
|
|
|
|
:src="uploadUrl + '/' + item.case_pic_list[0]"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
<template #title>
|
|
|
|
|
<span>{{ item.case_description }}</span>
|
|
|
|
|
@ -90,14 +98,10 @@
|
|
|
|
|
</template>
|
|
|
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
|
|
|
<a-tab-pane key="1" tab="案件判读">
|
|
|
|
|
<Interpret
|
|
|
|
|
ref="interpretRef"
|
|
|
|
|
:interpretData="interpretData"
|
|
|
|
|
@close="changeType"
|
|
|
|
|
></Interpret>
|
|
|
|
|
<Interpret ref="interpretRef" :interpretData="interpretData" @close="changeType" />
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
<a-tab-pane key="2" tab="案件处理">
|
|
|
|
|
<Dispose :id="interpretData.id"></Dispose>
|
|
|
|
|
<Dispose :id="interpretData.id" />
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
</CollapseContainer>
|
|
|
|
|
@ -106,23 +110,40 @@
|
|
|
|
|
</template>
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
|
|
import { Progress, Row, Col, List, Tag, Tabs } from 'ant-design-vue';
|
|
|
|
|
import Icon from '@/components/Icon/Icon.vue';
|
|
|
|
|
import { List } from 'ant-design-vue';
|
|
|
|
|
import { CollapseContainer } from '@/components/Container';
|
|
|
|
|
import { SearchOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
import { VerticalAlignBottomOutlined, CloseOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
import { BasicForm } from '@/components/Form';
|
|
|
|
|
import MapboxMaps from '@/components/MapboxMaps/index.vue';
|
|
|
|
|
import {
|
|
|
|
|
VerticalAlignBottomOutlined,
|
|
|
|
|
CloseOutlined,
|
|
|
|
|
SearchOutlined,
|
|
|
|
|
} from '@ant-design/icons-vue';
|
|
|
|
|
import { getCaseInfoList } from '@/api/monitor/index';
|
|
|
|
|
import { Interpret, Dispose, InterpretMap } from '../index';
|
|
|
|
|
import { getDeptList } from '@/api/demo/system';
|
|
|
|
|
import { useGlobSetting } from '@/hooks/setting';
|
|
|
|
|
|
|
|
|
|
const { uploadUrl } = useGlobSetting();
|
|
|
|
|
const disabledType = ref(true);
|
|
|
|
|
const prefixCls = 'list-basic';
|
|
|
|
|
const activeKey = ref('1');
|
|
|
|
|
const interpretData = ref({});
|
|
|
|
|
const interpretRef = ref();
|
|
|
|
|
interface listParam {
|
|
|
|
|
page?: number;
|
|
|
|
|
limit?: number;
|
|
|
|
|
is_intact?: number;
|
|
|
|
|
handle_status_id?: string;
|
|
|
|
|
identification_user?: string;
|
|
|
|
|
identification_time?: string;
|
|
|
|
|
key?: string;
|
|
|
|
|
orgId?: string;
|
|
|
|
|
}
|
|
|
|
|
type dataModel = {
|
|
|
|
|
dataList: any;
|
|
|
|
|
OrgList: any[];
|
|
|
|
|
handleDealOptions: any[];
|
|
|
|
|
intactDatas: any[];
|
|
|
|
|
};
|
|
|
|
|
const pagination = ref({
|
|
|
|
|
onChange: (page: number) => {
|
|
|
|
|
console.log(page);
|
|
|
|
|
@ -132,12 +153,12 @@
|
|
|
|
|
pageSize: 5,
|
|
|
|
|
total: 0,
|
|
|
|
|
});
|
|
|
|
|
const listQuery = ref({
|
|
|
|
|
const listQuery = ref<listParam>({
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 5,
|
|
|
|
|
is_intact: 0,
|
|
|
|
|
});
|
|
|
|
|
const data = reactive({
|
|
|
|
|
const data = reactive<dataModel>({
|
|
|
|
|
OrgList: [],
|
|
|
|
|
handleDealOptions: [
|
|
|
|
|
{ id: 0, name: '未办理' },
|
|
|
|
|
@ -156,24 +177,6 @@
|
|
|
|
|
const obj = await getDeptList();
|
|
|
|
|
data.OrgList = obj;
|
|
|
|
|
}
|
|
|
|
|
const mapOptions = {
|
|
|
|
|
center: [117.84714891969796, 35.22152309532066],
|
|
|
|
|
zoom: 10,
|
|
|
|
|
};
|
|
|
|
|
const detailMap = ref();
|
|
|
|
|
const mapBox = ref();
|
|
|
|
|
const mapOnLoad = (map) => {
|
|
|
|
|
mapBox.value = map;
|
|
|
|
|
// 测试地址
|
|
|
|
|
const testSource =
|
|
|
|
|
'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
|
|
|
|
|
map.U.addVector('name', testSource);
|
|
|
|
|
map.U.addLineLayer('ffff', {
|
|
|
|
|
source: 'name',
|
|
|
|
|
'source-layer': 'lindi',
|
|
|
|
|
});
|
|
|
|
|
detailMap.value = map;
|
|
|
|
|
};
|
|
|
|
|
async function getList() {
|
|
|
|
|
const obj = await getCaseInfoList(listQuery.value);
|
|
|
|
|
console.log(obj);
|
|
|
|
|
@ -220,20 +223,20 @@
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 12px;
|
|
|
|
|
left: 25px;
|
|
|
|
|
width: 30%;
|
|
|
|
|
height: 90vh;
|
|
|
|
|
width: 34%;
|
|
|
|
|
height: 70vh;
|
|
|
|
|
&__top {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background-color: @component-background;
|
|
|
|
|
text-align: center;
|
|
|
|
|
height: 10vh;
|
|
|
|
|
height: 16vh;
|
|
|
|
|
.clear {
|
|
|
|
|
clear: both;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__content {
|
|
|
|
|
height: 76vh;
|
|
|
|
|
height: 68vh;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
@ -255,17 +258,29 @@
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.ant-list {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ant-spin-nested-loading {
|
|
|
|
|
height: 90%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ant-form {
|
|
|
|
|
.ant-form-item {
|
|
|
|
|
float: left;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
width: 30%;
|
|
|
|
|
width: 48%;
|
|
|
|
|
button {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
.ant-form-item-label {
|
|
|
|
|
width: 70px;
|
|
|
|
|
}
|
|
|
|
|
.ant-select-selector {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
