问题预警画面

src/api/earlywarning/index.ts

@@ -30,6 +30,10 @@ enum Api {
   ProjectSupervise = '/api/DroneSsny/ProjectSupervise',
   // 项目列表导出
   GetDronssnydExport = '/api/DroneSsny/GetDronssnydExport',
+  // 预警问题列表
+  GetWentiDronssnydList = '/api/DroneSsny/GetWentiDronssnydList',
+  // 预警问题导出
+  GetWentiDronssnydExport = '/api/DroneSsny/GetWentiDronssnydExport'
 }
 
 export function TimeoutWarning(params) {
@@ -103,4 +107,15 @@ export function GetDronssnydExport(params) {
     params,
     responseType: 'blob',
   });
+}
+export function GetWentiDronssnydList(params) {
+  return defHttp.get({ url: Api.GetWentiDronssnydList, params });
+}
+export function GetWentiDronssnydExport(params: {id:string, newEndTime: string}) {
+  let paramsString = new URLSearchParams(params).toString();
+  return defHttp.post({ 
+    url: `${Api.GetWentiDronssnydExport}?${paramsString}`,
+    params,
+    responseType: 'blob',
+  });
 }

src/views/demo/problemwarning/index.vue

@@ -0,0 +1,103 @@
+<template>
+<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
+    <template #toolbar>
+      <a-button type="primary" @click="download">导出</a-button>
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              onClick: () => {
+                handleInfo(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"
+  >
+    <ShowInfoModal :showInfoData="showInfoData"/>
+  </a-modal>
+</PageWrapper>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { PageWrapper } from '@/components/Page';
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { columns, searchFormSchema } from './utils';
+import { GetWentiDronssnydList, GetWentiDronssnydExport } from '@/api/earlywarning/index'
+import ShowInfoModal from '@/components/EarlyWarning/InfoModal/index.vue'
+
+const showInfoOpen = ref(false)
+const showInfoData = ref();
+
+const [registerTable, { getForm }] = useTable({
+  title: '问题预警',
+  api: GetWentiDronssnydList,
+  columns,
+  rowKey: 'id',
+  useSearchForm: true,
+  showTableSetting: true,
+  bordered: true,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+  },
+  actionColumn: {
+    width: 80,
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+  },
+});
+function handleInfo(record) {
+  showInfoData.value = record
+  showInfoOpen.value = true
+}
+const download = () => {
+  const form = getForm();
+  const filterValues = form.getFieldsValue();
+    GetWentiDronssnydExport(filterValues).then(res => {
+    const elink = document.createElement('a');
+    elink.download = '问题预警数据' + new Date().getTime() + '.xls';
+    elink.style.display = 'none';
+    elink.href = URL.createObjectURL(res);
+    document.body.appendChild(elink);
+    elink.click();
+    URL.revokeObjectURL(elink.href);
+    document.body.removeChild(elink);
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.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>

src/views/demo/problemwarning/utils.ts

@@ -0,0 +1,155 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { getChildrenTree } from '@/api/demo/system';
+import { getLoad } from '@/api/sys/sysDataItemDetail';
+import dayjs from 'dayjs';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '项目编号',
+    dataIndex: 'xiangmu_no',
+  },
+  {
+    title: '项目名称',
+    dataIndex: 'xiangmu_name',
+    width: 200,
+  },
+  {
+    title: '乡镇',
+    dataIndex: 'streetname',
+  },
+  {
+    title: '村庄',
+    dataIndex: 'communityname',
+  },
+  {
+    title: '权利人',
+    dataIndex: 'quanliren',
+  },
+  {
+    title: '联系方式',
+    dataIndex: 'lianxifangshi',
+  },
+  {
+    title: '行政区划',
+    dataIndex: 'xingzhengquhua',
+  },
+  {
+    title: '备案编号',
+    dataIndex: 'beian_no',
+  },
+  {
+    title: '备案日期',
+    dataIndex: 'beianriqi',
+    customRender: ({ text }) => {
+      if (!text) return '';
+      return dayjs(text).format('YYYY-MM-DD');
+    },
+  },
+  {
+    title: '项目状态',
+    dataIndex: 'handle_status_name',
+  },
+  {
+    title: '项目开始时间',
+    dataIndex: 'start_time',
+    width: 200,
+    customRender: ({ text }) => {
+      if (!text) return '';
+      return dayjs(text).format('YYYY-MM-DD');
+    },
+  },
+  {
+    title: '项目结束时间',
+    dataIndex: 'end_time',
+    customRender: ({ text }) => {
+      if (!text) return '';
+      return dayjs(text).format('YYYY-MM-DD');
+    },
+  },
+  {
+    title: '设施农业类型',
+    dataIndex: 'xiangmu_yt',
+    width: 110,
+  },
+  {
+    title: '建筑结构',
+    dataIndex: 'jianzhujiegou',
+    width: 110,
+  },
+  {
+    title: '设施农业申请用地面积(公顷)',
+    dataIndex: 'shenqing_area',
+    width: 200,
+  },
+  {
+    title: '生产设施用地(公顷)',
+    dataIndex: 'shengchan_area',
+    width: 200,
+  },
+  {
+    title: '辅助设施用地(公顷)',
+    dataIndex: 'fuzhu_area',
+    width: 200,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+    {
+    field: 'xiangmuno',
+    component: 'Input',
+    colProps: { span: 4 },
+    label: '项目编号',
+  },
+  {
+    field: 'xiangmumc',
+    component: 'Input',
+    colProps: { span: 4 },
+    label: '项目名称',
+  },
+  {
+    field: 'xiangmuyt',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    label: '设施农业类型',
+    componentProps: ({ formModel }) => {
+      return {
+        api: getLoad,
+        params: { code: 'ssnyddqyt' },
+        resultField: 'result',
+        labelField: 'itemName',
+        valueField: 'itemValue',
+      };
+    },
+  },
+  {
+    field: 'status',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    label: '项目状态',
+    componentProps: ({ formModel }) => {
+      return {
+        api: getLoad,
+        params: { code: 'ssnydxmzt' },
+        resultField: 'result',
+        labelField: 'itemName',
+        valueField: 'itemValue',
+      };
+    },
+  },
+  {
+    field: 'streetid',
+    label: '乡镇',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getChildrenTree,
+        params: { parentId: 371325 },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'name',
+        valueField: 'id',
+      };
+    },
+  },
+];