sis_zhfx/src/views/MalfunctionWarning/MalfunctionWarning.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"
              @clear="clear()"
            >
              <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('xljl')">模型记录</button>
      <button class="btn" @click="TypeClick('mxcc')">模型存储</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>
            <div class="buts">
              <button class="btn" @click="searchData()">查询</button>
              <button class="btn" @click="batchDeal()">批量处理</button>
            </div>
          </div>
          <el-table
            height="75vh"
            ref="multipleTable"
            empty-text="暂无数据"
            :data="dataList"
            :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
              prop="idString"
              label="id"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="faultTime"
              label="故障时间"
              width="180"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="stationId"
              label="场站编号"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="stationName"
              label="场站名称"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="objectId"
              label="风机编号"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="modelId"
              label="风机型号"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="messageType"
              label="故障状态"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="category1"
              label="类别"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="alertText"
              label="故障内容"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column width="170" label="故障标签">
              <template #default="scope">
                <span>
                  <el-select
                    v-model="scope.row.labels"
                    @change="selectChange(scope.row)"
                    clearable
                    placeholder="请选择"
                    popper-class="select"
                    style="width: 130px; margin-left: 30px"
                  >
                    <el-option
                      v-for="item in faultLists"
                      :key="item.faultcode"
                      :label="item.faulttype"
                      :value="item.faultcode"
                    >
                    </el-option>
                  </el-select>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </panel>
      </el-col>
      <el-col :span="8" class="pd-l-8">
        <panel :title="'演示过程图'" :showLine="false">
          <!-- <div class="records" v-if="recordList.length > 0">
            <el-select
              class="selectt"
              v-model="recordValue"
              @change="search()"
              clearable
              placeholder="请选择"
              popper-class="select"
              style="width: 130px; margin-left: 20px"
            >
              <el-option
                v-for="item in recordList"
                :key="item.names"
                :value="item.names"
                :label="item.names"
              />
            </el-select>
            故障诊断模型：
          </div> -->
          <div
            class="scatterEcharts"
            id="scatter"
            @click="recordResults(storageList)"
          ></div>
          <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.0">训练完成</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>
        </panel>
      </el-col>
    </el-row>
    <DataClassify
      ref="dataClass"
      @click-training="handleTraining"
      @handleInterval="intervals"
      v-model="display"
      :allData="dataList"
      :chooseAlgorithm="chooseAlgorithm"
    ></DataClassify>
    <TrainingResults
      v-model="resultsDisplay"
      :allData="showList"
      :intervalValue="intervalValue"
      :moudleList="faultLists"
      @save-date="saveData"
    ></TrainingResults>
    <Records @results="recordResults" v-model="recordsDisplay"></Records>
    <BatchData
      v-model="batchDisplay"
      :moudleList="faultLists"
      :allData="dataList"
      @handleSave="saveData"
    ></BatchData>
  </div>
</template>
<script>
import Panel from "../../components/coms/panel/panel.vue";
import DataClassify from "./components/dataClassify.vue";
import TrainingResults from "./components/trainingResults.vue";
import Records from "./components/records.vue";
import BatchData from "./components/batchData.vue";
import partten from "@/helper/partten.js";
import * as echarts from "echarts";
import axios from "axios";
export default {
  components: {
    Panel,
    partten,
    DataClassify,
    TrainingResults,
    Records,
    BatchData,
  },
  data() {
    return {
      faultLists: [],
      showTraining: false,
      trainingFlag: false,
      recordsDisplay: false,
      batchDisplay: false,
      width: 60,
      recordValue: "",
      // recordList: [],
      monitoringList: [],
      algorithm: [], //算法
      display: false,
      resultsDisplay: false,
      timeValue: [],
      showList: [],
      storageList: [],
      chooseAlgorithm: {},
      selectValue: "NSS_FDC",
      selectMoudle: "UP82",
      intervalValue: 1,
      timeList: [
        { value: "1小时" },
        { value: "1.5小时" },
        { value: "2小时" },
        { value: "2.5小时" },
        { value: "3小时" },
        { value: "3.5小时" },
        { value: "4小时" },
        { value: "4.5小时" },
        { value: "5小时" },
        { value: "5.5小时" },
        { value: "6小时" },
        { value: "6.5小时" },
        { value: "7小时" },
        { value: "7.5小时" },
        { value: "8小时" },
        { value: "8.5小时" },
        { value: "9小时" },
        { value: "9.5小时" },
        { value: "10小时" },
        { value: "10.5小时" },
        { value: "11小时" },
        { value: "11.5小时" },
        { value: "12小时" },
      ],
      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",
            },
          ],
        },
      ],
      moudleList: [],
      dataList: [],
      allData: [],
      resultList: [],
      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",
        },
      ],
      colors: [
        "#FFFFFF",
        "#FF0000",
        "#820041",
        "#FF00FF",
        "#8600FF",
        "#0000C6",
        "#00FFFF",
        "#00DB00",
        "#F9F900",
        "#FF5809",
        "#984B4B",
        "#AFAF61",
        "#5151A2",
        "#FFAF60",
        "#B766AD",
        "#006030",
        "#2894FF",
        "#796400",
      ],
    };
  },
  created() {
    // this.storageList = JSON.parse(
    //   '[{"id":367361,"faultTime":"2021-10-22 10:46:09","messageType":1,"snapID":3744,"confirmType":0,"confirmTime":null,"confirmPerson":null,"stationId":"NSS_FDC","projectId":"NSS01_GC","lineId":"NSS02_XL","windturbineId":"NG01_13","alertValue":0,"rank":"5","category1":"FJ","category2":"GZ","category3":"TJ","lastUpdateTime":"2021-10-22 12:29:56","lastUpdatePerson":"system","stationName":"牛首山风电场","projectName":null,"lineName":null,"windturbineName":"牛首山13号风机","alertText":"总故障","modelId":"UP82","objectName":"牛首山风电场","messageTypeString":"触发","objectId":"NG01_13","opened":false,"categoryName":"风机","colors":"#FFFFFF"},{"id":366763,"faultTime":"2021-10-21 16:14:59","messageType":1,"snapID":27513,"confirmType":0,"confirmTime":null,"confirmPerson":null,"stationId":"NSS_FDC","projectId":"NSS01_GC","lineId":"NSS02_XL","windturbineId":"NG01_15","alertValue":0,"rank":"5","category1":"FJ","category2":"GZ","category3":"TJ","lastUpdateTime":"2021-10-26 08:14:33","lastUpdatePerson":"system","stationName":"牛首山风电场","projectName":null,"lineName":null,"windturbineName":"牛首山15号风机","alertText":"总故障","modelId":"UP82","objectName":"牛首山风电场","messageTypeString":"触发","objectId":"NG01_15","opened":false,"categoryName":"风机","colors":"#FFFFFF"},{"id":366005,"faultTime":"2021-10-21 12:52:56","messageType":1,"snapID":36067,"confirmType":0,"confirmTime":null,"confirmPerson":null,"stationId":"NSS_FDC","projectId":"NSS01_GC","lineId":"NSS02_XL","windturbineId":"NG01_12","alertValue":0,"rank":"5","category1":"FJ","category2":"GZ","category3":"TJ","lastUpdateTime":"2021-10-25 09:14:11","lastUpdatePerson":"system","stationName":"牛首山风电场","projectName":null,"lineName":null,"windturbineName":"牛首山12号风机","alertText":"总故障","modelId":"UP82","objectName":"牛首山风电场","messageTypeString":"触发","objectId":"NG01_12","opened":false,"categoryName":"风机","colors":"#FFFFFF"},{"id":365991,"faultTime":"2021-10-21 12:51:16","messageType":1,"snapID":36067,"confirmType":0,"confirmTime":null,"confirmPerson":null,"stationId":"NSS_FDC","projectId":"NSS01_GC","lineId":"NSS02_XL","windturbineId":"NG01_12","alertValue":0,"rank":"5","category1":"FJ","category2":"GZ","category3":"TJ","lastUpdateTime":"2021-10-25 09:14:11","lastUpdatePerson":"system","stationName":"牛首山风电场","projectName":null,"lineName":null,"windturbineName":"牛首山12号风机","alertText":"总故障","modelId":"UP82","objectName":"牛首山风电场","messageTypeString":"触发","objectId":"NG01_12","opened":false,"categoryName":"风机","colors":"#FFFFFF"}]'
    // );
    let select = this.options.filter(
      (item) => item.value === this.selectValue
    )[0];
    this.selectMoudle = select.station[0].lable;
    this.moudleList = select.station;
    if (this.timeValue.length === 0) {
      let date = new Date();
      this.timeValue[0] = date.getTime() - 86400000;
      this.timeValue[1] = date.getTime();
    }
    this.searchData();
    this.getType();
    // this.getRecords();
    this.getfaultLables();
    this.$nextTick(() => {
      this.getScatter();
    });
  },
  methods: {
    getType() {
      let that = this;
      this.API.requestData({
        method: "GET",
        baseURL: "http://192.168.10.18:8080/",
        subUrl: "api/coordinate/algorithm",
        data: {
          type: 0,
        },
        success(res) {
          if (res) {
            that.algorithm = res;
            that.chooseAlgorithm = res[0];
          }
        },
      });
    },
    search() {
      let select = this.options.filter(
        (item) => item.value === this.selectValue
      )[0];
      this.selectMoudle = select.station[0].lable;
      this.moudleList = select.station;
    },
    searchData(realFlag) {
      let loading = "";
      if (!realFlag) {
        this.allData = [];
        this.monitoringList = [];
        loading = this.$loading({
          lock: true,
          text: "数据加载中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
      }
      const that = this;
      this.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.18:8075/",
        subUrl: "fault/history/list",
        data: {
          pagenum: "1",
          pagesize: 10000,
          stationid: this.selectValue,
          starttime: new Date(this.timeValue[0]).formatDate(
            "yyyy-MM-dd hh:mm:ss"
          ),
          endtime: new Date(this.timeValue[1]).formatDate(
            "yyyy-MM-dd hh:mm:ss"
          ),
        },
        success(res) {
          if (res) {
            let arr = [];
            res.forEach((item, index) => {});

            // let realData = [];
            if (!realFlag) {
              loading.close();
            }
            res.forEach((item, index) => {
              if (item.messageType === 1 && item.category1 === "FJ") {
                item.messageType = "触发";
                that.allData.push(item);
                if (arr.length < 11) {
                  item.colors = "#ffffff";
                  arr.push(item);
                } else if (arr.length < 33) {
                  item.colors = "#FF0000";
                  arr.push(item);
                }
                that.storageList = arr;
                // if (realFlag) {
                //   if (that.monitoringList.length > 0) {
                //     let arr = that.monitoringList.filter(
                //       (val) => val.id === item.id
                //     );
                //     if (arr.length >= 0) {
                //       realData.push(item);
                //     }
                //   }
                // } else {
                //   that.allData.push(item);
                //   that.monitoringList.push(item);
                // }
              }
            });
            that.queryData();
            // if (realFlag) {
            //   that.monitoringList = [];
            //   res.forEach((item) => {
            //     if (item.messageType === "触发" && item.category1 === "FJ") {
            //       that.monitoringList.push(item);
            //     }
            //   });
            //   that.startTraining(realData);
            // }
            that.selectSearch();
          } else {
            loading.close();
          }
        },
      });
    },
    queryData() {
      let param = [];
      this.allData.forEach((item) => {
        param.push(item.idString);
      });
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "http://192.168.1.18:9002/case/fault/list",
        data: {
          ids: param.join(","),
        },
        success(res) {
          if (res) {
            res.data.forEach((item) => {
              that.allData.filter((val) => val.idString === item.faultid)[0].labels =
                item.faultcode;
              that.allData.filter((items) => items.idString === item.faultid)[0].ids =
                item.idString;
            });
          }
        },
      });
    },
    getFaultList(index) {
      let result = this.resultList[index];
      let that = this;
      this.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.18:8075/",
        subUrl: "fault/history/",
        data: {
          ids: result.join(","),
        },
        success(res) {
          if (res) {
            res.forEach((item) => {
              item.colors = that.colors[index];
            });
            that.storageList =
              that.storageList.length > 0 ? [that.storageList, ...res] : res;
            index++;
            if (index < that.resultList.length) {
              that.getFaultList(index);
            }
          }
        },
      });
    },
    selectSearch() {
      this.dataList = [];
      if (this.selectMoudle === "全部") {
        this.dataList = this.allData;
      } else {
        this.allData.forEach((item) => {
          if (item.modelId.indexOf(this.selectMoudle) != -1) {
            this.dataList.push(item);
          }
        });
      }
    },
    getScatter() {
      let chartDom = document.getElementById("scatter");
      let myChart = echarts.init(chartDom);
      let 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);
    },

    algorithmChange(val) {
      this.chooseAlgorithm = this.algorithm.filter(
        (item) => item.name === val
      )[0];
    },
    TypeClick(btnType) {
      if (btnType === "sjfl") {
        this.display = true;
      } else if (btnType === "xljl") {
        this.recordsDisplay = true;
      }
    },
    handleTraining() {
      let that = this;
      that.resultList = [];
      this.API.requestData({
        method: "GET",
        baseURL: "http://192.168.10.18:8080/",
        subUrl: "api/coordinate/",
        success(res) {
          if (res) {
            let dataList = [];
            res.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();
          }
        },
      });
      this.API.requestData({
        method: "GET",
        baseURL: "http://192.168.10.18:8080/",
        subUrl: "api/coordinate/progress",
        success(res) {
          that.showTraining = true;
          if (res) {
            that.trainingFlag = res.value === -1 ? false : true;
            that.width = res.value === -1 ? -1 : (res.value * 100).toFixed(2);
            if (that.width < 100) {
              setTimeout(() => {
                that.handleTraining();
              }, 1000);
            } else {
              if (that.resultList.length > 0) {
                that.storageList = [];
                that.getFaultList(0);
              }
              that.$refs.dataClass.reset();
            }
          }
        },
      });
    },
    recordResults(val) {
      this.showList = val;
      this.resultsDisplay = true;
    },
    inputChange(val) {
      val.value = Math.abs(val.value);
      if (val.type === "float") {
        val.value = val.value.toFixed(2);
      } else {
        val.value = val.value.toFixed(0);
      }
    },
    clear() {
      this.chooseAlgorithm = {};
    },
    intervals(intervalValue) {
      this.intervalValue = intervalValue;
    },
    // getRecords() {
    //   let that = this;
    //   this.API.requestData({
    //     method: "GET",
    //     baseURL: "http://192.168.10.18:8080/",
    //     subUrl: "api/coordinate/history",
    //     success(res) {
    //       if (res) {
    //         res.forEach((item) => {
    //           let arr = item.name.split("-");
    //           item.names =
    //             arr[0] +
    //             "-" +
    //             new Date(Number(arr[1])).formatDate("yyyy-MM-dd hh:mm:ss");
    //         });
    //         that.recordValue = res[0].names;
    //         that.recordList = res;
    //       }
    //     },
    //   });
    // },
    // startTraining(realData) {
    //   let params = {};
    //   let dataInfos = [];
    //   realData.forEach((item) => {
    //     let datas = {};
    //     datas.startTs =
    //       new Date(item.faultTime).getTime() - this.intervalValue * 3600000;
    //     datas.endTs = new Date(item.faultTime).getTime();
    //     datas.thingId = item.objectId;
    //     datas.modelId = item.modelId;
    //     datas.stationId = item.stationId;
    //     datas.id = item.id;
    //     datas.faultTime = new Date(item.faultTime).getTime();
    //     dataInfos.push(datas);
    //   });
    //   let paramt = this.recordList.filter(
    //     (item) => item.names === this.recordValue
    //   )[0];
    //   let arr = paramt.name.split("-");
    //   let algorithm = {
    //     name: arr[0],
    //     parameter: paramt.name,
    //   };
    //   params.algorithm = algorithm;
    //   params.dataInfos = dataInfos;
    //   axios({
    //     method: "post",
    //     url: "http://192.168.10.18:8080/api/coordinate/execute",
    //     data: params,
    //     header: {
    //       "Content-Type": "application/json",
    //     },
    //   }).then((res) => {
    //     if (res) {
    //       let dataList = [];
    //       res.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: this.colors[index] };
    //           dataList.push(datas);
    //         });
    //         this.resultList.push(idList);
    //       });
    //       this.series = dataList;
    //       this.getScatter();
    //     }
    //   });
    // },
    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;
          }
        },
      });
    },
    batchDeal() {
      this.batchDisplay = true;
    },
    selectChange(data) {
      let arr = [];
      arr.push(data);
      this.saveData(arr);
    },
    saveData(data) {
      let params = [];
      data.forEach((item) => {
        if (item.labels) {
          let obj = {
            faultid: item.idString,
            stationcn: item.stationName,
            windturbineid: item.objectId,
            faulttype: this.faultLists.filter(
              (items) => items.faultcode === item.labels
            )[0]?.faulttype,
            faultcode: item.labels,
            starttime: item.faultTime,
            model: item.modelId,
            stationen: item.stationId,
            tag: 0,
          };
          if (item.ids) {
            obj.id = item.ids;
          }
          params.push(obj);
        }
      });
      if (params.length > 0) {
        axios({
          method: "post",
          url: "http://192.168.1.18:9002/case/fault/insert",
          data: params,
          header: {
            "Content-Type": "application/json",
          },
        }).then((res) => {
          if (res.data.code !== 200) {
            this.BASE.showMsg({
              type: "error",
              msg: "标签修改失败",
            });
          }
        });
      }
    },
  },
};
</script>
<style scope lang="less">
el-table__row > td {
  border: none;
}

.el-table::before {
  height: 0px;
}
.decision-page-1 {
  .com-panel .panel-title {
    line-height: 3.4259vh;
  }

  .tools {
    display: flex;
    line-height: 3.4259vh;

    .tool-block {
      display: flex;
      align-items: center;
      margin-left: 0.741vh;

      .legend {
        flex: auto;
        width: 0.741vh;
        height: 0.741vh;
        margin-right: 0.741vh;

        &.long {
          width: 2.963vh;
          height: 0.37vh;
        }
      }

      .legend-text {
        color: @gray-l;
        font-size: @fontsize-s;
      }
    }
  }

  .project-table {
    overflow: auto;

    tbody {
      height: calc(100vh - 24.5vh);
    }

    td {
      color: #b2bdc0;
    }
  }

  .contentMx {
    width: 100%;
    overflow-x: auto;
  }

  .activeMx {
    width: 150%;
  }

  .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;
    }
  }
  .scatterEcharts {
    width: 600px;
    height: 500px;
  }

  .progressTitle {
    display: flex;
    flex-direction: row;

    .progressNum {
      margin-left: 20px;
    }
  }

  .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;
    }
  }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.records {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.selectt {
  width: 270px !important;
}
.buts {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
</style>