hb_sis_zhfx/src/views/NewPages/station.vue

<template>
  <div class="station">
    <div class="btns">
      <!-- <button class="btn green">保存</button> -->
      <button class="btn green" @click="back">返回</button>
      <button class="btn green" @click="backForm">表底</button>
    </div>
    <div class="table-D">
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%; overflow-y: auto;min-width='80vh';"
        :cell-style="addClass"
        max-height="80vh"
      >
        <el-table-column
          v-for="(i, index) in tableClu.slice(0, 2)"
          :key="index"
          :prop="i"
          :label="i === 'name' ? '名称' : i"
          width="140"
        >
          <template #default="scope">
            {{ scope.row[i] }}
          </template>
        </el-table-column>

        <el-table-column
          v-for="(k, index) in tableCluObj"
          :key="index"
          :label="k.split('_')[0]"
          align="center"
        >
          <el-table-column
            v-for="i in tableClu.slice(2 + index * 2, 4 + index * 2)"
            :key="i"
            :prop="i"
            label="当日值"
            align="center"
            width="100"
          >
            <template #default="scope">
              <!-- <el-input
              v-if="tableString.indexOf(i) != -1"
              :disabled="scope.row['是否可编辑'] == 1 || timeNow.isConfirm == 1"
              size="mini"
              @change="changeNum(scope.row)"
              v-model="scope.row[i]"
            ></el-input> -->

              <el-input
                v-if="tableString.indexOf(i) != -1"
                :disabled="true"
                size="mini"
                @change="changeNum(scope.row)"
                v-model="scope.row[i]"
              ></el-input>
              <label v-else>{{ scope.row[i] }}</label>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import api from "@api/economic/index.js";
export default {
  data() {
    return {
      tableData: [],
      tableClu: [],
      tableCluObj: [],
      tableString: [],
      timeNow: {},
    };
  },
  created() {
    (this.timeNow = this.$route.query), this.getCZList();
  },
  methods: {
    //   场站
    getCZList() {
      api
        .analysisplusTjfxlist({
          wpid: this.timeNow.wpid,
          theday: this.timeNow.theday,
        })
        .then((res) => {
          for (let k of res.data[0] ? Object.keys(res.data[0]) : "") {
            for (let i of res.data) {
              if (typeof i[k] == "object") {
                if (i[k] != null) {
                  for (let p of res.data[0] ? Object.keys(i[k]) : "") {
                    i[k + p] = i[k][p];
                  }
                }
              }
            }
          }
          this.tableData = res.data;
          for (let i of res.data[0] ? Object.keys(res.data[0]) : "") {
            if (typeof res.data[0][i] != "object") {
              if (i != "是否可编辑" && i != "id") {
                this.tableClu.push(i);
              }
            } else {
              this.tableCluObj.push(i);
            }
            this.tableClu.sort(function (n, m) {
              return parseInt(n.split("_")[1]) - parseInt(m.split("_")[1]);
            });
            this.tableCluObj.sort(function (n, m) {
              return parseInt(n.split("_")[1]) - parseInt(m.split("_")[1]);
            });
          }
          for (let i of this.tableCluObj) {
            this.tableString.push(i + "当日值(编辑)");
          }
        });
    },
    back() {
      this.$router.push({
        path: "/others/statisticAnalysis",
        query: {
          theday: this.timeNow.theday,
          wpid: this.timeNow.wpid,
          beginDate: this.timeNow.beginDate,
          endDate: this.timeNow.endDate,
        },
      });
    },
    backForm() {
      this.$router.push({
        path: "/others/statisticAnalysis/form",
        query: {
          theday: this.timeNow.theday,
          wpid: this.timeNow.wpid,
          beginDate: this.timeNow.beginDate,
          endDate: this.timeNow.endDate,
        },
      });
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      // if(columnIndex === 4){
      // if (parseFloat(row.麻黄山风电场) < 0) {
      //   return "background:yellow";
      // }
      // if (parseFloat(row.牛首山风电场) < 0) {
      //   return "background:yellow";
      // }
      // if (parseFloat(row.青山风电场) < 0) {
      //   return "background:yellow";
      // }
      // if (parseFloat(row.石板泉风电场) < 0) {
      //   return "background:yellow";
      // }
      // if (parseFloat(row.香山风电场) < 0) {
      //   return "background:yellow";
      // }
      // if (parseFloat(row.大武口电站) < 0) {
      //   return "background:yellow";
      // }
      // if (parseFloat(row.平罗光伏电站) < 0) {
      //   return "background:yellow";
      // }
      // if (parseFloat(row.宣和光伏发电站) < 0) {
      //   return "background:yellow";
      // }
    },
    changeNum(v) {
      const date = this.routerData.data.theday;
      const wpid = this.routerData.data.wpid;
      v.date = date;
      v.wpid = wpid;
      this.sendData.push(v);
    },
  },
};
</script>

<style lang="less" scoped>
.btn:hover {
  color: #fff;
}
.btn {
  margin: 20px;
}
.table-D {
  margin: 20px 20px 0 20px;
}
/deep/.el-table thead.is-group th.el-table__cell {
  background-color: rgb(37, 36, 36);
}
</style>