yudao-init/src/views/report/yearData/index.vue

<!--
 * @Author: zhp
 * @Date: 2024-01-24 15:15:24
 * @LastEditTime: 2024-04-17 16:15:23
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 96px - 31px);
    "
  >
    <div
      class="app-container"
      style="padding: 16px; max-height: 45vh; flex-grow: 1"
    >
      <!-- <div style="position: relative;z-index: 999;"> -->
      <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
        <el-form-item label="时间维度" prop="reportTime">
          <el-select
            clearable
            v-model="timeSelect"
            placeholder="请选择"
            style="width: 80px"
          >
            <el-option
              v-for="item in timeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-show="timeSelect === 'month'"
          label="时间范围"
          prop="reportTime"
        >
          <el-date-picker
            clearable
            v-model="listQuery.reportTime"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            @change="changeTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-show="timeSelect === 'year'"
          label="时间范围"
          prop="reportTime"
        >
          <el-date-picker
            clearable
            v-model="listQuery.reportTime[0]"
            value-format="yyyy"
            type="year"
            placeholder="开始时间"
          >
          </el-date-picker>
          ~
          <el-date-picker
            v-model="listQuery.reportTime[1]"
            value-format="yyyy"
            type="year"
            placeholder="结束时间"
            @change="getYear"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="工厂名称" prop="factoryId">
          <el-select
            multiple
            collapse-tags
            v-model="listQuery.factoryId"
            placeholder="请选择工厂名称"
          >
            <el-option
              v-for="item in factoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="玻璃类型" prop="type">
          <el-select
            clearable
            v-model="listQuery.type"
            placeholder="请选择玻璃类型"
            style="width: 120px"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getDataList"
            >查询</el-button
          >
          <el-button type="primary" size="small" plain @click="handleExport"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <!-- </div> -->
      <!-- <el-row style="height: 500px;"> -->
      <!-- <div> -->
      <line-chart
        class="yearChart"
        ref="lineChart"
        style="height: 35vh; width: 100%"
      ></line-chart>
      <!-- </div> -->
      <!-- </el-row> -->
    </div>
    <!-- <el-row style="height: 400px;"> -->
    <!-- </el-row> -->
    <div
      class="app-container"
      style="margin-top: 18px; height: unset; flex-grow: 1; padding: 16px"
    >
      <search-bar
        :formConfigs="formConfig"
        ref="searchBarForm"
        @headBtnClick="buttonClick"
      />
      <base-table
        :table-props="tableProps"
        :page="listQuery.pageNo"
        :limit="listQuery.pageSize"
        :table-data="tableData"
      >
      </base-table>
    </div>
  </div>
</template>

<script>
// import { parseTime } from '../../core/mixins/code-filter';
// import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
// import inputTable from './inputTable.vue';
import { report } from "process";
import lineChart from "./lineChart";
import moment from "moment";
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
  components: { lineChart },
  data() {
    return {
      listQuery: {
        pageSize: 10,
        pageNo: 1,
        factoryId: null,
        total: 0,
        type: null,
        // reportType: 2,
        reportTime: [],
      },
      // startDatePicker: this.beginDate(),
      // endDatePicker: this.processDate(),
      yeartsStart: "",
      yeartsEnd: "",
      urlOptions: {
        // getDataListURL: getGlassPage,
        // exportURL: exportGlasscExcel
      },
      timeList: [
        {
          value: "day",
          label: "日",
        },
        {
          value: "week",
          label: "周",
        },
        {
          value: "month",
          label: "月",
        },
        {
          value: "year",
          label: "年",
        },
      ],
      factoryList: [
        {
          name: "瑞昌",
          id: 1,
        },
        {
          name: "邯郸",
          id: 2,
        },
      ],
      typeList: [
        {
          name: "芯片",
          id: 0,
        },
        {
          name: "标准组件",
          id: 1,
        },
        {
          name: "BIPV产品",
          id: 2,
        },
      ],
      formConfig: [
        {
          type: "title",
          label: "报表管理",
        },
      ],
      tableProps: [
        // {
        // 	prop: 'createTime',
        // 	label: '添加时间',
        // 	fixed: true,
        // 	width: 180,
        // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
        // },
        {
          prop: "userName",
          label: "科目",
        },
        {
          prop: "nickName",
          label: "类别",
        },
        {
          prop: "datas",
          label: "数值",
          // subcomponent: row
        },
        {
          prop: "unit",
          label: "单位",
          // subcomponent: row
        },
        {
          prop: "remark",
          label: "备注",
          // subcomponent: row
        },
      ],
      timeSelect: "month",
      startTimeStamp: null, //开始时间
      endTimeStamp: null, //结束时间
      date: "凯盛玻璃控股成员企业2024生产数据",
      // reportTime: '',
      startTimeStamp: "",
      endTimeStamp: "",
      tableData: [
        {
          userName: "userName",
          nickName: "用户名",
          datas: "111111",
        },
        {
          userName: "userName",
          nickName: "用户名",
          datas: "111111",
        },
        {
          userName: "userName",
          nickName: "用户名",
          datas: "111111",
          // subcomponent: row
        },
      ],
      // proLineList: [],
      // all: {}
    };
  },
  mounted() {
    this.getDict();
    // this.getCurrentYearFirst()
    // this.getDataList()
  },
  methods: {
    getYear(e) {
      if (
        this.listQuery.reportTime[0] &&
        e - this.listQuery.reportTime[0] > 10
      ) {
        this.$message({
          message: "年份起止时间不能超过十年",
          type: "warning",
        });
        // console.log();
      }
      // console.log(e);
    },
    changeTime() {
      if (this.listQuery.reportTime) {
        this.createStartDate = moment(
          new Date(this.listQuery.reportTime[0]),
          "yyyy-MM-dd hh:mm:ss"
        );
        this.createEndDate = moment(
          new Date(this.listQuery.reportTime[1]),
          "yyyy-MM-dd hh:mm:ss"
        );
        const numDays =
          (new Date(this.listQuery.reportTime[1]).getTime() -
            new Date(this.listQuery.reportTime[0]).getTime()) /
          (24 * 3600 * 1000);
        if (numDays > 730) {
          this.$message({
            message: "时间范围不能超过24个月",
            type: "warning",
          });
          this.listQuery.reportTime = [];
          this.createStartDate = "";
          this.createEndDate = "";
        }
      } else {
        this.createStartDate = "";
        this.createEndDate = "";
      }
    },
    async getDict() {
      this.$refs.lineChart.initChart();
      // 产线列表
      // const res = await getCorePLList();
      // this.proLineList = res.data;
    },
    // 获取数据列表
    multipliedByHundred(str) {
      console.log(str);
      // console.log(str)
      if (str != 0) {
        let floatVal = parseFloat(str);
        if (isNaN(floatVal)) {
          return 0;
        }
        floatVal = Math.round(str * 10000) / 100;
        let strVal = floatVal.toString();
        let searchVal = strVal.indexOf(".");
        if (searchVal < 0) {
          searchVal = strVal.length;
          strVal += ".";
        }
        while (strVal.length <= searchVal + 2) {
          strVal += "0";
        }
        return parseFloat(strVal);
      }
    },
    async getDataList() {},
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = moment(new Date(shijianchuo)).format("YYYY-MM-DD HH:mm:ss");
      // console.log(time)
      // var y = time.getFullYear();
      // var m = time.getMonth() + 1;
      // var d = time.getDate();
      // var h = time.getHours();
      // var mm = time.getMinutes();
      // var s = time.getSeconds();
      return time;
    },
    // changeTime(val) {
    //   if (val) {
    //     // console.log(val)
    //     // console.log(val.setHours(7, 0, 0))
    //     // console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000)
    //     // let time = this.format(val.setHours(7, 0, 0))
    //     this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
    //     this.startTimeStamp  = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
    //     // console.log(this.listQuery.reportTime);
    //     this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
    //     this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
    //     console.log(this.listQuery.reportTime);
    // 	} else {
    // 			this.listQuery.reportTime = []
    // 	}
    // },

    //时间戳转为yy-mm-dd hh:mm:ss
    timeFun(unixtimestamp) {
      var unixtimestamp = new Date(unixtimestamp);
      var year = 1900 + unixtimestamp.getYear();
      var month = "0" + (unixtimestamp.getMonth() + 1);
      var date = "0" + unixtimestamp.getDate();
      return (
        year +
        "-" +
        month.substring(month.length - 2, month.length) +
        "-" +
        date.substring(date.length - 2, date.length)
      );
    },
    buttonClick(val) {
      this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
      switch (val.btnName) {
        case "search":
          this.listQuery.pageNo = 1;
          this.listQuery.pageSize = 10;
          this.getDataList();
          break;
        case "export":
          this.handleExport();
          break;
        default:
          console.log(val);
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      // var xlsxParam = { raw: true };
      // /* 从表生成工作簿对象 */
      // import('xlsx').then(excel => {
      //   var wb = excel.utils.table_to_book(
      //     document.querySelector("#exportTable"),
      //     xlsxParam
      //   );
      //   /* 获取二进制字符串作为输出 */
      //   var wbout = excel.write(wb, {
      //     bookType: "xlsx",
      //     bookSST: true,
      //     type: "array",
      //   });
      //   try {
      //     FileSaver.saveAs(
      //       //Blob 对象表示一个不可变、原始数据的类文件对象。
      //       //Blob 表示的不一定是JavaScript原生格式的数据。
      //       //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
      //       //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
      //       new Blob([wbout], { type: "application/octet-stream" }),
      //       //设置导出文件名称
      //       "许昌安彩日原片生产汇总.xlsx"
      //     );
      //   } catch (e) {
      //     if (typeof console !== "undefined") console.log(e, wbout);
      //   }
      //   return wbout;
      //   //do something......
      // })
    },
  },
};
</script>

<style scoped>
.blueTip::before {
  display: inline-block;
  content: "";
  width: 4px;
  height: 18px;
  background: #0b58ff;
  border-radius: 1px;
  margin-right: 8px;
  margin-top: 8px;
}
.app-container {
  background-color: #fff;
  border-radius: 4px;
  padding: 16px 16px 0;
  height: calc(100vh - 134px);
  overflow: auto;
}
</style>