sis_zhfx/src/views/sampleDatabase/performance/index.vue

<template>
  <el-scrollbar height="92vh">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item" style="width: 200px">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="station"
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in ChangZhan"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item" style="width: 200px">
          <div class="lable">样本类型：</div>
          <div class="search-input">
            <el-select
              v-model="yblx"
              placeholder="请选择样本"
              popper-class="select"
            >
              <el-option
                v-for="item in yblxArr"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item" style="width: 200px">
          <div class="lable">模型：</div>
          <div class="search-input">
            <el-select
              v-model="model"
              collapse-tags
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in models"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </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-item">
          <div class="lable">时间：</div>
          <div class="search-input">
            <el-date-picker
              v-model="time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn" @click="list">查询</button>
        </div>
      </div>
    </div>
    <el-row :type="'flex'" class="content">
      <ComTable
        :data="tableData"
        height="80vh"
        v-loading="tableLoading"
        element-loading-text="拼命加载中"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      ></ComTable>
    </el-row>
    <el-dialog
      title="数据对比"
      v-model="dialog"
      width="70%"
      top="10vh"
      custom-class="modal"
      :close-on-click-modal="false"
      :before-close="onClickDialogClose"
      class="isvisiable"
    >
      <!-- <scatter-line-chart
        :data="scatterLineData"
        :dotName="dotName"
        :height="'70vh'"
      /> -->
      <PerformanceEcharts
        :data="scatterLineData"
        :dotName="dotName"
        :height="'70vh'"
      ></PerformanceEcharts>
    </el-dialog>
  </el-scrollbar>
</template>

<script>
import ComTable from "@/components/coms/table/table.vue";
// import ScatterLineChart from "./scatter-line-chart.vue";
import PerformanceEcharts from "./performanceEcharts.vue";

import BASE from "@tools/basicTool.js";
export default {
  components: {
    ComTable,
    PerformanceEcharts,
    // ScatterLineChart,
  },
  data() {
    const that = this;
    return {
      scatterLineData: [
        [1.49, 337.0],
        [5.78, 368.0],
        [5.08, 247.0],
        [4.79, 171.0],
        [4.05, 120.0],
      ],
      dotName: "",
      checkLength: 0, //对标分析只能选择5个
      yblx: 0,
      yblxArr: [
        {
          label: "正样本",
          value: 0,
        },
        {
          label: "负样本",
          value: 1,
        },
      ],
      dialog: false, //传感点组件隐藏或显示
      ChangZhan: [],
      // 模型
      model: 0,
      models: [
        {
          label: "欠发矩阵模型",
          value: 0,
        },
      ],
      // 时间间隔
      interval: "1-2",
      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",
        },
      ],
      time: [],
      station: "",
      tableData: {
        column: [
          {
            name: "序号",
            field: "index",
            is_light: false,
            width: "100px",
          },
          {
            name: "样本类型",
            field: "tag",
            is_light: false,
            width: "150px",
          },
          {
            name: "风机编号",
            field: "windturbineid",
            is_light: false,
            width: "250px",
          },
          {
            name: "开始时间",
            field: "starttime",
            is_light: false,
            width: "350px",
          },
          {
            name: "结束时间",
            field: "endtime",
            is_light: false,
            width: "350px",
          },
          {
            name: "操作",
            field: "cz",
            is_light: false,
            width: "200px",
            template: () => {
              return "<el-button type='text' style='cursor: pointer;' value='config'>详情</el-button>&nbsp";
            },
            click(e, row) {
              that.onClickOption(e, row);
            },
          },
        ],
        data: [],
      },
    };
  },
  methods: {
    async startAjax() {
      var that = this;
      that.time = [
        new Date(new Date() - 3600 * 24 * 1000 * 15).formatDate(
          "yyyy-MM-dd hh:mm:ss"
        ),
        new Date().formatDate("yyyy-MM-dd hh:mm:ss"),
      ];
      await that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:9001/",
        subUrl: "benchmarking/wplist",
        success(res) {
          that.ChangZhan = res.data;
          that.station = res.data[1].id;
        },
      });
      that.list();
    },
    onClickOption(e, row) {
      // 操作按钮
      if ("config" == e.target.getAttribute("value")) {
        //查看
        this.chart([row.id]);
      }
    },
    chart(ids) {
      const that = this;
      BASE.showLoading({ text: "加载中..." });
      that.API.requestData({
        method: "GET",
        // baseURL: "http://192.168.10.19:9002/",
        baseURL: "http://192.168.10.4:9002/",
        subUrl: "case/performance/line",
        data: {
          id: ids,
          interval: 30,
        },
        success(res) {
          if (res.code == 200) {
            // let key = Object.keys(res.data)[0];
            that.scatterLineData = res.data;
            // that.dotName = key;
            BASE.closeLoading();
            that.dialog = true;
          }
        },
      });
    },
    list() {
      // var that = this;
      // if (that.time == undefined) {
      //   that.BASE.showMsg({
      //     type: "warning",
      //     msg: "请选择起始时间",
      //   });
      //   return;
      // }
      var that = this;
      let station = "";
      if (typeof that.time[0].valueOf() != "string") {
        that.time[0] = new Date(that.time[0]).formatDate("yyyy-MM-dd hh:mm:ss")
      }
      if (typeof that.time[1].valueOf() != "string") {
        that.time[1] = new Date(that.time[1]).formatDate("yyyy-MM-dd hh:mm:ss")
      }

      that.API.requestData({
        showLoading: true,
        method: "GET",
        baseURL: "http://192.168.10.4:9002/",
        //    baseURL: "http://192.168.10.19:9002/",
        subUrl: "case/performance/list",
        data: {
          tag: that.yblx,
          station: that.station,
          interval: that.interval,
          st: that.time[0].valueOf(),
          et: that.time[1].valueOf(),
        },
        success(res) {
          console.log(11111, res);
          if (res.code == 200) {
            that.tableData.data = [];
            if (res.data.length) {
              let data = res.data;
              for (var i = 0; i < data.length; i++) {
                let obj = {
                  index: i + 1,
                  tag: data[i].tag == 0 ? "正样本" : "负样本",
                  windturbineid: data[i].windturbineid,
                  starttime: data[i].starttime,
                  endtime: data[i].endtime,
                  id: data[i].id,
                };
                that.tableData.data.push(obj);
              }
            } else {
              that.BASE.showMsg({
                msg: "所选日期暂无数据",
              });
            }
          }
        },
      });
    },
  },
  created() {
    this.startAjax();
  },
};
</script>

<style lang="less" scoped>
.el-select.w {
  width: 100%;
}
</style>