PC_FiveFollowing/src/views/site/Event_alarm.vue

<template>
  <div>
    <section class="mainbox">
      <div id="Event_content">
        <div class="back_all Cont_One">
          <div class="Ctn_Time">
            <span>选择时间范围 :</span>
            <el-date-picker
              v-model="defaultTime"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              range-separator="~"
              :disabledDate="disabledDate"
            >
            </el-date-picker>
          </div>
          <div class="Ctn_Time">
            <span>状态 :</span>
            <el-select
              id="state_select"
              popper-class="state_select"
              @change="state_select"
              v-model="value"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="Ctn_Time">
            <el-button type="primary" class="Ctn_btn" @click="Api_all"
              >查询</el-button
            >
          </div>
        </div>
        <div class="back_all Cont_Two">
          <div class="title">事件告警统计</div>
          <div class="back_img"></div>
          <div>
            <Eventalarm></Eventalarm>
          </div>
        </div>
        <div class="back_all Cont_Three">
          <div class="title">事件告警列表</div>
          <div class="back_img"></div>
          <div class="three_ctn">
            <div class="cont_1">
              总告警: <span>{{ count }}</span> 条
            </div>
            <div class="cont_2">
              未处理告警数: <span>{{ unCount }}</span> 条
            </div>
            <el-button type="primary" class="Ctn_btn" @click="export_api"
              >导出</el-button
            >
          </div>
          <div class="table">
            <el-table
              v-loading="table_loading"
              empty-text=" "
              element-loading-text="拼命加载中"
              cell-class-name="Cont_Three_table"
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              max-height="345"
              @selection-change="handleSelectionChange"
              @row-dblclick="dblclick"
            >
              <el-table-column type="selection"> </el-table-column>
              <el-table-column
                v-for="table in $store.state.trendIco_table"
                :key="table"
                :prop="table.porp"
                :label="table.label"
                show-overflow-tooltip
              >
              </el-table-column>
              <template #empty v-if="table_loading == false">
                <div class="zwsj">
                  <img src="./../../assets/images/No_data.png" alt="" />
                  <p>暂无数据</p>
                </div>
              </template>
            </el-table>
            <div class="event_block">
              <el-pagination
                popper-class="event_page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
            <el-dialog
              title="告警处置"
              v-model="dialogFormVisible"
              custom-class="From_table"
            >
              <!-- {label:'处理人',porp:'handler'},
            {label:'处理人时间',porp:'handlingTime'}, -->
              <el-form :model="form">
                <el-form-item label="发生时间: ">
                  <el-input
                    v-model="form.soeTime"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item label="告警描述: ">
                  <el-input
                    v-model="form.measName"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item label="设备: ">
                  <el-input
                    v-model="form.deviceCode"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item label="告警类型: ">
                  <el-input
                    v-model="form.alarmName"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态: ">
                  <el-select
                    v-model="form.handlingStatus"
                    placeholder="请选择"
                    popper-class="state_select"
                  >
                    <el-option label="已处理" :value="1"></el-option>
                    <el-option label="未处理" :value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="描述: ">
                  <el-input
                    type="textarea"
                    v-model="form.describe"
                    autocomplete="off"
                    maxlength="30"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button type="primary" @click="dialogFormVisible = false"
                    >确 定</el-button
                  >
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                </span>
              </template>
            </el-dialog>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import Eventalarm from "../site_ehcarts/Event_alarm.vue";
import api from "@/api/site/Event_alarm";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      options: [], //状态下拉列表值存储
      value: 0, //状态下拉列表默认值
      defaultTime: [
        new Date(
          this.$store.state.Time_All[0],
          this.$store.state.Time_All[1],
          1,
          0,
          0,
          0
        ),
        new Date(),
      ], //时间选择器v-model
      disabledDate(date) {
        return date.getTime() > new Date(); //公共时间选择器 控制当前时间之后的时间无法选择
      },

      table_loading: false, //事件告警列表->Loading 加载
      count: 0, //事件告警列表->总告警->api请求返回值存储
      unCount: 0, //事件告警列表->未处理告警数->api请求返回值存储
      tableData: [], //事件告警列表->表格api请求返回值存储
      multipleSelection: [], //事件告警列表->多选按钮事件处理
      dialogFormVisible: false, //事件告警列表->双击form表单隐藏显示控制
      form: {
        soeTime: "",
        measName: "",
        deviceCode: "",
        alarmName: "",
        handlingStatus: 0,
        handler: "",
        handlingTime: "",
        describe: "",
      }, //事件告警列表->form表单值绑定
      currentPage: 1, //事件告警列表->分页当前页数默认值
      pageSize: 10, //事件告警列表->每页几条
      total: 0, //事件告警列表->总条数
    };
  },
  name: "event_alarm",
  components: { Eventalarm },
  mounted() {
    this.trendIco_api();
    this.count_api();
  },
  methods: {
    /**
     * @form表单提交
     */
    dblclick(row, column, event) {
      column || event;
      this.dialogFormVisible = true;
      this.form.soeTime = row.soeTime;
      this.form.measName = row.measName;
      this.form.deviceCode = row.deviceCode;
      this.form.alarmName = row.alarmName;
      row.handlingStatus === "已处理"
        ? (this.form.handlingStatus = 1)
        : (this.form.handlingStatus = 0);
      this.form.handler = row.handler;
      this.form.handlingTime = row.handlingTime;
    },
    /**
     * @状态下拉框
     */
    state_select(val) {
      this.$store.state.trendIco_state = val;
      this.count_api();
    },
    /**
     * @查询按钮api请求
     */
    Api_all() {
      this.trendIco_api();
      this.count_api();
    },
    /**
     * @事件告警统计api请求
     */
    trendIco_api() {
      var _this = this;
      this.options = [];
      this.$store.commit("TimeAll_function", this.defaultTime);
      var time = this.$store.state.Time_Data;
      api
        .trendIco({
          siteId: _this.$store.state.siteId,
          startTime: time[0],
          endTime: time[1],
          queryType: _this.se_content,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            _this.$store.state.trendIco_state = _this.value;
            _this.$store.state.trendIco = requset.data;
            requset.data.map((val, ind) => {
              _this.options.push({ label: val.name, value: ind });
              return;
            });
          } else {
            ElMessage.error(requset.msg);
          }
        });
    },
    /**
     * @事件告警列表api请求
     */
    count_api() {
      var _this = this;
      this.table_loading = true;
      this.$store.commit("TimeAll_function", this.defaultTime);
      var time = this.$store.state.Time_Data;

      api
        .count({
          startTime: time[0],
          endTime: time[1],
          siteId: _this.$store.state.siteId,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            _this.count = requset.data.count;
            _this.unCount = requset.data.unCount;
          } else {
            ElMessage.error(requset.msg);
          }
        });
      api
        .page({
          siteId: _this.$store.state.siteId,
          startTime: time[0],
          endTime: time[1],
          status: _this.value == 0 ? null : _this.value,
          current: _this.currentPage,
          size: _this.pageSize,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            _this.table_loading = false;
            // console.log(requset);
            _this.tableData = requset.data.records;
            _this.total = requset.data.total;
            _this.tableData.map((val) => {
              val.handlingStatus == 1
                ? (val.handlingStatus = "已处理")
                : (val.handlingStatus = "未处理");
            });
            // console.log(requset);
          } else {
            ElMessage.error(requset.msg);
          }
        });
    },
    /**
     * @事件告警列表导出xlsx
     */
    export_api() {
      var _this = this;
      this.$store.commit("TimeAll_function", this.defaultTime);
      var time = _this.$store.state.Time_Data;
      api
        .export({
          siteId: _this.$store.state.siteId,
          startTime: time[0],
          endTime: time[1],
          status: _this.value,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            window.location.href =
              window.PLATFROM_CONFIG.fileUrl + requset.data;
          } else {
            ElMessage.error(requset.msg);
          }
        });
    },
    /**
     * @多选按钮事件处理
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.count_api();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.count_api();
      // console.log(`当前页: ${val}`);
    },
  },
};
</script>


<style>
/**
 * @分页css样式 
*/
.event_block {
  margin-top: -10px;
  text-align: center;
}
.event_block .el-pagination__sizes .el-input__inner {
  margin-top: 0;
  width: 110px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(3, 107, 119, 1) !important;
  color: #fff;
}
.event_block button {
  background-color: transparent !important;
  color: #fff !important;
}
.event_block .btn-prev {
  margin-right: 10px;
}
.event_block .el-pagination button:hover {
  color: rgba(3, 107, 119, 1) !important;
}

.event_block .el-pagination__total {
  color: #fff;
}
.event_block .el-pagination__jump .el-input__inner {
  margin-top: 0;
  width: 45px !important;
  color: #fff;
}
.event_block .el-pagination .el-pager li {
  width: 27px;
  height: 27px;
  min-width: 27px;
  line-height: 27px;
  background: #1c363f;
  color: #fff;
  border: 1px solid rgba(3, 107, 119, 1) !important;
  border-radius: 8px;
  margin-right: 10px;
}
.event_block .el-pagination .el-pager li.active {
  background: #016f6d;
}
.event_block .el-pagination .el-pagination__jump {
  color: #fff;
}
</style>

<style>
/**
 * @表单提交css样式
 */
.From_table {
  width: 409px !important;
  height: 516px;
  background: transparent;
  background: url("~@/assets/images/back_from.png") no-repeat;
  background-size: cover;
}
.From_table .el-dialog__title {
  color: #00f4fd;
  font-size: 16px;
  font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
  font-weight: bold;
  line-height: 10px;
}
.From_table .el-dialog__headerbtn {
  background: url("~@/assets/images/close.png") no-repeat;
  background-size: cover;
  width: 16px;
  height: 16px;
}
.From_table .el-dialog__headerbtn .el-dialog__close {
  color: transparent;
}
.From_table .el-form-item__label {
  width: 80px;
  color: #00f4fd;
}
.From_table .el-form-item {
  margin-bottom: 10px;
}
.From_table .el-input__inner {
  width: 285px !important;
  color: #fff;
}
.From_table .el-input--suffix .el-input__inner {
  border-radius: 3px !important;
  border: 1px solid rgba(3, 107, 119, 1) !important;
  color: #fff;
  margin-top: 0px;
}
.From_table .el-scrollbar {
  width: 100%;
}
.From_table .el-textarea__inner {
  border: 1px solid rgba(3, 107, 119, 1);
  background-color: transparent;
  height: 103px !important;
  width: 98.5%;
  color: #fff;
}
.From_table .el-textarea .el-input__count {
  background-color: transparent;
}
.From_table .el-dialog__footer {
  text-align: center;
}
.From_table .el-dialog__footer .el-button:nth-child(1) {
  margin-right: 100px;
}
.From_table .el-button {
  min-height: 30px;
  padding: 10px 20px;
}
.From_table .el-dialog__body {
  padding: 15px 20px;
}
</style>

<style>
/**
 * 表格样式
 */
.Cont_Three .table {
  margin: 0 15px;
  min-height: 345px;
  height: 100%;
  max-height: 85%;
}
.Cont_Three .table .el-table {
  background-color: rgba(0, 66, 78, 0) !important;
  max-height: 100% !important;
  height: 89%;
  overflow: auto;
}
.Cont_Three .table .el-table th {
  background-color: rgba(0, 66, 78, 0.5) !important;
}
.Cont_Three .table .el-table tr {
  background-color: rgba(0, 66, 78, 0) !important;
}
.Cont_Three .table .cell {
  color: #fff;
}
.Cont_Three .el-checkbox .el-checkbox__input .el-checkbox__inner {
  background-color: transparent;
  border: 1px solid rgba(1, 111, 109, 1);
}
.Cont_Three .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgba(1, 111, 109, 1) !important;
}
.Cont_Three .el-checkbox__inner::after {
  border: 1px solid rgba(0, 244, 253, 1);
  border-left: 0;
  border-top: 0;
}
.Cont_Three .el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid rgba(1, 111, 109, 0.5);
}
.Cont_Three .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: transparent;
}
/*鼠标移入某行时的背景色*/
.Cont_Three .el-table__body tr:hover > td {
  background-color: rgb(3, 61, 72, 1) !important;
}
.Cont_Three .el-table td,
.el-table th {
  padding: 5px 0;
}
.Cont_Three .el-table__empty-block {
  padding-top: 80px;
}
</style>

<style lang="less">
/**
 * @下拉框样式
 */
#state_select {
  width: 194px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(3, 107, 119, 1) !important;
  color: #fff !important;
}
#Event_content .el-input__suffix {
  top: 0 !important;
  line-height: 30px !important;
}
#Event_content .el-input--suffix .el-select__caret {
  color: #01ccd7 !important;
  font-size: 15px !important;
  width: 16px !important;
  line-height: 30px !important;
}

.state_select {
  border: 1px solid rgba(0, 107, 119, 1) !important;
  > div {
    border: transparent !important;
  }
}
.state_select .el-scrollbar {
  width: 100%;
}
.state_select .el-popper__arrow::before {
  border: 1px transparent solid !important;
  background: rgba(0, 107, 119, 1) !important;
}
</style>

<style scoped lang="less">
#Event_content {
  width: 98%;
  height: 100%;
  margin: 0 auto;
  .Cont_One {
    min-height: 60px;
    margin-bottom: 10px;
    display: flex;

    .Ctn_Time {
      margin-left: 10px;
      margin-right: 40px;
      line-height: 60px;

      span {
        margin-right: 10px;
      }
    }
  }
  .Cont_Two {
    min-height: 35%;
    max-height: 35%;
    margin-bottom: 10px;
  }
  .Cont_Three {
    height: 54%;
    min-height: 54%;
    max-height: 55%;

    .three_ctn {
      min-height: 30px;
      display: flex;
      float: right;
      margin-top: 5px;
      margin-right: 15px;
      margin-bottom: 10px;
    }
    .three_ctn > div {
      display: block;
      line-height: 30px;
      font-size: 0.18rem;
      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
    }
    .three_ctn div:nth-child(2) {
      margin-right: 1.8rem;
    }
    .three_ctn div:nth-child(1) {
      margin-right: 40px;
    }
    .three_ctn > div span {
      color: red;
    }
  }
  .title {
    font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 10px;
    font-size: 16px;
  }
  .back_img {
    width: 100%;
    height: 19px;
    background: url("~@/assets/images/title.png") no-repeat;
    background-size: cover;
    margin-top: -5px;
  }
  .Ctn_btn {
    height: 30px;
    min-height: 30px;
    line-height: 3px;
  }
}
#Event_content .back_all {
  background-color: rgba(0, 244, 253, 0.1);
  border: 1px solid rgba(0, 244, 253, 0.1);
}
</style>

<style>
/* 
  公共时间选择器css样式
*/
#Event_content .el-input__inner {
  width: 414px;
  height: 30px !important;
  line-height: 30px !important;
  background-color: transparent;
  border: 1px solid rgba(3, 107, 119, 1);
}
#Event_content .el-range-input {
  background-color: transparent;
  color: #fff;
}
#Event_content .el-range-separator {
  line-height: 20px;
  color: #fff;
}
</style>