hb_sis_zhfx/src/views/MalfunctionWarning/components/trainingResults.vue

<template>
  <el-dialog
    width="70%"
    top="10vh"
    custom-class="modal"
    :close-on-click-modal="false"
    title="训练结果"
    v-model="dialogTableVisible"
    @opened="opened()"
  >
    <el-row :type="'flex'" class="content">
      <el-col :span="12" class="pd-l-8">
        <div style="display: flex; flex-direction: row-reverse">
          <button class="btn" style="margin-top: 0px" @click="batch">
            批量处理
          </button>
        </div>
        <div style="height: 70vh; overflow-y: auto">
          <div>
            <el-table
              highlight-current-row
              @current-change="handleClick"
              ref="multipleTable"
              empty-text="暂无数据"
              :data="allData"
              :header-cell-style="{
                height: '40px',
                background: 'rgba(83, 98, 104, 0.2)',
                color: '#b2bdc0',
                'border-bottom': '0px solid red',
              }"
              :cell-style="{
                height: '40px',
                'border-bottom': 'solid 0px #242424',
              }"
              stripe
              style="width: 100%; margin-bottom: 10px"
            >
              <el-table-column width="30">
                     
                <template #default="scope">
                  <span
                    class="mark"
                    :style="{ 'background-color': scope.row.colors }"
                  ></span>
                </template>
                   
              </el-table-column>
              <el-table-column
                prop="faultTime"
                label="FaultTime"
                width="150"
                align="center"
              ></el-table-column>
              <!-- <el-table-column
                prop="stationId"
                label="StationId"
                width="80"
                align="center"
              ></el-table-column> -->
              <el-table-column
                prop="stationName"
                label="StationName"
                width="120"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="objectId"
                label="ObjectId"
                width="80"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="modelId"
                label="ModelId"
                width="100"
                align="center"
              ></el-table-column>
              <el-table-column width="150">
                <template #default="scope">
                  <span>
                    <el-select
                      v-model="scope.row.labels"
                      @change="selectSearch(scope.row)"
                      clearable
                      placeholder="请选择"
                      popper-class="select"
                      style="width: 120px; margin-left: 20px"
                    >
                      <el-option
                        v-for="item in moudleList"
                        :key="item.faultcode"
                        :label="item.faulttype"
                        :value="item.faultcode"
                      >
                      </el-option>
                    </el-select>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="pd-l-8">
        <MultipleYLineChartNormal
          height="35vh"
          ref="multiple"
          :list="Analysis"
          :yAxises="AnalysisYAxises"
          :showLegend="true"
          :default="!batchDisplay"
        ></MultipleYLineChartNormal>
        <button class="btn" @click="handleSearch()" style="margin-top: 20px">
          查询
        </button>
        <div class="lables">
          <button
            v-for="(item, index) in lableList"
            :key="index"
            :class="item.isShow ? 'btn green' : 'btn'"
            @click="handleChange(item)"
          >
            {{ item.showName }}
          </button>
        </div>
      </el-col>
      <BatchData
        v-model="batchDisplay"
        :moudleList="moudleList"
        :allData="allData"
        @handleSave="saveData"
      ></BatchData>
    </el-row>
  </el-dialog>
</template>
<script>
import BatchData from "./batchData.vue";
import UniformCodes from "./UniformCodes.json";
import MultipleYLineChartNormal from "../../NewPages/multiple-y-line-chart-normal.vue";
import BASE from "@tools/basicTool.js";
import axios from "axios";
export default {
  components: { MultipleYLineChartNormal, BatchData },
  props: {
    allData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    intervalValue: {
      type: Number,
      default: 1,
    },
    moudleList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      chooseData: {},
      lableList: [],
      lineList: [],
      batchDisplay: false,
      Analysis: [
        {
          title: "",
          yAxisIndex: 0, // 使用单位
          value: [],
        },
      ],
      AnalysisYAxises: [
        {
          name: "",
          min: "",
          max: "",
          unit: "",
          position: "left",
        },
        {
          name: "",
          min: "",
          max: "",
          unit: "",
          position: "right",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    opened() {
      (this.lableList = []),
        (this.lineList = []),
        (this.chooseData = this.allData[0]);
      // this.queryData();
      this.$refs.multipleTable.setCurrentRow(this.allData[0]);
      this.dataDeal(this.allData[0]);
    },
    queryData() {
      let param = [];
      this.allData.forEach((item) => {
        param.push(item.id);
      });
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "http://192.168.1.18:9002/case/fault/train/all",
        data: {
          ids: param.join(","),
        },
        success(res) {
          if (res) {
            res.data.forEach((item) => {
              that.allData.filter((items) => items.id === item.id)[0].labels =
                item.labels;
            });
          }
        },
      });
    },
    handleClick(val) {
      let valus = val ? val : this.allData[0];
      if (val) {
        this.dataDeal(valus);
        this.handleSearch();
      }
    },
    dataDeal(val) {
      this.chooseData = val;
      this.lableList = [];
      UniformCodes.forEach((code) => {
        if (val?.stationId === code.name) {
          code.values.forEach((item) => {
            if (val.modelId === item.modelId) {
              item.codes.forEach((values, index) => {
                if (values.name.length > 5) {
                  values.showName = values.name.substring(0, 5) + "...";
                } else {
                  values.showName = values.name;
                }
                if (index < 5) {
                  values.isShow = true;
                } else {
                  values.isShow = false;
                }
              });
              this.lableList = item.codes;
            }
          });
        }
      });
    },
    handleChange(val) {
      let index = this.lableList.filter((item) => item.isShow === true).length;
      if (index >= 5 && val.isShow === false) {
        this.BASE.showMsg({
          type: "warning",
          msg: "每次查询不可大于5个",
        });
        val.isShow = false;
      } else {
        val.isShow = !val.isShow;
      }
    },
    handleSearch() {
      this.lineList = [];
      let max = this.lableList.filter((item) => item.isShow === true).length;
      if (max > 0) {
        this.historyData(0, max);
      }
    },
    historyData(index, max) {
      let dataLsit = this.lableList.filter((item) => item.isShow === true);
      let that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://192.168.10.18:8011/",
        subUrl: "ts/history/snap",
        data: {
          uniformCode: dataLsit[index].code,
          startTs:
            new Date(that.chooseData.faultTime).getTime() -
            that.intervalValue * 3600000,
          endTs: new Date(that.chooseData.faultTime).getTime() + 600000,
          thingType: "windturbine",
          thingId: that.chooseData.objectId,
          interval: 1,
        },
        success(res) {
          if (res) {
            let obj = {
              title: dataLsit[index].name,
              value: res,
            };
            that.lineList.push(obj);
            index++;
            if (index < max) {
              that.historyData(index, max);
            } else {
              that.Analysis = that.lineList;
            }
          }
        },
      });
    },
    selectSearch(val) {
      this.saveData(this.allData);
    },
    batch() {
      this.batchDisplay = true;
    },
    saveData(data) {
      this.$emit('save-date', data);
    },
  },
};
</script>
<style lang="less" scoped>
.templates {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mark {
  display: flex;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.lables {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 28vh;
  overflow-y: auto;
  margin-top: 10px;
}
.btn green {
  width: 117px;
  margin-right: 7px;
  margin-top: 10px;
}
.btn {
  width: 117px;
  margin-right: 7px;
  margin-top: 10px;
}
.btn + button {
  margin-left: 0px;
}
</style>