数据收集

src/api/home/datainfo/index.ts

@@ -0,0 +1,56 @@
+import request from '@/config/axios'
+
+// 首页数据统计 VO
+export interface DataInfoVO {
+  infoYear: Date // 数据收集时间
+  infoCo2e: number // 碳排放总量
+  infoWater: number // 总用水量
+  infoCastoff: number // 废弃物总量
+  infoCoai: number // 能源使用总量
+  infoPollution: number // 污染物总量
+  infoEcom: number // 环保投入
+  infoStaff: number // 员工总数
+  infoTraining: number // 员工培训费用
+  infoRd: number // 研发费用
+  infoProbono: number // 公益投入金额
+  infoInsurance: number // 社会保险覆盖率
+  infoViolate: number // 违规经营次数
+  infoGuarantee: number // 对外担保金额
+  infoMoney: number // 现金分红总额
+  infoEnvironment: number // 环境评分
+  infoSociety: number // 社会评分
+  infoGovern: number // 治理评分
+}
+
+// 首页数据统计 API
+export const DataInfoApi = {
+  // 查询首页数据统计分页
+  getDataInfoPage: async (params: any) => {
+    return await request.get({ url: `/home/data-info/page`, params })
+  },
+
+  // 查询首页数据统计详情
+  getDataInfo: async (id: number) => {
+    return await request.get({ url: `/home/data-info/get?id=` + id })
+  },
+
+  // 新增首页数据统计
+  createDataInfo: async (data: DataInfoVO) => {
+    return await request.post({ url: `/home/data-info/create`, data })
+  },
+
+  // 修改首页数据统计
+  updateDataInfo: async (data: DataInfoVO) => {
+    return await request.put({ url: `/home/data-info/update`, data })
+  },
+
+  // 删除首页数据统计
+  deleteDataInfo: async (id: number) => {
+    return await request.delete({ url: `/home/data-info/delete?id=` + id })
+  },
+
+  // 导出首页数据统计 Excel
+  exportDataInfo: async (params) => {
+    return await request.download({ url: `/home/data-info/export-excel`, params })
+  },
+}

src/views/Home/Index.vue

@@ -124,22 +124,22 @@
 
       <el-card shadow="never" class="mt-8px">
         <el-skeleton :loading="loading" animated>
-          <el-row :gutter="20" justify="space-between">
+<!--          <el-row :gutter="20" justify="space-between">-->
-            <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
+<!--            <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">-->
-              <el-card shadow="hover" class="mb-8px">
+<!--              <el-card shadow="hover" class="mb-8px">-->
-                <el-skeleton :loading="loading" animated>
+<!--                <el-skeleton :loading="loading" animated>-->
-                  <Echart :options="pieOptionsData" :height="280" />
+<!--                  <Echart :options="pieOptionsData" :height="280" />-->
-                </el-skeleton>
+<!--                </el-skeleton>-->
-              </el-card>
+<!--              </el-card>-->
-            </el-col>
+<!--            </el-col>-->
-            <el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
+            <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
               <el-card shadow="hover" class="mb-8px">
                 <el-skeleton :loading="loading" animated>
                   <Echart :options="barOptionsData" :height="280" />
                 </el-skeleton>
               </el-card>
             </el-col>
-          </el-row>
+<!--          </el-row>-->
         </el-skeleton>
       </el-card>
       <el-card shadow="never" style="margin-bottom: 10px">
@@ -295,6 +295,7 @@ import { useUserStore } from '@/store/modules/user'
 // import { useWatermark } from '@/hooks/web/useWatermark'
 import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
 import { pieOptions, barOptions } from './echarts-data'
+import {DataInfoApi, DataInfoVO} from "@/api/home/datainfo";
 
 defineOptions({ name: 'Home' })
 
@@ -303,8 +304,11 @@ const { t } = useI18n()
 const userStore = useUserStore()
 // const { setWatermark } = useWatermark()
 const loading = ref(true)
+const list = ref<DataInfoVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
 const avatar = userStore.getUser.avatar
 const username = userStore.getUser.nickname
+const allData = ref({});
 const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
 // 获取统计数
 let totalSate = reactive<WorkplaceTotal>({
@@ -337,14 +341,43 @@ const pjList = [
   {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
   {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
 ]
-const dataList = [
+const dataList = computed(() => [
-  {name: '碳排放',infoCo2e: 543672300,dAn: '吨', time: '2024-07-05',color: '#e6eae3'},
+  { name: '碳排放', infoCo2e: allData.value.infoCo2e, dAn: '吨', time: '2024-07-05', color: '#e6eae3' },
-  {name: '用水量',infoCo2e: 543672300,dAn: '吨', time: '2024-07-05',color: '#ecf5ff'},
+  { name: '用水量', infoCo2e: allData.value.infoWater, dAn: '吨', time: '2024-07-05', color: '#ecf5ff' },
-  {name: '环保投入',infoCo2e: 543672300,dAn: '万元', time: '2024-07-05',color: '#f0f9eb'},
+  { name: '环保投入', infoCo2e: allData.value.infoEcom, dAn: '万元', time: '2024-07-05', color: '#f0f9eb' },
-  {name: '技能培训',infoCo2e: 543672300,dAn: '人', time: '2024-07-05',color: '#fef0f0'},
+  { name: '技能培训', infoCo2e: allData.value.infoTraining, dAn: '人', time: '2024-07-05', color: '#fef0f0' },
-  {name: '污染物质',infoCo2e: 543672300,dAn: '吨', time: '2024-07-05',color: '#c0c4cc'},
+  { name: '污染物质', infoCo2e: allData.value.infoPollution, dAn: '吨', time: '2024-07-05', color: '#c0c4cc' },
-  {name: '研发费用',infoCo2e: 543672300,dAn: '万元', time: '2024-07-05',color: '#fdf6ec'}
+  { name: '研发费用', infoCo2e: allData.value.infoRd, dAn: '万元', time: '2024-07-05', color: '#fdf6ec' }
-]
+]);
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DataInfoApi.getDataInfoPage(queryParams)
+    allData.value=data.list[0]
+    // await getAllData()
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 1,
+  infoYear: undefined,
+  infoYear: [],
+  infoCo2e: undefined,
+  infoWater: undefined,
+  infoPollution: undefined,
+  infoEcom: undefined,
+  infoTraining: undefined,
+  infoRd: undefined,
+  infoEnvironment: undefined,
+  infoSociety: undefined,
+  infoGovern: undefined,
+  createTime: [],
+})
 const getCount = async () => {
   const data = {
     project: 40,
@@ -540,6 +573,11 @@ const getAllApi = async () => {
 }
 
 getAllApi()
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>
 
 <style scoped>

src/views/Home/datainfo/DataInfoForm.vue

@@ -0,0 +1,238 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 80%">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="数据收集时间" prop="infoYear">
+            <el-date-picker
+              v-model="formData.infoYear"
+              type="date"
+              value-format="x"
+              placeholder="选择时间"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="碳排放量" prop="infoCo2e">
+            <el-input v-model="formData.infoCo2e" placeholder="请输入碳排放量(吨CO2e)" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="用水量" prop="infoWater">
+            <el-input v-model="formData.infoWater" placeholder="请输入用水量(吨)" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="废弃物量" prop="infoCastoff">
+            <el-input v-model="formData.infoCastoff" placeholder="请输入废弃物量(吨)" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="能源使用量" prop="infoCoai">
+            <el-input v-model="formData.infoCoai" placeholder="请输入能源使用量(吨标准煤)" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="污染物总量" prop="infoPollution">
+            <el-input v-model="formData.infoPollution" placeholder="请输入污染物量(吨)" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="环保投入" prop="infoEcom">
+            <el-input v-model="formData.infoEcom" placeholder="请输入环保投入(万元)" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="员工总数" prop="infoStaff">
+            <el-input v-model="formData.infoStaff" placeholder="请输入员工总数(人)" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="员工培训费用" prop="infoTraining">
+            <el-input v-model="formData.infoTraining" placeholder="请输入员工培训费用(万元)" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="研发费用" prop="infoRd">
+            <el-input v-model="formData.infoRd" placeholder="请输入研发费用(万元)" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="公益投入费用" prop="infoProbono">
+            <el-input v-model="formData.infoProbono" placeholder="请输入公益投入费用(万元)" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="社会保险覆盖率" prop="infoInsurance">
+            <el-input v-model="formData.infoInsurance" placeholder="请输入社会保险覆盖率(%)" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="违规经营次数" prop="infoViolate">
+            <el-input v-model="formData.infoViolate" placeholder="请输入违规经营次数(次)" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="对外担保金额" prop="infoGuarantee">
+            <el-input v-model="formData.infoGuarantee" placeholder="请输入对外担保金额(万元)" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="现金分红总额" prop="infoMoney">
+            <el-input v-model="formData.infoMoney" placeholder="请输入现金分红总额(万元)" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="环境评分" prop="infoEnvironment">
+            <el-input v-model="formData.infoEnvironment" placeholder="请输入环境评分" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="社会评分" prop="infoSociety">
+            <el-input v-model="formData.infoSociety" placeholder="请输入社会评分" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="治理评分" prop="infoGovern">
+            <el-input v-model="formData.infoGovern" placeholder="请输入治理评分" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DataInfoApi, DataInfoVO } from '@/api/home/datainfo'
+
+/** 首页数据统计 表单 */
+defineOptions({ name: 'DataInfoForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  infoYear: undefined,
+  infoCo2e: undefined,
+  infoWater: undefined,
+  infoCastoff: undefined,
+  infoCoai: undefined,
+  infoPollution: undefined,
+  infoEcom: undefined,
+  infoStaff: undefined,
+  infoTraining: undefined,
+  infoRd: undefined,
+  infoProbono: undefined,
+  infoInsurance: undefined,
+  infoViolate: undefined,
+  infoGuarantee: undefined,
+  infoMoney: undefined,
+  infoEnvironment: undefined,
+  infoSociety: undefined,
+  infoGovern: undefined,
+})
+const formRules = reactive({
+  infoYear: [{ required: true, message: '数据收集时间不能为空', trigger: 'blur' }],
+  infoCo2e: [{ required: true, message: '碳排放总量不能为空', trigger: 'blur' }],
+  infoWater: [{ required: true, message: '总用水量不能为空', trigger: 'blur' }],
+  infoPollution: [{ required: true, message: '污染物总量不能为空', trigger: 'blur' }],
+  infoEcom: [{ required: true, message: '环保投入不能为空', trigger: 'blur' }],
+  infoTraining: [{ required: true, message: '员工培训费用不能为空', trigger: 'blur' }],
+  infoRd: [{ required: true, message: '研发费用不能为空', trigger: 'blur' }],
+  infoEnvironment: [{ required: true, message: '环境评分不能为空', trigger: 'blur' }],
+  infoSociety: [{ required: true, message: '社会评分不能为空', trigger: 'blur' }],
+  infoGovern: [{ required: true, message: '治理评分不能为空', trigger: 'blur' }],
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  console.log("type+id:  ",type,id)
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await DataInfoApi.getDataInfo(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as DataInfoVO
+    if (formType.value === 'create') {
+      await DataInfoApi.createDataInfo(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DataInfoApi.updateDataInfo(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    infoYear: undefined,
+    infoCo2e: undefined,
+    infoWater: undefined,
+    infoCastoff: undefined,
+    infoCoai: undefined,
+    infoPollution: undefined,
+    infoEcom: undefined,
+    infoStaff: undefined,
+    infoTraining: undefined,
+    infoRd: undefined,
+    infoProbono: undefined,
+    infoInsurance: undefined,
+    infoViolate: undefined,
+    infoGuarantee: undefined,
+    infoMoney: undefined,
+    infoEnvironment: undefined,
+    infoSociety: undefined,
+    infoGovern: undefined,
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/Home/datainfo/index.vue

@@ -0,0 +1,290 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+<!--      <el-form-item label="数据收集时间" prop="infoYear">-->
+<!--        <el-date-picker-->
+<!--          v-model="queryParams.infoYear"-->
+<!--          value-format="YYYY-MM-DD"-->
+<!--          type="date"-->
+<!--          placeholder="选择数据收集时间"-->
+<!--          clearable-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="碳排放量" prop="infoCo2e">
+        <el-input
+          v-model="queryParams.infoCo2e"
+          placeholder="请输入碳排放量"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+<!--      <el-form-item label="总用水量" prop="infoWater">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.infoWater"-->
+<!--          placeholder="请输入总用水量"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="污染物总量" prop="infoPollution">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.infoPollution"-->
+<!--          placeholder="请输入污染物总量"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="环保投入" prop="infoEcom">
+        <el-input
+          v-model="queryParams.infoEcom"
+          placeholder="请输入环保投入"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+<!--      <el-form-item label="员工培训费用" prop="infoTraining">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.infoTraining"-->
+<!--          placeholder="请输入员工培训费用"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="研发费用" prop="infoRd">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.infoRd"-->
+<!--          placeholder="请输入研发费用"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="环境评分" prop="infoEnvironment">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.infoEnvironment"-->
+<!--          placeholder="请输入环境评分"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="社会评分" prop="infoSociety">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.infoSociety"-->
+<!--          placeholder="请输入社会评分"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="治理评分" prop="infoGovern">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.infoGovern"-->
+<!--          placeholder="请输入治理评分"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['home:data-info:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['home:data-info:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+<!--      <el-table-column-->
+<!--        label="数据收集时间"-->
+<!--        align="center"-->
+<!--        prop="infoYear"-->
+<!--        :formatter="dateFormatter"-->
+<!--        width="180px"-->
+<!--      />-->
+      <el-table-column label="碳排放量(吨CO2e)" align="center" prop="infoCo2e" />
+      <el-table-column label="总用水量(吨)" align="center" prop="infoWater" />
+      <el-table-column label="污染物量(吨)" align="center" prop="infoPollution" />
+      <el-table-column label="环保投入(万元)" align="center" prop="infoEcom" />
+      <el-table-column label="培训费用(万元)" align="center" prop="infoTraining" />
+      <el-table-column label="研发费用(万元)" align="center" prop="infoRd" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['home:data-info:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['home:data-info:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DataInfoForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { DataInfoApi, DataInfoVO } from '@/api/home/datainfo'
+import DataInfoForm from './DataInfoForm.vue'
+
+/** 首页数据统计 列表 */
+defineOptions({ name: 'DataInfo' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<DataInfoVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  infoYear: undefined,
+  infoYear: [],
+  infoCo2e: undefined,
+  infoWater: undefined,
+  infoPollution: undefined,
+  infoEcom: undefined,
+  infoTraining: undefined,
+  infoRd: undefined,
+  infoEnvironment: undefined,
+  infoSociety: undefined,
+  infoGovern: undefined,
+  createTime: [],
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DataInfoApi.getDataInfoPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DataInfoApi.deleteDataInfo(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await DataInfoApi.exportDataInfo(queryParams)
+    download.excel(data, '首页数据统计.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>