sis_zhfx/src/views/totalCurve/dataDispose.vue

<template>
  <div class="dataDisposeBox">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="changzhan"
              placeholder="请选择"
              popper-class="select"
              @change="
                () => {
                  getFengji();
                }
              "
            >
              <el-option
                v-for="item in changzhanArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">风机：</div>
          <div class="search-input">
            <el-select
              v-model="fengji"
              clearable
              placeholder="请选择"
              popper-class="select"
              multiple
              collapse-tags
            >
              <el-option
                v-for="item in fengjiArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">时间：</div>
          <div class="search-input">
            <el-date-picker
              v-model="date"
              type="month"
              value-format="YYYY-MM"
              placeholder="请选择"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="query-actions" style="margin-left: 0px">
          <button class="btn green" @click="apply">数据预处理</button>
        </div>
      </div>
    </div>
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">筛选条件：</div>
        </div>
        <div class="query-item">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="connected" size="small">并网</el-checkbox>
            <el-checkbox label="correct" size="small">合理值</el-checkbox>
            <el-checkbox label="connected10" size="small"
              >并网十分钟</el-checkbox
            >
            <el-checkbox label="prestop10" size="small"
              >停机前十分钟</el-checkbox
            >
            <el-checkbox label="levels" size="small">欠符合等级</el-checkbox>
            <el-select
              v-model="qfhdj"
              placeholder=" "
              size="small"
              style="width: 100px; margin-left: 12px"
              clearable
              @change="selectChange"
            >
              <el-option
                v-for="item in qfhdjArray"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-checkbox-group>
        </div>
        <div class="query-item">
          <div class="lable">间隔：</div>
          <el-select
            v-model="jg"
            placeholder="请选择"
            size="small"
            style="width: 100px; margin-left: 12px"
          >
            <el-option
              v-for="item in jgArray"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="dataBox">
      <div class="l">
        <el-tree
          accordion
          :data="treeData"
          :props="{
            children: 'children',
            label: 'windturbineid',
          }"
          @node-click="nodeClick"
        />
      </div>
      <div class="r">
        <el-table
          :data="tableData"
          style="width: 100%; height: 85%; overflow-y: scroll"
          height="250"
          border
        >
          <el-table-column
            prop="time"
            label="时间"
            width="200px"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="windturbineid"
            label="风机"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="power"
            label="风机功率"
            width="200px"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="speed"
            label="风机风速"
            width="200px"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="rotate"
            label="风机发电机转速"
            width="200px"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="风机状态"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="quantity"
            label="风机电量"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="curveoffset"
            label="欠发状态"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="direction"
            label="风向"
            width="200px"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="angle"
            label="对风角度"
            width="200px"
            sortable
            align="center"
          ></el-table-column>
        </el-table>
        <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[500, 1000, 2000]"
          :small="small"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
          @size-change="changeTableSize"
          @current-change="changeCurrentPage"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      treeData: [],
      changzhan: "",
      changzhanArray: [],
      fengji: [],
      fengjiArray: [],
      date: new Date().formatDate("yyyy-MM"),
      checkList: [],
      qfhdj: "2",
      qfhdjArray: [
        {
          id: "1",
          label: "1",
        },
        {
          id: "2",
          label: "2",
        },
        {
          id: "3",
          label: "3",
        },
        {
          id: "4",
          label: "4",
        },
        {
          id: "5",
          label: "5",
        },
      ],
      jg: "300",
      jgArray: [
        {
          id: "1",
          label: "1秒钟",
        },
        {
          id: "60",
          label: "1分钟",
        },
        {
          id: "300",
          label: "5分钟",
        },
        {
          id: "900",
          label: "15分钟",
        },
      ],
      tableData: [],
      currentPage: 1,
      pageSize: 500,
      tableTotal: 0,
    };
  },
  created() {
    this.getChangeZhan();
    this.getTree();
  },
  methods: {
    // 数据预处理
    apply() {
      let stationen = this.changzhan;
      let windturbineid = this.fengji;
      let time = this.date;

      let connected = false;
      let correct = false;
      let connected10 = false;
      let prestop10 = false;
      let levels = null;

      let intervals = ~~this.jg;

      let params = {
        stationen,
        windturbineid,
        time,
        connected,
        correct,
        connected10,
        prestop10,
        levels,
        intervals,
      };

      this.checkList.forEach((ele) => {
        for (let key in params) {
          if (key === ele && ele !== "levels") {
            params[key] = true;
          }
          if (ele === "levels") {
            params.levels = ~~this.qfhdj || null;
          }
        }
      });

      if (!params.windturbineid) {
        this.BASE.showMsg({
          msg: "风机不可为空",
        });
      } else if (!params.time) {
        this.BASE.showMsg({
          msg: "时间不可为空",
        });
      } else {
        this.sendData(params);
      }
    },

    // 发送数据预处理数据
    sendData(data) {
      const that = this;
      axios({
        method: "post",
        url: "http://192.168.1.18:9002/scatter/preprocess",
        data,
        header: {
          "Content-Type": "application/json",
        },
      }).then((res) => {
        if (res.data.code === 200) {
          that.BASE.showMsg({
            type: "success",
            msg: "数据已提交，请稍后刷新页面查看",
          });
        }
      });
    },

    // 获取树形数据
    getTree() {
      const that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.18:9002/",
        subUrl: "powercurve/tree",
        success(res) {
          that.treeData = res.data;
        },
      });
    },

    // 获取场站列表
    getChangeZhan() {
      const that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:9001/",
        subUrl: "benchmarking/wplist",
        success(res) {
          that.changzhanArray = res.data;
          that.changzhan = res.data[0].id;
          that.getFengji();
        },
      });
    },

    // 获取风机列表
    getFengji(fjId) {
      const that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:9001/",
        subUrl: "benchmarking/wtList",
        data: {
          wpid: that.changzhan,
        },
        success(res) {
          that.fengjiArray = res.data;
          that.fengji = fjId?.split(",") || [res.data[0].id];
          if (fjId) that.getTableData();
        },
      });
    },

    // 欠符合等级 checkbox 勾选逻辑修改
    selectChange(res) {
      let resultIndex = 0;
      const result = this.checkList.some((ele, index) => {
        if (ele === "levels") {
          resultIndex = index;
        }
        return ele === "levels";
      });
      if (res) {
        if (!result) {
          this.checkList.push("levels");
        }
      } else {
        if (result) {
          this.checkList.splice(resultIndex, 1);
        }
      }
    },

    // 获取表格数据
    getTableData() {
      const that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.18:9002/",
        subUrl: "powercurve/list",
        data: {
          station: that.changzhan,
          wtid: that.fengji,
          time: that.date,
          pagenum: that.currentPage,
          pagesize: that.pageSize,
        },
        success(res) {
          that.tableData = res.data.list;
          that.tableTotal = res.data.total;
        },
      });
    },

    // 修改分页每页显示数量
    changeTableSize(res) {
      this.pageSize = res;
      this.currentPage = 1;
      this.getTableData();
    },

    // 修改分页当前页数
    changeCurrentPage(res) {
      this.currentPage = res;
      this.getTableData();
    },

    // 树形结构点击处理
    nodeClick(res) {
      if (!res.children) {
        this.changzhan = res.stationen;
        let checkList = [];
        if (res.connected) checkList.push("connected");
        if (res.correct) checkList.push("correct");
        if (res.connected10) checkList.push("connected10");
        if (res.prestop10) checkList.push("prestop10");
        if (res.levels) {
          checkList.push("levels");
          this.qfhdj = String(res.levels);
        } else {
          this.qfhdj = "";
        }
        this.date = res.time;
        this.jg = String(res.intervals);
        this.checkList = checkList;
        this.getFengji(res.windturbineid);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.dataDisposeBox {
  height: 100%;
  .dataBox {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;

    .l {
      width: 20%;
      height: 100%;
      .el-tree {
        height: 100%;
      }
    }
    .r {
      width: 80%;
      height: 100%;
    }
  }
}
</style>
<style lang="less">
.dataDisposeBox {
  .el-checkbox__input {
    display: inline-block;
  }
  .el-checkbox__inner {
    position: absolute;
    top: calc(50% - 7px);
  }
  .el-checkbox__label {
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
  }
}
</style>