SmartSubstationPlatform/riis-web/src/views/monitorsystem/alarminformation.vue

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { defineEmits, watch } from 'vue'
import { getDeviceByType } from "@/api/device";
import { setAlarmLogStatus } from "@/api/alarmInfo";
import { useUserStore } from '@/store/modules/user';
import { getAlarmLogById } from "@/api/home";
import Editvideo from "@/views/linkagecontrol/Intelligentlinkage/editvideo.vue";
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
const emit = defineEmits(['closeAlarm']);
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
function getInit() {
  let params = {
    id: props.alarminInfo.id,
    systemType:props.alarminInfo.systemType
  }
  //异常事件统计
  getAlarmLogById(params).then((res: any) => {
    res.data.checkResult = '1'
    examinationInfo.value = res.data
  })

}
const props = defineProps({
  alarminInfo: {
    required: false,
    type: Object,
    default: 0
  },
});
const doubleHit = ref(false)
const examinationInfo: any = ref({})
function confirmClick() {
  if (doubleHit.value == true) {
    return
  }
  doubleHit.value = true
  const temporaryInfo = {
    id: examinationInfo.value.id,
    checkFlag: 1,
    checkResult: examinationInfo.value.checkResult,
    checkComment: examinationInfo.value.checkComment,
    custom1: num.value,
    taskAlarmType: examinationInfo.value.taskAlarmType,
    deviceId:examinationInfo.value.deviceid
  }
  setAlarmLogStatus(temporaryInfo).then((res: any) => {
    if (res != undefined && res.code == '0') {
      emit("closeAlarm", true)
    }
  }).catch(() => {
    doubleHit.value = false
  })
}
function closeClick() {
  emit("closeAlarm", false)
}

const AlarmLevelList: any = ref([]) // 告警等级
const AlarmSourceList: any = ref([])
function currency(list: any, itemcode: any) {
  let dictname = ''
  list.forEach((element: any) => {
    if (element.itemcode == itemcode) {
      dictname = element.dictname
    }
  })
  return dictname
}
function getArrType() { // 查询字典方法
  const paramstype = {
    dictcode: 'AlarmLevel'
  }
  getDeviceByType(paramstype).then((res: any) => {
    AlarmLevelList.value = res.data
  })

  const paramstypes = {
    dictcode: 'AlarmSource'
  }
  getDeviceByType(paramstypes).then((res: any) => {
    AlarmSourceList.value = res.data
  })
}
onMounted(() => {
  getArrType()
  getInit() 
  // examinationInfo.value = props.alarminInfo
  
})
const isVideo = ref(false)
const num = ref(0)
</script>

<template>
  <div>
    <div class="public-overlay">
      <div class="newexamination">
        <div class="public-examination" :style="examinationInfo.systemType == '02'?'' : 'height: 520px;'" >
          <img v-if="examinationInfo.checkFlag == 1" style="position:absolute;top: 0px;left: 0px;"
            src="@/assets/giveanalarm/hecha.png" alt="">
          <img style="position:absolute;top: 15px;right: 20px;cursor:pointer;" src="@/assets/giveanalarm/x.png" alt=""
            @click="closeClick">
          <div style="padding:0px 15px ;">
            <div style="display:flex;align-items: center;margin-bottom: 10px;padding-top: 20px;">
              <div class="public-details-line"></div>
              <div class="public-details-title">告警信息{{ examinationInfo.status }}</div>
            </div>
            <div style="display: flex;">
              <div :style="examinationInfo.systemType == '02'?'width:370px;height: 250px;' : 'width:370px;height: 150px;'">
                <div class="public-details-conent" v-if="examinationInfo.systemType == '02'">
                  <div class="public-details-name">点位名称：</div>
                  <div>{{ examinationInfo.bayName }}</div>
                </div>
                <div class="public-details-conent" v-if="examinationInfo.systemType == '01'">
                  <div class="public-details-name">信号名称：</div>
                  <div>{{ examinationInfo.signalName }}</div>
                </div>
                <div class="public-details-conent" v-if="examinationInfo.systemType == '02'" >
                  <div class="public-details-name">设备名称：</div>
                  <div>{{ examinationInfo.patroldeviceName }}</div>
                </div>
                <div class="public-details-conent" v-if="examinationInfo.systemType == '01'" >
                  <div class="public-details-name">主设备名称：</div>
                  <div>{{ examinationInfo.mainDeviceName }}</div>
                </div>
                <div class="public-details-conent">
                  <div class="public-details-name">部件名称：</div>
                  <div>{{ examinationInfo.componentName }}</div>
                </div>
                <div class="public-details-conent" v-if="examinationInfo.systemType == '02'">
                  <div class="public-details-name">告警来源：</div>
                  <div>{{ currency(AlarmSourceList, examinationInfo.taskAlarmType) }}</div>
                </div>
                <div class="public-details-conent" v-if="examinationInfo.systemType == '02'">
                  <div class="public-details-name">告警阈值：</div>
                  <span style="display:block;" >
                    <span style="display: inline-block;width: 50%;text-align: left;"><span>预警：</span><span>{{
                      examinationInfo.earlyMin }}-{{ examinationInfo.earlyMax }}</span></span>
                    <span style="display: inline-block;width: 50%;text-align: left;"><span>一般：</span><span>{{
                      examinationInfo.sameMin }}-{{ examinationInfo.sameMax }}</span></span>
                    <span style="display: inline-block;width: 50%;text-align: left;"><span>严重：</span><span>{{
                      examinationInfo.seriousMin }}-{{ examinationInfo.seriousMax }}</span></span>
                    <span style="display: inline-block;width: 50%;text-align: left;"><span>危急：</span><span>{{
                      examinationInfo.criticalMin }}-{{ examinationInfo.criticalMax }}</span></span>
                  </span>
                </div>
                <div class="public-details-conent">
                  <div class="public-details-name">告警等级：</div>
                  <div>{{ currency(AlarmLevelList, examinationInfo.alarmLevel) }}</div>
                </div>
                
                <div class="public-details-conent">
                  <div class="public-details-name">告警时间：</div>
                  <div v-if="examinationInfo.systemType == '02'" >{{ examinationInfo.alarmDate }}</div>
                  <div v-if="examinationInfo.systemType == '01'" >{{ examinationInfo.alarmTime }}</div>
                </div>
              </div>
              <div v-if="examinationInfo.systemType == '02'" style="width:290px;height: 200px;">
                <div style="width:100%;height:100%; position: relative;">
                  <div title="查看图片" style="position: absolute;
                  right: 5px;
                  top: 5px;
                  width: 26px;
                  height: 26px;
                  border-radius: 4px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  background: rgba(0,0,0,0.5);">

                    <img src="@/assets/monitorsystem/region/img.png" alt="">
                    <el-image style="position: absolute;width:100%;height:100%; opacity: 0;"
                      :src="url + '/previewimage?type=alarm&filename=' + encodeURI(examinationInfo.defectFilePath)" :zoom-rate="1.2"
                      :preview-src-list="[url + '/previewimage?type=alarm&filename=' + encodeURI(examinationInfo.defectFilePath)]" :preview-teleported="true" fit="cover" />
                  </div>
                  <div title="查看视频" style="position: absolute;
                  right: 40px;
                  top: 5px;
                  width: 26px;
                  height: 26px;
                  border-radius: 4px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  background: rgba(0,0,0,0.5);">
                    <img src="@/assets/monitorsystem/region/video.png" alt="" @click="isVideo = true">
                  </div>
                  <img style="width:100%;height:100%;" :src="url + '/previewimage?type=alarm&filename=' + encodeURI(examinationInfo.defectFilePath)">

                </div>
              </div>
            </div>
            <div class="public-details-conent">
                  <div class="public-details-name">告警描述：</div>
                  <div  v-if="examinationInfo.systemType == '02'" :title="examinationInfo.content" style="height:63px;width: 560px;display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;">{{ examinationInfo.content }}</div>
                    <div  v-if="examinationInfo.systemType == '01'" :title="examinationInfo.alarmMessage" style="height:63px;width: 560px;display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;">{{ examinationInfo.alarmMessage }}</div>
            </div>

            <div style="display:flex;align-items: center;">
              <div class="public-details-line"></div>
              <div class="public-details-title" >核查确认</div>
            </div>
            <div class="public-details-conent" style="align-items: center;">
              <div class="public-details-name" style="padding-right: 10px;">是否属实</div>
              <el-radio-group v-model="examinationInfo.checkResult">
                <el-radio label="1" size="large">是</el-radio>
                <el-radio label="0" size="large">否</el-radio>
              </el-radio-group>
              
            </div>
            <div class="public-details-conent">
              <div class="public-details-name" style="padding-right: 10px;">反馈意见</div>
              <el-input v-model="examinationInfo.checkComment" style="width: 560px;" :rows="3" resize="none" type="textarea" placeholder="" />
            </div>
            <div style="display:flex;justify-content:center;margin-top:25px">
              <!-- <div class="public-details-button"  @click="isVideo=true">查看视频</div> -->
              <div class="public-details-button" @click="closeClick">取消</div>
              <div class="public-details-button" @click="confirmClick">确定</div>

            </div>
          </div>
        </div>
      </div>

      <Eldialog v-if="isVideo" :title="'查看摄像机'" :zIndex="2005" :width="'1200px'" 
        @before-close="isVideo = false" :elclass="'ylclass'" >
        <template v-slot:PopFrameContent>
          <Editvideo style="padding-top:10px ;" :_uid="2001" v-if="isVideo == true" :rowInfo="examinationInfo" :online="'1'" />
        </template>
      </Eldialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.giveanalarmBg-box {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: url(@/assets/giveanalarm/jg_bj.png);
  background-size: 100% 100%;

  .giveanalarmContent-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 703px;
    height: 353px;
    background: url(@/assets/giveanalarm/jg_bj1.png);
    background-size: 100% 100%;

    .giveanalarmImgBox {
      position: relative;
      width: 154px;
      height: 154px;

      .giveanalarmImg1 {
        position: absolute;
        top: 0;
        z-index: 1;
        width: 154px;
        height: 154px;
        -webkit-animation: rotations 6s infinite linear;
      }

      .giveanalarmImg2 {
        position: absolute;
        top: 7px;
        left: 7px;
        z-index: 2;
        width: 140px;
        height: 140px;
      }
    }

    .giveanalarmButton {
      width: 260px;
      height: 83px;
      line-height: 83px;
      margin: 40px auto 0;
      text-align: center;
      background: url(@/assets/giveanalarm/jg_an.png);
      background-size: 100% 100%;
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 28px;
      color: #FFFFFF;
      text-align: center;
      cursor: pointer;
    }
  }
}

@keyframes rotations {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotations {

  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }

}

.giveanalarmContent-box1 {
  width: 703px;
  height: 148px;
  background: url(@/assets/giveanalarm/jg_bj2.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .giveanalarmImgBox {
    position: relative;
    width: 100px;
    height: 100px;

    .giveanalarmImg1 {
      position: absolute;
      top: 3px;
      left: 3px;
      z-index: 1;
      width: 94px;
      height: 94px;
      -webkit-animation: rotations 6s infinite linear;
    }

    .giveanalarmImg2 {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 2;
      width: 100px;
      height: 100px;
    }
  }
}

.public-overlay {
  position: fixed;
  z-index: 2023;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background: url(@/assets/giveanalarm/jg_bj.png);
  background-size: 100% 100%;
  overflow: auto;

  // :deep(.el-button.is-disabled) {
  //   background-color: transparent !important;
  //   color: #007D52 !important;
  //   border-color: #007D52 !important;
  // }

  .public-notification {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    /* background: url(/src/assets/monitorsystem/xsri_yltu.png); */
    background-size: 100% 100%;

    .public-notification-title {
      text-align: center;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #FFFFFF;
      height: 40px;
      line-height: 38px;
    }

    .public-notification-body {
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
    }
  }

  .newexamination {
    width: 700px;
    height: 640px;
    position: absolute;
    top: 0px;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
  }

  .public-examination {
    position: relative;
    width: 700px;
    height: 640px;
    background: url(@/assets/giveanalarm/jg_xqbj1.png);
    background-size: 100% 100%;

    .public-examination-title {
      text-align: center;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #FFFFFF;
      height: 60px;
      padding-top: 10px;
      line-height: 38px;
    }

    .public-examination-body {
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
    }
  }

  .public-details-line {
    width: 4px;
    height: 10px;
    background: inherit;
    background-color: #409eff;
    margin-right: 8px;
  }

  .public-details-title {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #409eff;
  }

  .public-details-conent {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
    padding: 5px 0;
    display: flex;
  }

  .public-details-name {
    min-width: 105px;
    text-align: right;
  }

  :deep(.is-checked .el-radio__inner) {
    border-color: #409eff !important;
    background: #409eff !important;
  }

  :deep(.el-radio__label) {
    color: rgba(255, 255, 255, 0.5);
  }

  :deep(.is-checked .el-radio__label) {
    color: rgba(255, 255, 255, 1) !important;
  }

  :deep(.is-checked .el-radio__inner::after) {
    width: 6px;
    height: 6px;
    border-radius: var(--el-radio-input-border-radius);
    background-color: rgb(15, 51, 42)
  }

  .public-details-button {
    width: 112px;
    height: 36px;
    line-height: 36px;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #409eff;
    text-align: center;
    background: url(@/assets/monitorsystem/xsri_an.png);
    background-size: 100% 100%;
    cursor: pointer;
    margin: 0 15px;
  }

  .public-details-button:hover {
    background: url(@/assets/monitorsystem/xsri_an1.png);
    background-size: 100% 100%;
  }
}


.examination {
  width: 1200px;
  height: 880px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background: url(@/assets/monitorsystem/ejectbg/glbj.png);
  background-size: 100% 100%;
  z-index: 2;

  .examination-title {
    text-align: center;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: #FFFFFF;
    height: 40px;
    line-height: 38px;
  }

}

.ylclass{

}
</style>