hb_sis_zhfx/src/views/sampleDatabase/analysis/index.vue

<template>
  <div class="knowledge-2">
    <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-select
              v-model="sampleValue"
              clearable
              placeholder="请选择"
              popper-class="select"
              style="width: 130px; margin-left: 20px"
            >
              <el-option
                v-for="item in sampleList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item" style="width: 445px">
          <div class="lable">起止时间：</div>
          <div class="search-input">
            <el-date-picker
              class="picker"
              @change="changes"
              v-model="timeValue"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="query-item" style="width: 250px">
          <div class="lable">时间间隔：</div>
          <div class="search-input">
            <el-select
              v-model="interval"
              collapse-tags
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in intervals"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn" @click="getData()">查询</button>
        </div>
      </div>
    </div>

    <el-row :type="'flex'" class="content">
      <el-col :span="5">
        <div class="left">
          <el-tree
            class="filter-tree"
            :data="showData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            node-key="id"
            :default-expanded-keys="[0]"
            :default-checked-keys="[ids]"
            ref="tree"
            highlight-current
            @node-click="handleChange"
          >
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19">
        <el-row>
          <el-col :span="15">
            <div class="charts">
              <div class="titles">性能分析图</div>
              <PerformanceEcharts id="chartsData" :showTime="true" :data="scatterLineData" width="100%" height="70vh"></PerformanceEcharts>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="charts" v-if="warningTimeList.length > 0">
              <div class="titles">预警饼状图</div>
              <PieCharts id="pie" width="100%" height="70vh" :warningTimeList="warningTimeList"></PieCharts>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import PerformanceEcharts from "../performance/performanceEcharts.vue";
import PieCharts from "./pieCharts.vue";
import BASE from "@tools/basicTool.js";
export default {
  components: {
    PerformanceEcharts,
    PieCharts,
  },
  created() {
    if (this.timeValue.length === 0) {
      let date = new Date();
      this.timeValue[0] = 1622476800000;
      this.timeValue[1] = 1630252800000;
    }
    this.getData();
    this.getWp();
  },
  data() {
    return {
      timeValue: [],
      ids:'',
      wpId: "NSS_FDC",
      wpArray: [],
      sampleValue: "0",
      sampleList: [
        {
          label: "正样本",
          value: "0",
        },
        {
          label: "负样本",
          value: "1",
        },
      ],
      interval: "5-1008",
      intervals: [
        {
          label: "小于30分钟",
          value: "0-0.5",
        },
        {
          label: "30分钟-1小时",
          value: "0.5-1",
        },
        {
          label: "1小时-2小时",
          value: "1-2",
        },
        {
          label: "2小时-5小时",
          value: "2-5",
        },
        {
          //42天
          label: "大于5小时",
          value: "5-1008",
        },
      ],

      defaultProps: {
        children: "children",
        label: "windturbineId",
      },
      showData: [],
      warningTimeList: [],
      scatterLineData:{},
      warningList: [
        {
          label: "变桨系统",
          value: "BJXT",
        },
        {
          label: "测风系统",
          value: "CFXT",
        },
        {
          label: "发电机",
          value: "FDJ",
        },
        {
          label: "传动链",
          value: "CDL",
        },
        {
          label: "齿轮箱",
          value: "CLX",
        },
        {
          label: "机舱",
          value: "JC",
        },
        {
          label: "液压系统",
          value: "YYXT",
        },
        {
          label: "偏航系统",
          value: "PHXT",
        },
        {
          label: "塔底柜",
          value: "TDG",
        },
      ],
    };
  },
  methods: {
    // 获取风场
    getWp() {
      let that = this;
      that.API.requestData({
        baseURL: "http://10.155.32.4:8082/",
        subUrl: "powercompare/windfarmAjax",
        success(res) {
          that.wpArray = res.data;
          that.wpId = res.data[1].id;
        },
      });
    },
    getData() {
      let that = this;
      that.showData = [];
      this.API.requestData({
        method: "GET",
        subUrl: "http://192.168.1.18:9002/analyse/basic",
        data: {
          station: this.wpId,
          intervals: this.interval,
          tag: this.sampleValue,
          st: new Date(this.timeValue[0]).formatDate("yyyy-MM-dd hh:mm:ss"),
          et: new Date(this.timeValue[1]).formatDate("yyyy-MM-dd hh:mm:ss"),
        },
        success(res) {
          if (res) {
            that.ids = res.data[0].children[0].id
            that.showData = res.data;
            that.handleChange(res.data[0].children[0])
          }
        },
      });
    },
    async handleChange(val) {
      if (val.st) {
        BASE.showLoading({ text: "加载中..." });
        let warningList = [];
        let that = this;
        await this.API.requestData({
          method: "GET",
          subUrl: "http://192.168.1.18:8075/alarm/history/page",
          data: {
            pagenum: 1,
            pagesize: 20000,
            starttime: val.st,
            endtime: val.et,
            stationid: this.wpId,
            windturbineid: val.wtId,
          },
          success(res) {
            if (res.records) {
              res.records.forEach((item) => {
                if (
                  warningList.filter((val) => val.label === item.category3)
                    .length > 0
                ) {
                  warningList.filter((val) => val.label === item.category3)[0]
                    .num++;
                } else {
                  let obj = {
                    label: item.category3,
                    name: that.warningList.filter(
                      (val) => val.value === item.category3
                    )[0].label,
                    num: 1,
                  };
                  warningList.push(obj);
                }
              });

              that.warningTimeList = warningList;
            }
          },
        });
        
        await that.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.18:9002/",
        // baseURL: "http://192.168.10.4:9002/",
        subUrl: "case/performance/line",
        data: {
          id: val.id,
          interval: 30,
        },
        success(res) {
          if (res.code == 200) {
            that.scatterLineData = res.data;
            BASE.closeLoading();
          }
        },
      });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.charts {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.titles{
  font-size: 16px;
  margin: 20px 0 40px 10px;
}
body .el-tree {
  height: 85vh;
  padding-left: 30px;
  overflow-y: auto;
}
</style>