sis_zhfx/src/views/report/misimport.vue

<template>
  <div>
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">开始日期：</div>
          <div class="search-input">
            <el-date-picker v-model="timeValue" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green" @click="getTableData">查询</button>
        </div>
        <div class="query-actions">
          <el-upload class="upload-demo" ref="upload" action="http://10.155.32.4:8082/misreport/import/data"
            :on-preview="handlePreview" :on-success="onSuccess" :on-remove="handleRemove" :before-remove="beforeRemove"
            :on-exceed="handleExceed" :auto-upload="true" :limit="1" :before-upload="beforeAvatarUpload" @on-error="onError"
            accept=".xls,.xlsx" :file-list="fileList" :show-file-list="false">
            <button class="btn green" @click="importExecl">数据导入</button>
          </el-upload>
        </div>
      </div>

    </div>
    <div>
      <el-table height="80vh" ref="multipleTable" empty-text="暂无数据" :data="tableList" :header-cell-style="{
        height: '40px',
        background: 'rgba(83, 98, 104, 0.2)',
        color: '#b2bdc0',
        'border-bottom': '0px solid red',
      }" :cell-style="{
  height: '40px',
  'border-bottom': 'solid 0px #242424',
}" stripe style="width: 100%; margin-bottom: 10px">
        <el-table-column prop="name" label="场站期次" align="center"></el-table-column>
        <el-table-column label="风速" align="center">
          <el-table-column prop="fs1" label="本期" width="120" align="center">
          </el-table-column>
          <el-table-column prop="fs2" label="同期" width="120" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column label="发电量" align="center">
          <el-table-column prop="fdl1" label="本期" width="120" align="center">
          </el-table-column>
          <el-table-column prop="fdl2" label="同期" width="120" align="center">
          </el-table-column>

        </el-table-column>

        <el-table-column label="月发电量" align="center">
          <el-table-column prop="ylj1" label="本期" width="120" align="center">
          </el-table-column>
          <el-table-column prop="ylj2" label="同期" width="120" align="center">
          </el-table-column>
        </el-table-column>

        <el-table-column label="发电量(scada)" align="center">
          <el-table-column prop="fdlscada1" label="本期" width="120" align="center">
          </el-table-column>
          <el-table-column prop="fdlscada2" label="同期" width="120" align="center">
          </el-table-column>
        </el-table-column>

        <el-table-column label="上网电量" align="center">
          <el-table-column prop="swdl1" label="本期" width="120" align="center">
          </el-table-column>
          <el-table-column prop="swdl2" label="同期" width="120" align="center">
          </el-table-column>
        </el-table-column>

        <el-table-column label="综合厂用电量" align="center">
          <el-table-column prop="zhcydl1" label="本期" width="120" align="center">
          </el-table-column>
          <el-table-column prop="zhcydl2" label="同期" width="120" align="center">
          </el-table-column>
        </el-table-column>

        <el-table-column label="综合厂用电量(scada)" align="center">
          <el-table-column prop="zhcydlscada1" label="本期" width="120" align="center">
          </el-table-column>
          <el-table-column prop="zhcydlscada2" label="同期" width="120" align="center">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import BASE from "@tools/basicTool.js";
export default {
  data() {
    return {
      fileList: [],
      timeValue: [],
      tableList: [],
    };
  },
  created() {
    if (this.timeValue.length === 0) {
      let date = new Date();
      this.timeValue[0] = new Date(`${date.getFullYear()}-${date.getMonth()+1}-01`).getTime() ;
      this.timeValue[1] = date.getTime();
    }
    this.getTableData()
  },
  methods: {
    getTableData() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "misreport/caldata",
        timeout: 60000,
        data: {
          st: new Date(this.timeValue[0]).formatDate("yyyy-MM-dd"),
          et: new Date(this.timeValue[1]).formatDate("yyyy-MM-dd"),
        },
        success(res) {
          if (res) {
            let tableList = []
            res.data.forEach(item => {
              item.fdl1 = item.fdl1.toFixed(2),
                item.fdl2 = item.fdl2.toFixed(2),
                item.fdlscada1 = item.fdlscada1.toFixed(2),
                item.fdlscada2 = item.fdlscada2.toFixed(2),
                item.fs1 = item.fs1.toFixed(2),
                item.fs2 = item.fs2.toFixed(2),
                item.swdl1 = item.swdl1.toFixed(2),
                item.swdl2 = item.swdl2.toFixed(2),
                item.ylj1 = item.ylj1.toFixed(2),
                item.ylj2 = item.ylj2.toFixed(2),
                item.zhcydl1 = item.zhcydl1.toFixed(2),
                item.zhcydl2 = item.zhcydl2.toFixed(2),
                item.zhcydlscada1 = item.zhcydlscada1.toFixed(2),
                item.zhcydlscada2 = item.zhcydlscada2.toFixed(2),
                tableList.push(item)
            })
            that.tableList = tableList
          }
        }
      })
    },
    beforeAvatarUpload() {
      this.BASE.showLoading();
    },
    onSuccess() {
      this.$message({
        message: '上传成功',
        type: 'success'
      })
      this.BASE.closeLoading();
      this.$refs.upload.clearFiles();
    },
    importExecl() {

    },
    onError() {
      this.$message.error('上传失败');
      this.BASE.closeLoading();
      this.$refs.upload.clearFiles();
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(file, fileList) {
      this.fileList.push(file.raw);
    },
    // 文件超出个数限制时的钩子
    handleExceed(file, fileList) {
      return this.$message.warning("一次只能上传一个文件");
    },
  },
};
</script>

<style lang="less" scoped>
.query-items {
  display: flex;
  flex-direction: row;
}
</style>