hb_sis_zhfx/src/views/cutAnalyse/index.vue

<template>
  <div class="draught-fan-list">
    <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="wpId" clearable placeholder="请选择"
							popper-class="select">
							<el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
						</el-select>
					</div>
				</div>
				<div class="query-item">
					<div class="lable">日期：</div>
					<div class="search-input">
						<el-date-picker v-model="recorddate" type="date"
							value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
						</el-date-picker>
					</div>
				</div>
			</div>
			<div class="query-actions">
				<button class="btn green" @click="search()">搜索</button>
			</div>
		</div>
    <div class="df-table">
      <ComTable :data="tableData"></ComTable>
    </div>
    <el-dialog title="切入切出风速整合历史" v-model="dialogShow" width="85%" top="10vh" custom-class="modal" :close-on-click-modal="true" @closed="dialogType = ''">
      <ComTable :data="tableHistoryData"></ComTable>
    </el-dialog>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";
export default {
  // 名称
  name: "cutAnalyse",

  // 使用组件
  components: {
   ComTable
  },

  // 数据
  data() {
    const that = this;
    return {
      isAsc:"asc",
      wpArray:[],
      wpId:"",
      recorddate:new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
      dialogShow:false,
      tableData: {
        column: [
          {
            name: "风机",
            field: "windturbineid",
            is_num: false,
            is_light: false,
          },
          {
            name: "总小风切入",
            field: "inputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "总小风切入合格率",
            field: "inputsmallratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "总大风切入",
            field: "inputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "总大风切入合格率",
            field: "inputbigratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "总小风切出",
            field: "outputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "总小风切出合格率",
            field: "outputsmallratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "总大风切出",
            field: "outputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "总大风切出合格率",
            field: "outputbigmaxratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "日小风切入",
            field: "dayinputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "日小风切入合格率",
            field: "dayinputsmallratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "日小风切出",
            field: "dayoutputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "日小风切出合格率",
            field: "dayoutputsmallratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "日大风切入",
            field: "dayinputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "日大风切入合格率",
            field: "dayinputbigratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "日大风切出",
            field: "dayoutputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "日大风切出合格率",
            field: "dayoutputbigratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "月小风切入",
            field: "monthinputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "月小风切入合格率",
            field: "monthinputsmallratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "月大风切入",
            field: "monthinputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "月大风切入合格率",
            field: "monthinputbigratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "月小风切出",
            field: "monthoutputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "月小风切出合格率",
            field: "monthoutputsmallratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "月大风切出",
            field: "monthoutputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "月大风切出合格率",
            field: "monthoutputbigratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "年小风切入",
            field: "yearinputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "年小风切入合格率",
            field: "yearinputsmallratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "年大风切入",
            field: "yearinputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "年大风切入合格率",
            field: "yearinputbigratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "年小风切出",
            field: "yearoutputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "年小风切出合格率",
            field: "yearoutputsmallratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "年大风切出",
            field: "yearoutputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "年大风切出合格率",
            field: "yearoutputbigratio",
            is_num: false,
            is_light: false,
          },
          {
            name: "操作",
            field: "",
            is_num: false,
            is_light: false,
            template() {
								return "<el-button type='text' style='cursor: pointer;'>历史</el-button>";
						},
            click(e, row){
              that.getOutputspeedHistoryList(row)
            }
          }
        ],
        data: [],
      },
      tableHistoryData: {
        column: [
          {
            name: "风机",
            field: "windturbineid",
            is_num: false,
            is_light: false,
          },
          {
            name: "日期",
            field: "time",
            is_num: false,
            is_light: false,
          },
          {
            name: "总小风切入",
            field: "inputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "总大风切入",
            field: "inputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "总小风切出",
            field: "outputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "总大风切出",
            field: "outputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "日小风切入",
            field: "dayinputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "日小风切出",
            field: "dayoutputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "日大风切入",
            field: "dayinputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "日大风切出",
            field: "dayoutputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "月小风切入",
            field: "monthinputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "月大风切入",
            field: "monthinputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "月小风切出",
            field: "monthoutputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "月大风切出",
            field: "monthoutputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "年小风切入",
            field: "yearinputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "年大风切入",
            field: "yearinputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "年小风切出",
            field: "yearoutputsmall",
            is_num: false,
            is_light: false,
          },
          {
            name: "年大风切出",
            field: "yearoutputbig",
            is_num: false,
            is_light: false,
          }
        ],
        data: [],
      },
    };
  },

  // 函数
  methods: {
    // 请求服务
    requestData() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAjax",
        success(res) {
          that.wpArray=res.data;
          that.wpId=res.data[0].id;
          that.getOutputSpeedList(that.wpId)
        }
      });
    },

    getOutputSpeedList(wpId){
      let that = this;
      if(!that.wpId || !that.recorddate){
        that.BASE.showMsg({
          msg:"场站与日期不可为空"
        });
      }else{
        that.API.requestData({
          method: "POST",
          subUrl: "outputspeed/outputSpeedlist",
          data:{
            wpId,
            isAsc:that.isAsc,
            recorddate:that.recorddate
          },
          success(res) {
            that.tableData.data = res.data;
          }
        });
      }
      
    },

    getOutputspeedHistoryList (item){
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "outputspeed/outputspeedhistorylist",
        data:{
          wpId:item.windpowerstationid,
          wtId:item.windturbineid,
          beginDate: (new Date().formatDate("yyyy-MM") + '-01'),
          endDate: new Date().formatDate("yyyy-MM-dd")
        },
        success(res) {
          res.data.forEach(ele=>{
            ele.time = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
          });
          that.tableHistoryData.data = res.data;
          that.dialogShow = true;
        }
      });
    },

    search(){
      this.getOutputSpeedList(this.wpId);
    }
  },

  created() {
    this.requestData();
  },

  mounted() {},

  unmounted() {},
};
</script>

<style lang="less" scoped>
.draught-fan-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;

    .photovoltaic {
      margin-left: 1.481vh;
    }
  }

  .df-table {
    border: 0.093vh solid fade(@darkgray, 50%);
    position: relative;
    overflow: auto;
    flex-grow: 1;
    margin-top: 1.481vh;

    &:before {
      content: "";
      width: 0.37vh;
      height: 0.37vh;
      background: @write;
      position: absolute;
      left: 0.278vh;
      top: 0.278vh;
    }

    tbody {
      height: calc(100vh - 166px);
    }
  }
}
</style>