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

<template>
  <div class="knowledge-2">
    <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="wpId"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in wpArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">预警分类：</div>
          <div class="search-input">
            <el-select
              v-model="wtId"
              clearable
              collapse-tags
              multiple
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                label="全选"
                :class="active ? 'selected' : ''"
                @click="checkAll"
              />
              <el-option
                v-for="(item, index) in wtIdArr"
                :key="index"
                :value="item"
                :label="item"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item" style="width: 445px">
          <div class="lable">日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="month"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn" @click="query">查询</button>
          <!-- <button class="btn" @click="">导入</button> -->
          <button class="btn" @click="export">导出</button>
        </div>
      </div>
    </div>
    <el-row :type="'flex'" class="content">
      <el-col :span="24">
        <ComTable :data="tableData" height="85vh"></ComTable>
      </el-col>
    </el-row>

    <el-dialog
      :title="yssjTitle"
      v-model="yssjDialog"
      width="70%"
      top="15vh"
      custom-class="modal"
      :close-on-click-modal="false"
      :before-close="yssjDialogClose"
    >
      <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-if="!chooseStatus"
                @change="switchChange(selectValue)"
                class="inputs"
                v-model="selectValue"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in timeoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="query-actions">
            <button class="btn" @click="queryYssj">查询</button>
          </div>
        </div>
      </div>

      <el-row type="flex">
        <multiple-y-line-chart-normal
          height="500px"
          :list="Analysis"
          :yAxises="AnalysisYAxises"
          :showLegend="true"
        />
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";
import MultipleYLineChartNormal from "../../NewPages/multiple-y-line-chart-normal.vue";
import BASE from "@tools/basicTool.js";
export default {
  components: {
    ComTable,
    MultipleYLineChartNormal,
  },
  data() {
    let that = this;
    return {
      active: true,
      selectAll: true,
      AnalysisName: "",
      AnalysisUnit: "",
      Analysis: [
        {
          title: "",
          yAxisIndex: 0, // 使用单位
          value: [],
        },
      ],
      AnalysisYAxises: [
        {
          name: "",
          min: "",
          max: "",
          unit: "",
          position: "left",
        },
        {
          name: "",
          min: "",
          max: "",
          unit: "",
          position: "right",
        },
      ],
      selectValue: "60",
      timeoptions: [
        {
          value: "60",
          label: "一分钟",
        },
        {
          value: "300",
          label: "五分钟",
        },
        {
          value: "600",
          label: "十分钟",
        },
        {
          value: "1800",
          label: "三十分钟",
        },
        {
          value: "3600",
          label: "一小时",
        },
        {
          value: "86400",
          label: "一天",
        },
      ],
      yssjDialog: false,
      yssjData: {},
      month: [],
      wpId: "MHS_FDC",
      wpArray: [],
      wpName: "",
      wtId: [],
      wtIdArr: [],
      wtidData: [],
      wtIdNum: false,
      tableDataArr: {},
      tableData: {
        column: [
          {
            name: "序号",
            field: "index",
            is_num: false,
            is_light: false,
            width: "60px",
          },
          {
            name: "风机编号",
            field: "fjbh",
            is_num: false,
            is_light: false,
            width: "150px",
          },
          {
            name: "预警分类",
            field: "yjfl",
            is_num: false,
            is_light: false,
            width: "300px",
          },
          {
            name: "预警描述",
            field: "yjms",
            is_num: false,
            is_light: false,
          },
          {
            name: "预警次数（次）",
            field: "yjcs",
            is_num: false,
            is_light: false,
            sortable: true,
            width: "300px",
          },
          {
            name: "预警时长（分钟）",
            field: "yjsc",
            is_num: false,
            is_light: false,
            sortable: true,
            width: "300px",
          },
          {
            name: "操作",
            field: "cz",
            is_num: false,
            is_light: false,
            width: "200px",
            template: function () {
              return "<a class='action'>原始数据</a>";
            },
            click: function (event, data) {
              that.yssjTitle = data.yjms;
              that.requestDetailData(
                that.wpId,
                data.fjbh,
                data.yjms,
                that.month
              );
            },
          },
        ],
        data: [],
      },
    };
  },
  created() {
    this.getWp();
    this.month = [new Date(new Date() - 3600 * 1000 * 24 * 1), new Date()];
    this.requestSafeList();
  },
  methods: {
    requestDetailData(wpId, fjbh, yjms, time) {
      let that = this;
      that.yssjData = {
        wpId: wpId,
        fjbh: fjbh,
        yjms: yjms,
        time: time,
      };
      BASE.showLoading();
      that.API.requestData({
        method: "GET",
        subUrl: "/analysis/detail",
        data: {
          station: wpId,
          startTs: new Date(new Date(time[0]).formatDate("yyyy/MM/dd")).getTime(),
          endTs: new Date(new Date(time[1]).formatDate("yyyy/MM/dd")).getTime(),
          interval: that.selectValue,
          wtId: fjbh,
          name: yjms,
        },
        success(res) {
          if (res.data.length == 1) {
            that.yssjDialog = true;
            BASE.closeLoading();
            let yaxises = [
              {
                name: "",
                min: 0,
                max: null,
                unit: "",
                position: "left",
              },
            ];
            // yaxises.name = res.data[0].name;
            yaxises.unit = res.data[0].unit;
            that.AnalysisYAxises = yaxises;
            let aKey1 = ["doubleValue"];
            let aList1 = [
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
            ];
            aKey1.forEach((keyEle, keyIndex) => {
              aList1[keyIndex].title = res.data[keyIndex].name;
              res.data[keyIndex].data.forEach((rEle) => {
                aList1[keyIndex].value.push({
                  text: new Date(rEle.ts).formatDate("hh:mm"),
                  value: rEle.doubleValue,
                });
              });
            });
            that.Analysis = aList1;
          } else if (res.data.length == 2) {
            that.yssjDialog = true;
            BASE.closeLoading();
            let aKey2 = ["doubleValue", "doubleValue"];
            let aList2 = [
              {
                title: "",
                //  yAxisIndex:"",
                smooth: true,
                value: [],
              },
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
            ];
            let yaxises1 = [
              {
                name: "",
                min: 0,
                max: null,
                unit: "",
                position: "left",
              },
              {
                name: "",
                min: 0,
                max: null,
                unit: "",
                position: "right",
              },
            ];
            yaxises1.forEach((aEle, aIndex) => {
              res.data.forEach((rEle) => {
                // aEle.name = rEle.name;
                aEle.unit = rEle.unit;
              });
            });
            that.AnalysisYAxises = yaxises1;
            aKey2.forEach((keyEle, keyIndex) => {
              aList2[keyIndex].title = res.data[keyIndex].name;
              res.data[keyIndex].data.forEach((rEle) => {
                aList2[keyIndex].value.push({
                  text: new Date(rEle.ts).formatDate("hh:mm"),
                  value: rEle.doubleValue,
                });
              });
            });
            that.Analysis = aList2;
          } else if (res.data.length == 4) {
            that.yssjDialog = true;
            BASE.closeLoading();
            let aKey4 = [
              "doubleValue",
              "doubleValue",
              "doubleValue",
              "doubleValue",
            ];
            let aList4 = [
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
            ];
            let yaxises2 = [
              {
                name: "",
                min: 0,
                max: null,
                unit: "",
                position: "left",
              },
              {
                name: "",
                min: 0,
                max: null,
                unit: "",
                position: "right",
              },
            ];
            yaxises2.forEach((aEle, aIndex) => {
              res.data.forEach((rEle) => {
                // aEle.name = rEle.name;
                aEle.unit = rEle.unit;
              });
            });
            that.AnalysisYAxises = yaxises2;
            aKey4.forEach((keyEle, keyIndex) => {
              aList4[keyIndex].title = res.data[keyIndex].name;
              res.data[keyIndex].data.forEach((rEle) => {
                aList4[keyIndex].value.push({
                  text: new Date(rEle.ts).formatDate("hh:mm"),
                  value: rEle.doubleValue,
                });
              });
            });
            that.Analysis = aList4;
          } else if (res.data.length == 0) {
            that.yssjDialog = false;
            BASE.closeLoading();
            that.BASE.showMsg({
              type: "warning",
              msg: "暂无数据",
            });
          } else {
            BASE.closeLoading();
            that.BASE.showMsg({
              msg: "暂无数据",
            });
          }
        },
      });
    },
    queryYssj() {
      let data = this.yssjData;
      this.requestDetailData(data.wpId, data.fjbh, data.yjms, data.time);
    },
    switchChange(interval, status) {
      if (status === "interval") {
        this.chooseStatus = false;
        this.selectValue = "60";
      } else if (status === "original") {
        this.chooseStatus = true;
      }
    },
    formatDate(dates) {
      var date = new Date(dates);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return YY + MM + DD;
    },
    // 获取风场
    getWp() {
      let that = this;
      that.API.requestData({
        baseURL: "http://10.155.32.4:8082/",
        subUrl: "powercompare/windfarmAjax",
        success(res) {
          that.wpArray = res.data;
          that.wpId = res.data[0].id;
          that.wpName = res.data[0].wpName;
        },
      });
    },
    // 获取停机事件
    requestSafeList() {
      let that = this;
      // if (wtIdData) {
      // 	that.tableData.data = wtIdData;
      // 	that.wtIdData = [];
      // 	return;
      // }
      // if (wpId) {
      // 	that.wpId = wpId;
      // }
      that.month[0] = that.formatDate(that.month[0].valueOf());
      that.month[1] = that.formatDate(that.month[1].valueOf());
      let data = {
        stationid: that.wpId,
        startdate: that.month[0].valueOf(),
        enddate: that.month[1].valueOf(),
      };
      that.API.requestData({
        showLoading: true,
        baseURL: "http://192.168.1.18:8075/",
        subUrl: "alarm/count/query/new",
        data,
        success(res) {
          if (res.code == 200) {
            that.tableData.data = [];
            if (res.data.length) {
              let data = res.data;
              let tabData = [];
              let index = 1;
              let wtIdArr = [];
              data.forEach((ele, idx) => {
                let key = Object.keys(ele);
                ele[key].forEach((ele2, idx2) => {
                  if (ele2.time != 0 && ele2.count >= 10) {
                    //过滤条件
                    let obj = {
                      index: index++,
                      fjbh: ele2.windturbineId,
                      yjfl: ele2.relatePartsText,
                      yjms: ele2.alertText,
                      yjcs: ele2.count,
                      yjsc: ele2.time,
                    };
                    tabData.push(obj);
                    let result = wtIdArr.some((ele4) => {
                      return ele2.relatePartsText === ele4;
                    });
                    if (result == false) {
                      wtIdArr.push(ele2.relatePartsText);
                    }
                  }
                });
              });
              that.wtIdArr = wtIdArr;
              that.wtId = wtIdArr;
              that.tableData.data = tabData;
              that.tableDataArr = {
                column: that.tableData.column,
                data: tabData,
              };
            }
          }
        },
      });
    },
    query() {
      this.requestSafeList();
    },
    checkAll() {
      this.selectAll = !this.selectAll;
      if (this.selectAll) {
        this.wtId = this.wtIdArr;
        this.active = true;
      } else {
        this.active = false;
        this.wtId = [];
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    export() {
      let that = this;
      const { export_json_to_excel } = require("@tools/excel/Export2Excel.js"); // 注意这个Export2Excel路径
      let tHeader = []; // 上面设置Excel的表格第一行的标题
      let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值

      that.tableData.column.forEach((ele) => {
        if (ele.field != "cz") {
          tHeader.push(ele.name);
          filterVal.push(ele.field);
        }
      });
      const data = that.formatJson(filterVal, that.tableData.data);
      export_json_to_excel(tHeader, data, "预警分析"); // 最后一个是表名字
    },
  },
  watch: {
    wpId() {
      this.wtidData = undefined;
      this.wtIdNum = false;
    },
    wtId(e) {
      if (this.wtIdNum) {
        let data = [];
        let index = 1;
        let tableDataArr = this.tableDataArr;
        tableDataArr.data.forEach((ele) => {
          e.forEach((ele2) => {
            if (ele.yjfl == ele2) {
              let obj = {
                index: index++,
                fjbh: ele.fjbh,
                yjfl: ele.yjfl,
                yjms: ele.yjms,
                yjcs: ele.yjcs,
                yjsc: ele.yjsc,
              };
              data.push(obj);
            }
          });
        });
        if (data) {
          this.tableData.data = data;
          // this.wtidData = data;
        }
      }
      this.wtIdNum = true;
    },
    // month(e) {
    // 	this.month = [new Date((e - 3600 * 1000 * 24 * 30)), e];
    // }
  },
};
</script>

<style lang="less" scope>
@titleGray: #9ca5a8;
@rowGray: #606769;
@darkBack: #536268;

.knowledge-2 {
  .el-select {
    width: 200px;
  }

  .action {
    text-decoration: underline;
    color: @green;
    cursor: pointer;
  }

  .el-input {
    width: 200px;
  }
}
</style>
<style type="text/css">
.el-month-table td.today .cell {
  color: #05bb4c;
}

.el-month-table td.end-date .cell,
.el-month-table td.start-date .cell {
  background-color: #05bb4c;
}

.el-month-table td.in-range div,
.el-month-table td.in-range div:hover {
  background: rgba(96, 103, 105, 0.4);
}

.el-date-editor.el-date-editor--monthrange {
  border: 1px solid rgba(96, 103, 105, 0.2);
  height: 33px;
  padding: 0 8px;
  width: 369px;
}

.el-date-editor.el-date-editor--monthrange .el-range-separator {
  color: #b3bdc0;
  line-height: 33px;
}

.el-date-editor.el-date-editor--monthrange .el-range-input {
  flex-basis: 145px;
  line-height: 33px;
  background: transparent;
  color: #b3bdc0;
}

.el-picker-panel.el-date-picker {
  background: transparent;
  color: #b3bdc0;
}

.el-picker-panel.el-date-picker td.current .cell {
  background-color: #05bb4c;
  color: white;
}

.el-picker-panel.el-date-picker td .cell:hover {
  color: #05bb4c;
}

.el-picker-panel.el-date-picker td.current div,
.el-picker-panel.el-date-picker td.current div:hover {
  background: rgba(96, 103, 105, 0.4);
  border-radius: 50px;
}
</style>