fd_dwgz_zhyw/src/views/NewPages/statisticAnalysis.vue

<template>
  <div>
    <div class="block">
      <span class="demonstration">选择日期：</span>
      <el-date-picker
        size="medium"
        v-model="dateArea"
        type="daterange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期                 "
        end-placeholder="结束日期                  "
        align="right"
      >
      </el-date-picker>
      <button class="btn green" @click="search">搜索</button>
    </div>

    <div class="table1">
      <el-table
        max-height="86vh"
         height="1100"
        v-loading="loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
        :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; overflow-y: auto"
      >
        <el-table-column prop="wpname" label="场站" align="center" width="360">
        </el-table-column>
        <el-table-column prop="theday" label="日期" align="center" width="360">
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template #default="scope">
            <button @click="handleClickForm(scope.row)" class="btn">
              表底
            </button>
            <button class="btn" @click="handleClickCZ(scope.row)">场站</button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button
              @click="handleClick3(scope.row)"
              :class="scope.row.isConfirm == 1 ? 'displayBtn' : 'btn'"
              :disabled="scope.row.isConfirm == 1"
            >
              确认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- :class="scope.row.isConfirm == 1 ? 'active' : 'active:hover'" -->
    </div>
  </div>
</template>


<script>
import api from "@api/economic/index.js";
export default {
  created() {
    // 将查询的日期存入到routerData
    this.routerData.beginDate = this.$route.query.beginDate;
    this.routerData.endDate = this.$route.query.endDate;
    this.getList();
  },
  components: {},
  data() {
    return {
      dateArea: [
        this.fmtDate(
          new Date(
            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30)
          )
        ),
        this.fmtDate(new Date()),
      ],
      tableData: [],
      loading: false,
      routerData: {},
    };
  },
  methods: {
    handleClickCZ(row) {
      this.$router.push({
        path: "/others/statisticAnalysis/station",
        query: {
          wpid: row.wpid,
          theday: row.theday,
           isConfirm: row.isConfirm,
          beginDate: this.routerData.beginDate,
          endDate: this.routerData.endDate,
        },
      });
    },
    handleClickForm(row) {
      this.$router.push({
        path: "/others/statisticAnalysis/form",
        query: {
          wpid: row.wpid, 
          theday: row.theday,
          isConfirm: row.isConfirm,
          beginDate: this.routerData.beginDate,
          endDate: this.routerData.endDate,
        },
      });
    },
    handleClick3(row) {
      api.analysisplusCommit(row).then((res) => {
        this.getList();
      });
    },
    getList: function () {
      if (this.$route.query.beginDate != null) {
        this.dateArea[0] = this.$route.query.beginDate;
        this.dateArea[1] = this.$route.query.endDate;
      }
      api
        .statisticAnalysis({
          beginDate: new Date(this.dateArea[0]).formatDate("yyyy-MM-dd"),
          endDate: new Date(this.dateArea[1]).formatDate("yyyy-MM-dd"),
        })
        .then((res) => {
          this.tableData = res.data;
          this.loading = false;
        });
    },
    getTime(val) {
      //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
      var date = new Date();
      var year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      var begin = year + "-" + month + "-01";
      var end = year + "-" + month + "-" + day;
      if (val == 1) {
        return begin;
      } else if (val == 2) {
        return end;
      }
    },
    // 格式化日期
    fmtDate(date) {
      let curDate = date || new Date();
      let year = curDate.getFullYear();
      let mouth = curDate.getUTCMonth() + 1;
      let day = curDate.getDate();
      let hour = curDate.getHours();
      let minutes = curDate.getMinutes();
      let seconds = curDate.getSeconds();
      return (
        year +
        "-" +
        (mouth < 10 ? "0" + mouth : mouth) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (minutes < 10 ? "0" + minutes : minutes) +
        ":" +
        (seconds < 10 ? "0" + seconds : seconds)
      );
    },
    search() {
      // 将查询的日期存入到routerData
      this.routerData.beginDate = new Date(this.dateArea[0]).formatDate(
        "yyyy-MM-dd"
      );
      this.routerData.endDate = new Date(this.dateArea[1]).formatDate(
        "yyyy-MM-dd"
      );
      this.loading = true;
      this.getList();
    },
  },
};
</script>
<style lang="less" scoped>
.btn {
  margin-left: 160px;
  border-radius: 5px;
}
.table1 {
  margin-top: 30px;
}
/deep/.el-date-editor {
  width: 490px;
  border-color: black;
}

.block {
  margin-left: 20px;
}
/deep/.el-date-editor .el-range-input {
  color: #fff;
}
.btn,
.el-button {
  margin-left: 10px;
  height: 33px !important;
  line-height: 33px;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid #606769;
  padding: 0 1.481vh;
  color: #606769;
  font-size: 1.296vh;
  cursor: pointer;
  min-height: 0;
}
.el-button:hover {
  background-color: black;
  color: #05bb4c;
  border-color: #05bb4c;
}
.btn:hover {
  color: #05bb4c;
  border-color: #05bb4c;
}

.displayBtn {
  background-color: #4d4949;
  color: rgb(87 110 108);
}
.displayBtn:hover {
  border: #4d4949;
  background-color: #4d4949;
  color: rgb(87 110 108);
}
</style>