dc-ui/src/views/monitoring/statistical/index.vue

<template>
  <div class="statisticalContainer">
    <section class="search">
      <el-card shadow="always">
        <el-form
          ref="searchFormRef"
          :model="searchForm"
          :rules="rules"
          :inline="true"
          label-width="120px"
          class="searchForm"
          status-icon
        >
          <el-form-item label="时间" prop="qDate">
            <el-date-picker
              v-model="searchForm.qDate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="请选择时间"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(searchFormRef)"
              >查询</el-button
            >
            <el-button @click="resetForm(searchFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </section>
    <section class="statistical">
      <el-card shadow="always">
        <el-table class="statTable" :data="statData" border style="width: 100%">
          <el-table-column prop="devicName" label="设备名" align="center" />
          <el-table-column prop="paramName" label="参数名" align="center" />
          <el-table-column prop="aval" label="均值" align="center" />
          <el-table-column prop="aday" label="日" align="center" />
          <el-table-column prop="amonth" label="月" align="center" />
        </el-table>
        <el-pagination
          class="statPagination"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="sizes, prev, pager, next"
          background
          :total="statPage.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </section>
  </div>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules, TableColumnCtx } from "element-plus";
import { useDateFormat, useNow } from "@vueuse/core";
import { dcBusiDayReport } from "@/api/monitoring/static";
import { StatVo } from "@/api/monitoring/table/types";

interface searchForm {
  qDate: string;
}

interface SpanMethodProps {
  row: StatVo;
  column: TableColumnCtx<StatVo>;
  rowIndex: number;
  columnIndex: number;
}

const searchFormRef = ref<FormInstance>();
const searchForm = reactive<searchForm>({
  qDate: "",
});

const rules = reactive<any>({
  qDate: [
    {
      type: "date",
      required: true,
      message: "请选择时间",
      trigger: "change",
    },
  ],
});

const today = useDateFormat(useNow(), "YYYY-MM-DD");
const statData = ref<StatVo[]>([]);
const statPage = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 10,
});

onMounted(() => {
  searchForm.qDate = today.value;
  getDayReport();
});

function getDayReport() {
  //获取数据
  const params = {
    qDate: searchForm.qDate,
    pageNum: statPage.pageNum,
    pageSize: statPage.pageSize,
  };
  dcBusiDayReport(params).then((res: any) => {
    if (res.code === 200) {
      statData.value = res.rows;
      statPage.total = res.total;
    }
  });
}

const handleSizeChange = (val: number) => {
  statPage.pageSize = val;
  getDayReport();
};
const handleCurrentChange = (val: number) => {
  statPage.pageNum = val;
  getDayReport();
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      getDayReport();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  searchForm.qDate = today.value;
  getDayReport();
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>