ZhangShan_VueProject/src/views/alert/alarmMessagePopue.vue

<template >
  <div>
    <i class="el-icon-back" v-show="!drawer" type="primary" @click="hideDrawer(true)"></i>
    <transition name="el-zoom-in-center">
      <div v-show="drawer" class="popue">
        <i
          class="el-icon-right"
          v-if="getalertMessageMap.length > 0"
          v-show="drawer"
          type="primary"
          @click="hideDrawer(false)"
        ></i>
        <div
          class="warn-massage"
          v-for="(v,index) in getalertMessageMap"
          :key="index"
          :class="{ImgBar:!v.opened}"
        >
          <div class="titleFlex">
            <div>{{ $store.state.bindingsetting.TechnologicalProcess[v.part]}}</div>
            <div>{{v.alertTime | timeFilter}}</div>
          </div>
          <span>{{v.alertText}}</span>
          <div class="warn-btn">
            <div @click="godevicealarmdetails(v)" class="warn-imgBill"></div>
            <div @click="closeOpen(v)" class="warn-imgTrue"></div>
          </div>
        </div>
      </div>
    </transition>

    <el-dialog
      class="deviceClass"
      width="1200px"
      top="18vh"
      :title="clickid"
      :visible.sync="devicealarmdetails"
      :modal-append-to-body="false"
    >
      <devicealarmdetails ref="deviceAlarmDet" :objectid="objectid" :faultInfo="faultInfo"></devicealarmdetails>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="generateDefects">生成缺陷单</el-button>
        <el-button size="small" type="primary" @click="confirm">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text">
import devicealarmdetails from "./DeviceAlarmDetails";
import { alert } from "@/network/network";
import { dateFormat } from "@/assets/js/common";
import "element-ui/lib/theme-chalk/base.css";
import { setInterval } from "timers";
export default {
  components: {
    devicealarmdetails
  },
  data() {
    return {
      popueMessageTick: null,
      faultInfo: "",
      objectid: "",
      clickid: "缺陷单",
      devicealarmdetails: false,
      drawer: false,
      searchCondition: {
        objectId: "",
        stationId: "",
        startTime: "",
        endTime: "",
        rank: "",
        cateGory1: "",
        cateGory2: "",
        keyText: "",
        pageIndex: 1,
        pageSize: 100,
        StationName: "全部",
        RankText: "全部",
        CateGoryText: "全部"
      },
      popueWatch: ""
    };
  },
  computed: {
    getalertMessageMap() {
      const alertMessageMap = this.$store.state.alarm.alertMessageMap;
      const alertMessageList = [];
      for (let i in alertMessageMap) {
        alertMessageList.push(alertMessageMap[i]);
      }
      this.popueWatch = alertMessageList;
      console.log(alertMessageList)
      return alertMessageList;
    }
  },
  watch: {
    popueWatch(val) {
      if (this.drawer == true) return;
      this.drawer = true;
    }
  },
  methods: {
    hideDrawer(isHide) {
      if (isHide == false) {
        this.drawer = isHide;
        this.drawerOpen();
      } else {
        this.drawer = isHide;
      }
    },
    drawerOpen() {
      if (this.popueMessageTick != null) {
        clearTimeout(this.popueMessageTick);
      }
      this.popueMessageTick = setTimeout(() => {
        if (this.drawer == true) return;
        this.drawer = true;
        this.popueMessageTick = null;
      }, 30000);
    },
    closeOpen(faultInfo) {
      console.log(localStorage.getItem('token'))
      //console.log(localStorage.getItem('token').length)
      console.log(faultInfo)
      
      //console.log(token) //----------------------------------------------------------------------->
      if(localStorage.getItem('token') && localStorage.getItem('token') == "")
      {
        this.$message.success("尚未登录");
        this.$router.push("/login");
      }
      
      if (faultInfo.opened == false) 
      {
        this.$store.dispatch("RemovePopupAlertMessage", faultInfo.infoId);
      }
      else 
      {
        alert.confirmAlert(faultInfo);
        this.devicealarmdetails = true;
      }
    },
    godevicealarmdetails(faultInfo) {
      if (this.$store.state.loginInformation.login != true)
        return alert("请先登录!");
      this.faultInfo = faultInfo;
      this.$store.state.machinmeAlarmDetails = [];
      this.clickid = "设备报警详情 -- [" + faultInfo.windturbineName + "]";
      this.objectid = faultInfo.objectId;
      this.searchCondition.objectId = this.objectid;
      this.searchCondition.cateGory1 = faultInfo.category1;
      this.searchCondition.cateGory1 =
        this.searchCondition.cateGory1 == "FJ"
          ? "windturbine"
          : this.searchCondition.cateGory1;
      alert.calcsubmitGetRealTimeAlarmList(this.searchCondition);

      this.devicealarmdetails = true;
    },
    generateDefects() {
      this.$refs.deviceAlarmDet.createOrConfirm(
        3,
        this.$store.state.loginInformation.name
      );
      this.$refs.deviceAlarmDet.test();
      this.devicealarmdetails=false;
    },
    confirm() {
      this.$refs.deviceAlarmDet.createOrConfirm(
        1,
        this.$store.state.loginInformation.name
      );
      this.devicealarmdetails=false;
    }
  },
  filters: {
    timeFilter(value) {
      if (value) return dateFormat("yyyy-MM-dd HH:mm:ss", new Date(value));
      else return "";
    }
  }
};
</script>
<style lang="less" scope>
::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
  background-image: linear-gradient(
    135deg,
    #cacaca 0%,
    #cacaca 72%,
    #cacaca 100%
  );
}
::-webkit-scrollbar-track {
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-image: linear-gradient(
    135deg,
    #707070 0%,
    #707070 72%,
    #707070 100%
  );
  transition: all 0.2s;
  border-radius: 0.25rem;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(95, 95, 95, 0.7);
}

.popue {
  display: flex;
  position: fixed;
  bottom: 50px;
  right: 5px;
  max-height: 86vh;
  flex-direction: column-reverse;
  overflow: auto;
  overflow-x: hidden;
}
.el-icon-back {
  position: absolute;
  bottom: 7vh;
  right: 5px;
  cursor: pointer;
}
.el-icon-right {
  position: fixed;
  bottom: 5vh;
  right: 285px;
  cursor: pointer;
}

.ImgBar {
  background: url("../../assets/img/alert1.png") no-repeat !important;
  color: #070707 !important;
}
.warn-massage {
  background: url("../../assets/img/alert.png") no-repeat;
  height: 116px;
  width: 296px;
  border: none;
  padding: 0;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  border-radius: 5px;
  .titleFlex {
    opacity: 1;
    display: flex;
    width: 100%;
    height: 33px;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 13px;
    margin: 0;
    margin-left: 34px;
    margin-right: 5px;
  }
  span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 51px;
    font-size: 14px;
    overflow: auto;
  }
  .warn-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-self: baseline;
  }
  .warn-imgBill {
    cursor: pointer;
    width: 114px;
    height: 25px;
    background: url("../../assets/img/fault_sendBill1.png") no-repeat;
  }
  .warn-imgTrue {
    cursor: pointer;
    width: 78px;
    height: 25px;
    background: url("../../assets/img/T_true.png") no-repeat;
  }
}
.deviceClass {
  .el-dialog {
    right: none !important;
    bottom: none !important;
    position: relative !important;
    margin: 18vh auto 50px !important;
    border-radius: 2px !important;
    .el-dialog__header {
      padding: 15px 16px !important;
      background-color: #5e5e5e !important;
    }
    .el-dialog__body {
      padding: 0px 10px !important;
      background-color: #eee !important;
    }
    .el-dialog__footer {
      padding: 10px 20px 10px !important;
      background-color: #eee !important;
    }
    .dialog-footer {
      display: flex !important;
      justify-content: space-around !important;
    }
  }
}
</style>