图斑汇总、违法处理接口对接。消息signalR关联。
parent
d7d9944380
commit
76f16236ed
21
package.json
21
package.json
|
|
@ -77,6 +77,10 @@
|
|||
"@iconify/iconify": "^3.1.1",
|
||||
"@logicflow/core": "^1.2.18",
|
||||
"@logicflow/extension": "^1.2.19",
|
||||
"@mapbox/mapbox-gl-draw": "^1.4.1",
|
||||
"@microsoft/signalr": "^8.0.0",
|
||||
"@originjs/vite-plugin-commonjs": "^1.0.3",
|
||||
"@terraformer/wkt": "2.1.2",
|
||||
"@turf/turf": "^7.0.0",
|
||||
"@vben/hooks": "workspace:*",
|
||||
"@vue/shared": "^3.4.5",
|
||||
|
|
@ -87,6 +91,7 @@
|
|||
"bpmn-js": "^17.0.2",
|
||||
"bpmn-js-properties-panel": "^5.13.0",
|
||||
"bpmn-js-token-simulation": "^0.33.1",
|
||||
"ceel-json-editor": "^0.0.3",
|
||||
"codemirror": "^5.65.16",
|
||||
"cropperjs": "^1.6.1",
|
||||
"crypto-js": "^4.2.0",
|
||||
|
|
@ -102,17 +107,10 @@
|
|||
"localforage": "^1.10.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mapbox-extensions": "^1.3.38",
|
||||
"mapbox-gl": "^3.3.0",
|
||||
"mapbox-gl-utils": "^0.44.0",
|
||||
"@mapbox/mapbox-gl-draw": "^1.4.1",
|
||||
"mapbox-gl-draw-snap-mode": "^0.2.0",
|
||||
"mapbox-extensions":"^1.3.38",
|
||||
"terraformer-wkt-parser": "^1.2.1",
|
||||
"@terraformer/wkt":"2.1.2",
|
||||
"proj4":"2.11.0",
|
||||
"vue3-print-nb":"0.1.4",
|
||||
"ceel-json-editor":"^0.0.3",
|
||||
"@originjs/vite-plugin-commonjs":"^1.0.3",
|
||||
"mapbox-gl-utils": "^0.44.0",
|
||||
"mars3d": "^3.7.0",
|
||||
"mars3d-cesium": "^1.113.0",
|
||||
"min-dash": "^4.2.1",
|
||||
|
|
@ -122,11 +120,13 @@
|
|||
"pinia": "2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"print-js": "^1.6.0",
|
||||
"proj4": "2.11.0",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.2",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"showdown": "^2.1.0",
|
||||
"sortablejs": "^1.15.1",
|
||||
"terraformer-wkt-parser": "^1.2.1",
|
||||
"tinymce": "^5.10.9",
|
||||
"unocss": "0.58.3",
|
||||
"uuid": "^9.0.1",
|
||||
|
|
@ -137,13 +137,14 @@
|
|||
"vue-json-pretty": "^2.3.0",
|
||||
"vue-router": "^4.2.5",
|
||||
"vue-types": "^5.1.1",
|
||||
"vue-video-player": "^5.0.2",
|
||||
"vue3-print-nb": "0.1.4",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vuex": "^4.1.0",
|
||||
"vxe-table": "^4.5.17",
|
||||
"vxe-table-plugin-export-xlsx": "^3.1.0",
|
||||
"xe-utils": "^3.5.14",
|
||||
"xlsx": "^0.18.5",
|
||||
"vue-video-player": "^5.0.2",
|
||||
"xml-js": "^1.6.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ enum Api {
|
|||
VirtualDeleteEntitys = '/api/ImMsg/VirtualDeleteEntitys',
|
||||
DeleteEntitys = '/api/ImMsg/DeleteEntitys',
|
||||
ReadMsg = '/api/ImMsg/ReadMsg',
|
||||
GetLastList = '/api/ImMsg/GetLastList',
|
||||
}
|
||||
|
||||
export function loadSysImMsgList(params) {
|
||||
|
|
@ -29,6 +30,10 @@ export function deleteEntitys(params) {
|
|||
export function readMsg(params) {
|
||||
return defHttp.post({
|
||||
url: Api.ReadMsg + '?id=' + params.id,
|
||||
params,
|
||||
});
|
||||
}
|
||||
export function getLastList(params) {
|
||||
return defHttp.get({
|
||||
url: Api.GetLastList + '?userId=' + params.userId,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,6 +75,8 @@ enum Api {
|
|||
GetUserRoles = '/api/Roles/UserRoles',
|
||||
GetUserOrgs = '/api/Orgs/UserOrgs',
|
||||
GetSpecialData = '/api/Specialcolumn/GetDataColName',
|
||||
LoadCaseInfoTuBanList = '/api/DroneCaseInfoSingle/LoadCaseInfoTuBanList',
|
||||
LoadCaseInfoIllegalList = '/api/DroneCaseInfoSingle/LoadCaseInfoIllegalList',
|
||||
}
|
||||
|
||||
export const getPositionsTree = (params?: AccountParams) =>
|
||||
|
|
@ -326,3 +328,16 @@ export const getUserList = (params: UserListParams) =>
|
|||
defHttp.get<UserListGetResultModel>({ url: Api.UserList, params });
|
||||
|
||||
export const getSpecialData = () => defHttp.get({ url: Api.GetSpecialData });
|
||||
|
||||
export function loadCaseInfoTuBanList(params) {
|
||||
return defHttp.get({
|
||||
url: Api.LoadCaseInfoTuBanList,
|
||||
params,
|
||||
});
|
||||
}
|
||||
export function loadCaseInfoIllegalList(params) {
|
||||
return defHttp.get({
|
||||
url: Api.LoadCaseInfoIllegalList,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export interface ListItem {
|
||||
id: string;
|
||||
// 头像
|
||||
avatar: string;
|
||||
// 通知的标题内容
|
||||
title: string;
|
||||
|
|
@ -24,43 +25,12 @@ export interface TabItem {
|
|||
export const tabListData: TabItem[] = [
|
||||
{
|
||||
key: '1',
|
||||
name: '通知',
|
||||
list: [
|
||||
{
|
||||
id: 'string',
|
||||
avatar: 'string',
|
||||
// 通知的标题内容
|
||||
title: 'string',
|
||||
// 是否在标题上显示删除线
|
||||
titleDelete: true,
|
||||
datetime: 'string',
|
||||
type: 'string',
|
||||
read: true,
|
||||
description: 'string',
|
||||
clickClose: true,
|
||||
extra: 'string',
|
||||
color: 'string',
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
avatar: 'string',
|
||||
// 通知的标题内容
|
||||
title: 'string',
|
||||
// 是否在标题上显示删除线
|
||||
titleDelete: false,
|
||||
datetime: 'string',
|
||||
type: 'string',
|
||||
read: false,
|
||||
description: 'string',
|
||||
clickClose: false,
|
||||
extra: 'string',
|
||||
color: 'string',
|
||||
},
|
||||
],
|
||||
name: '消息',
|
||||
list: [],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '消息',
|
||||
name: '通知',
|
||||
list: [],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -20,35 +20,118 @@
|
|||
</Tabs>
|
||||
</template>
|
||||
</Popover>
|
||||
<a-modal
|
||||
width="100%"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="auditOpen"
|
||||
title="详情"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<template #footer> </template>
|
||||
<Look ref="posRef" :processId="processId" />
|
||||
</a-modal>
|
||||
<Message @register="register" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { Popover, Tabs, Badge } from 'ant-design-vue';
|
||||
import { BellOutlined } from '@ant-design/icons-vue';
|
||||
import { tabListData, ListItem } from './data';
|
||||
import NoticeList from './NoticeList.vue';
|
||||
import { tabListData } from './data';
|
||||
import { useDesign } from '@/hooks/web/useDesign';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { getLastList, loadSysImMsgList, readMsg } from '@/api/demo/message';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { Look } from '@/views/demo/workflow/task/process/page';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import NoticeList from './NoticeList.vue';
|
||||
import Message from './message.vue';
|
||||
import { signal } from '@/utils/signalR';
|
||||
|
||||
const [register, { openModal }] = useModal();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userInfo: any = userStore.getUserInfo;
|
||||
|
||||
const { prefixCls } = useDesign('header-notify');
|
||||
const { createMessage } = useMessage();
|
||||
const listData = ref(tabListData);
|
||||
const numberStyle = {};
|
||||
|
||||
const auditOpen = ref(false);
|
||||
const processId = ref('');
|
||||
const count = computed(() => {
|
||||
let count = 0;
|
||||
for (let i = 0; i < tabListData.length; i++) {
|
||||
count += tabListData[i].list.length;
|
||||
for (let i = 0; i < listData.value.length; i++) {
|
||||
count += listData.value[i].list.length;
|
||||
}
|
||||
return count;
|
||||
});
|
||||
|
||||
function onNoticeClick(record: ListItem) {
|
||||
createMessage.success('你点击了通知，ID=' + record.id);
|
||||
// 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
|
||||
record.titleDelete = !record.titleDelete;
|
||||
async function onNoticeClick(record) {
|
||||
console.log(record);
|
||||
// createMessage.success('你点击了通知，ID=' + record.id);
|
||||
// // 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
|
||||
// record.titleDelete = !record.titleDelete;
|
||||
const index = listData.value[0].list.findIndex((item: any) => item.id === record.id);
|
||||
if (index !== -1) {
|
||||
listData.value[0].list.splice(index, 1);
|
||||
}
|
||||
if (record.contentId) {
|
||||
auditOpen.value = true;
|
||||
processId.value = record.contentId;
|
||||
}
|
||||
const data = await readMsg({
|
||||
id: record.msgId,
|
||||
});
|
||||
}
|
||||
async function getList() {
|
||||
const data = await getLastList({
|
||||
userId: userInfo.id,
|
||||
});
|
||||
// const data = await loadSysImMsgList({
|
||||
// page: 1,
|
||||
// limit: 10,
|
||||
// });
|
||||
console.log(data);
|
||||
let arr: any = [];
|
||||
if (data.items && data.items.length > 0) {
|
||||
data.items.forEach((item: any) => {
|
||||
arr.push({
|
||||
id: item.msgId,
|
||||
title: item.content,
|
||||
datetime: item.createDate,
|
||||
contentId: item.contentId,
|
||||
});
|
||||
});
|
||||
listData.value[0].list = arr;
|
||||
}
|
||||
}
|
||||
|
||||
// 连接
|
||||
async function start() {
|
||||
try {
|
||||
await signal.start();
|
||||
console.log('SignalR Connected.连接成功');
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
// setTimeout(start, 5000);
|
||||
}
|
||||
}
|
||||
signal.onclose(async () => {
|
||||
await start();
|
||||
});
|
||||
onMounted(() => {
|
||||
getList();
|
||||
start();
|
||||
});
|
||||
//接口推送
|
||||
signal.on('RevMsg', (user, message) => {
|
||||
console.log('报警', user, message); //拿到后台推送的数据
|
||||
openModal(true, {
|
||||
user: user,
|
||||
message: message,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-header-notify';
|
||||
|
|
@ -78,4 +161,18 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
height: 85%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<BasicModal
|
||||
@register="registerModal"
|
||||
v-bind="$attrs"
|
||||
title="新消息"
|
||||
okText="查看"
|
||||
cancelText="关闭"
|
||||
@ok="onNoticeClick"
|
||||
>
|
||||
Modal Info.
|
||||
</BasicModal>
|
||||
<a-modal
|
||||
width="100%"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="auditOpen"
|
||||
title="详情"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<template #footer> </template>
|
||||
<Look ref="posRef" :processId="processId" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||
import { Look } from '@/views/demo/workflow/task/process/page';
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false });
|
||||
console.log(data);
|
||||
});
|
||||
const auditOpen = ref(false);
|
||||
const processId = ref('');
|
||||
async function onNoticeClick() {
|
||||
auditOpen.value = true;
|
||||
closeModal();
|
||||
}
|
||||
</script>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
|
||||
|
||||
<!-- <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" /> -->
|
||||
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
|
||||
|
||||
<FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
import { computed, unref } from 'vue';
|
||||
|
||||
import FrameLayout from '@/layouts/iframe/index.vue';
|
||||
|
||||
import { useRootSetting } from '@/hooks/setting/useRootSetting';
|
||||
|
||||
import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ import { router, setupRouter } from '@/router';
|
|||
import { setupRouterGuard } from '@/router/guard';
|
||||
import { setupStore } from '@/store';
|
||||
|
||||
|
||||
import VideoPlayer from 'vue-video-player';
|
||||
import 'vue-video-player/src/custom-theme.css';
|
||||
|
||||
|
|
@ -25,7 +24,6 @@ import App from './App.vue';
|
|||
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css';
|
||||
import 'mars3d/dist/mars3d.css';
|
||||
|
||||
|
||||
import ElementPlus from 'element-plus';
|
||||
import 'element-plus/theme-chalk/index.css';
|
||||
import VForm3 from '@/../lib/vform/designer.umd.js';
|
||||
|
|
@ -35,6 +33,7 @@ import 'bpmn-js/dist/assets/diagram-js.css';
|
|||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
|
||||
|
||||
import Antd from 'ant-design-vue';
|
||||
import { signal } from './utils/signalR';
|
||||
|
||||
async function bootstrap() {
|
||||
const app = createApp(App);
|
||||
|
|
@ -80,6 +79,7 @@ async function bootstrap() {
|
|||
app.use(ElementPlus);
|
||||
app.use(VForm3);
|
||||
app.use(VideoPlayer);
|
||||
app.use(signal);
|
||||
app.mount('#app');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import * as signalR from '@microsoft/signalr';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
console.log(VITE_GLOB_API_URL);
|
||||
export const signal = new signalR.HubConnectionBuilder()
|
||||
.withUrl(VITE_GLOB_API_URL + '/chathub')
|
||||
.withAutomaticReconnect([0, 2000, 10000, 30000])
|
||||
.configureLogging(signalR.LogLevel.Information)
|
||||
.build();
|
||||
|
|
@ -16,7 +16,7 @@ export const columns: BasicColumn[] = [
|
|||
width: 80,
|
||||
customRender: ({ record }) => {
|
||||
const isRead = record.isRead;
|
||||
const enable = ~~isRead === 0;
|
||||
const enable = ~~isRead === 1;
|
||||
const color = enable ? 'green' : 'red';
|
||||
const text = enable ? '已读' : '未读';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
|
|
|
|||
|
|
@ -18,6 +18,16 @@
|
|||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<a-modal
|
||||
width="100%"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="auditOpen"
|
||||
title="详情"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<template #footer> </template>
|
||||
<Look ref="posRef" :processId="processId" />
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -27,6 +37,8 @@
|
|||
import { useModal } from '@/components/Modal';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { columns, searchFormSchema } from './data';
|
||||
import { Look } from '@/views/demo/workflow/task/process/page';
|
||||
|
||||
import {
|
||||
loadSysImMsgList,
|
||||
deleteEntitys,
|
||||
|
|
@ -68,11 +80,19 @@
|
|||
fixed: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const auditOpen = ref(false);
|
||||
const processId = ref('');
|
||||
async function viewAccount(record: Recordable) {
|
||||
await readMsg({
|
||||
if (record.contentId) {
|
||||
auditOpen.value = true;
|
||||
processId.value = record.contentId;
|
||||
}
|
||||
const data = await readMsg({
|
||||
id: record.msgId,
|
||||
});
|
||||
if (data) {
|
||||
record.isRead = 1;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
|
|
@ -138,3 +158,19 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
height: 85%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,205 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { mapStatusOptions, mapTypeOptions } from '@/views/demo/bootstraps/curbspotcity/util';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
|
||||
const getYearList = () => {
|
||||
const num = 10;
|
||||
const currentYear = new Date().getFullYear();
|
||||
// 存储年份数据的数组
|
||||
const 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}`),
|
||||
});
|
||||
}
|
||||
return list;
|
||||
};
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '区县',
|
||||
dataIndex: 'countyname',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'streetname',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '图斑编号',
|
||||
dataIndex: 'caseno',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '下发时间',
|
||||
dataIndex: 'identificationtime',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '图斑面积',
|
||||
dataIndex: 'area',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'gengdiarea',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '判定结果',
|
||||
dataIndex: 'typename',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '当前状态',
|
||||
dataIndex: 'handlestatusname',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'xiangmumc',
|
||||
},
|
||||
{
|
||||
title: '项目主体',
|
||||
dataIndex: 'xiangmuzhuti',
|
||||
},
|
||||
{
|
||||
title: '违法类型',
|
||||
dataIndex: 'weifaleixing',
|
||||
},
|
||||
{
|
||||
title: '整改措施',
|
||||
dataIndex: 'measurename',
|
||||
},
|
||||
{
|
||||
title: '处理方式',
|
||||
dataIndex: 'resultname',
|
||||
},
|
||||
{
|
||||
title: '立案号',
|
||||
dataIndex: 'registrnumber',
|
||||
},
|
||||
{
|
||||
title: '违法联系人',
|
||||
dataIndex: 'illegalcontact',
|
||||
},
|
||||
{
|
||||
title: '违法人身份证号',
|
||||
dataIndex: 'illegalshenfenzhenghao',
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'year',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
label: '年份',
|
||||
componentProps: {
|
||||
options: getYearList(),
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'tubanlaiyuan',
|
||||
label: '图斑来源',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '全域巡查',
|
||||
value: '全域巡查',
|
||||
},
|
||||
{
|
||||
label: '卫片下发',
|
||||
value: '卫片下发',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'picihao',
|
||||
label: '批次',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'isBuildName',
|
||||
label: '标注类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '在建', value: '在建' },
|
||||
{ label: '已建成', value: '已建成' },
|
||||
{ label: '持续变化', value: '持续变化' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'nowStatus',
|
||||
label: '当前状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '待接收', value: '待接收' },
|
||||
{ label: '待填报', value: '待填报' },
|
||||
{ label: '待整改', value: '待整改' },
|
||||
{ label: '待审核', value: '待审核' },
|
||||
{ label: '已完成', value: '已完成' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'countyid',
|
||||
label: '区县',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ tableAction, formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: 371300 },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
onChange: () => {
|
||||
const { reload } = tableAction;
|
||||
reload();
|
||||
// or
|
||||
formModel.streetid = '';
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'streetid',
|
||||
label: '乡镇',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: formModel.countyid },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'caseNo',
|
||||
label: '图斑编号',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo">
|
||||
<template #toolbar>
|
||||
<PermissionBtn @btn-event="onBtnClicked" />
|
||||
</template>
|
||||
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
// icon: 'ant-design:ellipsis-outlined',
|
||||
label: '查看',
|
||||
onClick: viewAccount.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<a-modal
|
||||
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="showInfoOpen"
|
||||
title="详情"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
:destroyOnClose="true"
|
||||
@cancel="showInfoOpen = false"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<ShowInfoModal :showInfoData="showInfoData" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { loadCaseInfoIllegalList } from '@/api/demo/system';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { columns, searchFormSchema } from './illegaltreatment.data';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
import ShowInfoModal from '@/views/demo/bootstraps/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import { getCaseInfoById } from '@/api/bootstraps/index';
|
||||
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
|
||||
const searchInfo = reactive<Recordable>({
|
||||
countyid: null,
|
||||
});
|
||||
const showInfoData = ref();
|
||||
const showInfoOpen = ref(false);
|
||||
const searchParams = ref();
|
||||
const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
|
||||
title: '违法处理',
|
||||
api: loadCaseInfoIllegalList,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
showAdvancedButton: false,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
searchParams.value = info;
|
||||
return info;
|
||||
},
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
// slots: { customRender: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
});
|
||||
|
||||
// 直接下载接口返回的二进制流
|
||||
function handleExport() {
|
||||
let params = { ...searchParams.value };
|
||||
params.countyid = searchInfo?.countyid;
|
||||
axios({
|
||||
method: 'post',
|
||||
url: VITE_GLOB_API_URL + '/api/DroneCaseinfo/ExportCaseSynthesisCensusStreet',
|
||||
params: params,
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem('X-Token'),
|
||||
},
|
||||
responseType: 'blob',
|
||||
}).then((res) => {
|
||||
console.log('excel', res);
|
||||
let fileName = '统计报表' + new Date().getTime() + '.xls';
|
||||
const elink = document.createElement('a');
|
||||
elink.download = fileName;
|
||||
elink.style.display = 'none';
|
||||
elink.href = URL.createObjectURL(res.data);
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
URL.revokeObjectURL(elink.href);
|
||||
document.body.removeChild(elink);
|
||||
});
|
||||
}
|
||||
|
||||
function onBtnClicked(domId) {
|
||||
switch (domId) {
|
||||
case 'btnExport':
|
||||
handleExport();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
function viewAccount(record) {
|
||||
console.log(record);
|
||||
getCaseInfoById({ id: record.Id }).then((res) => {
|
||||
showInfoData.value = res;
|
||||
showInfoOpen.value = true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-preview-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 0px);
|
||||
position: absolute;
|
||||
padding: 30px 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #fff;
|
||||
}
|
||||
.data-preview-container-option {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0px;
|
||||
}
|
||||
.data-preview-container-option div {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo">
|
||||
<template #toolbar>
|
||||
<PermissionBtn @btn-event="onBtnClicked" />
|
||||
</template>
|
||||
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
// icon: 'ant-design:ellipsis-outlined',
|
||||
label: '查看',
|
||||
onClick: viewAccount.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<a-modal
|
||||
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="showInfoOpen"
|
||||
title="详情"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
:destroyOnClose="true"
|
||||
@cancel="showInfoOpen = false"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<ShowInfoModal :showInfoData="showInfoData" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { loadCaseInfoTuBanList } from '@/api/demo/system';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { columns, searchFormSchema } from './patchsummary.data';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
import ShowInfoModal from '@/views/demo/bootstraps/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import { getCaseInfoById } from '@/api/bootstraps/index';
|
||||
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
|
||||
const searchInfo = reactive<Recordable>({
|
||||
countyid: null,
|
||||
});
|
||||
const showInfoData = ref();
|
||||
const showInfoOpen = ref(false);
|
||||
const searchParams = ref();
|
||||
const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
|
||||
title: '图斑汇总',
|
||||
api: loadCaseInfoTuBanList,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
showAdvancedButton: false,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
searchParams.value = info;
|
||||
return info;
|
||||
},
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
// slots: { customRender: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
});
|
||||
|
||||
// 直接下载接口返回的二进制流
|
||||
function handleExport() {
|
||||
let params = { ...searchParams.value };
|
||||
axios({
|
||||
method: 'post',
|
||||
url: VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoTuBanList',
|
||||
params: params,
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem('X-Token'),
|
||||
},
|
||||
responseType: 'blob',
|
||||
}).then((res) => {
|
||||
console.log('excel', res);
|
||||
let fileName = '统计报表' + new Date().getTime() + '.xls';
|
||||
const elink = document.createElement('a');
|
||||
elink.download = fileName;
|
||||
elink.style.display = 'none';
|
||||
elink.href = URL.createObjectURL(res.data);
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
URL.revokeObjectURL(elink.href);
|
||||
document.body.removeChild(elink);
|
||||
});
|
||||
}
|
||||
|
||||
function onBtnClicked(domId) {
|
||||
switch (domId) {
|
||||
case 'btnExport':
|
||||
handleExport();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
function viewAccount(record) {
|
||||
console.log(record);
|
||||
getCaseInfoById({ id: record.Id }).then((res) => {
|
||||
showInfoData.value = res;
|
||||
showInfoOpen.value = true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-preview-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 0px);
|
||||
position: absolute;
|
||||
padding: 30px 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #fff;
|
||||
}
|
||||
.data-preview-container-option {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0px;
|
||||
}
|
||||
.data-preview-container-option div {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
|
||||
const getYearList = () => {
|
||||
const num = 10;
|
||||
const currentYear = new Date().getFullYear();
|
||||
// 存储年份数据的数组
|
||||
const 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}`),
|
||||
});
|
||||
}
|
||||
return list;
|
||||
};
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '图斑来源',
|
||||
dataIndex: 'tubanlaiyuan',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '区县',
|
||||
dataIndex: 'countyname',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'streetname',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '图斑编号',
|
||||
dataIndex: 'caseno',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '下发时间',
|
||||
dataIndex: 'identificationtime',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '图斑面积',
|
||||
dataIndex: 'area',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'typeTuituCount',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '判定结果',
|
||||
dataIndex: 'typename',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '当前状态',
|
||||
dataIndex: 'handlestatusname',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'xiangmumc',
|
||||
},
|
||||
{
|
||||
title: '项目主体',
|
||||
dataIndex: 'xiangmuzhuti',
|
||||
},
|
||||
{
|
||||
title: '实际用途',
|
||||
dataIndex: 'actualuseto',
|
||||
},
|
||||
{
|
||||
title: '违法类型',
|
||||
dataIndex: 'weifaleixing',
|
||||
},
|
||||
{
|
||||
title: '整改措施',
|
||||
dataIndex: 'measurename',
|
||||
},
|
||||
{
|
||||
title: '实际用途',
|
||||
dataIndex: 'qitauseto',
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'year',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
label: '年份',
|
||||
componentProps: {
|
||||
options: getYearList(),
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'tubanlaiyuan',
|
||||
label: '图斑来源',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '全域巡查',
|
||||
value: '全域巡查',
|
||||
},
|
||||
{
|
||||
label: '卫片下发',
|
||||
value: '卫片下发',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'picihao',
|
||||
label: '批次',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'isBuildName',
|
||||
label: '标注类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '在建', value: '在建' },
|
||||
{ label: '已建成', value: '已建成' },
|
||||
{ label: '持续变化', value: '持续变化' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'typename',
|
||||
label: '判定结果',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '农用地', value: '农用地' },
|
||||
{ label: '推堆土', value: '推堆土' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'nowStatus',
|
||||
label: '当前状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '待接收', value: '待接收' },
|
||||
{ label: '待填报', value: '待填报' },
|
||||
{ label: '待整改', value: '待整改' },
|
||||
{ label: '待审核', value: '待审核' },
|
||||
{ label: '已完成', value: '已完成' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: 'countyid',
|
||||
label: '区县',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ tableAction, formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: 371300 },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
onChange: () => {
|
||||
const { reload } = tableAction;
|
||||
reload();
|
||||
// or
|
||||
formModel.streetid = '';
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'streetid',
|
||||
label: '乡镇',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: formModel.countyid },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'caseNo',
|
||||
label: '图斑编号',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue