diff --git a/src/api/demo/model/systemModel.ts b/src/api/demo/model/systemModel.ts
index 6fc6a36..54f0bec 100644
--- a/src/api/demo/model/systemModel.ts
+++ b/src/api/demo/model/systemModel.ts
@@ -88,3 +88,23 @@ export type RolePageListGetResultModel = BasicFetchResult<RoleListItem>;
 export type RoleListGetResultModel = RoleListItem[];
 
 export type addDeptModel = addDept[];
+
+export type ReportParams = BasicPageParams;
+
+export interface ReportListItem {
+  id?:string
+}
+
+export interface NoticeListItem {
+  Id :string;
+  msg_title:string;
+  msg_content:string;
+  createtime:string;
+  createuser:string;
+  createusername:string;
+  is_delete:number;
+  msg_type:number;
+  case_no:string;
+  caseid:string;
+  is_read:number;
+}
\ No newline at end of file
diff --git a/src/api/demo/system.ts b/src/api/demo/system.ts
index 538e638..86d4ef9 100644
--- a/src/api/demo/system.ts
+++ b/src/api/demo/system.ts
@@ -10,7 +10,10 @@ import {
   AccountListGetResultModel,
   RolePageListGetResultModel,
   RoleListGetResultModel,
-  addDept
+  addDept,
+  ReportParams,
+  ReportListGetResultModel,
+  NoticeListGetResultModel
 } from './model/systemModel';
 import { defHttp } from '@/utils/http/axios';
 
@@ -55,6 +58,8 @@ enum Api {
   LoadDataBaseLinkTree = '/api/SysDatabaseLink/LoadDataBaseLinkTree',
   GetPosInfo = '/api/SysPosition/Get',
   UpdatePosition = '/api/SysPosition/Update',
+  ReportList = '/api/DroneCaseinfo/LoadCaseInfoList',
+  NoticeList = '/api/DroneCaseinfo/LoadMessageList',
 }
 
 export const getPositionsTree = (params?: AccountParams) =>
@@ -293,4 +298,10 @@ export const getLoadDataBaseLinkTree = () =>
 export const getPosInfo = (params) =>
   defHttp.get({ url: Api.GetPosInfo, params });
 
+export const getReportList = (params: ReportParams)=> 
+  defHttp.get<ReportListGetResultModel>({ url: Api.ReportList, params });
+
+
+export const getNoticeList = (params?:Object) =>
+  defHttp.get<NoticeListGetResultModel>({url:Api.NoticeList,params})
 
diff --git a/src/views/demo/notice/DeptModal.vue b/src/views/demo/notice/DeptModal.vue
new file mode 100644
index 0000000..61c7da2
--- /dev/null
+++ b/src/views/demo/notice/DeptModal.vue
@@ -0,0 +1,76 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './dept.data';
+
+  import { getDeptList, addDept, updateDept } from '@/api/demo/system';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  defineOptions({ name: 'DeptModal' });
+
+  const emit = defineEmits(['success', 'register']);
+
+  const isUpdate = ref(true);
+
+  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+    const treeData = await getDeptList();
+    updateSchema({
+      field: 'parentId',
+      componentProps: { treeData },
+    });
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增通知' : '编辑通知'));
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      let query = values;
+      // 调用接口
+      if (!unref(isUpdate)) {
+        const data = await addDept(query);
+        if (data) {
+          setModalProps({ confirmLoading: true });
+          closeModal();
+          emit('success');
+          return createMessage.success('新增成功');
+        } else {
+          return createMessage.error('新增失败');
+        }
+      } else {
+        const data = await updateDept(query);
+        if (data) {
+          setModalProps({ confirmLoading: true });
+          closeModal();
+          emit('success');
+          return createMessage.success('编辑成功');
+        } else {
+          return createMessage.error('编辑失败');
+        }
+      }
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/demo/notice/DeptTree.vue b/src/views/demo/notice/DeptTree.vue
new file mode 100644
index 0000000..58d1076
--- /dev/null
+++ b/src/views/demo/notice/DeptTree.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+      <BasicTree ref="asyncExpandTreeRef" title="部门列表" toolbar search
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData :actionList="actionList"
+      :renderIcon="createIcon" :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
+      :defaultExpandAll="true" @select="handleSelect" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref , nextTick, unref} from 'vue';
+
+  import { BasicTree, TreeItem ,TreeActionType} from '@/components/Tree';
+  import { getDeptList } from '@/api/demo/system';
+
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select']);
+
+  const treeData = ref < TreeItem[] > ([]);
+  const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
+
+  async function fetch() {
+    treeData.value = (await getDeptList()) as unknown as TreeItem[];
+     // 展开全部
+     nextTick(() => {
+      unref(asyncExpandTreeRef)?.expandAll(true);
+    });
+  }
+
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+  defineExpose({
+		fetch
+	})
+</script>
\ No newline at end of file
diff --git a/src/views/demo/notice/PosGroupModal.vue b/src/views/demo/notice/PosGroupModal.vue
new file mode 100644
index 0000000..e9d11d7
--- /dev/null
+++ b/src/views/demo/notice/PosGroupModal.vue
@@ -0,0 +1,59 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="给部门分配职级组" @ok="handleSubmit">
+    <BasicForm @register="registerForm" :model="modelRef"/>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formGroupSchema } from './dept.data';
+
+  import { orgPosGroup} from '@/api/demo/system';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  defineOptions({ name: 'PosGroupModal' });
+ 
+  const emit = defineEmits(['success', 'register']);
+
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 24 },
+    schemas: formGroupSchema,
+    showActionButtonGroup: false,
+  });
+  let depeId = ref()
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+
+    depeId.value = data.record.id
+      setFieldsValue({
+        ...data.record,
+      });
+  });
+
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      let query = {
+        orgId:depeId.value,
+        posGroupId:values.posGroupId,
+      }
+      // 调用接口
+      const data = await orgPosGroup(query);
+      if(data){
+        setModalProps({ confirmLoading: true });
+        // TODO custom api
+        closeModal();
+        emit('success');
+        return createMessage.success('成功');
+      }else{
+        return createMessage.error('失败');
+      }
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/views/demo/notice/dbsource.data.ts b/src/views/demo/notice/dbsource.data.ts
new file mode 100644
index 0000000..72aee02
--- /dev/null
+++ b/src/views/demo/notice/dbsource.data.ts
@@ -0,0 +1,234 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { getDataBaseCodeList } from '@/api/formdesign/index';
+
+// 数据源table
+export const dbsourcesColumns: BasicColumn[] = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    ifShow: false,
+  },
+  {
+    title: '编码',
+    dataIndex: 'code',
+    width: 200,
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '数据库',
+    dataIndex: 'dbId',
+    width: 80,
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createUserName',
+    width: 80,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+    width: 80,
+  },
+  {
+    title: '创建人id',
+    dataIndex: 'reateUserId',
+    ifShow: false,
+  },
+  {
+    title: '备注',
+    dataIndex: 'description',
+    ifShow: false,
+  },
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    ifShow: false,
+  },
+  {
+    title: 'modifyDate',
+    dataIndex: 'modifyDate',
+    ifShow: false,
+  },
+  {
+    title: 'modifyUserId',
+    dataIndex: 'modifyUserId',
+    ifShow: false,
+  },
+  {
+    title: 'modifyUserName',
+    dataIndex: 'modifyUserName',
+    ifShow: false,
+  },
+  {
+    title: 'SQL',
+    dataIndex: 'sql',
+    ifShow: false,
+  },
+];
+// 数据源table-搜索
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'keyword',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+// 数据源table-新增、编辑
+export const formSchema: FormSchema[] = [
+  {
+    field: 'code',
+    component: 'Input',
+    label: '编号',
+    colProps: {
+      span: 24,
+    },
+    defaultValue: '',
+    required: true,
+    componentProps: {
+      placeholder: '请输入',
+    },
+  },
+  {
+    field: 'name',
+    component: 'Input',
+    label: '名称',
+    colProps: {
+      span: 24,
+    },
+    defaultValue: '',
+    required: true,
+    componentProps: {
+      placeholder: '请输入',
+    },
+  },
+  {
+    field: 'dbId',
+    component: 'ApiTreeSelect',
+    label: '数据库',
+    required: true,
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      api: () =>
+        getDataBaseCodeList({}).then((data: Recordable) => {
+          return new Promise((resolve) => {
+            resolve(data);
+          });
+        }),
+      labelField: 'text',
+      valueField: 'value',
+      async: true,
+      onChange: (e, v) => {
+        console.log('ApiTreeSelect====>:', e, v);
+      },
+      onLoadData: ({ treeData, resolve, treeNode }) => {
+        setTimeout(() => {
+          const children: Recordable[] = [];
+          treeData.value.forEach((item) => {
+            if (item.id == treeNode.id) {
+              if (item.childNodes) {
+                item.childNodes.forEach((val) => {
+                  children.push({
+                    text: val.text,
+                    value: val.value,
+                  });
+                });
+              }
+            }
+          });
+          children.forEach((item) => {
+            item.isLeaf = false;
+            item.children = [];
+          });
+          treeNode.dataRef.children = children;
+          treeData.value = [...treeData.value];
+          resolve();
+          return;
+        }, 300);
+      },
+    },
+  },
+  {
+    field: 'sql',
+    component: 'InputTextArea',
+    label: 'SQL语句',
+    colProps: {
+      span: 24,
+    },
+    defaultValue: '',
+    required: true,
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    field: 'description',
+    component: 'InputTextArea',
+    label: '描述',
+    colProps: {
+      span: 24,
+    },
+    defaultValue: '',
+    componentProps: {
+      placeholder: '请输入',
+    },
+  },
+  {
+    field: 'id',
+    component: 'Input',
+    label: 'id',
+    ifShow: false,
+  },
+  {
+    field: 'createUserId',
+    component: 'Input',
+    label: '创建人',
+    ifShow: false,
+  },
+  {
+    field: 'createUserName',
+    component: 'Input',
+    label: '创建人',
+    ifShow: false,
+  },
+  {
+    field: 'createDate',
+    component: 'Input',
+    label: '创建时间',
+    ifShow: false,
+  },
+  {
+    field: 'modifyUserId',
+    component: 'Input',
+    label: '修改人',
+    ifShow: false,
+  },
+  {
+    field: 'modifyUserName',
+    component: 'Input',
+    label: '修改人',
+    ifShow: false,
+  },
+  {
+    field: 'modifyDate',
+    component: 'Input',
+    label: '修改时间',
+    ifShow: false,
+  },
+  {
+    field: 'isEdit',
+    component: 'Input',
+    ifShow: false,
+  },
+  {
+    field: 'tenantId',
+    component: 'Input',
+    ifShow: false,
+  },
+];
diff --git a/src/views/demo/notice/dept.data.ts b/src/views/demo/notice/dept.data.ts
new file mode 100644
index 0000000..852d143
--- /dev/null
+++ b/src/views/demo/notice/dept.data.ts
@@ -0,0 +1,143 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { getPosGroupList } from '@/api/demo/system';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '标题',
+    dataIndex: 'msg_title',
+  },
+  {
+    title: '内容',
+    dataIndex: 'msg_content',
+  },
+  {
+    title: '编辑人',
+    dataIndex: 'createusername',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createtime',
+  },
+  // {
+  //   title: '操作',
+  //   dataIndex: 'createTime',
+  //   width: 180,
+  // },
+  // {
+  //   title: '备注',
+  //   dataIndex: 'remark',
+  // },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    label: '关键字段',
+    component: 'Input',
+    colProps: { span: 6 },
+  },{
+    field: 'msg_type',
+    component: 'Select',
+    label: '通知类型',
+    colProps: {
+      span: 6,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '政策法规',
+          value: '0',
+          key: '0',
+        },{
+          label: '消息通知',
+          value: '1',
+          key: '1',
+        }
+      ],
+    },
+  }
+];
+export const formGroupSchema: FormSchema[] = [
+  {
+    field: 'posGroupId',
+    component: 'ApiSelect',
+    label: '职级组',
+    required: true,
+    componentProps: ({ formActionType, formModel }) => {
+      return {
+        api: getPosGroupList, // 接口
+        // 接口参数
+        resultField: 'result',
+        labelField: 'name',
+        valueField: 'id',
+      };
+    },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: '名称',
+    component: 'Input',
+    ifShow:false
+  },
+  {
+    field: 'name',
+    label: '通知标题',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'msg_content',
+    label: '通知内容',
+    component: 'InputTextArea',
+    required: true,
+  },
+  {
+    field: 'msg_type',
+    label: '通知类型',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    componentProps: {
+      options: [
+        { label: '政策法规', value: 0 },
+        { label: '消息通知', value: 1 },
+      ],
+    },
+    required: true,
+  },{
+    field: 'is_all',
+    label: '是否全选',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    componentProps: {
+      options: [
+        { label: '否', value: 0 },
+        { label: '是', value: 1 },
+      ],
+    },
+    required: true,
+  },
+  {
+    field: 'parentId',
+    label: '选择部门',
+    component: 'TreeSelect',
+    componentProps: {
+      fieldNames: {
+        label: 'name',
+        key: 'id',
+        value: 'id',
+      },
+      onChange:(value)=>{
+        console.log(value)
+      },
+      getPopupContainer: () => document.body,
+    },
+    // required: true,
+  },
+  
+ 
+];
diff --git a/src/views/demo/notice/drawer.vue b/src/views/demo/notice/drawer.vue
new file mode 100644
index 0000000..b98c418
--- /dev/null
+++ b/src/views/demo/notice/drawer.vue
@@ -0,0 +1,94 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" width="70%">
+    <BasicTable
+      class="w-4/4 xl:w-5/5"
+      @register="registerTable"
+      @fetch-success="onFetchSuccess"
+      :searchInfo="searchInfo"
+    >
+      <template #toolbar>
+        <span>关键字</span>
+        <a-select
+          :options="columnOptions"
+          v-model:value="field"
+          placeholder="请选择"
+          style="width: 120px"
+          size="mini"
+        />
+        <a-input-search
+          v-model:value="searchValue"
+          placeholder="请输入查询关键字"
+          style="width: 200px"
+          @search="onSearch"
+        />
+      </template>
+    </BasicTable>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+  // ts
+  import {} from './dbsource.data';
+  // api
+  import { fun_GetDataColName } from '@/api/demo/dbsource';
+
+  const tableData = ref();
+  const searchValue = ref();
+  // 下拉框
+  const columnOptions = ref([]);
+  // 下拉框选择的值
+  let field = ref('');
+  // 抽屉的标题
+  const getTitle = ref('');
+
+  // 抽屉
+  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
+    clearSelectedRowKeys();
+    reload();
+    setDrawerProps({ confirmLoading: false });
+    getTitle.value = '查看数据源数据 - ' + data.name;
+    getColumnData(data);
+  });
+
+  // 表格
+  const searchInfo = reactive<Recordable>({});
+  const [registerTable, { reload, clearSelectedRowKeys, setColumns }] = useTable({
+    dataSource: tableData,
+    rowKey: 'id',
+    striped: false,
+    useSearchForm: false,
+    bordered: true,
+    // 序号列
+    showIndexColumn: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+
+  // 表格表头
+  async function getColumnData(record) {
+    let data = await fun_GetDataColName({ code: record.code });
+    let columns: string[] = [];
+    data.forEach((element) => {
+      columns.push({
+        title: element,
+        dataIndex: element,
+        label: element,
+        value: element,
+      });
+    });
+    setColumns(columns);
+    // 下拉框
+    columnOptions.value = columns;
+  }
+  // 表格数据
+  async function setTableData() {
+    // tableData.value = columnData;
+  }
+  // 查找
+  function onSearch() {
+    console.log(field);
+  }
+</script>
diff --git a/src/views/demo/notice/index.vue b/src/views/demo/notice/index.vue
new file mode 100644
index 0000000..ef6a282
--- /dev/null
+++ b/src/views/demo/notice/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn>
+      </template>
+    </BasicTable>
+    <DeptModal @register="registerModal" @success="handleSuccess" />
+    <PosGroupModal @register="registerPosGroupModal" @success="handleSuccess"></PosGroupModal>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+
+  import { BasicTable, useTable } from '@/components/Table';
+  import { getNoticeList, deleteDept } from '@/api/demo/system';
+  import { PageWrapper } from '@/components/Page';
+  import { useModal } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  import { DeptTree } from './page';
+  import { DeptModal } from './page';
+  import { PosGroupModal } from './page';
+  import { PermissionBtn } from '@/components/PermissionBtn/index';
+  import { columns, searchFormSchema } from './dept.data';
+
+  defineOptions({ name: 'DeptManagement' });
+  const { createConfirm, createMessage } = useMessage();
+
+  const [registerModal, { openModal: openDeptModal }] = useModal();
+  const [registerPosGroupModal, { openModal: openPosGroupModal }] = useModal();
+  const searchInfo = reactive<Recordable>({});
+
+  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
+    title: '通知详情',
+    api: getNoticeList,
+    rowKey: 'Id',
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    rowSelection: {
+      //多选框
+      type: 'checkbox',
+      // type: 'radio',
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+
+
+  async function handlePoGroup() {
+    let rows = getSelectRows();
+    if (!rows.length) {
+      return createMessage.warn('请选择一个部门');
+    }
+    var record = rows[0];
+    openPosGroupModal(true, {
+      record,
+      isUpdate: false,
+    });
+  }
+  const childRef = ref<any>();
+
+  function handleCreate() {
+    openDeptModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  function handleEdit() {
+    let rows = getSelectRows();
+    if (rows.length == 0) {
+      return createMessage.warn('请选择一个部门进行编辑');
+    }
+    const record = rows[0];
+    openDeptModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  async function handleDelete() {
+    let rows = getSelectRows();
+    if (rows.length == 0) {
+      return createMessage.warn('请选择一个部门进行删除');
+    }
+    const query = [rows[0].id];
+    createConfirm({
+      iconType: 'info',
+      title: '删除',
+      content: '确定要删除当前部门吗',
+      onOk: async () => {
+        const data = await deleteDept(query);
+        if (data) {
+          handleSuccess();
+          return createMessage.success('删除成功');
+        } else {
+          return createMessage.error('删除失败');
+        }
+      },
+    });
+  }
+  function onBtnClicked(domId) {
+    switch (domId) {
+      case 'btnAdd':
+        handleCreate();
+        break;
+      case 'btnEdit':
+        handleEdit();
+        break;
+      case 'btnDelete':
+        handleDelete();
+        break;
+      case 'btnPoGroup':
+        handlePoGroup();
+        break;
+      default:
+        break;
+    }
+  }
+  function handleSelect(orgId = '') {
+    searchInfo.orgId = orgId;
+    reload();
+  }
+  function handleSuccess() {
+    clearSelectedRowKeys();
+    childRef.value.fetch();
+    reload();
+  }
+</script>
diff --git a/src/views/demo/notice/modal.vue b/src/views/demo/notice/modal.vue
new file mode 100644
index 0000000..3424d14
--- /dev/null
+++ b/src/views/demo/notice/modal.vue
@@ -0,0 +1,116 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :centered="true"
+    :canFullscreen="false"
+    :defaultFullscreen="false"
+    :showCancelBtn="true"
+    :showOkBtn="true"
+    :draggable="false"
+    :title="getTitle"
+    :useWrapper="true"
+    @ok="handleOk"
+  >
+    <BasicForm ref="registerFormRef" @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, defineEmits } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  // ts
+  import { formSchema } from './dbsource.data';
+  // api
+  import { fun_AddForm, fun_UpdateForm } from '@/api/demo/dbsource';
+
+  const emit = defineEmits(['submit']);
+  const { createMessage } = useMessage();
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 标题
+  const getTitle = computed(() => (unref(isUpdate) ? '编辑数据源' : '新增数据源'));
+  // 窗口
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = data.isUpdate;
+    if (isUpdate.value) {
+      setFieldsValue(data.record);
+    } else {
+      validate();
+      resetFields();
+    }
+  });
+
+  // 表单form
+  const registerFormRef = ref<any>();
+  const [registerForm, { setFieldsValue, getFieldsValue, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { lg: 24, md: 24 },
+  });
+
+  // 提交
+  async function handleOk() {
+    validate();
+    let record = getFieldsValue();
+    let params = {
+      code: record.code,
+      name: record.name,
+      dbId: record.dbId,
+      sql: record.sql,
+      description: record.description,
+    };
+    if (isUpdate.value) {
+      // 修改
+      params.id = record.id;
+      params.createUserName = record.createUserName;
+      params.createDate = record.createDate;
+      let data = await fun_UpdateForm(params);
+      if (data) {
+        createMessage.success('修改成功!');
+        closeModal();
+        emit('submit');
+      }
+    } else {
+      // 新增
+      params.createUserName = localStorage.getItem('fireUserLoginName');
+      params.createDate = new Date();
+      let data = await fun_AddForm(params);
+      if (data) {
+        createMessage.success('新增成功！');
+        closeModal();
+        emit('submit');
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .l-rblock {
+    width: 60%;
+    height: 60%;
+    background-color: @border-color-base;
+
+    &_content {
+      box-sizing: border-box;
+      position: relative;
+      width: 100%;
+      height: 100%;
+      max-width: 794px;
+      overflow: hidden auto;
+      background: @component-background;
+      border-radius: 4px;
+      margin: auto;
+      padding: 24px;
+    }
+
+    &_formLine {
+      height: 50px;
+    }
+  }
+</style>
diff --git a/src/views/demo/notice/page.ts b/src/views/demo/notice/page.ts
new file mode 100644
index 0000000..4dd7761
--- /dev/null
+++ b/src/views/demo/notice/page.ts
@@ -0,0 +1,5 @@
+
+export { default as DeptTree } from './DeptTree.vue';
+export { default as DeptModal } from './DeptModal.vue';
+export { default as PosGroupModal } from './PosGroupModal.vue';
+
diff --git a/src/views/demo/report/index.vue b/src/views/demo/report/index.vue
new file mode 100644
index 0000000..f616ca4
--- /dev/null
+++ b/src/views/demo/report/index.vue
@@ -0,0 +1,162 @@
+<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>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getRoleListByPage,getReportList, deleteRole } from '@/api/demo/system';
+
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useModal } from '@/components/Modal';
+  import { PermissionBtn } from '@/components/PermissionBtn/index';
+
+  import { columns, searchFormSchema } from './report.data';
+
+  defineOptions({ name: 'RoleManagement' });
+
+  const { createConfirm, createMessage } = useMessage();
+  const [registerModal, { openModal: openRoleModal }] = useModal();
+  const [registerModulesModal, { openModal: openModulesModal }] = useModal();
+  const [registerAccountModal, { openModal: openAccountModal }] = useModal();
+  const searchInfo = reactive<Recordable>({});
+
+  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
+    // 表格名称
+    title: '报告打印',
+    // 获取数据的接口
+    api: getReportList,
+    // 表单列信息 BasicColumn[]
+    columns,
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    // 使用搜索表单
+    useSearchForm: true,
+    // 显示表格设置工具
+    showTableSetting: true,
+    // 是否显示表格边框
+    bordered: true,
+    // 序号列
+    showIndexColumn: false,
+    // 勾选列
+    rowSelection: {
+      //多选框
+      // type: 'checkbox',
+      type: 'radio',
+    },
+    // 搜索
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 80,
+      title: '查看账号',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  function handleCreate() {
+    openRoleModal(true, {
+      isUpdate: false,
+    });
+  }
+  function handleExport(){
+    createMessage.success("下载成功！");
+  }
+  function viewAccount(record: Recordable) {
+    openAccountModal(true, {
+      record,
+    });
+  }
+
+  function handleEdit() {
+    let rows = getSelectRows();
+    if (rows.length == 0) {
+      return createMessage.warn('请勾选一个角色进行编辑');
+    }
+    const record = rows[0];
+    openRoleModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  async function handleDelete() {
+    let rows = getSelectRows();
+    if (rows.length == 0) {
+      return createMessage.warn('请勾选一个角色进行删除');
+    }
+    const query = [rows[0].id];
+    createConfirm({
+      iconType: 'info',
+      title: '删除',
+      content: '确定要删除当前角色吗',
+      onOk: async () => {
+        const data = await deleteRole(query);
+        if (data) {
+          handleSuccess();
+          return createMessage.success('删除成功');
+        } else {
+          return createMessage.error('删除失败');
+        }
+      },
+    });
+  }
+
+  function handleSuccess() {
+    clearSelectedRowKeys();
+    reload();
+  }
+  function onBtnClicked(domId) {
+    switch (domId) {
+      case 'btnAdd':
+        handleCreate();
+        break;
+      case 'btnEdit':
+        handleEdit();
+        break;
+      case 'btnDelete':
+        handleDelete();
+        break;
+      case 'btnModules':
+        let rows = getSelectRows();
+        if (rows.length == 0) {
+          return createMessage.warn('请勾选一个角色进行编辑');
+        }
+        const record = rows[0];
+        openModulesModal(true, {
+          record,
+        });
+        break;
+      case 'btnExport':
+        handleExport();
+        break;
+      default:
+        break;
+    }
+  }
+</script>
diff --git a/src/views/demo/report/page.ts b/src/views/demo/report/page.ts
new file mode 100644
index 0000000..26aa161
--- /dev/null
+++ b/src/views/demo/report/page.ts
@@ -0,0 +1,6 @@
+
+export { default as AccountModal } from './AccountModal.vue';
+export { default as ModulesModal } from './ModulesModal.vue';
+export { default as RoleDrawer } from './RoleDrawer.vue';
+export { default as RoleModal } from './RoleModal.vue';
+
diff --git a/src/views/demo/report/report.data.ts b/src/views/demo/report/report.data.ts
new file mode 100644
index 0000000..4f6d9a0
--- /dev/null
+++ b/src/views/demo/report/report.data.ts
@@ -0,0 +1,98 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch,Tag } from 'ant-design-vue';
+import { setRoleStatus } from '@/api/demo/system';
+import { useMessage } from '@/hooks/web/useMessage';
+
+type CheckedType = boolean | string | number;
+export const columns: BasicColumn[] = [
+  {
+    title: '案件编号',
+    dataIndex: 'case_no',
+    width: 200,
+  },{
+    title: '案件描述',
+    dataIndex: 'case_description',
+    width: 200,
+  },{
+    title: '办结状态',
+    dataIndex: 'handle_status_name',
+    width: 200,
+  },{
+    title: '上报人',
+    dataIndex: 'createusername',
+    width: 200,
+  },{
+    title: '上报时间',
+    dataIndex: 'createtime',
+    width: 200,
+  }
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    label: '关键字段',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'is_intact',
+    component: 'Select',
+    label: '案件状态',
+    colProps: {
+      span: 6,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '全部',
+          value: null,
+          key: null,
+        },
+        {
+          label: '未判读',
+          value: '0',
+          key: '0',
+        },{
+          label: '已提交',
+          value: '1',
+          key: '1',
+        },{
+          label: '已关闭',
+          value: '99',
+          key: '99',
+        },
+      ],
+    },
+  },
+ 
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+    ifShow:false,
+  },
+  {
+    field: 'name',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    componentProps: {
+      options: [
+        { label: '启用', value: 0},
+        { label: '停用', value: 1 },
+      ],
+    },
+  },
+];
diff --git a/src/views/demo/statistical/RecordList.vue b/src/views/demo/statistical/RecordList.vue
new file mode 100644
index 0000000..d5edaff
--- /dev/null
+++ b/src/views/demo/statistical/RecordList.vue
@@ -0,0 +1,174 @@
+<template>
+    <BasicTable @register="registerTable" >
+        <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'streetname'">
+              <TableAction
+                :actions="[
+                  {
+                    label: '详情',
+                    onClick: handlePreViewData.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+    </BasicTable>
+  </template>
+<script lang="ts" setup>
+    import { reactive } from 'vue';
+  
+    import { BasicTable, useTable, TableAction } from '@/components/Table';
+    import { getRoleListByPage,getReportList, deleteRole } from '@/api/demo/system';
+  
+    import { useMessage } from '@/hooks/web/useMessage';
+    import { useModal } from '@/components/Modal';
+  
+    import { columns,columnsDataPreview,searchFormSchema } from './record.data';
+  
+    defineOptions({ name: 'RoleManagement' });
+  
+    const { createConfirm, createMessage } = useMessage();
+    const [registerModal, { openModal: openRoleModal }] = useModal();
+    const [registerModulesModal, { openModal: openModulesModal }] = useModal();
+    const [registerAccountModal, { openModal: openAccountModal }] = useModal();
+    const searchInfo = reactive<Recordable>({});
+  
+   
+    const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
+      // 表格名称
+      title: '',
+      // 获取数据的接口
+      api: getReportList,
+      // 表单列信息 BasicColumn[]
+      columns,
+      rowKey: 'id',
+      formConfig: {
+        labelWidth: 120,
+        schemas: searchFormSchema,
+      },
+      // 使用搜索表单
+      useSearchForm: false,
+      // 显示表格设置工具
+      showTableSetting: false,
+      // 是否显示表格边框
+      bordered: true,
+      // 序号列
+      showIndexColumn: false,
+      // 勾选列
+      rowSelection: false,
+      // 搜索
+      handleSearchInfoFn(info) {
+        return info;
+      },
+    });
+  
+  
+  
+  
+    function handleCreate() {
+      openRoleModal(true, {
+        isUpdate: false,
+      });
+    }
+    function viewAccount(record: Recordable) {
+      openAccountModal(true, {
+        record,
+      });
+    }
+  
+    function handlePreViewData(record:Recordable){
+  
+      console.log(record)
+    }
+  
+    function handleEdit() {
+      let rows = getSelectRows();
+      if (rows.length == 0) {
+        return createMessage.warn('请勾选一个角色进行编辑');
+      }
+      const record = rows[0];
+      openRoleModal(true, {
+        record,
+        isUpdate: true,
+      });
+    }
+  
+    async function handleDelete() {
+      let rows = getSelectRows();
+      if (rows.length == 0) {
+        return createMessage.warn('请勾选一个角色进行删除');
+      }
+      const query = [rows[0].id];
+      createConfirm({
+        iconType: 'info',
+        title: '删除',
+        content: '确定要删除当前角色吗',
+        onOk: async () => {
+          const data = await deleteRole(query);
+          if (data) {
+            handleSuccess();
+            return createMessage.success('删除成功');
+          } else {
+            return createMessage.error('删除失败');
+          }
+        },
+      });
+    }
+  
+    function handlePrint(){
+  
+    }
+  
+    function handleExport(){
+      createMessage.success("数据导出成功！")
+    }
+  
+    function handleSuccess() {
+      clearSelectedRowKeys();
+      reload();
+      reloadDataPreview();
+    }
+    function onBtnClicked(domId) {
+      switch (domId) {
+        case 'btnAdd':
+          handleCreate();
+          break;
+        case 'btnEdit':
+          handleEdit();
+          break;
+        case 'btnDelete':
+          handleDelete();
+          break;
+        case 'btnModules':
+          let rows = getSelectRows();
+          if (rows.length == 0) {
+            return createMessage.warn('请勾选一个角色进行编辑');
+          }
+          const record = rows[0];
+          openModulesModal(true, {
+            record,
+          });
+          break;
+        case 'btnPrint':
+          handlePrint();
+          break;
+        case 'btnExport':
+            handleExport();
+          break;
+        default:
+          break;
+      }
+    }
+  </script>
+  <style>
+  .data-preview-container{
+      width:100%;
+      height: calc( 100% - 50px);
+      position:absolute;
+      background:#fff;
+      padding:30px;
+      top:0px;
+      left:0px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/demo/statistical/index.vue b/src/views/demo/statistical/index.vue
new file mode 100644
index 0000000..8224cd3
--- /dev/null
+++ b/src/views/demo/statistical/index.vue
@@ -0,0 +1,249 @@
+<template>
+  <div>
+    <BasicTable  @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <PermissionBtn @btn-event="onBtnClicked" />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'streetname'">
+          <TableAction
+            :actions="[
+              {
+                label: record.streetname,
+                onClick: handlePreViewData.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+
+	<div class="data-preview-container" v-if="showRecordList">
+		<a-tabs  hide-add type="editable-card" @edit="onEdit">
+			<a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
+				{{ pane.content }}
+			</a-tab-pane>
+		</a-tabs>
+		<RecordList></RecordList>
+		<div class="data-preview-container-option">
+			<div @click="handleCloseRecordList()">
+				<MinusOutlined />
+			</div>
+			<div @click="handleCloseRecordList()">
+				<CloseOutlined />
+			</div>
+		</div>
+	</div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref,reactive } from 'vue';
+
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getRoleListByPage,getReportList, deleteRole } from '@/api/demo/system';
+
+	// import {DataPreivew} from './RecordList.vue'
+
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useModal } from '@/components/Modal';
+  import { RecordList } from './page';
+
+  import { PermissionBtn } from '@/components/PermissionBtn/index';
+
+  import { columns, columnsDataPreview,searchFormSchema } from './statistical.data';
+  import {MinusOutlined,CloseOutlined} from '@ant-design/icons-vue'
+
+  defineOptions({ name: 'RoleManagement' });
+
+  const { createConfirm, createMessage } = useMessage();
+  const [registerModal, { openModal: openRoleModal }] = useModal();
+  const [registerModulesModal, { openModal: openModulesModal }] = useModal();
+  const [registerAccountModal, { openModal: openAccountModal }] = useModal();
+  const searchInfo = reactive<Recordable>({});
+
+  const showRecordList = ref<boolean>(false);
+
+  const panes = reactive<{ title: string; content: string; key: string; closable?: boolean}[]>([
+	{ title: '东蒙镇-24h为核查', content: '', key: '1' },
+	{ title: '大田庄乡-违法', content: '', key: '2' },
+	{ title: '费城街道-伪变化', content: '', key: '3' }
+  ])
+  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
+    // 表格名称
+    title: '统计报表',
+    // 获取数据的接口
+    api: getReportList,
+    // 表单列信息 BasicColumn[]
+    columns,
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    // 使用搜索表单
+    useSearchForm: true,
+    // 显示表格设置工具
+    showTableSetting: true,
+    // 是否显示表格边框
+    bordered: true,
+    // 序号列
+    showIndexColumn: false,
+    // 勾选列
+    rowSelection: false,
+    // 搜索
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+
+
+  const [registerTableDataPreview,{ reloadDataPreview, getSelectRowsDataPreview, clearSelectedRowKeysDataPreview }] = useTable({
+    // 表格名称
+    title: '',
+    // 获取数据的接口
+    api: getReportList,
+    // 表单列信息 BasicColumn[]
+    columnsDataPreview,
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+    //   schemas: searchFormSchema,
+    },
+    // 使用搜索表单
+    useSearchForm: false,
+    // 显示表格设置工具
+    showTableSetting: false,
+    // 是否显示表格边框
+    bordered: true,
+    // 序号列
+    showIndexColumn: false,
+    // 勾选列
+    rowSelection: false,
+    // 搜索
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+  function handleCloseRecordList(){
+	showRecordList.value = false;
+  }
+  function handleCreate() {
+    openRoleModal(true, {
+      isUpdate: false,
+    });
+  }
+  function viewAccount(record: Recordable) {
+    openAccountModal(true, {
+      record,
+    });
+  }
+
+  function handlePreViewData(record:Recordable){
+	showRecordList.value = true;
+	console.log(record)
+  }
+
+  function handleEdit() {
+    let rows = getSelectRows();
+    if (rows.length == 0) {
+      return createMessage.warn('请勾选一个角色进行编辑');
+    }
+    const record = rows[0];
+    openRoleModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  async function handleDelete() {
+    let rows = getSelectRows();
+    if (rows.length == 0) {
+      return createMessage.warn('请勾选一个角色进行删除');
+    }
+    const query = [rows[0].id];
+    createConfirm({
+      iconType: 'info',
+      title: '删除',
+      content: '确定要删除当前角色吗',
+      onOk: async () => {
+        const data = await deleteRole(query);
+        if (data) {
+          handleSuccess();
+          return createMessage.success('删除成功');
+        } else {
+          return createMessage.error('删除失败');
+        }
+      },
+    });
+  }
+
+  function handlePrint(){
+
+  }
+
+  function handleExport(){
+	createMessage.success("数据导出成功！")
+  }
+
+  function handleSuccess() {
+    clearSelectedRowKeys();
+    reload();
+	reloadDataPreview();
+  }
+  function onBtnClicked(domId) {
+    switch (domId) {
+      case 'btnAdd':
+        handleCreate();
+        break;
+      case 'btnEdit':
+        handleEdit();
+        break;
+      case 'btnDelete':
+        handleDelete();
+        break;
+      case 'btnModules':
+        let rows = getSelectRows();
+        if (rows.length == 0) {
+          return createMessage.warn('请勾选一个角色进行编辑');
+        }
+        const record = rows[0];
+        openModulesModal(true, {
+          record,
+        });
+        break;
+	  case 'btnPrint':
+		handlePrint();
+		break;
+      case 'btnExport':
+	  	handleExport();
+		break;
+      default:
+        break;
+    }
+  }
+</script>
+<style>
+.data-preview-container{
+	width:100%;
+	height: calc( 100% - 30px);
+	position:absolute;
+	padding:30px 0px;
+	top:0px;
+	left:0px;
+}
+.data-preview-container-option{
+	width:80px;
+	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;
+}
+</style>
diff --git a/src/views/demo/statistical/page.ts b/src/views/demo/statistical/page.ts
new file mode 100644
index 0000000..64f58ff
--- /dev/null
+++ b/src/views/demo/statistical/page.ts
@@ -0,0 +1,3 @@
+
+export { default as RecordList} from './RecordList.vue'
+
diff --git a/src/views/demo/statistical/record.data.ts b/src/views/demo/statistical/record.data.ts
new file mode 100644
index 0000000..4466af1
--- /dev/null
+++ b/src/views/demo/statistical/record.data.ts
@@ -0,0 +1,234 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch,Tag } from 'ant-design-vue';
+import { setRoleStatus } from '@/api/demo/system';
+import { useMessage } from '@/hooks/web/useMessage';
+
+type CheckedType = boolean | string | number;
+
+
+export const columnsDataPreview: BasicColumn[] = [
+  {
+    title: '乡镇(街道)',
+    dataIndex: 'streetname',
+    width: 120,
+  },{
+    title: '无人机发现数量',
+    dataIndex: 'allCount',
+    width: 120,
+  },{
+    title: '外业图斑核查情况',
+    children:[
+      {
+        title: '完成外业核查数量',
+        dataIndex: 'handleStatus',
+        width: 120,
+      },{
+        title: '24h内未核查',
+        dataIndex: 'notDealHour24',
+        width: 120,
+      }
+    ]
+  },{
+    title: '下发疑似图斑类型',
+    children:[
+      {
+        title: '房屋翻新',
+        dataIndex: 'typeFanxinCount',
+        width: 120,
+      },{
+        title: '房屋加盖',
+        dataIndex: 'typeJiagaiCount',
+        width: 120,
+      },{
+        title: '房屋翻建',
+        dataIndex: 'typeFanjianCount',
+        width: 120,
+      },{
+        title: '存量建设',
+        dataIndex: 'typeCunliangCount',
+        width: 120,
+      },{
+        title: '推土',
+        dataIndex: 'typeTuituCount',
+        width: 120,
+      },{
+        title: '其他',
+        dataIndex: 'typeOtherCount',
+        width: 120,
+      }
+    ]
+  },{
+    title: '图斑判定',
+    children:[
+      {
+        title: '合法',
+        dataIndex: 'illegal0Count',
+        width: 120,
+      },{
+        title: '违法',
+        dataIndex: 'illegal1Count',
+        width: 120,
+      },{
+        title: '伪变化',
+        dataIndex: 'illegal2Count',
+        width: 120,
+      }
+    ]
+  },{
+    title: '新增违法图斑整改情况',
+    dataIndex: 'handle_status_name',
+    children:[
+      {
+        title: '外业核实后确定违法数',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '违法面积',
+        dataIndex: 'illegalHandleAreaList',
+        width: 120,
+      },{
+        title: '整改销号数',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '销号面积',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '尚未整改宗数',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '未整改面积',
+        dataIndex: 'beginTime',
+        width: 120,
+      }
+    ]
+  },{
+    title: '违法图斑整改进度情况',
+    children:[
+      {
+        title: '3日内未整改完成',
+        dataIndex: 'notComplete3',
+      },{
+        title: '7日内未整改完成',
+        dataIndex: 'notComplete7',
+      },{
+        title: '30日内未整改完成',
+        dataIndex: 'notComplete30',
+      },{
+        title: '30日以上未整改完成',
+        dataIndex: 'notComplete30More',
+      }
+    ]
+  },{
+    title: '百分制考核计分',
+    dataIndex: 'handle_status_name',
+    children:[
+      {
+        title: '24h外业核查计分',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '整改进度计分',
+        dataIndex: 'beginTime',
+        width: 120,
+      }
+    ]
+  },{
+    title: '备注',
+    dataIndex: 'createusername',
+    width: 200,
+  }
+];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '案件编号',
+    dataIndex: 'case_no',
+    width: 120,
+  }
+  ,{
+    title: '村/社区',
+    dataIndex: 'communityname',
+    width: 120,
+  },{
+    title: '案件描述',
+    dataIndex: 'case_description',
+    width: 120,
+  },{
+    title: '所属类型',
+    dataIndex: 'typename',
+    width: 120,
+  },{
+    title: '处理人',
+    dataIndex: 'deal_username',
+    width: 120,
+  },{
+    title: '处理时间',
+    dataIndex: 'deal_time',
+    width: 120,
+  },
+  {
+    title: '审核人',
+    dataIndex: 'verifyuser',
+    width: 120,
+  },{
+    title: '审核时间',
+    dataIndex: 'verifytime',
+    width: 120,
+  },{
+    title: '案件状态',
+    dataIndex: 'handle_status_name',
+    width: 120,
+  }
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    label: '关键字段',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: '[startDate, endDate]',
+    label: '日期范围',
+    component: 'RangePicker',
+    colProps: { span: 8 },
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      placeholder: ['开始日期', '结束日期'],
+    },
+  },
+ 
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+    ifShow:false,
+  },
+  {
+    field: 'name',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    componentProps: {
+      options: [
+        { label: '启用', value: 0},
+        { label: '停用', value: 1 },
+      ],
+    },
+  },
+];
diff --git a/src/views/demo/statistical/statistical.data.ts b/src/views/demo/statistical/statistical.data.ts
new file mode 100644
index 0000000..f15a89d
--- /dev/null
+++ b/src/views/demo/statistical/statistical.data.ts
@@ -0,0 +1,328 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch,Tag } from 'ant-design-vue';
+import { setRoleStatus } from '@/api/demo/system';
+import { useMessage } from '@/hooks/web/useMessage';
+
+type CheckedType = boolean | string | number;
+
+
+export const columnsDataPreview: BasicColumn[] = [
+  {
+    title: '乡镇(街道)',
+    dataIndex: 'streetname',
+    width: 120,
+  },{
+    title: '无人机发现数量',
+    dataIndex: 'allCount',
+    width: 120,
+  },{
+    title: '外业图斑核查情况',
+    children:[
+      {
+        title: '完成外业核查数量',
+        dataIndex: 'handleStatus',
+        width: 120,
+      },{
+        title: '24h内未核查',
+        dataIndex: 'notDealHour24',
+        width: 120,
+      }
+    ]
+  },{
+    title: '下发疑似图斑类型',
+    children:[
+      {
+        title: '房屋翻新',
+        dataIndex: 'typeFanxinCount',
+        width: 120,
+      },{
+        title: '房屋加盖',
+        dataIndex: 'typeJiagaiCount',
+        width: 120,
+      },{
+        title: '房屋翻建',
+        dataIndex: 'typeFanjianCount',
+        width: 120,
+      },{
+        title: '存量建设',
+        dataIndex: 'typeCunliangCount',
+        width: 120,
+      },{
+        title: '推土',
+        dataIndex: 'typeTuituCount',
+        width: 120,
+      },{
+        title: '其他',
+        dataIndex: 'typeOtherCount',
+        width: 120,
+      }
+    ]
+  },{
+    title: '图斑判定',
+    children:[
+      {
+        title: '合法',
+        dataIndex: 'illegal0Count',
+        width: 120,
+      },{
+        title: '违法',
+        dataIndex: 'illegal1Count',
+        width: 120,
+      },{
+        title: '伪变化',
+        dataIndex: 'illegal2Count',
+        width: 120,
+      }
+    ]
+  },{
+    title: '新增违法图斑整改情况',
+    dataIndex: 'handle_status_name',
+    children:[
+      {
+        title: '外业核实后确定违法数',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '违法面积',
+        dataIndex: 'illegalHandleAreaList',
+        width: 120,
+      },{
+        title: '整改销号数',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '销号面积',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '尚未整改宗数',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '未整改面积',
+        dataIndex: 'beginTime',
+        width: 120,
+      }
+    ]
+  },{
+    title: '违法图斑整改进度情况',
+    children:[
+      {
+        title: '3日内未整改完成',
+        dataIndex: 'notComplete3',
+      },{
+        title: '7日内未整改完成',
+        dataIndex: 'notComplete7',
+      },{
+        title: '30日内未整改完成',
+        dataIndex: 'notComplete30',
+      },{
+        title: '30日以上未整改完成',
+        dataIndex: 'notComplete30More',
+      }
+    ]
+  },{
+    title: '百分制考核计分',
+    dataIndex: 'handle_status_name',
+    children:[
+      {
+        title: '24h外业核查计分',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '整改进度计分',
+        dataIndex: 'beginTime',
+        width: 120,
+      }
+    ]
+  },{
+    title: '备注',
+    dataIndex: 'createusername',
+    width: 200,
+  }
+];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '乡镇(街道)',
+    dataIndex: 'streetname',
+    width: 120,
+  },{
+    title: '无人机发现数量',
+    dataIndex: 'allCount',
+    width: 120,
+  },{
+    title: '外业图斑核查情况',
+    children:[
+      {
+        title: '完成外业核查数量',
+        dataIndex: 'handleStatus',
+        width: 120,
+      },{
+        title: '24h内未核查',
+        dataIndex: 'notDealHour24',
+        width: 120,
+      }
+    ]
+  },{
+    title: '下发疑似图斑类型',
+    children:[
+      {
+        title: '房屋翻新',
+        dataIndex: 'typeFanxinCount',
+        width: 120,
+      },{
+        title: '房屋加盖',
+        dataIndex: 'typeJiagaiCount',
+        width: 120,
+      },{
+        title: '房屋翻建',
+        dataIndex: 'typeFanjianCount',
+        width: 120,
+      },{
+        title: '存量建设',
+        dataIndex: 'typeCunliangCount',
+        width: 120,
+      },{
+        title: '推土',
+        dataIndex: 'typeTuituCount',
+        width: 120,
+      },{
+        title: '其他',
+        dataIndex: 'typeOtherCount',
+        width: 120,
+      }
+    ]
+  },{
+    title: '图斑判定',
+    children:[
+      {
+        title: '合法',
+        dataIndex: 'illegal0Count',
+        width: 120,
+      },{
+        title: '违法',
+        dataIndex: 'illegal1Count',
+        width: 120,
+      },{
+        title: '伪变化',
+        dataIndex: 'illegal2Count',
+        width: 120,
+      }
+    ]
+  },{
+    title: '新增违法图斑整改情况',
+    dataIndex: 'handle_status_name',
+    children:[
+      {
+        title: '外业核实后确定违法数',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '违法面积',
+        dataIndex: 'illegalHandleAreaList',
+        width: 120,
+      },{
+        title: '整改销号数',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '销号面积',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '尚未整改宗数',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '未整改面积',
+        dataIndex: 'beginTime',
+        width: 120,
+      }
+    ]
+  },{
+    title: '违法图斑整改进度情况',
+    children:[
+      {
+        title: '3日内未整改完成',
+        dataIndex: 'notComplete3',
+      },{
+        title: '7日内未整改完成',
+        dataIndex: 'notComplete7',
+      },{
+        title: '30日内未整改完成',
+        dataIndex: 'notComplete30',
+      },{
+        title: '30日以上未整改完成',
+        dataIndex: 'notComplete30More',
+      }
+    ]
+  },{
+    title: '百分制考核计分',
+    dataIndex: 'handle_status_name',
+    children:[
+      {
+        title: '24h外业核查计分',
+        dataIndex: 'beginTime',
+        width: 120,
+      },{
+        title: '整改进度计分',
+        dataIndex: 'beginTime',
+        width: 120,
+      }
+    ]
+  },{
+    title: '备注',
+    dataIndex: 'createusername',
+    width: 200,
+  }
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    label: '关键字段',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: '[startDate, endDate]',
+    label: '日期范围',
+    component: 'RangePicker',
+    colProps: { span: 8 },
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      placeholder: ['开始日期', '结束日期'],
+    },
+  },
+ 
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+    ifShow:false,
+  },
+  {
+    field: 'name',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    componentProps: {
+      options: [
+        { label: '启用', value: 0},
+        { label: '停用', value: 1 },
+      ],
+    },
+  },
+];