统计分析

src/api/demo/system.ts

@@ -68,7 +68,8 @@ enum Api {
   UpdateNotice = '/api/DroneCaseinfo/UpdateMessage',
   DeleteNotice = '/api/DroneCaseinfo/UpdateDelMessage',
   UserList = '/api/users/load',
-  // StatisticalList='/api/DroneCaseinfo/CaseSynthesisCensus',
+  CaseOffenceForSsny ='/api/DroneSsnyStatistics/CaseOffenceForSsny',
+  GetCaseInfo ='/api/DroneSsnyStatistics/GetCaseInfo',
   StatisticalList = '/api/DroneCaseInfoSingle/CaseSynthesisCensusSingle',
   StatisticalListExport = '/api/DroneCaseInfoSingle/ExportCaseSynthesisCensusStreet',
   LoadNoticeDetail = '/api/DroneCaseinfo/LoadMessage',
@@ -339,6 +340,10 @@ export const getReportList = (params: ReportParams) =>
 
 export const getStatisticalList = (params: ReportParams) =>
   defHttp.get<StatisticalListGetResultModel>({ url: Api.StatisticalList, params });
+export const getCaseOffenceForSsnyList = (params: ReportParams) =>
+  defHttp.get<StatisticalListGetResultModel>({ url: Api.CaseOffenceForSsny, params });
+export const getCaseOffenceInfoList = (params: ReportParams) =>
+  defHttp.get<StatisticalListGetResultModel>({ url: Api.GetCaseInfo, params });
   
 export const exportStatisticalList = (params: ReportParams) => {
   return defHttp.post({

src/views/demo/statisticalanalysis/RecordList.vue

@@ -0,0 +1,138 @@
+<template>
+  <a-table :columns="columns.col" :data-source="columns.data" size="small" height="500" bordered :pagination="pagination.pagination">
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.dataIndex === 'action'">
+        <a @click="viewDetail(record)">详情</a>
+      </template>
+    </template>
+    </a-table>
+
+    <BasicModal
+      v-bind="$attrs"
+      @register="registerModal"
+      title="图斑详情"
+      :canFullscreen="false"
+      :defaultFullscreen="true"
+      :showCancelBtn="false"
+      :showOkBtn="false"
+      :draggable="false"
+    >
+      <!-- <CaseView :caseId="caseId"></CaseView> -->
+    </BasicModal>
+
+</template>
+<script lang="ts" setup>
+import { reactive,ref,defineProps,watch } from 'vue';
+import { BasicModal, useModal } from '@/components/Modal';
+import { getCaseOffenceForSsnyList, getCaseOffenceInfoList } from '@/api/demo/system';
+const [registerModal, { openModal, setModalProps }] = useModal();
+
+const props = defineProps<{
+  currentListQuery:Object
+}>()
+const caseId = ref('');
+let columns = reactive({data:[],col:[{
+    title: '项目编号',
+    dataIndex: 'xiangmu_no',
+  },
+  {
+    title: '项目名称',
+    dataIndex: 'xiangmu_name',
+  },
+  {
+    title: '项目用途',
+    dataIndex: 'xiangmu_yt',
+  },
+  {
+    title: '行政区划',
+    dataIndex: 'xingzhengquhua',
+  },{
+    title: '所属街道/乡镇',
+    dataIndex: 'streetname',
+  },{
+    title: '所属社区',
+    dataIndex: 'communityname',
+  },{
+    title: '权利人',
+    dataIndex: 'quanliren',
+  },{
+    title: '操作状态',
+    dataIndex: 'handle_status_name',
+  },{
+    title: '申请地区',
+    dataIndex: 'shenqing_area',
+  },{
+    title: '生产地区',
+    dataIndex: 'shengchan_area',
+  },{
+    title: '辅助地区',
+    dataIndex: 'fuzhu_area',
+  },{
+    title: '备案号',
+    dataIndex: 'beian_no',
+  },{
+    title: '开始时间',
+    dataIndex: 'start_time',
+  },{
+    title: '结束时间',
+    dataIndex: 'end_time',
+  },{
+    title: '下发时间',
+    dataIndex: 'xiafatime',
+  }]});
+let total = ref(0)
+
+function viewDetail(record) {
+  console.log(record);
+  caseId.value = record.id;
+  openModal();
+}
+
+let current = ref(1)
+let pageSize = ref(10)
+
+
+
+let pagination = reactive({
+  pagination: {
+        limit:pageSize, // 每页显示的条数
+        showSizeChanger: true, // 是否可以改变每页显示的条数
+        pageSizeOptions: ['10', '50', '80', '100'], // 可选的每页显示条数
+        showQuickJumper: true, // 是否可以快速跳转到指定页
+        showTotal:total=>`共${total}条`,
+        page: current, // 当前页数
+        total: total, // 总条数
+        onChange:handlePageChange
+      }
+})
+
+function handlePageChange(page,pageSize){
+  props.currentListQuery.page = page;
+  props.currentListQuery.limit = pageSize;
+  pagination.pagination.limit = pageSize;
+  pagination.pagination.page = page;
+
+}
+
+watch(()=>props.currentListQuery,(newValue,oldValue)=>{
+  handleGetList();
+},{immediate:true,deep:true})
+
+function handleGetList(){
+  getCaseOffenceInfoList(props.currentListQuery).then(res=>{
+      columns.data = res.items;
+      total.value = res.total;
+  })
+}
+
+</script>
+<style scoped>
+.editable-row-operations a {
+  margin-right: 8px;
+}
+
+::v-deep .ant-table {
+  height: calc( 100vh - 230px)!important;
+  overflow-x: auto !important;
+}
+</style>

src/views/demo/statisticalanalysis/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <BasicTable  @register="registerTable" :searchInfo="searchInfo">
+      <template #bodyCell="{ column, record }">
+        <!-- 乡镇 -->
+        <template v-if="column.key === 'xmcount'">
+          <a class="cursor" @click="getCaseInfoList(column,record)">{{record.xmcount}}</a>
+        </template>   
+      </template>
+    </BasicTable>
+    <a-modal
+      v-model:open="showRecordList"
+      width="1710px"
+      :closable="true"
+      :footer="null"
+      title="详情明细"
+    >
+      <RecordList :currentListQuery="currentListQuery.listQuery" />
+    </a-modal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref,reactive } from 'vue';
+
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getCaseOffenceForSsnyList, getCaseOffenceInfoList } from '@/api/demo/system';
+
+  import { RecordList } from './page';
+
+  import { columns,searchFormSchema } from './statistical.data';
+
+  
+  defineOptions({ name: 'statisticalanalysis' });
+
+  const searchInfo = reactive<Recordable>({
+    countyid:null
+  });
+
+  const showRecordList = ref<boolean>(false);
+  let currentListQuery = reactive({listQuery:{}});
+
+  const searchParams = ref();
+  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, updateTableData}] = useTable({
+    // 表格名称
+    title: '统计分析',
+    // 获取数据的接口
+    api: getCaseOffenceForSsnyList,
+    // 表单列信息 BasicColumn[]
+    columns,
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    // 使用搜索表单
+    useSearchForm: true,
+    // 显示表格设置工具
+    showTableSetting: true,
+    // 是否显示分页
+    pagination:false,
+    // 是否显示表格边框
+    bordered: true,
+    // 序号列
+    showIndexColumn: false,
+    // 勾选列
+    rowSelection: false,
+    // 搜索
+    handleSearchInfoFn(info) {
+      searchParams.value = info;
+      return info;
+    },
+  });
+  // 查询条件
+  interface searchListSchema{
+    AreaId?:string;
+    StartTime?:string;
+    EndTime?:string;
+    page?:number;
+    limit?:number;
+    CaseType?:string;
+    key?:string;
+    tubanlaiyuan?:string;
+  }
+
+  function getCaseInfoList(column,record:Recordable){
+    const searchForm = reactive<searchListSchema>({
+      StartTime:searchParams.value?.startTime,
+      EndTime:searchParams.value?.endTime,
+      tubanlaiyuan:searchParams.value?.tubanlaiyuan,
+      page:1,
+      limit:10,
+      AreaId: record.countyid
+    })
+    showRecordList.value = true;
+    currentListQuery.listQuery = searchForm
+  }
+</script>
+<style>
+.cursor{
+  cursor: pointer;
+}
+</style>

src/views/demo/statisticalanalysis/page.ts

@@ -0,0 +1,3 @@
+
+export { default as RecordList} from './RecordList.vue'
+

src/views/demo/statisticalanalysis/statistical.data.ts

@@ -0,0 +1,152 @@
+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: 'countyname',
+    width: 120,
+  },{
+    title: '项目个数',
+    dataIndex: 'xmcount',
+    width: 120,
+  },{
+    title: '项目总用地面积',
+    dataIndex: 'xmzydmj',
+    width: 120,
+  },{
+    title: '按功能区分',
+    children:[
+      {
+        title: '生产用地',
+        dataIndex: 'scydmj',
+        width: 120,
+      },{
+        title: '生成辅助用地',
+        dataIndex: 'scfzydmj',
+        width: 120,
+      }
+    ]
+  },{
+    title: '其中面积',
+    dataIndex: '',
+    children:[
+      {
+        title: '农用地',
+        dataIndex: 'nydmj',
+        width: 120,
+      },{
+        title: '耕地',
+        dataIndex: 'gdmj',
+        width: 120,
+      },{
+        title: '永久基本农田',
+        dataIndex: 'yjjbntmj',
+        width: 120,
+      }
+    ]
+  }
+];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '乡镇',
+    dataIndex: 'countyname',
+    width: 120,
+  },{
+    title: '项目个数',
+    dataIndex: 'xmcount',
+    width: 120,
+  },{
+    title: '项目总用地面积',
+    dataIndex: 'xmzydmj',
+    width: 120,
+  },{
+    title: '按功能区分',
+    children:[
+      {
+        title: '生产用地',
+        dataIndex: 'scydmj',
+        width: 120,
+      },{
+        title: '生成辅助用地',
+        dataIndex: 'scfzydmj',
+        width: 120,
+      }
+    ]
+  },{
+    title: '其中面积',
+    dataIndex: '',
+    children:[
+      {
+        title: '农用地',
+        dataIndex: 'nydmj',
+        width: 120,
+      },{
+        title: '耕地',
+        dataIndex: 'gdmj',
+        width: 120,
+      },{
+        title: '永久基本农田',
+        dataIndex: 'yjjbntmj',
+        width: 120,
+      }
+    ]
+  }
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'tubanlaiyuan',
+    label: '图斑来源',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: '[startTime, endTime]',
+    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 },
+      ],
+    },
+  },
+];