performance-test/src/views/performance/components/analysisEvent.vue

<!--
 * @Author: your name
 * @Date: 2024-05-29 09:13:51
 * @LastEditTime: 2024-06-14 11:53:42
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/analysisEvent.vue
-->
<template>
  <div>
    <el-form ref="form" :model="form" label-position="right">
      <el-row type="flex" justify="end">
        <el-col :span="5">
          <el-form-item class="searchFrom">
            <el-button type="primary" @click="onSubmit" size="small"
              >分析</el-button
            >
            <el-button size="small" @click="resetForm">重置</el-button>
            <i @click="drawer = true" class="el-icon-setting"></i>
          </el-form-item>
        </el-col>
      </el-row>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基础筛选：" name="1">
          <el-row class="flex-wrap-row" :gutter="5">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
              <el-form-item
                label="分析类型"
                v-if="checkedCities.find((item) => item === '分析类型')"
                prop=""
              >
                <el-select
                  v-model="form.configAnalysis"
                  placeholder="请选择分析类型"
                  size="small"
                  multiple
                  clearable
                >
                  <el-option
                    v-for="item in analysisTypeList"
                    :key="item.typeCode"
                    :label="item.typeName"
                    :value="item.typeCode"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
              <el-form-item
                label="机组编号"
                v-if="checkedCities.find((item) => item === '机组编号')"
              >
                <el-select
                  multiple
                  v-model="form.turbines"
                  placeholder="请选择机组编号"
                  size="small"
                  clearable
                >
                  <el-option
                    v-for="item in windEngineGroupList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
              <el-form-item
                label="SCADA数据"
                v-if="checkedCities.find((item) => item === 'SCADA数据')"
              >
                <el-select
                  v-model="form.scada"
                  placeholder="请选择SCADA数据"
                  size="small"
                  clearable
                >
                  <el-option
                    :key="'minute'"
                    :label="'分钟级'"
                    :value="'minute'"
                  ></el-option>
                  <el-option
                    :key="'second'"
                    :label="'秒级'"
                    :value="'second'"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
              <el-form-item
                label="滤除月份"
                v-if="checkedCities.find((item) => item === '滤除月份')"
              >
                <el-date-picker
                  value-format="timestamp"
                  width="200"
                  size="small"
                  type="months"
                  v-model="form.excludingMonths"
                  placeholder="选择一个或多个月"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="9">
              <el-form-item
                label="分析时间"
                v-if="checkedCities.find((item) => item === '分析时间')"
              >
                <el-date-picker
                  value-format="timestamp"
                  size="small"
                  v-model="picker"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker> </el-form-item
            ></el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item
          title="SACAD数据测点过滤设置："
          name="2"
          v-if="checkedCities.find((item) => item === 'SCADA数据过滤')"
        >
          <el-row :gutter="5">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="风速过滤">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.valueWindSpeed[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.valueWindSpeed[1]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="桨距角过滤">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.valuePitchAngle[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.valuePitchAngle[1]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="有功功率过滤">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.valueActivePower[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.valueActivePower[1]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="发电机转速过滤">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.valueGeneratorSpeed[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.valueGeneratorSpeed[1]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item
          title="图像轴系设置："
          name="3"
          v-if="checkedCities.find((item) => item === '图像设置')"
        >
          <el-row :gutter="5">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="直驱发电机转速轴系">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="步长"
                    v-model="form.dGeneratorSpeed[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.dGeneratorSpeed[1]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.dGeneratorSpeed[2]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="非直驱发电机转速轴系设置">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="步长"
                    v-model="form.iGeneratorSpeed[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.iGeneratorSpeed[1]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.iGeneratorSpeed[2]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="直驱发电机转矩轴系">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="步长"
                    v-model="form.dGeneratorTorque[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.dGeneratorTorque[1]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.dGeneratorTorque[2]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="非直驱发电机转矩轴系">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="步长"
                    v-model="form.iGeneratorTorque[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.iGeneratorTorque[1]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.iGeneratorTorque[2]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="风能利用系数">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="步长"
                    v-model="form.cp[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.cp[1]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.cp[2]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="叶尖转速比">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="步长"
                    v-model="form.tsr[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.tsr[1]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.tsr[2]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="有功功率">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="步长"
                    v-model="form.activePower[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.activePower[1]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.activePower[2]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="桨距角">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    size="small"
                    placeholder="步长"
                    v-model="form.pitchAngle[0]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最小值"
                    v-model="form.pitchAngle[1]"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    size="small"
                    placeholder="最大值"
                    v-model="form.pitchAngle[2]"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <el-card shadow="always" class="box-card">
      <el-row>
        <el-col :span="12"
          ><div class="left">
            <div>
              <span>机组编号：</span>
              <el-select
                v-model="engineCode"
                placeholder="请选择机组编号"
                size="small"
                clearable
                @change="handleEngineCode"
              >
                <el-option
                  v-for="item in windEngineGroupList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </div>
            <div>1.额定容量：{{ windDetail.ratedCapacity }}</div>
            <!-- <div>2.发电机类型（Generator Type）:{{}}</div> -->
            <div>2.风机编号:{{ windDetail.engineCode }}</div>
            <div>3.经度（Longitude）：{{ windDetail.longitude }}</div>
            <div>4.维度（Dimensionality）：{{ windDetail.latitude }}</div>
            <div>5.海拔高度（Altitude）：{{ windDetail.elevationHeight }}</div>
            <div>6.风机名称：{{ windDetail.engineName }}</div>
            <div>
              7.是否标杆（Benchmarking or not）：{{ windDetail.sightcing }}
            </div>
            <div>8.风场编号：{{ windDetail.fieldCode }}</div>
            <div>9.轮毂高度：{{ windDetail.hubHeight }}</div>
            <div>10.机型编号：{{ windDetail.millTypeCode }}</div>
            <div>11.切入风速：{{ windDetail.ratedCutInWindspeed }}</div>
            <div>12.切出风速：{{ windDetail.ratedCutOutWindspeed }}</div>
            <!-- <div>8.地理位置（Location）：不同地理位置的气候条件{{}}</div>
            <div>
              9.供应商信息（Manufacturer
              Information）：制造商的信誉、技术水平和售后
            </div>
            <div>
              10.维护需求（Maintenance Requirements）：风力发电机组需要定期
            </div>
            <div>11.预期寿命（Expected Lifetime）：风力发电机组的设计寿命</div> -->
          </div>
        </el-col>
        <el-col :span="12">
          <div class="right">
            <iframe src="/html/A01.html" frameborder="0"></iframe>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-drawer
      title="偏好设置"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      class="drawerOption"
    >
      <el-row>
        <el-col :span="12"
          ><div class="drawerLeft">
            <div style="text-align: center; font-size: 16px">常用功能设置</div>
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <div style="margin: 15px 0"></div>
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                city
              }}</el-checkbox>
              <el-checkbox
                label="SCADA数据过滤"
                key="SCADA数据过滤"
              ></el-checkbox>
              <div class="checkFromRow">
                <el-row>
                  <el-col :span="12">发电机转速测点</el-col>
                  <el-col :span="12">桨距角值测点</el-col>
                  <el-col :span="12">有功功率测点</el-col>
                  <el-col :span="12">风速速度测点</el-col>
                </el-row>
              </div>

              <el-checkbox label="图像设置" key="图像设置"></el-checkbox>
              <div class="checkFromRow">
                <el-row>
                  <el-col :span="12">发电机转矩轴系</el-col>
                  <el-col :span="12">桨距角轴系</el-col>
                  <el-col :span="12">叶尖速比轴系</el-col>
                  <el-col :span="12">有功功率轴系</el-col>
                  <el-col :span="12">发电机转矩轴系</el-col>
                </el-row>
              </div>
            </el-checkbox-group>
          </div></el-col
        >
        <el-col :span="12">
          <div class="drawerRight">
            <div style="text-align: center; font-size: 16px">已选中功能</div>
            <ul>
              <li v-for="func in checkedCities" :key="func">
                {{ func }}
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  @click="removeFunction(func)"
                ></el-button>
              </li>
            </ul></div
        ></el-col>
      </el-row>
      <div class="demo-drawer__footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClose">{{ "确 定" }}</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { analysisEditQuery, analysis } from "@/api/performance";
import { getWindEngineGroup } from "@/api/ledger";
export default {
  data() {
    return {
      engineCode: null, //台账机组编号
      picker: [],
      form: {
        configAnalysis: null, //分析类型
        powerFarmID: null, //风场编号//通过路由获取的默认传递的
        dataBatchNum: null, //批次号
        scada: null, //scada数类型
        turbines: [], //机组编号
        beginTime: null, //开始时间
        endTime: null, //结束时间
        excludingMonths: null, //过滤月份
        valueWindSpeed: [], //风速值最大最小 数组第一值为min  第二个 max
        valuePitchAngle: [], //桨距角最大最小
        valueActivePower: [], //有功功率
        valueGeneratorSpeed: [], //发电机转速
        //图像
        dGeneratorSpeed: [], //直驱发电机转速轴系 第一个值为步长 第二个min 第三个 max
        iGeneratorSpeed: [], //非直驱发电机转速轴系设置
        dGeneratorTorque: [], //直驱发电机转矩轴系
        iGeneratorTorque: [], //非直驱发电机转矩轴系
        cp: [], //风能利用系数轴系
        tsr: [], //叶尖速比轴系
        pitchAngle: [], //桨距角轴系
        activePower: [], //有功功率轴系
      },
      activeNames: ["1", "2", "3"],
      checkAll: false,
      checkedCities: [
        "分析类型",
        "SCADA数据",
        "分析时间",
        "滤除月份",
        "机组编号",
      ],
      cities: ["分析类型", "SCADA数据", "分析时间", "滤除月份", "机组编号"],
      isIndeterminate: true,
      drawer: false,
      direction: "rtl",
      value: "",
      options: [],
      tabIndex: 2,
      analysisTypeList: [],
      windEngineGroupList: [],
      windDetail: {},
    };
  },
  created() {
    //获取分析 分析类型、机组编号 列表
    this.getWindCodeList();
  },
  methods: {
    handleEngineCode(e) {
      console.log(e);
      this.engineCode = e;
      this.getWindEngList();
    },
    async getWindEngList() {
      try {
        const res = await getWindEngineGroup({
          engineCode: this.engineCode,
        });
        this.windDetail = res.data;
      } catch (error) {
        console.error(error);
      }
    },
    async getAnalysis() {
      console.log(this.form.excludingMonths, "过滤月份");
      console.log(this.picker, "分析时间");
      try {
        await analysis({
          ...this.form,
          beginTime: this.picker[0], //开始时间
          endTime: this.picker[1], //结束时间
        });
        this.$message({
          type: "success",
          message: "已分析请前往分析详情中查看结果",
        });
      } catch (error) {
        console.error(error);
      }
    },
    async getWindCodeList() {
      try {
        const response = await analysisEditQuery({
          batchCode: this.$route.query.batchCode,
        });
        this.form.powerFarmID = this.$route.query.fieldEngineCode;
        this.form.dataBatchNum = this.$route.query.batchCode;
        this.analysisTypeList = response.data.analysisTypeList;
        this.windEngineGroupList = response.data.windEngineGroupList;
        this.engineCode = response.data.windEngineGroupList[0];
        //获取台账机组编号
        this.getWindEngList();
      } catch (error) {
        console.error(error);
        this.$router.go(-1);
      }
    },
    handleCheckAllChange(val) {
      this.checkedCities = val
        ? [...this.cities, "SCADA数据过滤", "图像设置"]
        : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length + 2;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length + 2;
    },
    removeFunction(item) {
      this.checkedCities = this.checkedCities.filter((fuc) => fuc !== item);
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          // done();
          this.drawer = false;
        })
        .catch((_) => {});
    },

    onSubmit() {
      this.getAnalysis();
      console.log("submit!");
    },
    resetForm() {
      this.picker = [];
      this.form = {
        configAnalysis: null, //分析类型
        powerFarmID: this.$route.query.fieldEngineCode, //风场编号//通过路由获取的默认传递的
        dataBatchNum: this.$route.query.batchCode, //批次号
        scada: null, //scada数类型
        turbines: [], //机组编号
        beginTime: null, //开始时间
        endTime: null, //结束时间
        excludingMonths: null, //过滤月份
        valueWindSpeed: [], //风速值最大最小 数组第一值为min  第二个 max
        valuePitchAngle: [], //桨距角最大最小
        valueActivePower: [], //有功功率
        valueGeneratorSpeed: [], //发电机转速
        //图像
        dGeneratorSpeed: [], //直驱发电机转速轴系 第一个值为步长 第二个min 第三个 max
        iGeneratorSpeed: [], //非直驱发电机转速轴系设置
        dGeneratorTorque: [], //直驱发电机转矩轴系
        iGeneratorTorque: [], //非直驱发电机转矩轴系
        cp: [], //风能利用系数轴系
        tsr: [], //叶尖速比轴系
        pitchAngle: [], //桨距角轴系
        activePower: [], //有功功率轴系
      };
    },
    // 清空内容
    clear() {
      this.$refs.editor.clear();
    },
  },
};
</script>
<style scoped lang="scss">
.box-card {
  margin: 10px 0;
  width: 100%;
  font-size: 14px;
  .el-card__body {
    width: 100%;
    .left {
      > div {
        line-height: 3;
      }
    }
    .right {
      height: 450px;
      width: 100%;
      iframe {
        width: 100%;
        height: 100%;
      }
    }
  }
}
::v-deep .searchFrom {
  .el-form-item__content {
    display: flex !important;
    justify-content: end !important;
    align-items: center !important;
    i {
      margin-left: 10px;
      font-size: 20px;
    }
  }
}
.drawerOption {
  .el-checkbox-group {
    line-height: 40px !important;
  }
  .drawerLeft {
    margin-left: 20px;
    color: #606266 !important;
  }
  .checkFromRow {
    .el-col-12 {
      color: #606266 !important;
      font-size: 14px;
    }
    .el-col-12:nth-child(even) {
      text-align: end !important;
    }
  }
  .drawerRight {
    margin-right: 20px;
    color: #606266 !important;
    font-size: 14px;
    ul {
      list-style-type: none;
      padding: 0;
      color: #606266 !important;
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 10px;
        line-height: 40px !important;
      }
    }
  }
  .demo-drawer__footer {
    display: flex;
    margin-top: 50px;
    justify-content: center;
  }
}
::v-deep.el-input--small .el-input__inner {
  width: 200px !important;
}
.demo-input-suffix {
  display: flex !important;
}
::v-deep.demo-input-suffix .el-input--small {
  width: 100px !important;
}
::v-deep.demo-input-suffix .el-input--small .el-input__inner {
  width: 90px !important;
}
.abalysisType {
  margin-top: 30px;
}
</style>