fd_dwgz_zhyw/src/views/stateMonitor/alarmCenter/commonAlarm/index.vue

<template>
  <div class="alarm-body">
    <div class="search-form">
      <div class="select-form">
        <div class="select-item">
          报警类型：
          <el-select
            size="mini"
            v-model="alarmType"
            placeholder="请选择"
            @change="alarmTypeChanged"
          >
            <el-option
              v-for="item in alarmOptions"
              :key="item.id"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </div>
        <div class="select-item" v-if="alarmType == 'booststation'">
          升压站：
          <el-select
            size="mini"
            v-model="sub"
            placeholder="请选择"
            @change="subChanged"
            filterable
          >
            <el-option
              v-for="item in subOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="select-item" v-if="alarmType == 'windturbine'">
          场站：
          <el-select
            size="mini"
            v-model="station"
            placeholder="请选择"
            @change="stationChanged"
            filterable
          >
            <el-option
              v-for="item in wpOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="select-item" v-if="alarmType == 'windturbine'">
          设备：
          <el-select
            size="mini"
            v-model="wind"
            placeholder="请选择"
            @change="windChanged"
            filterable
            clearable
          >
            <el-option
              v-for="item in wtOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="select-item">
          描述：
          <el-input size="mini" v-model="description" placeholder="请输入">
          </el-input>
        </div>
        <div class="select-item">
          开始日期：
          <el-date-picker
            v-model="begin"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择日期"
            size="mini"
            popper-class="date-select"
          >
          </el-date-picker>
        </div>
        <div class="select-item">
          结束日期：
          <el-date-picker
            v-model="end"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择日期"
            size="mini"
            popper-class="date-select"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="btns">
        <el-button round size="mini" class="buttons" @click="getTableData"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="alarm-list">
      <div class="line">
        <div class="left-content"><span>报警列表</span></div>
        <div class="right-content"></div>
      </div>
      <div class="economicTable">
        <el-table
          ref="table"
          :data="alarmData"
          height="calc(100% - 35px)"
          style="width: 100%"
          fit
          v-loading="loading"
          element-loading-text="加载中..."
          element-loading-background="rgba(4, 12, 11, 0.8)"
          empty-text=" "
          stripe
        >
          <el-table-column
            v-for="(item, index) in tableHeader"
            :key="index"
            sortable
            :prop="item.code"
            :label="item.title"
            align="center"
            :width="item.width"
          >
            <template #default="{ row }">
              <span v-if="item.code == 'rank'">{{ getRank(row.rank) }}</span>
              <span v-else-if="item.code == 'endts'">{{
                row.endts ? "解除" : "未解除"
              }}</span>
              <span v-else>{{ row[item.code] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-size="page.pagesize"
          layout="total, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getWpList, getSubList } from "@/api/economic/index";
import { getApiequipmentListByWp } from "@/api/monthlyPerformanceAnalysis.js";
import { GetTableData } from "@/api/zhbj/index.js";
import dayjs from "dayjs";
export default {
  name: "commonAlarm",
  components: {},
  data() {
    return {
      station: "",
      wpOptions: [],
      wind: "",
      wtOptions: [],
      sub: "",
      subOptions: [],
      alarmType: "windturbine",
      alarmOptions: [
        {
          code: "booststation",
          name: "升压站报警",
        },
        {
          code: "windturbine",
          name: "设备报警",
        },
      ],
      booststation: "",
      booststationOptions: [],
      description: "",
      begin: dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
      end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      alarmData: [],
      loading: false,
      tableHeader: [
        { title: "时间", code: "ts", width: "220" },
        { title: "场站名称", code: "stationname", width: "220"  },
        { title: "设备名称", code: "devicename", width: "200"  },
        { title: "报警描述", code: "description" },
        { title: "级别", code: "rank", width: "180" },
        { title: "是否确认", code: "confirmed", width: "180" },
        { title: "是否解除", code: "endts", width: "180" },
      ],
      tableHeader1: [
        { title: "时间", code: "ts" },
        { title: "报警描述显示", code: "description" },
        { title: "是否确认", code: "confirmed" },
      ],
      page: {
        pagesize: 22,
        currentPage: 1,
        total: 0,
      },
    };
  },
  created() {
    this.GetWpOptions();
  },
  methods: {
    getRank(rank) {
      if (rank === 1) {
        return "低级";
      } else if (rank === 2) {
        return "低中级";
      } else if (rank === 3) {
        return "中级";
      } else if (rank === 4) {
        return "中高级";
      } else if (rank === 5) {
        return "高级";
      }
    },
    GetWpOptions() {
      getWpList({ type: 0 }).then(({ data }) => {
        if (data && data.data.length) {
          this.wpOptions = data.data;
          this.station = data.data[0].id;
          this.GetWtOptions();
          this.getTableData();
        } else {
          this.wpOptions = [];
          this.station = "";
        }
      });
    },
    GetWtOptions() {
      getApiequipmentListByWp({ wpid: this.station }).then(({ data }) => {
        if (data && data.data.length) {
          this.wtOptions = data.data;
        } else {
          this.wtOptions = [];
          this.wind = "";
        }
      });
    },
    GetSubOptions() {
      getSubList({ type: 0 }).then(({ data }) => {
        if (data && data.data.length) {
          this.subOptions = data.data;
          this.sub = this.subOptions[0].id;
          this.getTableData();
        } else {
          this.subOptions = [];
          this.sub = "";
        }
      });
    },
    getTableData() {
      this.loading = true;
      let params = {};
      if (this.alarmType == "windturbine") {
        params = {
          begin: this.begin,
          end: this.end,
          alarmType: this.alarmType,
          stationid: this.station,
          deviceid: this.wind,
          description: this.description,
          pageNum: this.page.currentPage,
          pageSize: this.page.pagesize,
        };
      } else {
        params = {
          begin: this.begin,
          end: this.end,
          alarmType: this.alarmType,
          stationid: this.sub,
          description: this.description,
          pageNum: this.page.currentPage,
          pageSize: this.page.pagesize,
        };
      }
      GetTableData(params).then(({ data }) => {
        this.loading = false;
        if (data.ls.length) {
          this.alarmData = data.ls.map((item) => {
            return {
              ...item,
              confirmed: item.confirmed ? "是" : "否",
              ts: dayjs(item.ts).format("YYYY-MM-DD HH:mm:ss"),
            };
          });
          this.page.total = data.total;
        } else {
          this.alarmData = [];
          this.page.total = 0;
        }
      });
    },
    alarmTypeChanged(val) {
      this.alarmType = val;
      this.page.currentPage = 1;
      if (val == "windturbine") {
        this.GetWpOptions();
      } else {
        this.GetSubOptions();
      }
    },
    subChanged(val) {
      this.sub = val;
      this.page.currentPage = 1;
      this.getTableData();
    },
    stationChanged(val) {
      this.station = val;
      this.page.currentPage = 1;
      this.GetWtOptions();
      this.getTableData();
    },
    windChanged(val) {
      this.wind = val;
      this.page.currentPage = 1;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getTableData();
    },
  },
};
</script>
<style scoped lang="less">
.alarm-body {
  height: 100%;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  .search-form {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #b3b3b3;

    .select-form {
      display: flex;
      align-items: center;
      .select-item {
        margin-right: 10px;
        white-space: nowrap;
        display: flex;
        align-items: center;
      }
    }
    .btns {
      align-items: center;
      display: flex;
      .buttons {
        background-color: rgba(5, 187, 76, 0.2);
        border: 1px solid #3b6c53;
        color: #b3b3b3;
        font-size: 14px;

        &:hover,
        &.active {
          background-color: rgba(5, 187, 76, 0.5);
          color: #ffffff;
        }
      }
    }
  }
  .alarm-list {
    margin-top: 15px;
    height: calc(100% - 45px);
    .line {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .left-content {
        width: 242px;
        height: 41px;
        display: flex;
        align-items: center;
        background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
        span {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #05bb4c;
          margin-left: 25px;
        }
      }
    }
    .economicTable {
      height: calc(100% - 45px);
      .el-pagination {
        text-align: right;
      }
    }
  }
}
::v-deep {
  input::placeholder {
    text-align: left;
  }
}
</style>