SmartSubstationPlatform/riis-web/src/views/monitorsystem/giveanalarm.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 Editvideo from "@/views/linkagecontrol/Intelligentlinkage/editvideo.vue";
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
const emit = defineEmits(['closeGiveanalarm']);
const userStore = useUserStore();
function detailsClick() {
  Explicit.value = true
}
const props = defineProps({
  examinationData: {
    required: false,
    type: Array,
    default: 0
  },
});
watch(() => userStore.trendsInfo, (newValue, oldValue) => {
  let trendsInfo = JSON.parse(newValue)
  for (let i = 0; i < examinationData.value.length; i++) {
    if (examinationData.value[i].id == trendsInfo.id) {
      // examinationData.value[i].check_flag ="已完成"
      trendsInfo.defectFilePath = userStore.webApiBaseUrl + "/previewimage?type=alarm&filename=" + encodeURI(trendsInfo.defectFilePath)
      examinationData.value[i] = trendsInfo
      if (i == rowIndex.value) {
        examinationInfo.value = examinationData.value[i]
      }
    }
  }
},
  { deep: true })

watch(() => props.examinationData, (newValue, oldValue) => {
  examinationData.value = newValue
}, { deep: true })
const Explicit = ref(false)
const doubleHit = ref(false)
const examinationData: any = ref([])
const rowIndex: any = ref(0)
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') {
      if (examinationData.value.length == 1) {
        examinationData.value = []
        rowIndex.value = 0
        examinationInfo.value = {}
        emit("closeGiveanalarm", true)
      } else if (examinationData.value.length - 1 == rowIndex.value) {
        examinationData.value.splice(rowIndex.value, 1)
        rowIndex.value = rowIndex.value - 1
        examinationInfo.value = examinationData.value[rowIndex.value]
        ElMessage({
          type: "success",
          message: "核查成功",
        });
      } else {
        examinationData.value.splice(rowIndex.value, 1)
        examinationInfo.value = examinationData.value[rowIndex.value]
        ElMessage({
          type: "success",
          message: "核查成功",
        });
      }
    }
    setTimeout(() => {
      doubleHit.value = false
    }, 500)

  }).catch(() => {
    doubleHit.value = false
  })
}
function closeClick() {
  examinationData.value = []
  rowIndex.value = 0
  examinationInfo.value = {}
  Explicit.value = false
  emit("closeGiveanalarm", 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(() => {
  examinationData.value = props.examinationData
  if (examinationData.value.length == 1) {
    examinationInfo.value = examinationData.value[0]
  }
  getArrType()
})
function jian() {
  rowIndex.value = rowIndex.value - 1
  examinationInfo.value = examinationData.value[rowIndex.value]
}
function add() {
  rowIndex.value = rowIndex.value + 1
  examinationInfo.value = examinationData.value[rowIndex.value]
}
const isVideo = ref(false)
const num = ref(0)
const handleChange = (value: any) => {
  if (typeof value === 'number') {
    if (value.toString().indexOf(".") != -1) {
      ElMessage({
        type: 'error',
        message: '请输入整数',
      })
      num.value = 0
    }
  }
}
</script>
<template>
  <div>
    <div class="public-overlay">
      <div class="newexamination">
        <div class="giveanalarmContent-box1">
          <div class="giveanalarmImgBox">
            <img src="@/assets/giveanalarm/jg_zhuan1.png" alt="" class="giveanalarmImg1">
            <img src="@/assets/giveanalarm/jg_tb1.png" alt="" class="giveanalarmImg2">
          </div>
          <img src="@/assets/giveanalarm/jg_wz.png" alt="" style="width:180px ;">
          <div style="font-size: 60px; color: red;">[{{ examinationData.length }}]</div>
        </div>
        <div class="public-examination">
          <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 class="public-examination-title">
            <el-button class="searchButton" @click="jian" :disabled="rowIndex == 0">
              <svg t="1686723317756" style="  transform: rotate(180deg);margin-right:5px" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2537"
                xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14">
                <path
                  d="M989.866667 482.133333L597.333333 110.933333c-17.066667-17.066667-42.666667-17.066667-59.733333 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l315.733333 298.666666H64c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667H853.333333l-315.733333 298.666666c-17.066667 17.066667-17.066667 42.666667 0 59.733334 8.533333 8.533333 21.333333 12.8 29.866667 12.8 8.533333 0 21.333333-4.266667 29.866666-12.8l392.533334-371.2c8.533333-8.533333 12.8-21.333333 12.8-29.866667s-4.266667-21.333333-12.8-29.866667z"
                  fill="currentColor" p-id="2538"></path>
              </svg>
              上一个</el-button>
            <el-button class="searchButton" @click="add" :disabled="examinationData.length - 1 <= rowIndex">
              下一个
              <svg t="1686723317756" style="margin-left:5px" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2537" xmlns:xlink="http://www.w3.org/1999/xlink" width="14"
                height="14">
                <path
                  d="M989.866667 482.133333L597.333333 110.933333c-17.066667-17.066667-42.666667-17.066667-59.733333 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l315.733333 298.666666H64c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667H853.333333l-315.733333 298.666666c-17.066667 17.066667-17.066667 42.666667 0 59.733334 8.533333 8.533333 21.333333 12.8 29.866667 12.8 8.533333 0 21.333333-4.266667 29.866666-12.8l392.533334-371.2c8.533333-8.533333 12.8-21.333333 12.8-29.866667s-4.266667-21.333333-12.8-29.866667z"
                  fill="currentColor" p-id="2538"></path>
              </svg>

            </el-button>
          </div>
          <div style="padding:0px 15px ;">
            <div style="display:flex;align-items: center;margin-bottom: 10px;">
              <div class="public-details-line"></div>
              <div class="public-details-title">告警信息{{ examinationInfo.status }}</div>
            </div>
            <div style="display: flex;">
              <div style="width:370px;height: 250px;">
                <div class="public-details-conent">
                  <div class="public-details-name">点位名称：</div>
                  <div>{{ examinationInfo.bayName }}</div>
                </div>
                <div class="public-details-conent">
                  <div class="public-details-name">设备名称：</div>
                  <div>{{ examinationInfo.patroldeviceName }}</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.alarmSourceType == 1">
                  <div class="public-details-name">告警来源：</div>
                  <div>{{ currency(AlarmSourceList, examinationInfo.taskAlarmType) }}</div>
                </div>
                <div class="public-details-conent">
                  <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>{{ examinationInfo.alarmDate }}</div>
                </div>
              </div>
              <div  v-if="examinationInfo.alarmSourceType == 1" 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="examinationInfo.defectFilePath" :zoom-rate="1.2"
                      :preview-src-list="[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="examinationInfo.defectFilePath">

                </div>
              </div>
            </div>
            <div class="public-details-conent">
              <div class="public-details-name">告警描述：</div>
              <div :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>
            <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 v-if="examinationInfo.taskAlarmType == 2" class="public-details-conent"
              style="align-items: center;position: relative;">
              <div class="public-details-name" style="padding-right: 10px;position: relative;">延时报警时间</div>
              <div style="position: absolute;left:195px;color: #ffffff8e;font-size:16px;width: 40px;">分钟</div>
              <el-input-number v-model="num" :min="0" controls-position="right" @change="handleChange" />
            </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="details-button" @click="closeClick">取消</div>
              <div class="details-button" @click="confirmClick">确定</div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="examination" v-if="isVideo == true">
        <img style="position:absolute;top: 15px;right: 20px;cursor:pointer;" src="@/assets/MenuIcon/u523.png" alt=""
          @click="isVideo = false">
        <div class="examination-title">查看摄像机</div>
        <Editvideo :_uid="2001" v-if="isVideo == true" :rowInfo="examinationInfo" :online="'1'" />
      </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;

  .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: 800px;
    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: rgba(255, 189, 0, 1);
    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(.el-radio__inner) {
    border-color: #409eff !important;
    background: rgba(15, 51, 42, 0) !important;
  }

  :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)
  }

  :deep(.el-input__wrapper) {
    background: rgba(1, 1, 1, 0) !important;
    box-shadow: 0 0 0 1px rgba(0, 249, 162, 0.2) !important;
  }

}

.searchButton {
  // border: rgb(5, 154, 103) solid 1px !important;
  // background-color: rgba(8, 80, 58, 0.5) !important;
  // color: #409eff !important;
  margin-left: 10px;
}

.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;
  }

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

:deep(.el-input-number__decrease) {
  background-color: transparent !important;
}

:deep(.el-input-number__increase) {
  background-color: transparent !important;
}

:deep(.el-input-number.is-controls-right .el-input-number__increase) {
  border: transparent !important;
}

:deep(.el-input-number.is-controls-right .el-input-number__decrease) {
  border: transparent !important;
}

:deep(.el-input-number .el-icon) {
  color: #409eff91 !important;
}

:deep(.el-input-number .el-icon:hover) {
  color: #409eff !important;
}

:deep(.el-input__inner) {
  color: #fff !important;
}</style>