<script lang="ts">
export default {
    name: "patrolDetails", //巡视监控 详情页
};
</script>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { stationOnline } from '@/api/substation';
import Page from '@/components/Pagination/page.vue'
import { ref, onMounted, nextTick, onBeforeUnmount, Directive } from "vue";
import { ElMessage } from "element-plus";
import { getdata, getTableData, editCorrect, examination, geteachers } from "@/api/patroldetails";
import { operate } from "@/api/patrolmonitor";
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
import * as echarts from 'echarts'
import { getDeviceByType } from "@/api/device";
import axios from 'axios';
import { useUserStore } from '@/store/modules/user';
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
function handleClose() {
    Explicit.value = 0
}
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const tableData: any = ref({})
const treeloading: any = ref(false)
const gettable: any = ref([])
const taskName: any = ref()
const total: any = ref()
const valid: any = ref(["全部"])
const validClone: any = ref([])
const conclusion = ref()
const examineComment = ref()
const videoUrl = ref('')
const tabs = ref(2)
const props = defineProps({
    PatrolDetailsInfo: {
        type: Object,
        default: true
    }
});

const info: any = ref({})

//控制弹窗参数
const Explicit = ref(0)
const notificationText = ref()
const form: any = ref({
    deviceName: '',
    reviseValue: '',
    reviseValid: '0',
    custom2: '',

})
const recognitionType = ref([])
function getTypeTwo() {
    getDeviceByType({ dictcode: 'recognition_type' }).then((res: any) => {
        recognitionType.value = res.data
    })
}
//弹出框事件
function sure(data: any, index: any) {
    if (index == 'one') {
        const params = {
            reviseValue: data.reviseValue,
            reviseValid: data.reviseValid,
            custom2: data.custom2,
            resultId: data.resultId
        }
        editCorrect(params).then((res: any) => {
            if (res.code == 0) {
                Explicit.value = 0
                conclusion.value = ''
                getTabledata(true)
                getData()
                ElMessage({
                    type: "success",
                    message: "修正成功",
                });
            }
        })
    } else if (index == 'two') {
        const params = {
            examineComment: data,
            taskTodoId: props.PatrolDetailsInfo.taskTodoId,
            examineFlag: 1
        }
        examination(params).then((res: any) => {
            if (res.code == 0) {
                Explicit.value = 0
                conclusion.value = ''
                getData()
                ElMessage({
                    type: "success",
                    message: "审核完成",
                });
            }
        })
    }


}


//正常异常选择
function checkbox() {
    if (valid.value.length == 2) {
        valid.value.shift()
    }
    validClone.value = JSON.parse(JSON.stringify(valid.value))
    if (validClone.value[0] == '正常') {
        validClone.value[0] = 1
    } else if (validClone.value[0] == '异常') {
        validClone.value[0] = 2
    } else if (validClone.value[0] == '全部') {
        validClone.value[0] = ""
    }

    getTabledata(true)
}
//巡视结果数据
function getData() {
    const params = {
        taskTodoId: props.PatrolDetailsInfo.taskTodoId
    }
    getdata(params).then((res: any) => {
        tableData.value = []
        if (res.data != null) {
            tableData.value = res.data
        }
    })
}
//巡视点位数据
function getTabledata(loading: any) {
    treeloading.value = loading
    info.value.deviceName = taskName.value
    info.value.valid = validClone.value.toString()
    getTableData(info.value).then((res: any) => {
        gettable.value = res.data.records
        info.value.size = res.data.size
        info.value.current = res.data.current
        total.value = res.data.total
        treeloading.value = false
    })
}
//修正
function correct(row: any) {
    conclusion.value = 1
    form.value = JSON.parse(JSON.stringify(row))
    notificationText.value = JSON.parse(JSON.stringify(row))
    Explicit.value = 1
    if (form.value.reviseValid == undefined || form.value.reviseValid == '') {
        form.value.reviseValid = '0'
    }

}
//审核
function Audit() {
    if (tableData.value.taskState != 1 && tableData.value.taskState != 4) {
        ElMessage({
            type: "warning",
            message: '该任务不可执行该操作',
        });
        return false
    } else if (tableData.value.examineFlag == 1) {
        ElMessage({
            type: "warning",
            message: '该任务已经审核完成',
        });
    } else {
        examineComment.value = tableData.value.examineComment
        conclusion.value = 2
        Explicit.value = 1
    }

}
//预览图片
function viewPicture() {
    conclusion.value = 3
    Explicit.value = 1
}
//操作巡视任务
function Operate(optType: any) {
    if (tableData.value.taskState == 1 || tableData.value.taskState == 4) {
        ElMessage({
            type: "warning",
            message: '该任务不可执行该操作',
        });
        return false
    } else {
        if (tableData.value.isStationFlag == '1') {
            const paramsa = {
                stationcode: userStore.stationCode
            }
            stationOnline(paramsa).then((res: any) => {
                if (res == 1) {
                    const params = {
                        taskTodoId: props.PatrolDetailsInfo.taskTodoId,
                        optType: optType
                    }
                    operate(params).then((res: any) => {
                        if (res.code == 0) {
                            const typeText = ref('')
                            if (optType == 'pause') {
                                typeText.value = '暂停'
                            } else if (optType == 'resume') {
                                typeText.value = '恢复'
                            } else if (optType == 'stop') {
                                typeText.value = '终止'
                            }
                            ElMessage({
                                type: "success",
                                message: typeText.value + "成功",
                            });
                            getData()
                        }
                    })
                } else if (res == 0) {
                    ElMessage({
                        type: 'error',
                        message: '当前变电站节点不在线，请稍后重试！',
                    })
                    getData()
                    return false
                }
            })
        } else {
            const params = {
                taskTodoId: props.PatrolDetailsInfo.taskTodoId,
                optType: optType
            }
            operate(params).then((res: any) => {
                if (res.code == 0) {
                    const typeText = ref('')
                    if (optType == 'pause') {
                        typeText.value = '暂停'
                    } else if (optType == 'resume') {
                        typeText.value = '恢复'
                    } else if (optType == 'stop') {
                        typeText.value = '终止'
                    }
                    ElMessage({
                        type: "success",
                        message: typeText.value + "成功",
                    });
                    getData()
                }
            })
        }

    }


}
//控制行变色
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 alarmInfo: any = ref({})

function selectRow(row: any) {
    if (row.resultId == alarmInfo.value.resultId) {
        return
    }
    alarmInfo.value = row

    RefreshLoad(row)
    getEachers()
}

//鼠标经过
const tableHover = ref(false)
const tableDataHover: any = ref()
function hoverTableEnter(row: any) {
    tableHover.value = true
    tableDataHover.value = row
}
//鼠标移开
function hoverTableLeave(row: any) {
    tableHover.value = false
    tableDataHover.value = ''
}
//eachers 图标数据
const axisX = ref()
const axisYmin = ref()
const axisYmax = ref()
const axisValue = ref()
const lowerValue = ref()
const upperValue = ref()
function getEachers() {
    const params = {
        deviceId: alarmInfo.value.deviceId
    }
    geteachers(params).then((res: any) => {
        if (res.code == 0) {
            axisX.value = res.data.dateTimeList
            axisValue.value = res.data.valueList
            lowerValue.value = res.data.lowerValue
            upperValue.value = res.data.upperValue
            axisYmin.value = Math.floor(Math.min(...res.data.valueList))
            axisYmax.value = Math.ceil(Math.max(...res.data.valueList))
            Eacherstable()

        }
    })
}
//eachers 
let myChart: any = null
function Eacherstable() {
    const setEchartWH = { //设置控制图表大小变量
        width: 660,
        height: 320
    };
    // 需要获取到element,所以是onMounted的Hook

    // 绘制图表
    myChart.setOption({

        dataZoom: [
            {
                type: 'slider',
                realtime: true,
                start: 0,
                end: 25,
                xAxisIndex: 0,
                bottom: "40",
                showDetail: false
            }
        ],
        tooltip: {  // tooltip 用于控制鼠标滑过或点击时的提示框
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器配置项。  
                type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。 
                axis: 'auto', // 指示器的坐标轴。   
                snap: true, // 坐标轴指示器是否自动吸附到点上  
            },
            showContent: true,
        },
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: { // X 轴颜色配置
                    color: '#57756c'
                }
            },
            axisLabel: {
                // rotate: 45, // X 轴标签文字旋转角度  
                interval: 0, //设置 X 轴数据间隔几个显示一个，为0表示都显示 
                textStyle: {
                    color: '#fff',
                    // align:''
                },
                formatter: function (value: any) {
                    var ret = "";//拼接加\n返回的类目项  
                    var maxLength = 7;//每项显示文字个数  
                    var valLength = value.length;//X轴类目项的文字个数  
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                    if (rowN > 1)//如果类目项的文字大于5,  
                    {
                        for (var i = 0; i < rowN; i++) {
                            var temp = "";//每次截取的字符串  
                            var start = i * maxLength;//开始截取的位置  
                            var end = start + maxLength;//结束截取的位置  
                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                            temp = value.substring(start, end) + "\n";
                            ret += temp; //凭借最终的字符串  
                        }
                        return ret;
                    }
                    else {
                        return value;
                    }
                }
            },

            boundaryGap: false, //数据从 Y 轴起始
            data: axisX.value,
            axisTick: {
                show: false,
            },


        },
        yAxis: {
            type: 'value',
            min: axisYmin.value, // 配置 Y 轴刻度最小值
            max: axisYmax.value,  // 配置 Y 轴刻度最大值
            splitNumber: 4,  // 配置 Y 轴数值间隔
            axisLine: {
                lineStyle: {   // Y 轴颜色配置
                    color: '#57756c'
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                },

            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'solid', //y轴分割线类型
                    color: 'rgb(0 249 162 / 10%)',
                    width: 1,
                }
            },
        },


        series: [

            {
                // name: '预期',
                data: axisValue.value,
                type: 'line',
                symbolSize: 4,  //设置折线上圆点大小
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 1,  // 设置虚线宽度
                            type: 'solid'  // 虚线'dotted' 实线'solid'
                        }
                    }
                },
                markLine: {
                    symbol: ['none', 'none'],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                type: 'dotted',
                                color: 'red',
                            },
                            label: {
                                show: true,
                                position: 'end',
                                distance: 20,
                                textStyle: {
                                    fontSize: 14,
                                },
                            }
                        }
                    },
                    data: [{ name: '最小值', yAxis: lowerValue.value, }, { name: '最大值', yAxis: upperValue.value }],

                }
            },

        ],
        color: ['#ffbd00'],// 折线的颜色


    })

}

//视频配置
const isswitch = ref(false)
const devicechannelInfo = ref({})
const videofmp4 = ref('')
function RefreshLoad(info: any) {
    if (isswitch.value == true) {
        ElMessage({
            type: 'warning',
            message: '正在加载监控视频！',
        })
        return
    }
    devicechannelInfo.value = {
        deviceId: info.patroldeviceCode,
        channelId: info.patroldeviceChannelcode
    }
    isswitch.value = true
    axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + info.patroldeviceCode + '/' + info.patroldeviceChannelcode, {}).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.patroldeviceCode, {}).then((res: any) => {
                if (res.data.data == "0") {
                    axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + info.patroldeviceCode + '/' + info.patroldeviceChannelcode + '?cmdCode=' + '130' + '&parameter1=0&parameter2=' + info.channelPos + '&combindCode2=0', {}).then((res: any) => { })
                }
            })



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

    })
}


const MeterTypeList: any = ref([])
function getType() {
    const paramstypes = {
        dictcode: 'MeterType'
    }
    getDeviceByType(paramstypes).then((res: any) => {
        MeterTypeList.value = res.data
    })
}
function currency(list: any, itemcode: any) {
    let dictname = ''
    list.forEach((element: any) => {
        if (element.itemcode == itemcode) {
            dictname = element.dictname
        }
    })
    return dictname
}


function closeVideo(index: any) { // 关闭视频

}
// var source = new EventSource(userStore.webApiBaseUrl + "/sse/connect/taskresult_" + userStore.stationCode + "_" + userStore.userId,)
const ws1 = new WebSocket(userStore.wsApiBaseUrl + '/websocket/taskresult_' + userStore.stationCode + "_" + userStore.userId);
function setupWebSocket() {

    ws1.onopen = () => {

    };
    ws1.onerror = (error: any) => {
    };
    ws1.onmessage = (e: any) => {

        if (e.data != 0) {
            getData()
            getTabledata(false)
        }
    }
    ws1.onclose = () => {

    };

}
function tabsClick(index: any) {
    tabs.value = index
    if (index == 1) {
        setTimeout(() => {
            myChart.resize()
        }, 100)

    }

}
onBeforeUnmount(() => {
    if (ws1 != null) {
        ws1.close()
    }
})
onMounted(() => {
    info.value = {
        size: 10,
        current: 1,
        taskTodoId: props.PatrolDetailsInfo.taskTodoId,
        deviceName: '',
        valid: '',
    }
    getTypeTwo()
    setupWebSocket()
    getType()
    getData()
    getTabledata(true)
    setTimeout(() => {
        const oBox = document.getElementById('clickonresize')
        myChart = echarts.init(document.getElementById("deviceEachers") as HTMLDivElement);
        if (oBox) {
            oBox.onmousedown = (ev) => {
                setTimeout(() => {
                    window.onresize = function () { // 自适应大小
                        myChart.resize();
                    };
                }, 500)
            }
        }
    }, 100)
    window.onresize = function () { // 自适应大小
        myChart.resize();
    };
})

// const audio: any = ref('http://music.163.com/song/media/outer/url?id=317151.mp3');
const emit = defineEmits(['retrunClick']);
function retrunClick() {
    emit('retrunClick', false);
}
</script>
<template>
    <div class="patrolDetailstopbox">
        <div class="Title">
            <div></div>
            <el-button class="searchButton returnButton" @click="retrunClick">返回</el-button>
        </div>
        <div class="all">
            <div class="all-left">
                <div class="details">
                    <div class="details-left">
                        <img class="details-left-imgbg" src="@/assets/navigation/sw.png" alt="">
                        <div class="details-content">
                            <div class="details-content-left">
                                <div style="display: flex;">
                                    <div style="margin: 20px 20px 0px 20px;">
                                        <div class="details-left-two">任务名称： {{ tableData.taskName }}</div>
                                        <div style="margin-top: 20px;" class="details-left-two">开始时间：{{
                                            tableData.startTime
                                            }}</div>
                                    </div>
                                    <div style="margin: 20px 20px 0px 20px;">
                                        <div class="details-left-two">任务类型：
                                            <span v-if="tableData.type == 1">例行巡视</span>
                                            <span v-if="tableData.type == 2">特殊巡视</span>
                                            <span v-if="tableData.type == 3">专项巡视</span>
                                            <span v-if="tableData.type == 4">自定义巡视</span>
                                        </div>
                                        <div style="margin-top: 20px;" class="details-left-two">结束时间： {{
                                            tableData.endTime
                                            }}</div>
                                    </div>
                                    <div style="margin: 20px 20px 0px 20px;">
                                        <div class="details-left-two">计划时间：{{ tableData.planStartTime }}</div>
                                        <div style="margin-top: 20px;" class="details-left-two">任务状态：
                                            <span v-if="tableData.taskState == 0">待执行</span>
                                            <span v-else-if="tableData.taskState == 1">已完成</span>
                                            <span v-else-if="tableData.taskState == 2">执行中</span>
                                            <span v-else-if="tableData.taskState == 3">暂停</span>
                                            <span v-else-if="tableData.taskState == 4">终止</span>
                                            <span v-else-if="tableData.taskState == 5">未执行</span>
                                            <span v-else-if="tableData.taskState == 6">超期执行</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="details-left-one number-father ">
                                    <div class="details-content-number">
                                        <div class="details-top-number">{{ tableData.deviceSumnum }}</div>
                                        <div>点位总数</div>
                                    </div>
                                    <div class="details-content-number">
                                        <div class="details-top-number">{{ tableData.patrolCount }}</div>
                                        <div>已巡视</div>
                                    </div>
                                    <div class="details-content-number">
                                        <div class="details-top-number" style="color:#00F9A2 ;">{{
                                            tableData.successCount }}
                                        </div>
                                        <div style="color:#00F9A2 ;">成功</div>
                                    </div>
                                    <div class="details-content-number">
                                        <div style="color:#FFBD00 ;" class="details-top-number">{{ tableData.failCount
                                            }}
                                        </div>
                                        <div style="color:#FFBD00 ;">失败</div>
                                    </div>
                                    <div class="details-content-number">
                                        <div style="color:#00F9A2 ;" class="details-top-number">{{ tableData.normalCount
                                            }}
                                        </div>
                                        <div style="color:#00F9A2 ;">正常</div>
                                    </div>
                                    <div class="details-content-number">
                                        <div style="color:#FF3300 ;" class="details-top-number">{{
                                            tableData.abnormalCount
                                            }}
                                        </div>
                                        <div style="color:#FF3300 ;">异常</div>
                                    </div>
                                    <div class="details-content-number">
                                        <div style="color:#0099FF ;" class="details-top-number">{{
                                            tableData.serviceCount }}
                                        </div>
                                        <div style="color:#0099FF ;">设备检修</div>
                                    </div>
                                </div>
                            </div>
                            <div class="details-content-right">
                                <div class="DetailsImgbox">
                                    <el-progress type="circle" :percentage="tableData.taskProgress" :stroke-width="8"
                                        :color="'rgba(255,156,42,1)'" style="position:absolute;top:10px;left:10px">
                                        <template #default="{ percentage }">
                                            <div style="font-size: 26px;color: #fff;padding-bottom: 5px;">{{ percentage
                                                }}%
                                            </div>
                                            <div style="padding-top: 5px;font-size: 14px;color: #fff;">巡视总进度</div>
                                        </template>
                                    </el-progress>
                                </div>

                                <!-- <el-progress type="circle" :stroke-width="12" :percentage="tableData.taskProgress"
                                    style="margin-top:4px;" :color="['#009BFF']">
                                   
                                </el-progress> -->
                                <div style="width:110px;">
                                    <div v-hasPerm="['task:suspend']"
                                        style="position: relative;width: 110px;height: 33px;margin-bottom: 10px;"
                                        v-show="tableData.taskState != 3">
                                        <el-button class="three-button" @click="Operate('pause')"
                                            style="border: none;position: relative;width: 110px;height: 33px;">暂停</el-button>
                                    </div>
                                    <div v-hasPerm="['task:suspend']"
                                        style="position: relative;width: 110px;height: 33px;margin-bottom: 10px;"
                                        v-show="tableData.taskState == 3">
                                        <el-button class="three-button" @click="Operate('resume')"
                                            style="border: none;position: relative; width: 110px;height: 33px;">恢复</el-button>
                                    </div>
                                    <div style="position: relative;width: 110px;height: 33px;margin-bottom: 10px;"
                                        v-hasPerm="['task:shutdown']">
                                        <el-button class="three-button" @click="Operate('stop')"
                                            style="border: none;position: relative;width: 110px;height: 33px;">终止</el-button>
                                    </div>
                                    <div style="position: relative;width: 110px;height: 33px;margin-bottom: 15px;"
                                        v-hasPerm="['task:examine']">
                                        <el-button class="three-button" @click="Audit()"
                                            style="border: none;position: relative; width: 110px;height: 33px;">审核完成</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="details-right">

                    </div>
                </div>
                <div class="contont" id="clickonresize">
                    <img class="contont-img" src="@/assets/navigation/sw1.png" alt="">
                    <div style="position: relative;z-index: 1;    height: 100%;">
                        <div class="contont-title">
                            <span style="color: #ffffff;font-size: 16px;font-weight:700 ;"
                                class="fontFamily">巡视点位</span>
                        </div>
                        <div class="contont-contont">
                            <div
                                style="height:37px;position: relative;display: flex;align-items: center; justify-content: space-between;padding-top: 15px;">
                                <div style="display: flex;align-items: center;">
                                    <div style="margin-top: 0px;margin-left: 15px;margin-right: 10px;"
                                        class="screenHomepage"><el-input class="colorgren" v-model="taskName" clearable
                                            style="width:180px;" placeholder="请输入巡视点位名称" @clear="getTabledata(true)"
                                            @keyup.enter="getTabledata(true)" />
                                    </div>
                                    <el-button class="searchButton" @click="getTabledata(true)">搜索</el-button>
                                </div>
                                <div style="margin-right: 15px;">
                                    <el-checkbox-group v-model="valid" @change="checkbox">
                                        <el-checkbox label="全部" />
                                        <el-checkbox label="异常" />
                                        <el-checkbox label="正常" />
                                    </el-checkbox-group>
                                </div>
                            </div>

                            <el-table :data="gettable" stripe :header-cell-style="tableBg" @row-click="selectRow"
                                v-loading="treeloading" highlight-current-row @cell-mouse-enter="hoverTableEnter"
                                @cell-mouse-leave="hoverTableLeave" :row-class-name="tableRowClassName"
                                style="width: 98%;margin:auto;position: relative;margin: 15px 10px;height:calc(100%); ">
                                <el-table-column type="index" align="center" label="序号" width="60px" />
                                <el-table-column prop="mainDeviceName" align="center" width="130px" label="设备名称" />
                                <el-table-column prop="componentName" align="center" width="130px" label="部件名称" />
                                <el-table-column prop="deviceName" align="center" label="点位名称" width="160px" />
                                <el-table-column prop="meterType" align="center" label="表计类型">
                                    <template #default="scope">
                                        <span
                                            v-if="currency(MeterTypeList, scope.row.meterType) != undefined && currency(MeterTypeList, scope.row.meterType) != ''">{{
                                                currency(MeterTypeList, scope.row.meterType) }}</span>
                                        <span v-else>--</span>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column prop="time" label="巡视时间" width="110px" align="center" /> -->
                                <el-table-column prop="flag" label="状态" width="100px" align="center">
                                    <template #default="scope">
                                        <span v-if="scope.row.flag == '0'">未巡视</span>
                                        <span v-if="scope.row.flag == '1'">已巡视</span>
                                        <span v-if="scope.row.flag == '2'">已完成</span>
                                        <span v-if="scope.row.flag == '3'">设备检修中</span>
                                        <span v-if="scope.row.flag == '4'">巡视失败</span>
                                        <span v-if="scope.row.flag == '5'">已修正</span>
                                        <span v-if="scope.row.flag == '6'">采集失败</span>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column prop="materialId" label="实物id" align="center">
                                    <template #default="scope">
                                        <span v-if="scope.row.materialId">{{ scope.row.materialId }}</span>
                                        <span v-else>--</span>
                                    </template>
                                </el-table-column> -->
                                <el-table-column prop="desc" label="识别类型" width="140px">
                                    <template #default="scope">
                                        <span v-if="scope.row.recognitionType">{{ currency(recognitionType,
                                            scope.row.recognitionType,)
                                            }}</span>
                                        <span v-else>--</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="识别值" width="100px">
                                    <template #default="scope">
                                        <span
                                            v-if="scope.row.valueType == 'meter'||scope.row.valueType == 'partial' ||scope.row.valueType == 'partial' || scope.row.valueType == 'infrared'">
                                            <span v-if="scope.row.analysisResult == '异常'"
                                                style="color: red;font-size: 16px;font-weight: bold;">
                                                {{ scope.row.value }} {{ scope.row.unit }}
                                            </span>
                                            <span v-else>
                                                {{ scope.row.value }} {{ scope.row.unit }}
                                            </span>
                                        </span>
                                        <span v-else>
                                            <span
                                                v-if="scope.row.desc != null && scope.row.desc != '' && scope.row.valueType != 'sound'">
                                                {{ scope.row.desc }}
                                            </span>
                                            <span v-else>--</span>
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="analysisResult" label="巡视结论" align="center" width="80px">
                                    <template #default="scope">
                                        <span v-if="scope.row.analysisResult == '正常' && scope.row.flag != '7'"
                                            style="color: rgb(0, 249, 162)">正常</span>
                                        <span v-if="scope.row.analysisResult == '异常' && scope.row.flag != '7'"
                                            style="color: rgb(255, 51, 0);font-size: 16px;font-weight: bold;">异常</span>
                                        <span v-if="scope.row.analysisResult == '设备检修' && scope.row.flag != '7'"
                                            style="color: rgb(0, 153, 255)">设备检修</span>
                                        <span v-if="scope.row.analysisResult == '失败' && scope.row.flag != '7'"
                                            style="color: rgb(255, 189, 0)">失败</span>
                                        <span v-if="scope.row.analysisResult == '成功' && scope.row.flag != '7'"
                                            style="color: rgb(0, 249, 162)">成功</span>
                                        <span v-if="scope.row.flag == '7'" style="color: rgb(255, 51, 0);">表计读数异常</span>
                                        <span
                                            v-if="(scope.row.analysisResult == '' && scope.row.flag != '7') || (scope.row.analysisResult == null && scope.row.flag != '7')">--</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="reviseValue" label="修正值" align="center">
                                    <template #default="scope">
                                        <span v-if="scope.row.reviseValid == null">--</span>
                                        <span v-else> {{ scope.row.reviseValue }} {{ scope.row.unit }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="reviseValid" label="修正结论" align="center">
                                    <template #default="scope">
                                        <span v-if="scope.row.reviseValid == 0">正常</span>
                                        <span v-if="scope.row.reviseValid == 1">异常</span>
                                        <span v-if="scope.row.reviseValid == null">--</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="100px" align="center">
                                    <template #default="scope">
                                        <div style="display: flex;justify-content: space-around;">
                                            <img style="cursor:pointer ;"
                                                src="@/assets/tableIcon/patrolmonitor/u3303.png"
                                                v-if="tableData.examineFlag != 1" @click="correct(scope.row)"
                                                title="修正">
                                            <img src="@/assets/tableIcon/patrolmonitor/u3303_disabled.png" v-else
                                                title="修正">
                                            <!-- <div class="button-style"  v-if="tableData.examineFlag != 1" @click="correct(scope.row)">修正</div>
                                            <span v-else>--</span> -->
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="hoverTable" v-if="tableHover">
                                <div style="margin-top: 10px;"><span>区域名称 :</span><span
                                        style="display: inline-block;margin-left: 15px;">{{ tableDataHover.areaName
                                        }}</span></div>
                                <div style="margin-top: 10px;"><span>间隔名称 :</span><span
                                        style="display: inline-block;margin-left: 15px;">{{ tableDataHover.bayName
                                        }}</span>
                                </div>
                                <div style="margin-top: 10px;"><span>点位名称 :</span><span
                                        style="display: inline-block;margin-left: 15px;">{{ tableDataHover.deviceName
                                        }}</span></div>
                                <div style="margin-top: 10px;"><span style="display: inline-block;">识别类型 :</span><span
                                        style="display: inline-block;margin-left: 15px;"
                                        v-if="tableDataHover.desc != null && tableDataHover.desc != ''">{{
                                            tableDataHover.desc }}</span><span
                                        style="display: inline-block;margin-left: 15px;" v-else>--</span></div>
                                <div style="margin-top: 10px;"><span>巡视时间 :</span><span
                                        style="display: inline-block;margin-left: 15px;">{{ tableDataHover.time
                                        }}</span>
                                </div>
                                <!-- <div style="margin-top: 10px;"><span
                                        style="display: inline-block;margin-left: 17px;">实物id
                                        :</span><span style="display: inline-block;margin-left: 15px;"
                                        v-if="tableDataHover.materialId">{{ tableDataHover.materialId }}</span><span
                                        style="display: inline-block;margin-left: 15px;width: 70%;" v-else>--</span>
                                </div> -->
                                <div style="margin-top: 10px;">
                                    <span style="display: block;margin-left: 33px;">阈值 :</span>
                                    <span style="display:block;margin-left:80px;margin-top: -23px;"
                                        v-if="tableDataHover.dangerLower">
                                        <!-- <span
                                            style="display: inline-block;width: 50%;text-align: left;"><span>预警：</span><span>{{
                                                tableDataHover.earlyMin }}-{{ tableDataHover.earlyMax }}</span></span> -->
                                        <span
                                            style="display: inline-block;width: 100%;text-align: left;"><span>一般：</span><span>{{
                                                tableDataHover.commonLower }}-{{ tableDataHover.commonUpper
                                                }}</span></span>
                                        <span
                                            style="display: inline-block;width: 100%;text-align: left;"><span>严重：</span><span>{{
                                                tableDataHover.seriousLower }}-{{ tableDataHover.seriousUpper
                                                }}</span></span>
                                        <span
                                            style="display: inline-block;width: 100%;text-align: left;"><span>危急：</span><span>{{
                                                tableDataHover.dangerLower }}-{{ tableDataHover.dangerUpper
                                                }}</span></span>
                                    </span>
                                    <span v-else style="display:block;margin-left:88px;margin-top: -23px;">
                                        --
                                    </span>
                                </div>
                            </div>
                            <div style="display: flex;justify-content: center;margin-top: 5px;">
                                <Page style="position: relative;z-index: 100;" :total="total" v-model:size="info.size"
                                    :jumper="'hide'" v-model:current="info.current" @pagination="getData()"></Page>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="all-right">
                <div class="alarmInfo-visitation">
                    <div style="display:flex;align-items: center;">
                        <div class="alarmInfo-line"></div>
                        <div class="alarmInfo-title "> <span class="fontFamily">实时视频</span></div>
                    </div>
                    <div class="video-box">
                        <div v-if="alarmInfo.patroldeviceCode == undefined">
                            <img src="@/assets/publicimg/zwsp.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.patroldeviceCode != undefined" ref="recordVideoPlayer"
                            :_uid="101" :devicechannelInfo="devicechannelInfo" :visible.sync="true" :videoUrl="videoUrl"
                            :videofmp4="videofmp4" :hasAudio="false" fluent autoplay live @closeVideo="closeVideo">
                        </JessibucaPlayer>
                    </div>
                </div>

                <div class="alarmInfo-visitation">
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <div style="display:flex;align-items: center;height: 40px;padding-left: 10px;">
                            <div class="alarmInfo-line"></div>
                            <div class="alarmInfo-title"> <span class="fontFamily" style="color:#0099ff">巡视结果</span>
                            </div>
                        </div>
                        <div style="display: flex;font-size: 14px;padding-right:15px">
                            <div :class="tabs == 1 ? 'historical' : 'change'" @click="tabsClick(2)">
                                <div style="padding: 0px 0px 2px 8px; box-sizing: border-box;">本次结果</div>
                            </div>
                            <div :class="tabs == 1 ? 'change' : 'historical'" @click="tabsClick(1)">
                                <div style="padding: 0px 0px 2px 8px; box-sizing: border-box;">历史曲线</div>
                            </div>
                        </div>
                    </div>
                    <div class="alarmimg" v-show="tabs == 2">
                        <div v-if="alarmInfo.filePath == null || alarmInfo.filePath == ''"
                            style="width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
                            <div>
                                <img src="@/assets/publicimg/zwtp.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>

                        <div style="width: 96%;height: 98%;"
                            v-if="alarmInfo.filePath != null && alarmInfo.filePath != '' && alarmInfo.fileType != 3">
                            <div style="width:100%;height:100%; 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="url + '/previewimage?filename=' + encodeURI(alarmInfo.defectFilePath != null ? alarmInfo.defectFilePath : alarmInfo.filePath)"
                                        :zoom-rate="1.2"
                                        :preview-src-list="[url + '/previewimage?filename=' + encodeURI(alarmInfo.defectFilePath != null ? alarmInfo.defectFilePath : alarmInfo.filePath)]"
                                        :preview-teleported="true" fit="cover" />
                                </div>


                                <img style="width:100%;height:100%;"
                                    :src="url + '/previewimage?filename=' + encodeURI(alarmInfo.defectFilePath != null ? alarmInfo.defectFilePath : alarmInfo.filePath)">
                            </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 class="alarmimg" v-show="tabs == 1">
                        <div id="deviceEachers" :style="{ width: '100%', height: '100%' }"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 修正弹窗 -->
        <Eldialog v-if="Explicit == 1 && conclusion == 1" :title="'修正'" :zIndex="2000" :width="'600px'"
            :height="'600px'" @before-close="handleClose">
            <template v-slot:PopFrameContent>
                <div v-if="conclusion == 1">
                    <!-- <div class="notification-title">修正</div> -->
                    <div class="notification-body">
                        <div style="height: 400px;padding: 0px 40px;font-size: 14px;color: #409eff;">
                            <div>
                                <div class="">
                                    <span
                                        style="display:inline-block;border:2px solid #409eff ;height: 10px;margin: 0px 10px 0px 0px;"></span><span>巡视信息</span>
                                </div>
                                <div style="color: #fff;margin-top:10px;"><span>点位名称&nbsp:&nbsp&nbsp{{
                                    notificationText.deviceName
                                        }}</span></div>
                                <div style="color: #fff;margin-top:10px;"><span>巡视结果&nbsp:&nbsp&nbsp
                                        <span
                                            v-if="notificationText.valueType == 'meter' || notificationText.valueType == 'infrared'">
                                            <span v-if="notificationText.analysisResult == '异常'"
                                                style="color: red;font-size: 16px;font-weight: bold;"> {{
                                                    notificationText.value }} {{ notificationText.unit }}</span>
                                            <span v-else> {{ notificationText.value }} {{ notificationText.unit
                                                }}</span>
                                        </span>
                                        <span v-else>
                                            <span v-if="notificationText.conf != null && notificationText.conf != ''">{{
                                                notificationText.conf }}</span>
                                            <span v-else>--</span>
                                        </span></span></div>
                                <div style="color: #fff;margin-top:10px;">
                                    <span>巡视结论&nbsp:&nbsp&nbsp
                                        <span v-if="notificationText.analysisResult == '正常'"
                                            style="color: rgb(0, 249, 162)">正常</span>
                                        <span v-if="notificationText.analysisResult == '异常'"
                                            style="color: rgb(255, 51, 0);color: red;font-size: 16px;font-weight: bold;">异常</span>
                                        <span v-if="notificationText.analysisResult == '设备检修'"
                                            style="color: rgb(0, 153, 255)">设备检修</span>
                                        <span v-if="notificationText.analysisResult == '失败'"
                                            style="color: rgb(255, 189, 0)">失败</span>
                                        <span v-if="notificationText.analysisResult == '成功'"
                                            style="color: rgb(0, 249, 162)">成功</span>
                                        <span
                                            v-if="notificationText.analysisResult == '' || notificationText.analysisResult == null">--</span>
                                    </span>
                                </div>
                            </div>
                            <div style="margin-top: 20px;">
                                <div class=""><span
                                        style="display:inline-block;border:2px solid #409eff ;height: 10px;margin: 0px 10px 0px 0px;"></span><span>修正信息</span>
                                </div>

                                <div style="color: #fff;margin-top:20px;"><span>修正结果&nbsp&nbsp<el-input
                                            class="screenHomepage" style="width:80%;" v-model="form.reviseValue">
                                            <template #append>
                                                {{ notificationText.unit }}
                                            </template>
                                        </el-input>
                                    </span>
                                </div>
                                <div style="color: #fff;margin-top:20px;"><span
                                        class="large">修正结论&nbsp&nbsp<el-radio-group v-model="form.reviseValid"
                                            class="ml-4">
                                            <el-radio label="0" size="large">正常</el-radio>
                                            <el-radio label="1" size="large">异常</el-radio>
                                        </el-radio-group></span>
                                </div>
                                <div style="color: #fff;margin-top:20px;"><span style="display: flex;">修正描述&nbsp&nbsp
                                        <el-input style="width:80%;" v-model="form.custom2" :rows="2"
                                            type="textarea" /></span>
                                </div>

                            </div>
                        </div>
                        <div style="width: 50%;margin:auto;display: flex;justify-content: space-around;">
                            <div class="details-button" @click="Explicit = 0">取消</div>
                            <div class="details-button" @click="sure(form, 'one')">确定</div>
                        </div>
                    </div>
                </div>
            </template>
        </Eldialog>

        <!-- 审核弹窗 -->
        <Eldialog v-if="Explicit == 1 && conclusion == 2" :title="'审核结论'" :zIndex="2000" :width="'540px'"
            :height="'600px'" @before-close="handleClose">
            <template v-slot:PopFrameContent>
                <div class="notification-body">
                    <div style="height: 190px;padding: 0px 40px;font-size: 14px;color: #00F9A2;">
                        <div style="margin-top: 20px;">
                            <div style="color: #fff;margin-top:20px;"><span style="display: flex;">巡视结论&nbsp&nbsp
                                    <el-input style="width:80%;" v-model="examineComment" :rows="6"
                                        type="textarea" /></span>
                            </div>

                        </div>
                    </div>
                    <div style="width: 50%;margin:auto;display: flex;justify-content: space-around;">
                        <div style="position: relative;z-index: 100;width: 110px;height: 33px;">
                            <el-button class="three-button" @click="Explicit = 0"
                                style="border: none;z-index:100;position: relative; color: #409eff;width: 110px;height: 33px;">取消</el-button>
                        </div>
                        <div style="position: relative;z-index: 100;width: 110px;height: 33px;">
                            <el-button class="three-button" @click=" sure(examineComment, 'two')"
                                style="border: none;z-index:100;position: relative; color: #409eff;width: 110px;height: 33px;">确定</el-button>
                        </div>
                    </div>
                </div>
            </template>
        </Eldialog>
    </div>
</template>
<style scoped lang="scss">
.imgbg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.hoverTable {
    width: 350px;
    height: 300px;
    // border: 1px solid red;
    position: absolute;
    z-index: 20;
    right: -360px;
    top: 160px;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    background-image: url(@/assets/patrolmonitor/hover.png);
    background-size: 100% 100%;
}

.Title {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.historical {
    width: 85px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    background-image: url(@/assets/patrolmonitor/u2664.png);
    background-size: 100% 100%;
    color: #ffffff;
    // border-top: 2px solid #ffffff;
    cursor: pointer;
}

.change {
    width: 85px;
    height: 27px;
    text-align: center;
    line-height: 27px;
    background-image: url(@/assets/patrolmonitor/u2659.png);
    background-size: 100% 100%;
    // border-top: 2px solid #009BFF;
    color: #ffffff;
}

.all {
    width: 100%;
    display: flex;

    // padding: 10px 0px;
    .all-left {
        width: 70%;
        margin-right: 10px;
    }

    .all-right {
        width: 30%;
        height: calc(100vh - 160px);
        // border: 1px solid red;
        position: relative;
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }
}

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

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

.video-box {
    width: 100%;
    height: calc(100% - 37px);
    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% - 55px);
    display: flex;
    justify-content: center;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
}

.details {
    position: relative;
    width: 100%;
    // margin: auto;
    // display: flex;

    .details-left {
        width: 100%;
        height: 195px;

        // border: 1px solid #00F9A2;
        .details-left-imgbg {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .details-content {
            position: relative;
            display: flex;
            align-items: center;
            height: 92%;

            .details-content-left {
                color: #fff;
                font-size: 14px;
                width: 70%;

                .number-father {
                    display: flex;
                    justify-content: space-between;
                    width: 90%;
                }

                .details-left-one {
                    padding: 28px 0px 0px 20px;

                    .details-left-two {
                        display: block;
                        width: 270px;
                        margin-left: 20px;
                    }

                    .details-content-number {
                        width: 60px;
                        height: 60px;
                        // border: 1px solid red;
                        text-align: center;
                        line-height: 27px;

                        .details-top-number {
                            font-size: 26px;
                            font-weight: 700;
                        }
                    }
                }
            }

            .details-content-right {
                display: flex;
                width: 30%;
                margin-top: 28px;
                justify-content: space-around;
            }
        }
    }
}

.contont {
    position: relative;
    width: 100%;
    margin: auto;
    padding-top: 10px;
    height: calc(100vh - 365px);
    z-index: 20;

    .contont-img {
        position: absolute;
        width: 100%;
        height: calc(100%);
    }

    .contont-title {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        padding-left: 20px;
    }

    .contont-contont {
        width: 100%;
        height: calc(100% - 140px);
        // margin: auto;

    }
}

.rightNavImg {
    width: 100%;
    height: calc(90vh - 25px);
    position: absolute;
    top: 0;
}

.rightNav {
    width: 99%;
    height: calc(90vh - 25px);
    margin: 20px 10px;
    position: relative;
}

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

    .notification {
        width: 670px;
        height: 500px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;

        .notification-title {
            position: absolute;
            top: 3px;
            left: 320px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
        }

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

.PatrolMonitoring {
    height: calc(100% - 110px);
    overflow: auto;
}

//控制行变色
// :deep(.warning-row) {
//     background-color: rgb(255, 255, 255, 0) !important;
// }

// :deep(.success-row) {
//     background-color: rgb(255, 255, 255, 0.05) !important;
// }
//点击边框高亮

//按钮样式
.three-button {
    width: 111px;
    height: 41px;
    background: url('@/assets/patrolmonitor/anniiu5.png') no-repeat;
    background-size: 100% 100%;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #009BFF;
    border: none;

    :deep(.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover) {
        color: #009BFF !important;
        background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat !important;
        background-size: 100% 100% !important;
        border: none !important;
    }

    &:focus {
        color: #009BFF;
        background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat;
        background-size: 100% 100%;
    }

    &:hover {
        border: none !important;
        background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat;
        background-size: 100% 100%;
        color: #009BFF;
    }
}

:deep(.el-input-group__append) {
    background: transparent !important;
    // box-shadow: 0 1px 0 0 #409eff inset;
    color: #ffffff;
}

.patrolDetailstopbox {
    padding: 15px;
    padding-bottom: 0px;
    padding-top: 60px
}

.DetailsImgbox {
    position: relative;
    width: 140px;
    height: 140px;
    background: url(@/assets/patrolmonitor/xsjk_yh.png);
    background-size: 100% 100%;
    // margin-right: 13px;
}
</style>
<style>
.DetailsImgbox .el-progress-circle {
    /* transform:rotateY(180deg); */
    width: 120px !important;
    height: 120px !important;
}

.DetailsImgbox .el-progress-circle__track {
    display: none;
}
</style>
