sis_zhfx/src/views/MalfunctionWarning/supervised.vue

<template>
  <div class="decision-page-1">
    <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="chooseAlgorithm"
              @change="algorithmChange(chooseAlgorithm)"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in algorithm"
                :key="item.name"
                :value="item.name"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- <div v-for="(item, index) in chooseAlgorithm.parameters" :key="index">
          {{ item.name }}:
          <input
            v-model="item.value"
            type="number"
            @focus="inputChange(item)"
            @blur="inputChange(item)"
          />
        </div> -->
      </div>
    </div>
    <div class="actions mg-b-8">
      <button class="btn" @click="TypeClick('sjfl')">数据分类</button>
      <button class="btn" @click="TypeClick('mxjl')">模型记录</button>
      <button class="btn" @click="TypeClick('jcjl')">检测记录</button>
      <!-- <button class="btn" @click="handleTraining()">检测记录</button> -->
    </div>
    <el-row :type="'flex'" class="content">
      <el-col :span="16" class="pd-l-8">
        <panel :title="'训练记录'" :showLine="false">
          <div class="dataTitle">
            <div class="chooses">
              <el-date-picker
                class="picker"
                @change="changes"
                v-model="timeValue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
              <div class="contents">
                风电场：
                <el-select
                  v-model="selectValue"
                  @change="search()"
                  clearable
                  placeholder="请选择"
                  popper-class="select"
                  style="width: 170px; margin-left: 20px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </div>
              <div class="contents">
                机型：
                <el-select
                  v-model="selectMoudle"
                  @change="selectSearch()"
                  clearable
                  placeholder="全部"
                  popper-class="select"
                  style="width: 120px; margin-left: 20px"
                >
                  <el-option
                    v-for="item in moudleList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </div>
            </div>
            <button class="btn" @click="getFaultList">查询</button>
          </div>
          <div class="bodys" v-if="dataList.length > 0">
            <div v-for="(item, index) in dataList" :key="index">
              <div class="faultTitle">{{ item.name }}:</div>
              <div class="fault">
                <div
                  class="faultBlock"
                  v-for="(val, indexs) in item.children"
                  :key="indexs"
                >
                  <div class="left">
                    <div>{{ val.stationcn }}</div>
                    <div>{{ val.windturbineid }}</div>
                    <div>{{ val.model }}</div>
                    <div style="font-size: 14px">{{ val.starttime }}</div>
                  </div>
                  <div class="right">
                    <img class="imgs" src="./img/generator.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="none">暂无数据</div>
        </panel>
      </el-col>
      <el-col :span="8" class="pd-l-8">
        <panel :title="'演示过程图'" :showLine="false">
          <div class="results" v-if="showTraining">
            <div class="progressTitle">
              <div v-if="!trainingFlag">数据获取中...</div>
              <div v-if="trainingFlag && width < 100">训练中...</div>
              <div v-if="trainingFlag && width === 100">训练完成</div>
              <div class="progressNum">
                当前进度：{{ width >= 0 ? width : 0 }}%
              </div>
            </div>
            <div class="box">
              <div class="progress" :style="`width:${width}%;`"></div>
              <div class="line"></div>
              <div class="unprogress" :style="`width:${100 - width}%;`"></div>
            </div>
          </div>
          <LineChart v-if="lossList" id="loss" :dataList="lossList"></LineChart>
          <LineChart
            v-if="accuracyList"
            id="accuracy"
            :dataList="accuracyList"
          ></LineChart>
          <BarChart
            v-if="barList.length > 0"
            id="bar"
            :baseLine="ceshiList?.BaseLine"
            @click="showDetials"
            :barList="barList"
          ></BarChart>
        </panel>
      </el-col>
    </el-row>
    <SuperviseDataClassify
      ref="dataClass"
      @click-training="handleClick"
      @handleInterval="intervals"
      v-model="display"
      :allData="allData"
      :chooseAlgorithm="chooseAlgorithm"
    ></SuperviseDataClassify>
    <Records
      @results="recordResults"
      supervisedFlag="true"
      :recordList="showBarList"
      :accuracyList="accuracyList"
      v-model="recordsDisplay"
    ></Records>
    <ChartDetails
      v-model="detialsDisplay"
      :barList="ceshiList?.bar"
      :baseLine="ceshiList?.BaseLine"
    ></ChartDetails>
    <DetectionRecord
      v-model="detectionDisplay"
      :allData="allData"
    ></DetectionRecord>
  </div>
</template>
<script>
import Panel from "../../components/coms/panel/panel.vue";
import LineChart from "./components/lineChart.vue";
import BarChart from "./components/barChart.vue";
import SuperviseDataClassify from "./components/superviseDataClassify.vue";
import Records from "./components/records.vue";
import ChartDetails from "./components/chartDetails.vue";
import DetectionRecord from "./components/detectionRecord.vue";
export default {
  components: {
    Panel,
    LineChart,
    BarChart,
    SuperviseDataClassify,
    Records,
    ChartDetails,
    DetectionRecord,
  },
  created() {
    if (this.timeValue.length === 0) {
      let date = new Date();
      this.timeValue[0] = date.getTime() - 86400000;
      this.timeValue[1] = date.getTime();
    }
    let select = this.options.filter(
      (item) => item.value === this.selectValue
    )[0];
    this.selectMoudle = select.station[0].lable;
    this.moudleList = select.station;
    this.getfaultLables();
  },
  data() {
    return {
      dataList: [],
      faultLists: [],
      lossList: {},
      accuracyList: {},
      barList: [],
      algorithm: [], //算法
      chooseAlgorithm: "",
      timeValue: [],
      showBarList: [],
      moudleList: [],
      allData: [],
      ceshiList: [],
      detectionDisplay: false,
      showTraining: false,
      trainingFlag: false,
      lastTraining: false,
      display: false,
      recordsDisplay: false,
      detialsDisplay: false,
      width: 60,
      selectValue: "NSS_FDC",
      selectMoudle: "UP82",
      options: [
        {
          value: "NSS_FDC",
          label: "牛首山风电场",
          station: [
            {
              lable: "UP82",
              value: "UP82",
            },
          ],
        },
        {
          value: "MHS_FDC",
          label: "麻黄山风电场",
          station: [
            {
              lable: "UP77",
              value: "UP77",
            },
            {
              lable: "UP105-2000-S",
              value: "UP105-2000-S",
            },
          ],
        },
        {
          value: "QS_FDC",
          label: "青山风电场",
          station: [
            {
              lable: "CCWE-1500",
              value: "CCWE-1500",
            },
            {
              lable: "UP105-2000-S",
              value: "UP105-2000-S",
            },
          ],
        },
        {
          value: "SBQ_FDC",
          label: "石板泉风电场",
          station: [
            {
              lable: "UP82",
              value: "UP82",
            },
            {
              lable: "UP97",
              value: "UP97",
            },
            {
              lable: "UP105-2000-S",
              value: "UP105-2000-S",
            },
          ],
        },
        {
          value: "XS_FDC",
          label: "香山风电场",
          station: [
            {
              lable: "UP97",
              value: "UP97",
            },
            {
              lable: "UP105-2000-S",
              value: "UP105-2000-S",
            },
          ],
        },
      ],
    };
  },
  mounted() {
    let dataList = JSON.parse(
      '{"ducumentName":"NNS-1637028563000","loss":[1.0882383584976196,1.067789912223816,1.0520573854446411,1.0380222797393799,1.0230460166931152,1.0070627927780151,0.9899255037307739,0.9736341238021851,0.9547672271728516,0.9341660737991333,0.9082227945327759,0.8833365440368652,0.8581799268722534,0.8310791254043579,0.8011142611503601,0.7700659036636353,0.7383494973182678,0.7076452970504761,0.6731187105178833,0.6390867829322815],"accuracy":[0.3047619163990021,0.37142857909202576,0.3619047701358795,0.3619047701358795,0.380952388048172,0.5809524059295654,0.6571428775787354,0.6571428775787354,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6761904954910278,0.6952381134033203,0.7333333492279053,0.7428571581840515],"val_loss":[1.0914311408996582,1.0727100372314453,1.0579898357391357,1.0469794273376465,1.0305122137069702,1.012723684310913,0.9997329115867615,0.9839586615562439,0.9610583782196045,0.9339884519577026,0.9096081256866455,0.8876619338989258,0.862886905670166,0.8299474120140076,0.793283998966217,0.7597811222076416,0.7229973673820496,0.6826366782188416,0.6449647545814514,0.6126752495765686],"val_accuracy":[0.2666666805744171,0.2666666805744171,0.2666666805744171,0.2666666805744171,0.4000000059604645,0.644444465637207,0.644444465637207,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.7333333492279053,0.7555555701255798,0.7333333492279053],"bar":[{"name":"邮箱温度","value":0.3},{"name":"风速","value":0.25},{"name":"变桨","value":0.25},{"name":"有高","value":0.2}]}'
    );
    this.ceshiList = dataList;
    this.lossList.loss = dataList.loss;
    this.lossList.val_loss = dataList.val_loss;
    this.accuracyList.accuracy = dataList.accuracy;
    this.accuracyList.val_accuracy = dataList.val_accuracy;
    this.barList = dataList.bar;
    this.getFaultList();
    this.getType();
  },
  methods: {
    getfaultLables() {
      let that = this;
      this.API.requestData({
        method: "GET",
        subUrl: "http://192.168.1.18:9002/know/fault/type/all",
        success(res) {
          if (res) {
            that.faultLists = res.data;
          }
        },
      });
    },
    getType() {
      let that = this;
      this.API.requestData({
        method: "GET",
        baseURL: "http://192.168.10.18:8080/",
        subUrl: "api/coordinate/algorithm",
        data: {
          type: 1,
        },
        success(res) {
          if (res) {
            that.algorithm = res;
            that.chooseAlgorithm = res[0].name;
          }
        },
      });
    },
    TypeClick(btnType) {
      if (btnType === "sjfl") {
        this.display = true;
      } else if (btnType === "mxjl") {
        this.showBarList.push(this.ceshiList);
        this.recordsDisplay = true;
      } else if (btnType === "jcjl") {
        this.detectionDisplay = true;
      }
    },
    selectSearch() {
      this.allData.forEach((item) => {
        if (item.modelId.indexOf(this.selectMoudle) != -1) {
          this.dataList.push(item);
        }
      });
    },
    search() {
      let select = this.options.filter(
        (item) => item.value === this.selectValue
      )[0];
      this.selectMoudle = select.station[0].lable;
      this.moudleList = select.station;
    },
    showDetials() {
      this.detialsDisplay = true;
    },
    getFaultList() {
      this.dataList = [];
      let that = this;
      this.API.requestData({
        method: "GET",
        subUrl: "http://192.168.1.18:9002/case/fault/list",
        data: {
          station: this.selectValue,
          model: this.selectMoudle,
          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.allData = res.data;
            res.data.forEach((item) => {
              let array = that.dataList.filter(
                (val) => val.code === item.faultcode
              );
              item.stationcn = that.options.filter(
                  (items) => items.value === item.stationen
                )[0]?.label;
              if (array.length > 0) {
                array[0].children.push(item);
              } else {
                let obj = {
                  name: that.faultLists.filter(
                    (items) => items.faultcode === item.faultcode
                  )[0]?.faulttype,
                  code: item.faultcode,
                  children: [],
                };
                obj.children.push(item);
                that.dataList.push(obj);
              }
            });
          }
        },
      });
    },
    handleClick() {
      this.lastTraining = false;
      this.barList = [];
      this.handleTraining();
    },
    handleTraining() {
      let that = this;
      that.resultList = [];
      this.API.requestData({
        method: "GET",
        baseURL: "http://192.168.10.18:8080/",
        subUrl: "api/supervised/",
        success(res) {
          if (res.value.length > 0) {
            let arr = JSON.parse(res.value);
            that.ceshiList = arr;
            that.lossList.loss = arr.loss;
            that.lossList.val_loss = arr.val_loss;
            that.accuracyList.accuracy = arr.accuracy;
            that.accuracyList.val_accuracy = arr.val_accuracy;
            if (arr.bar) {
              arr.bar = JSON.parse(arr.bar);
              arr.bar?.sort(that.Compare("value"));
              that.barList = arr.bar?.slice(0, 5);
            }
          }
        },
      });
      this.API.requestData({
        method: "GET",
        baseURL: "http://192.168.10.18:8080/",
        subUrl: "api/supervised/progress",
        success(res) {
          that.showTraining = true;
          if (res) {
            that.trainingFlag = res.value === -1 ? false : true;
            that.width = res.value === -1 ? 0 : (res.value * 100).toFixed(2);
            if (that.width < 100) {
              setTimeout(() => {
                that.handleTraining();
              }, 1000);
            } else {
              if (!that.lastTraining) {
                that.lastTraining = true;
                that.handleTraining();
              }
            }
          }
        },
      });
    },
    handleClose() {
      this.barList = this.ceshiList.bar.slice(0, 5);
    },
    algorithmChange(val) {
      this.chooseAlgorithm = this.algorithm.filter(
        (item) => item.name === val
      )[0].name;
    },
    // clear() {
    //   this.chooseAlgorithm = '';
    // },
    Compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    },
  },
};
</script>
<style lang="less" scoped>
.dataTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 10px;

  .chooses {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .timeInput {
    width: 30px;
  }

  .contents {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 30px;
  }
}
.faultTitle {
  font-size: 18px;
  margin-bottom: 20px;
}
.fault {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;

  .faultBlock {
    width: 220px;
    height: 90px;
    border: 1px solid #05bb4c;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-right: 20px;
    margin-bottom: 20px;

    .left {
      line-height: 19px;
      margin-left: 10px;
      font-size: 16px;
    }

    .right {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      border-left: 1px solid #05bb4c;
      .imgs {
        margin: 0px 10px;
        width: 40px;
        height: 40px;
      }
    }
  }
}
.bodys {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 75vh;
}
.none {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 150px;
  color: #999999;
}
.results {
  margin-left: 35px;
}
.box {
  width: 80%;
  margin-top: 20px;
  height: 20px;
  display: flex;
  align-items: center;

  .progress {
    background: linear-gradient(to right, #0d692c, #6df0a0);
    height: 16px;
    z-index: 1;
  }

  .line {
    width: 1px;
    height: 70px;
    z-index: 2;
    background: linear-gradient(
      to bottom,
      rgba(158, 151, 151, 0) 0%,
      rgba(0, 0, 0, 0) 10%,
      rgba(255, 255, 255, 0.3) 20%,
      rgba(255, 255, 255, 0.6) 30%,
      rgba(255, 255, 255, 0.8) 40%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.8) 60%,
      rgba(255, 255, 255, 0.6) 70%,
      rgba(255, 255, 255, 0.3) 80%,
      rgba(0, 0, 0, 0) 90%,
      rgba(0, 0, 0, 0) 100%
    );
    transition: width 0.2s linear;
  }

  .unprogress {
    background: linear-gradient(to right, #41acec, #003e7a);
    height: 16px;
    z-index: 1;
  }
}
</style>