<script lang="ts">
export default {
    name: "alarmInfo", // 警告信息确认
};
</script>
<script setup lang="ts">
import Page from '@/components/Pagination/page.vue'
import { ref, onMounted, watch } from "vue";
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
import { ElMessage } from "element-plus";
import { getAlarmLogPage, setAlarmLogStatus, setBatchAlarmLogStatus } from "@/api/alarmInfo";
import { getDeviceByType,getDictionaryItems } from "@/api/device";
import moment from 'moment'
import axios from 'axios';
import { getNotCheckAlarmCount } from '@/api/home';
import { useUserStore } from '@/store/modules/user';
import { getSubstation, } from "@/api/alarminterval";
import { getMainEquipment } from "@/api/device";
import Editvideo from "./editvideo.vue";
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
watch(() => userStore.alarmCount, (newValue, oldValue) => {
    getData()
},
    { deep: true })
//控制行变色
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (rowIndex % 2 === 0) {
        return 'warning-row'
    } else if (rowIndex % 2 === 1) {
        return 'success-row'
    }
    return ''
}
const treeloading = ref(false)
const tableData: any = ref([])
// 查询参数
const queryInfo: any = ref({

    current: 1, // 当前页
    size: 10, // 页大小
    stationCode: userStore.stationCode,
    taskAlarmType: '', // 告警来源
    alarmType: '', // 告警类型
    alarmLevel: '', // 告警等级
    checkFlag: '0', // 状态
    startDate: '', // 开始时间
    endDate: '',// 结束时间
})
const dateArr: any = ref([])
tableData.value = []
const alarmInfo: any = ref({})
const total = ref()
function getData() { // 获取列表信息
    queryInfo.value.startDate = ""
    queryInfo.value.endDate = ""
    if (!queryInfo.value.areaId) {
        queryInfo.value.bayId = ""
        queryInfo.value.mainDeviceId = ""
    }
    if (!queryInfo.value.bayId) {
        queryInfo.value.mainDeviceId = ""
    }
    if (dateArr.value != null && dateArr.value.length != 0) {
        queryInfo.value.startDate = dateArr.value[0]
        queryInfo.value.endDate = dateArr.value[1]
    } else {
        queryInfo.value.startDate = ''
        queryInfo.value.endDate = ''
    }
    treeloading.value = true
    getAlarmLogPage(queryInfo.value).then((res: any) => {
        for (let i = 0; i < res.data.records.length; i++) {
            if (res.data.records[i].defectFilePath) {
                res.data.records[i].defectFilePath1 = []
                var dateParts = res.data.records[i].defectFilePath.split(",");
                dateParts.forEach((item: any) => {
                    res.data.records[i].defectFilePath1.push(userStore.webApiBaseUrl + "/previewimage?type=alarm&filename=" + encodeURI(item))
                })

            } else if (res.data.records[i].filePath) {
                res.data.records[i].defectFilePath1 = []
                var dateParts = res.data.records[i].filePath.split(",");
                dateParts.forEach((item: any) => {
                    res.data.records[i].defectFilePath1.push(userStore.webApiBaseUrl + "/previewimage?type=alarm&filename=" + encodeURI(item))
                })
            }

        }
        treeloading.value = false
        tableData.value = res.data.records
        total.value = res.data.total
        queryInfo.value.size = res.data.size
        queryInfo.value.current = res.data.current
    }).catch(() => {
        treeloading.value = false
    })
}
//重置
function resetting() {
    queryInfo.value = {
        current: 1, // 当前页
        size: 10, // 页大小
        stationCode: userStore.stationCode,
        taskAlarmType: '', // 告警来源
        alarmType: '', // 告警类型
        alarmLevel: '', // 告警等级
        checkFlag: '0', // 状态
        startDate: '', // 开始时间
        endDate: '',// 结束时间
    }
    // let endDate = moment(new Date()).format('YYYY-MM-DD')
    // const now = new Date(endDate)
    // const year = now.getFullYear();
    // const month = now.getMonth();
    // const day = now.getDate();
    // let startDate = moment(new Date(year, month - 1, day)).format('YYYY-MM-DD')
    queryInfo.value.checkFlag = ''
    dateArr.value = []
    getData()
}
//表格多选事件
const multipleSelection = ref([])
const alarmId: any = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    alarmId.value = []
    multipleSelection.value.forEach((item: any) => {
        if (item.checkFlag == 0) {
            alarmId.value.push(item.id)
        }
    })
}
const Explicit = ref(false)
const examinationInfo: any = ref({
    checkResult: "1"
})
function examinationAllClick(row: any) {
    doubleHit.value = false
    examinationInfo.value = {
        checkResult: "1"
    }
    isCheckAll.value = true
    Explicit.value = true
}
function examinationClick(row: any) {
    doubleHit.value = false
    isCheckAll.value = false
    examinationInfo.value = row
    // examinationInfo.value.checkResult = "0"
    Explicit.value = true
}
const playDeviceId = ref("")
const playChannelId = ref("")
function queryRecordDetails(row: any) {
    playDeviceId.value = ""
    playChannelId.value = ""
    let startTimeStr = moment(new Date(alarmInfo.value.alarmDate).getTime() - 15 * 1000).format("YYYY-MM-DD HH:mm:ss");
    let endTimeStr = moment(new Date(alarmInfo.value.alarmDate).getTime() + 15 * 1000).format("YYYY-MM-DD HH:mm:ss");

    axios.get(userStore.webApiMonitorUrl + '/api/gb_record/queryNvrRecord/' + alarmInfo.value.patroldeviceCode + '/' + alarmInfo.value.patroldeviceCode + '?startTime=' + startTimeStr + '&endTime=' + endTimeStr, {}).then((res: any) => {
        if (res.data.code === 0) {
            // 处理时间信息
            clickNum.value = clickNum.value + 1
            playDeviceId.value = res.data.data.deviceId
            playChannelId.value = res.data.data.channelId
            setTime(startTimeStr, endTimeStr);
            playRecord()
        }

    }).catch(function (error: any) {
    })
}
function rowClick(row: any) {
    console.log(row)
    if (row.id == alarmInfo.value.id ) {
        return
    }
    if (row.taskAlarmType == 4) {
        ElMessage({message:'辅控任务暂无图片和视频',type:'warning'})
        return
    }
    alarmInfo.value = row
    RefreshLoad(row)
    // queryRecordDetails(row.alarmDate)
}
const doubleHit = ref(false)
function confirmClick() {
    if (doubleHit.value == true) {
        return
    }
    doubleHit.value = true
    if (isCheckAll.value == false) {
        const temporaryInfo = {
            id: examinationInfo.value.id,
            checkFlag: 1,
            checkResult: examinationInfo.value.checkResult,
            checkComment: examinationInfo.value.checkComment,
            taskAlarmType: examinationInfo.value.taskAlarmType,
            alarmType: examinationInfo.value.alarmType,
            deviceId: examinationInfo.value.deviceid
        }
        setAlarmLogStatus(temporaryInfo).then((res: any) => {
            if (res != undefined && res.code == '0') {
                ElMessage({
                    type: "success",
                    message: "核查成功",
                });
                getNotCheckAlarmCount({ stationId: userStore.stationId }).then((res: any) => {
                    userStore.alarmCount = res.data.count
                })
                Explicit.value = false
                getData()
            } else {
                doubleHit.value = false
            }
        }).catch(() => {
            ElMessage({
                type: "error",
                message: "核查失败",
            });
            doubleHit.value = false
        })
    } else {

        let alarmJson = {
            ids: alarmId.value.join(","),
            checkFlag: 1,
            checkResult: examinationInfo.value.checkResult,
            checkComment: examinationInfo.value.checkComment,
        }
        const temporaryInfo = {
            alarmJson: JSON.stringify(alarmJson)
        }
        setBatchAlarmLogStatus(temporaryInfo).then((res: any) => {
            if (res != undefined && res.code == '0') {
                ElMessage({
                    type: "success",
                    message: "核查成功",
                });
                getNotCheckAlarmCount({ stationId: userStore.stationId }).then((res: any) => {
                    userStore.alarmCount = res.data.count
                })
                Explicit.value = false
                getData()
            } else {
                doubleHit.value = false
            }


        }).catch(() => {
            ElMessage({
                type: "error",
                message: "核查失败",
            });
            doubleHit.value = false
        })
    }

}
const startTime = ref('2023-05-12 09:08:37')
const endTime = ref('2023-05-12 14:51:18')
const chooseDate = ref('2023-05-12')

const tmpTime = ref(0)
const tmpStartTime = ref(0)

function setTime(startTimes: any, endTimes: any) {
    startTime.value = startTimes;
    endTime.value = endTimes;
    let start: any = (new Date(startTime.value).getTime() - new Date(chooseDate.value + " 00:00:00").getTime()) / 1000;
    let end: any = (new Date(endTime.value).getTime() - new Date(chooseDate.value + " 00:00:00").getTime()) / 1000;
    tmpTime.value = new Date(endTimes).getTime() - new Date(startTimes).getTime()
    tmpStartTime.value = new Date(startTimes).getTime()
}
const streamId = ref("")
function gbPlay() {// 视频回放播放功能
    axios.get(userStore.webApiMonitorUrl + '/api/playback/resume/' + streamId.value, {}).then((res: any) => {
    }).catch(function (error: any) {
    });
}
function gbPause() { // 视频回放暂停功能
    axios.get(userStore.webApiMonitorUrl + '/api/playback/pause/' + streamId.value, {}).then((res: any) => {
    }).catch(function (error: any) {
    })
}
function closeVideo(index: any) { // 关闭视频

}

const videoUrl = ref('')
const isCheckAll = ref(false)

const AlarmLevelList: any = ref([]) // 告警等级
const AlarmSourceList: any = ref([])
const checkFlagList: any = ref([{
    id: "0",
    itemcode: "0",
    dictname: "未核查"
}, {
    id: "1",
    itemcode: "1",
    dictname: "已审核"
}, {
    id: "2",
    itemcode: "2",
    dictname: "已修正"
}
])
const AlarmTypeArr: any = ref([])
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
    })
    getDictionaryItems({ dictCodes: 'AlarmType,fk_alarmType' }).then((res: any) => {
        AlarmTypeArr.value = res.data
    })
}
function currency(list: any, itemcode: any) {
    let dictname = ''
    list.forEach((element: any) => {
        if (element.itemcode == itemcode) {
            dictname = element.dictname
        }
    })
    return dictname
}
const isImgBox = ref(false)
const ImgPath = ref("")

const streamInfo: any = ref({})
const app = ref("")
const mediaServerId = ref("")
const ssrc = ref("")
const recordVideoPlayer: any = ref(null)
function stopPlayRecord(callback: any) {
    recordVideoPlayer.value.pause()
    videoUrl.value = '';
    axios.get(userStore.webApiMonitorUrl + '/api/playback/stop/' + playDeviceId.value + "/" + playChannelId.value + "/" + streamId.value, {}).then((res: any) => {
        if (callback) callback()
    })
}

const clickNum = ref(0)
function sliderChange(e: any) {
    if (streamId.value !== "") {
        stopPlayRecord(() => {
            streamId.value = "";
            sliderChange(e);
        })
    } else {
        axios.get(userStore.webApiMonitorUrl + '/api/playback/start/' + playDeviceId.value + "/" + playChannelId.value + '?startTime=' + e + '&endTime=' + endTime.value, {}).then((res: any) => {

            if (res.data.code === 0) {
                // 处理时间信息
                streamInfo.value = res.data.data;
                app.value = res.data.data.app;
                streamId.value = res.data.data.stream;
                mediaServerId.value = res.data.data.mediaServerId;
                ssrc.value = res.data.data.ssrc;
                videoUrl.value = getUrlByStreamInfo()
            }
        }).catch(function (error: any) {
        });
    }
}
function playRecord() {
    if (streamId.value !== "") {
        stopPlayRecord(() => {
            streamId.value = "";
            playRecord();
        })
    } else {
        axios.get(userStore.webApiMonitorUrl + '/api/playback/start/' + playDeviceId.value + "/" + playChannelId.value + '?startTime=' + startTime.value + '&endTime=' + endTime.value, {}).then((res: any) => {
            if (res.data.code === 0) {
                // 处理时间信息
                streamInfo.value = res.data.data;
                app.value = res.data.data.app;
                streamId.value = res.data.data.stream;
                mediaServerId.value = res.data.data.mediaServerId;
                ssrc.value = res.data.data.ssrc;
                videoUrl.value = getUrlByStreamInfo()
            }
        }).catch(function (error: any) {
        });
    }
}
function getUrlByStreamInfo() {
    if (location.protocol === "https:") {
        videoUrl.value = streamInfo.value["wss_flv"]
    } else {
        videoUrl.value = streamInfo.value["ws_flv"]
    }
    return videoUrl.value;

}
onMounted(() => {
    let endDate = moment(new Date()).format('YYYY-MM-DD')
    const now = new Date(endDate)
    const year = now.getFullYear();
    const month = now.getMonth();
    const day = now.getDate();
    let startDate = moment(new Date(year, month - 1, day)).format('YYYY-MM-DD')
    dateArr.value = [startDate, endDate]
    getArrType()
    getData()
    notification()
})
//获取变电站树
const treeAll = ref([])
function notification() {
    getSubstation().then((res: any) => {
        treeAll.value = res.data
    })

}
//获取变电站
const areaAll: any = ref([])
const bayAll: any = ref([])
function getStation() {
    const terrlist: any = ref([])
    const terrarealist: any = ref([])
    const terrbaylist: any = ref([])
    treeAll.value.forEach((element: any) => {
        terrlist.value.push(element)
        if (element.stationId == userStore.stationId) {
            element.children.forEach((res: any) => {
                terrarealist.value.push(res)
                if (res.areaId == queryInfo.value.areaId) {
                    if (res.children) {
                        res.children.forEach((row: any) => {
                            terrbaylist.value.push(row)
                        })
                    }
                }
            });
        }

    });
    areaAll.value = [...new Set(terrarealist.value)];
    bayAll.value = [...new Set(terrbaylist.value)];
}
//获取间隔下主设备
const Masterdata: any = ref([])
function gatMain() {
    const paramsall = {
        bayId: queryInfo.value.bayId
    }
    getMainEquipment(paramsall).then((res: any) => {
        Masterdata.value = res.data
    });
}


//视频配置
const isswitch = ref(false)
const devicechannelInfo = ref({})
const videofmp4 = ref('')
function RefreshLoad(info: any) {
    console.log(info)
    if (isswitch.value == true) {
        ElMessage({
            type: 'error',
            message: '正在加载监控视频！',
        })
        return
    }
    devicechannelInfo.value = {
        deviceId: info.channelList[0].deviceId,
        channelId: info.channelList[0].channelId
    }
    isswitch.value = true
    axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + info.channelList[0].deviceId + '/' + info.channelList[0].channelId, {}).then((res: any) => {
        isswitch.value = false
        if (res.data.data != undefined) {
            videoUrl.value = res.data.data.ws_flv
            videofmp4.value = res.data.data.fmp4
            axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + info.channelList[0].deviceId, {}).then((res: any) => {
                if (res.data.data == "0" && info.patroldevicePos) {
                    axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + info.channelList[0].deviceId + '/' + info.channelList[0].channelId + '?cmdCode=' + '130' + '&parameter1=0&parameter2=' + info.patroldevicePos + '&combindCode2=0', {}).then((res: any) => { })
                }
            })



        }
    }).catch(function (error: any) {

    })
}
const isVideo = ref(false)
</script>
<template>

    <div class="alarmInfo-box">

        <div class="alarmInfo-left">
            <div>
                <div
                    style="height:37px;position: relative;display: flex;align-items: center; justify-content: space-between;">
                    <div style="display: flex;align-items: center;" class="screenHomepage">
                        <el-select v-model="queryInfo.taskAlarmType" class="m-2 selType" placeholder="告警来源"
                            @change="getData" style="width:140px;" :teleported="false" :popper-append-to-body="false"
                            clearable>
                            <el-option v-for="item in AlarmSourceList" :key="item.id" :label="item.dictname"
                                :value="item.itemcode" />
                        </el-select>
                        <el-select v-model="queryInfo.alarmType" class="m-2 selType" placeholder="告警类型"
                            @change="getData" style="width:140px;" :teleported="false" :popper-append-to-body="false"
                            clearable>
                            <el-option v-for="item in AlarmTypeArr" :key="item.id" :label="item.dictname"
                                :value="item.itemcode" />
                        </el-select>

                        <el-select v-model="queryInfo.alarmLevel" class="m-2 selType" placeholder="告警等级"
                            @change="getData" style="width:100px;" :teleported="false" :popper-append-to-body="false"
                            clearable>
                            <el-option v-for="item in AlarmLevelList" :key="item.id" :label="item.dictname"
                                :value="item.itemcode" />
                        </el-select>
                        <el-select v-model="queryInfo.checkFlag" class="m-2 selType" placeholder="状态" @change="getData"
                            style="width:100px;" :teleported="false" :popper-append-to-body="false" clearable>
                            <el-option v-for="item in checkFlagList" :key="item.id" :label="item.dictname"
                                :value="item.itemcode" />
                        </el-select>
                        <el-date-picker v-model="dateArr" type="daterange" range-separator="至" start-placeholder="开始时间"
                            style="width:250px;margin-right: 10px;" popper-class="elDatePicker" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" end-placeholder="结束时间" :clearable="false" @change="getData" />
                        <el-button class="searchButton" @click="getData">搜索</el-button>
                        <el-button class="searchButton" @click="resetting">重置</el-button>
                    </div>
                    <div style="min-width: 0px;">
                        <el-button class="searchButton" @click="examinationAllClick"
                            :disabled="multipleSelection.length == 0">批量核查</el-button>
                    </div>
                </div>
                <div>
                    <el-select v-model="queryInfo.areaId" class="m-2 selType" placeholder="区域"
                        @visible-change="getStation" @change="getData" style="width:140px;" :teleported="false"
                        :popper-append-to-body="false" clearable>
                        <el-option v-for="item in areaAll" :key="item.areaId" :label="item.areaName"
                            :value="item.areaId" />
                    </el-select>
                    <el-select v-model="queryInfo.bayId" class="m-2 selType" placeholder="间隔"
                        @visible-change="getStation" @change="getData" style="width:140px;" :teleported="false"
                        :popper-append-to-body="false" clearable>
                        <el-option v-for="item in bayAll" :key="item.bayId" :label="item.bayName" :value="item.bayId" />
                    </el-select>
                    <el-select v-model="queryInfo.mainDeviceId" class="m-2 selType" placeholder="主设备" @change="getData"
                        style="width:140px;" @visible-change="gatMain" :teleported="false"
                        :popper-append-to-body="false" clearable>
                        <el-option v-for="item in Masterdata" :key="item.mainDeviceId" :label="item.mainDeviceName"
                            :value="item.mainDeviceId" />
                    </el-select>
                </div>


                <el-table row-key="id" :data="tableData" :row-class-name="tableRowClassName" class="PatrolMonitoring"
                    v-loading="treeloading" element-loading-background="rgb(11, 40, 34)" highlight-current-row
                    style="width: 100%;margin:auto;position: relative;margin-top: 0px; height:calc(75vh); overflow: auto "
                    :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }"
                    @selection-change="handleSelectionChange" @row-click="rowClick">
                    <el-table-column type="selection" width="20" align="center" />
                    <el-table-column type="index" align="center" label="序号" width="40px"></el-table-column>
                    <el-table-column prop="patroldeviceName" label="设备名称" align="center" />
                    <el-table-column prop="componentName" label="部件名称" align="center" />
                    <el-table-column prop="deviceName" label="点位名称" align="center" />
                  
                    <el-table-column label="点位分类" prop="appearanceType" align="center">
                        <template #default="scope">
                            <span v-if="scope.row.pointType == 1">Ⅰ类</span>
                            <span v-if="scope.row.pointType == 2">Ⅱ类</span>
                            <span v-if="scope.row.pointType == 3">Ⅲ类</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="taskAlarmType" label="告警来源" width="100px" align="center">
                        <template #default="scope">
                            <span>{{ currency(AlarmSourceList, scope.row.taskAlarmType) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="alarmType" label="告警类型" width="80px" align="center">
                        <template #default="scope">

                            <span>{{ currency(AlarmTypeArr,scope.row.taskAlarmType == '4'? scope.row.alarmType : scope.row.fkAlarmType) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="alarmLevel" label="告警等级" width="80px" align="center">
                        <template #default="scope">
                            <span v-if="scope.row.alarmLevel == 1" style="color: #0099FF;">{{ currency(AlarmLevelList,
                                scope.row.alarmLevel) }}</span>
                            <span v-if="scope.row.alarmLevel == 2" style="color: #FFFF00;">{{ currency(AlarmLevelList,
                                scope.row.alarmLevel) }}</span>
                            <span v-if="scope.row.alarmLevel == 3" style="color: #FF9900;">{{ currency(AlarmLevelList,
                                scope.row.alarmLevel) }}</span>
                            <span v-if="scope.row.alarmLevel == 4" style="color: #FF3300;">{{ currency(AlarmLevelList,
                                scope.row.alarmLevel) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="custom2" label="缺陷类别" width="90px" align="center">
                    </el-table-column>
                    <el-table-column prop="alarmDate" label="告警时间" width="100px" align="center" />
                    <el-table-column prop="checkFlag" label="状态" width="70px" align="center">
                        <template #default="scope">
                            <span>{{ currency(checkFlagList, scope.row.checkFlag) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80px" align="center">
                        <template #default="scope">
                            <div style="display: flex;justify-content: space-around;">
                                <div class="button-style" @click.stop="examinationClick(scope.row)">核查</div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="display: flex;justify-content: center;margin-top: 5px;">
                    <Page style="position: relative;z-index: 100;" :total="total" v-model:size="queryInfo.size"
                        :jumper="'hide'" v-model:current="queryInfo.current" @pagination="getData()"></Page>
                </div>
            </div>
        </div>
        <div class="alarmInfo-right">
            <div class="alarmInfo-visitation" >
                <div style="display:flex;align-items: center;margin: 5px 0px ;">
                    <div class="alarmInfo-line"></div>
                    <div class="alarmInfo-title"> <span class="fontFamily">实时视频 </span> </div>
                </div>
                <div class="video-box">
                    <div v-if="alarmInfo.id == undefined">
                        <img src="@/assets/monitorsystem/gjqr_wsp.png">
                        <div style="    font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            font-style: normal;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            padding-top: 10px;">暂无视频</div>
                    </div>
                    <!-- <JessibucaPlayer v-if="alarmInfo.id != undefined" ref="recordVideoPlayer" :isrecord="'alarmInfo'" :_uid="99"
            :visible.sync="true" :videoUrl="videoUrl" height="100px" :tmpTime="tmpTime" :endTime="endTime"
            :tmpStartTime="tmpStartTime" :chooseDate="chooseDate" :hasAudio="true" fluent autoplay live
            :clickNum="clickNum" @closeVideo="closeVideo" @sliderChange="sliderChange" @gbPlay="gbPlay"
            @gbPause="gbPause"></JessibucaPlayer> -->
                    <JessibucaPlayer v-if="alarmInfo.id != undefined" ref="recordVideoPlayer" :zhu='true' :_uid="101"
                        :devicechannelInfo="devicechannelInfo" :visible.sync="true" :videoUrl="videoUrl"
                        :videofmp4="videofmp4" :hasAudio="true" fluent autoplay live @closeVideo="closeVideo">
                    </JessibucaPlayer>
                </div>
            </div>

            <div class="alarmInfo-visitation" >
                <div style="display:flex;align-items: center;height: 40px;padding-left: 10px;">
                    <div class="alarmInfo-line"></div>
                    <div class="alarmInfo-title" style="color: #0099ff;"> <span class="fontFamily">告警图片</span> </div>
                </div>
                
                <div class="alarmimg">
                    <div v-if="alarmInfo.id == undefined">
                        <img src="@/assets/monitorsystem/gjqr_wtp.png">
                        <div style="font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            font-style: normal;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            padding-top: 10px;">暂无图片</div>
                    </div>
                    <div style="width: 96%;height: 90%;" v-if="alarmInfo.id != undefined && alarmInfo.fileType != 3">
                        <div style="width:100%;height:80%; position: relative;">
                            <div 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/xsri_fd.png" alt="">
                                <el-image style="position: absolute;width:100%;height:100%; opacity: 0;"
                                    :src="alarmInfo.defectFilePath1[0]" :zoom-rate="1.2"
                                    :preview-src-list="alarmInfo.defectFilePath1" :preview-teleported="true"
                                    fit="cover" />
                            </div>
                            <img style="width:100%;height:100%;" :src="alarmInfo.defectFilePath1[0]">

                        </div>

                        <div style="padding-top:10px">巡视结果：<span style="color:#ff2525">{{ alarmInfo.value }}{{
                            alarmInfo.unit
                                }}</span></div>
                        <div style="display:flex;">
                            <div style="min-width:70px;">告警描述：</div>
                            <div style="color:#ff2525">{{ alarmInfo.content }}</div>

                        </div>
                    </div>
                    <div style="width: 96%;height: 98%;display: flex;align-items: end;"
                        v-if="alarmInfo.filePath != null && alarmInfo.filePath != '' && alarmInfo.fileType == 3">
                        <audio style="width: 100%;"
                            :src="url + '/playAudioFile?filename=' + encodeURI(alarmInfo.defectFilePath)" controls>
                        </audio>
                    </div>
                </div>
            </div>
        </div>

        <Eldialog v-model="Explicit" :close-on-click-modal="false" @before-close="Explicit = false"
            :title="isCheckAll ? '批量核查' : '核查确认'" append-to-body width="1100px" draggable>
            <template v-slot:PopFrameContent>
                <div v-if="isCheckAll == false">

                    <div style="display:flex;align-items: center;margin-bottom: 10px;">
                        <div class="details-line"></div>
                        <div class="details-title">告警信息</div>
                    </div>
                    <div style="display: flex;justify-content: space-between;align-items: center;">
                        <div>
                            <div class="details-conent">
                                <div class="details-name">间隔名称：</div>
                                <div>{{ examinationInfo.bayName }}</div>
                            </div>
                            <div class="details-conent">
                                <div class="details-name">设备名称：</div>
                                <div>{{ examinationInfo.patroldeviceName }}</div>
                            </div>
                            <div class="details-conent">
                                <div class="details-name">部件名称：</div>
                                <div>{{ examinationInfo.componentName }}</div>
                            </div>
                            <div class="details-conent" v-if="examinationInfo.taskAlarmType == 4">
                                <div class="details-name">告警来源：</div>
                                <div>{{ currency(AlarmSourceList, examinationInfo.taskAlarmType) }}</div>
                            </div>

                            <div class="details-conent">
                                <div class="details-name">告警等级：</div>
                                <div>{{ currency(AlarmLevelList, examinationInfo.alarmLevel) }}</div>
                            </div>
                        </div>
                        <div style="width:290px;height: 180px;margin: 0px 0px 10px 0px ;" v-if="examinationInfo.taskAlarmType == 4">
                            <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 v-if="examinationInfo.defectFilePath1"
                                        style="position: absolute;width:100%;height:100%; opacity: 0;"
                                        :src="examinationInfo.defectFilePath1[0]" :zoom-rate="1.2"
                                        :preview-src-list="examinationInfo.defectFilePath1" :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>
                                <span v-if="examinationInfo.defectFilePath">
                                    <video v-if="examinationInfo.defectFilePath.indexOf('mp4') != -1" width="300"
                                        height="400"
                                        :src="url + '/alarm/' + decodeURIComponent(examinationInfo.filePath)" loop
                                        autoplay preload="auto" controls></video>
                                    <div v-else-if="examinationInfo.fileType == 3" style="padding-top:20px;">
                                        <audio style="width: 100%;margin-top:30px;"
                                            :src="url + '/video/' + decodeURIComponent(examinationInfo.filePath)"
                                            controls>
                                        </audio>
                                    </div>
                                    <img v-else-if="examinationInfo.defectFilePath1" style="width:100%;height:100%;"
                                        :src="examinationInfo.defectFilePath1[0]">
                                </span>
                                <!-- <img v-if="examinationInfo.defectFilePath1" style="width:100%;height:100%;":src="examinationInfo.defectFilePath1[0]"> -->
                            </div>
                        </div>
                    </div>

                    <div class="details-conent">
                        <div class="details-name">告警描述：</div>
                        <div>{{ examinationInfo.content }}</div>
                    </div>
                    <div style="display:flex;align-items: center;margin-bottom: 10px;margin-top: 30px;">
                        <div class="details-line"></div>
                        <div class="details-title">核查确认</div>
                    </div>
                </div>
                <div class="details-conent" style="align-items: center;">
                    <div class="details-name" style="padding-right: 10px;">是否属实</div>

                    <el-radio-group v-model="examinationInfo.checkResult"
                        :disabled="examinationInfo.checkFlag != 0 && examinationInfo.checkFlag != undefined">
                        <el-radio label="1" size="large">是</el-radio>
                        <el-radio label="0" size="large">否</el-radio>
                    </el-radio-group>
                </div>
                <div class="details-conent">
                    <div class="details-name" style="padding-right: 10px;">反馈意见</div>
                    <el-input v-model="examinationInfo.checkComment"
                        :readonly="examinationInfo.checkFlag != 0 && examinationInfo.checkFlag != undefined" :rows="3"
                        resize="none" type="textarea" placeholder="" />
                </div>
                <div style="display:flex;justify-content:center;margin-top:40px">
                    <div class="details-button" v-if="examinationInfo.checkFlag == 0 || examinationInfo.checkFlag == undefined" @click="Explicit = false">取消</div>
                    <div class="details-button"
                        v-if="examinationInfo.checkFlag == 0 || examinationInfo.checkFlag == undefined"
                        @click="confirmClick">确定</div>
                </div>
            </template>
        </Eldialog>
        <Eldialog v-model="isImgBox" :close-on-click-modal="false" @before-close="isImgBox = false" :title="''"
            append-to-body width="1100px" draggable>
            <template v-slot:PopFrameContent>
                <div style="    display: flex;align-items: center;  justify-content: center;">
                    <img :src="ImgPath" alt="" style="max-width:100vw ;max-height: 100vh;">
                </div>
            </template>
        </Eldialog>
        <Eldialog v-model="isVideo" :close-on-click-modal="false" @before-close="isVideo = false" :title="'查看摄像机'"
            append-to-body width="1100px" draggable>
            <template v-slot:PopFrameContent>
                <Editvideo :_uid="2001" v-if="isVideo == true" :rowInfo="examinationInfo.channelList[0]"
                    :online="'1'" />
            </template>
        </Eldialog>
    </div>
</template>
<style scoped lang="scss">
.alarmInfo-box {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    padding-bottom: 0;

    .alarmInfo-left {
        padding: 8px;
        width: calc(65vw);
        height: calc(100vh - 90px);
        background: url(@/assets/navigation/ty_1614x988.png);
        background-size: 100% 100%;
    }

    .alarmInfo-right {
        width: calc(33.5vw);
        height: calc(100vh - 90px);
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;

        .alarmInfo-line {
            width: 4px;
            height: 15px;
            background: inherit;
            background-color: #0099ff;
            margin-right: 8px;
        }

        .alarmInfo-title {
            font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
            font-weight: 700;
            font-style: normal;
            font-size: 18px;
            color: #0099ff;
        }

        .video-box {
            width: 100%;
            // margin: auto;
            height: calc(100% - 45px);
            background-color: rgba(40, 40, 40, 1);
            margin-top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .alarmInfo-visitation {
            width: 100%;
            height: 49%;
            // riis-web/src/assets/navigation/sy_zsb.png
            background: url(@/assets/navigation/sy_zsb.png);
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 10px;
        }

        .alarmimg {
            width: 100%;
            height: calc(100% - 45px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #FFFFFF;
        }
    }
}

// 弹窗
.el-overlay {
    position: fixed;
    z-index: 2023;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;

    .notification {
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;

        background-size: 100% 100%;

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

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

    .examination {
        width: 670px;
        height: 650px;
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        margin: auto;
        background: url(@/assets/monitorsystem/ejectbg/xsri_xz.png);
        background-size: 100% 100%;

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

    .examinationAll {
        width: 670px;
        height: 420px;
        position: absolute;
        top: 0px;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        background: url(@/assets/monitorsystem/ejectbg/u1243.png);
        background-size: 100% 100%;

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


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

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

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

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

    :deep(.el-radio__inner) {
        border-color: rgb(0, 249, 162) !important;
        background: rgb(15, 51, 42) !important;
    }

    :deep(.is-checked .el-radio__inner) {
        border-color: rgb(0, 249, 162) !important;
        background: rgb(0, 249, 162) !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-textarea__inner) {
        background: rgba(1, 1, 1, 0);
        box-shadow: 0 0 0 1px rgba(0, 249, 162, 0.2);
        color: #ffffff;
    }

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

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

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

.examination1 {
    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: 400000;

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

    .examination1-body {
        position: absolute;
        bottom: 15px;
        left: 0;
        right: 0;
    }
}
</style>
