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

<template>
  <el-dialog
    width="70%"
    top="10vh"
    custom-class="modal"
    :close-on-click-modal="false"
    title="训练记录"
    v-model="dialogTableVisible"
    @opened="opened()"
    @closed="closed()"
  >
    <el-row :type="'flex'" class="content">
      <el-col :span="12" class="pd-l-8">
        <div style="font-size: 20px">历史记录</div>
        <div style="height: 60vh; overflow-y: auto; margin-top: 30px">
          <div v-if="supervisedFlag">
            <div
              class="body"
              v-for="(item, index) in recordList"
              :key="index"
              @click="chooses(index)"
            >
              <div class="left">
                <div :class="index === current ? 'round_on' : 'round'"></div>
                <div class="line"></div>
              </div>
              <div class="right">
                <div>{{ item.showTime }}</div>
                <div class="content">
                  <div class="names">
                    {{ item.showName || item.ducumentName }}
                  </div>
                  <button class="btn" @click="deleteDate(item.name)">
                    删除
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div
              class="body"
              v-for="(item, index) in showResultList"
              :key="index"
              @click="choose(index)"
            >
              <div class="left">
                <div :class="index === current ? 'round_on' : 'round'"></div>
                <div class="line"></div>
              </div>
              <div class="right">
                <div>{{ item.showTime }}</div>
                <div class="content">
                  <div class="names">
                    {{ item.showName || item.ducumentName }}
                  </div>
                  <button class="btn" @click="deleteDate(item.name)">
                    删除
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="pd-l-8">
        <div style="margin-left: 30px; font-size: 20px">训练结果</div>
        <div v-if="supervisedFlag">
          <LineChart id="accuracyCharts" :dataList="accuracyList"></LineChart>
          <BarChart
            id="barCharts"
            @click="showDetials"
            height="350px"
            :barList="barList"
            :baseLine="recordList[current]?.coordinate?.BaseLine"
          ></BarChart>
        </div>
        <div v-else>
          <div
            class="scatterEchart"
            id="scatterEcharts"
            @click="showResults()"
          ></div>
        </div>
      </el-col>
    </el-row>
    <ChartDetails
      v-model="detialsDisplay"
      :barList="recordList[current]?.coordinate?.bar"
      :baseLine="recordList[current]?.coordinate?.BaseLine"
    ></ChartDetails>
  </el-dialog>
</template>
<script>
import BarChart from ".//barChart.vue";
import LineChart from "./lineChart.vue";
import ChartDetails from "./chartDetails.vue";
import * as echarts from "echarts";
export default {
  components: {
    BarChart,
    LineChart,
    ChartDetails,
  },
  props: {
    supervisedFlag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      current: 0,
      accuracyList:{},
      barList: [],
      resultList: [],
      showResultList: [
        {
          showTime: '2021-12-08 12:02:00',
          showName: '牛首山UP82型风机DBSCAN模型',
        },
        {
          showTime: '2021-12-08 11:22:23',
          showName: '麻黄山UP77型风机DBSCAN模型',
        },
      ],
      recordList: [],
      detialsDisplay: false,
      colors: [
        "#FFFFFF",
        "#FF0000",
        "#820041",
        "#FF00FF",
        "#8600FF",
        "#0000C6",
        "#00FFFF",
        "#00DB00",
        "#F9F900",
        "#FF5809",
        "#984B4B",
        "#AFAF61",
        "#5151A2",
        "#FFAF60",
        "#B766AD",
        "#006030",
        "#2894FF",
        "#796400",
      ],
      series: [
        {
          name: "",
          symbolSize: 10,
          encode: { tooltip: [0, 1] },
          itemStyle: {
            color: "#ffffff",
          },
          data: [
            [11.0, 8.04],
            [8.07, 6.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 7.66],
            [13.4, 6.81],
            [10.0, 6.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 7.2],
            [11.5, 7.2],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [12.0, 6.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68],
          ],
          type: "scatter",
        },
        {
          name: "",
          encode: { tooltip: [0, 1] },
          symbolSize: 10,
          itemStyle: {
            color: "#FF0000",
          },
          data: [
            [1.0, 8.04],
            [18.07, 6.95],
            [3.0, 7.58],
            [19.05, 8.81],
            [1.0, 8.33],
            [4.0, 7.66],
            [3.4, 6.81],
            [20.0, 6.33],
            [4.0, 8.96],
            [2.5, 6.82],
            [19.15, 7.2],
            [11.5, 7.2],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [12.0, 6.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68],
          ],
          type: "scatter",
        },
      ],
    };
  },
  methods: {
    opened() {
      if (!this.supervisedFlag) {
        this.getRecords();
        this.getScatter();
      } else {
        this.getSupervisedRecord();
      }
    },
    showDetials() {
      this.detialsDisplay = true;
    },
    choose(index) {
      this.current = index;
    },
    chooses(index) {
      this.current = index;
      this.accuracyList.accuracy =
        this.recordList[this.current]?.coordinate.accuracy;
      this.accuracyList.val_accuracy =
        this.recordList[this.current]?.coordinate.val_accuracy;
      this.recordList[this.current]?.coordinate.bar?.sort(
        this.Compare("value")
      );
      this.barList = this.recordList[this.current]?.coordinate.bar?.slice(0, 5);
    },
    getRecords() {
      let that = this;
      this.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.14:9090/",
        subUrl: "api/coordinate/history",
        success(res) {
          if (res.length > 0) {
            res.forEach((item) => {
              let arr = item.name.split("-");
              item.coordinate = JSON.parse(item.coordinate);
              item.showName = arr[0];
              item.showTime = new Date(Number(arr[1])).formatDate(
                "yyyy-MM-dd hh:mm:ss"
              );
            });
            that.showResultList = res;
            that.dataDeal();
          }
        },
      });
    },
    getSupervisedRecord() {
      let that = this;
      this.API.requestData({
        method: "GET",
        baseURL: "http://192.168.10.18:8080/",
        subUrl: "api/supervised/history",
        success(res) {
          if (res) {
            res.forEach((item) => {
              let arr = item.name.split("-");
              item.coordinate = JSON.parse(item.coordinate);
              item.showName = arr[2];
              item.showTime = new Date(Number(arr[3])).formatDate(
                "yyyy-MM-dd hh:mm:ss"
              );
              item.coordinate.bar = JSON.parse(item.coordinate.bar);
            });
            that.accuracyList.accuracy = res[that.current]?.coordinate.accuracy;
            that.accuracyList.val_accuracy =
              res[that.current]?.coordinate.val_accuracy;
            res[that.current]?.coordinate.bar?.sort(that.Compare("value"));
            that.barList = res[that.current]?.coordinate.bar?.slice(0, 5);
            that.recordList = res;
          }
        },
      });
    },
    Compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    },
    dataDeal() {
      let that = this;
      that.resultList = [];
      let data = that.showResultList[that.current];
      let dataList = [];
      data?.coordinate.forEach((item, index) => {
        let idList = [];
        item.value.forEach((val) => {
          let datas = {};
          let arr = val[2].split("-");
          let dataArr = [];
          datas.name =
            arr[0] +
            "-" +
            new Date(Number(arr[1])).formatDate("yyyy-MM-dd hh:mm:ss");
          dataArr.push([Number(val[0]), Number(val[1])]);
          idList.push(arr[2]);
          datas.symbolSize = 10;
          datas.encode = { tooltip: [0, 1] };
          datas.data = dataArr;
          datas.type = "scatter";
          datas.itemStyle = { color: that.colors[index] };
          dataList.push(datas);
        });
        that.resultList.push(idList);
      });
      that.series = dataList;
      that.getScatter();
    },
    getScatter() {
      let chartDom = document.getElementById("scatterEcharts");
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        legend: {
          show: true,
          data: ["测试", "测试1"],
          right: 56,
          icon: "circle",
          itemWidth: 6,
          inactiveColor: "#606769",
          textStyle: {
            color: "#B3BDC0",
            fontSize: 12,
          },
        },
        xAxis: {
          splitLine: { show: false },
        },
        yAxis: {
          splitLine: { show: false },
        },
        tooltip: {
          position: "top",
        },
        series: this.series,
      };
      option && myChart.setOption(option);
    },
    showResults() {
      this.showList = [];
      this.getFaultList(0);
    },
    deleteDate(val) {
      let that = this;
      this.API.requestData({
        method: "GET",
        baseURL: "http://192.168.10.18:8080/",
        subUrl: "api/coordinate/history/remove/",
        data: {
          names: val,
        },
        success(res) {
          if (res) {
            that.showResultList = [];
            that.barList = [];
            that.recordList = [];
            that.current = 0
            if (!that.supervisedFlag) {
              that.getRecords();
              that.getScatter();
            } else {
              that.getSupervisedRecord();
            }
          }
        },
      });
    },
    getFaultList(index) {
      let result = this.resultList[index];
      let that = this;
      this.API.requestData({
        method: "GET",
        baseURL: "http://192.168.11.18:8075/",
        subUrl: "fault/history/",
        data: {
          ids: result.join(","),
        },
        success(res) {
          if (res) {
            res.forEach((item) => {
              item.colors = that.colors[index];
            });
            that.showList =
              that.showList.length > 0 ? [that.showList, ...res] : res;
            index++;
            if (index < that.resultList.length) {
              that.getFaultList(index);
            } else {
              that.$emit("results", that.showList);
            }
          }
        },
      });
    },
    closed() {
      this.$emit("records-closed");
    },
  },
};
</script>
<style lang="less" scoped>
.body {
  display: flex;
  flex-direction: row;
  height: 75px;
  width: 100%;

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px;
    margin-left: 30px;

    .round_on {
      width: 20px;
      height: 27px;
      border-radius: 50%;
      background-color: rgb(30, 209, 45);
    }
    .round {
      width: 20px;
      height: 27px;
      border-radius: 50%;
      background-color: crimson;
    }

    .line {
      width: 2px;
      height: 100%;
      background-color: #ffffff;
    }
  }

  .right {
    width: 100%;
    margin-left: 20px;

    .content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;

      .btn {
        margin-right: 20px;
      }
    }
  }
}
.scatterEchart {
  width: 600px;
  height: 500px;
  margin-top: -20px;
}
</style>