<script lang="ts">
export default {
    name: "sequentialcontrol", // 一键顺控
};
</script>
<script setup lang="ts">
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
import { useUserStore } from '@/store/modules/user';
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
import { ElMessage } from "element-plus";
import axios from 'axios';
import { getLinkTaskTodo, getLinkTaskRecordLast } from "@/api/Intelligentlinkage/index";
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const defaultProps = {
    children: 'children',
    label: 'taskName',
}
const Treedata = ref()
const treeRef = ref();
const currentNodeKey = ref("")
function cloasAll() {
    videoUrl.value = ''
    isswitch.value = false
    devicechannelInfo.value = ''
    videofmp4.value = ''
    videoUrl1.value = ''
    isswitch1.value = false
    devicechannelInfo1.value = ''
    videofmp41.value = ''
    videoUrl2.value = ''
    isswitch2.value = false
    devicechannelInfo2.value = ''
    videofmp42.value = ''
    videoUrl3.value = ''
    isswitch3.value = false
    devicechannelInfo3.value = ''
    videofmp43.value = ''
}
function getLinkTask(row: any) {

    getLinkTaskRecordLast({ linkageType: '1', stationCode: userStore.stationCode }).then((res: any) => {
        Treedata.value = res.data
        if (row == '1') {

            pointDetails(res.data[0])
        }

        const taskTodoId = res.data[0].taskTodoId
        nextTick(() => {
            treeRef.value?.setCurrentKey(taskTodoId);
        });
    })
}
function handleNodeClick(row: any) {
    cloasAll()
    pointDetails(row)
}
const dataTask = ref()
const alarmInfo = ref()
function pointDetails(row: any) {
    const params = {
        stationCode: userStore.stationCode,
        todoId: row.taskTodoId,
    }
    getLinkTaskTodo(params).then((res: any) => {
        dataTask.value = res.data
        alarmInfo.value = res.data.children[0]
        RefreshLoad(res.data.children[0])
        if (res.data.children[1]) {
            RefreshLoad1(res.data.children[1])
        }
        if (res.data.children[2]) {
            RefreshLoad2(res.data.children[2])
        }
        if (res.data.children[3]) {
            RefreshLoad3(res.data.children[3])
        }
    })
}

//视频配置
//一键顺控
const videoUrl = ref('')
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.deviceId,
        channelId: info.channelId
    }
    isswitch.value = true
    axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + info.deviceId + '/' + info.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.deviceId, {}).then((res: any) => {
                if (res.data.data == "0") {
                    axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + info.deviceId + '/' + info.channelId + '?cmdCode=' + '130' + '&parameter1=0&parameter2=' + info.patroldevicePos + '&combindCode2=0', {}).then((res: any) => { })
                }
            })



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

    })
}
//辅助1
//一键顺控
const videoUrl1 = ref('')
const isswitch1 = ref(false)
const devicechannelInfo1 = ref({})
const videofmp41 = ref('')
function RefreshLoad1(info: any) {
    if (isswitch1.value == true) {
        ElMessage({
            type: 'warning',
            message: '正在加载监控视频！',
        })
        return
    }
    devicechannelInfo1.value = {
        deviceId: info.deviceId,
        channelId: info.channelId
    }
    isswitch1.value = true
    axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + info.deviceId + '/' + info.channelId, {}).then((res: any) => {
        isswitch1.value = false
        if (res.data.data != undefined) {
            videoUrl1.value = res.data.data.ws_flv
            videofmp41.value = res.data.data.fmp4
            axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + info.deviceId, {}).then((res: any) => {
                if (res.data.data == "0") {
                    axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + info.deviceId + '/' + info.channelId + '?cmdCode=' + '130' + '&parameter1=0&parameter2=' + info.patroldevicePos + '&combindCode2=0', {}).then((res: any) => { })
                }
            })
        }
    }).catch(function (error: any) {

    })
}
////辅助2
const videoUrl2 = ref('')
const isswitch2 = ref(false)
const devicechannelInfo2 = ref({})
const videofmp42 = ref('')
function RefreshLoad2(info: any) {
    if (isswitch2.value == true) {
        ElMessage({
            type: 'warning',
            message: '正在加载监控视频！',
        })
        return
    }
    devicechannelInfo2.value = {
        deviceId: info.deviceId,
        channelId: info.channelId
    }
    isswitch2.value = true
    axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + info.deviceId + '/' + info.channelId, {}).then((res: any) => {
        isswitch2.value = false
        if (res.data.data != undefined) {
            videoUrl2.value = res.data.data.ws_flv
            videofmp42.value = res.data.data.fmp4
            axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + info.deviceId, {}).then((res: any) => {
                if (res.data.data == "0") {
                    axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + info.deviceId + '/' + info.channelId + '?cmdCode=' + '130' + '&parameter1=0&parameter2=' + info.patroldevicePos + '&combindCode2=0', {}).then((res: any) => { })
                }
            })
        }
    }).catch(function (error: any) {

    })
}
////辅助3
const videoUrl3 = ref('')
const isswitch3 = ref(false)
const devicechannelInfo3 = ref({})
const videofmp43 = ref('')
function RefreshLoad3(info: any) {
    if (isswitch3.value == true) {
        ElMessage({
            type: 'warning',
            message: '正在加载监控视频！',
        })
        return
    }
    devicechannelInfo3.value = {
        deviceId: info.deviceId,
        channelId: info.channelId
    }
    isswitch3.value = true
    axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + info.deviceId + '/' + info.channelId, {}).then((res: any) => {
        isswitch3.value = false
        if (res.data.data != undefined) {
            videoUrl3.value = res.data.data.ws_flv
            videofmp43.value = res.data.data.fmp4
            axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + info.deviceId, {}).then((res: any) => {
                if (res.data.data == "0") {
                    axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + info.deviceId + '/' + info.channelId + '?cmdCode=' + '130' + '&parameter1=0&parameter2=' + info.channelPos + '&combindCode2=0', {}).then((res: any) => { })
                }
            })
        }
    }).catch(function (error: any) {

    })
}

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 && JSON.parse(e.data).taskType == "4") {
            pointDetails(JSON.parse(e.data))
            getLinkTask('2')
        }
    }
    ws1.onclose = () => {

    };

}
onMounted(() => {
    setupWebSocket()
    getLinkTask('1')
})
onBeforeUnmount(() => {
    if (ws1 != null) {
        ws1.close()
    }
})
</script>
<template>
    <div>

        <div style="position: relative; display: flex; box-sizing: border-box; padding:60px 15px; padding-bottom: 0;">
            <div class="leftNav">
                <div style="height:38px;position: relative;display: flex;align-items: center;">
                    <!-- <img src="@/assets/MenuIcon/bkzs.png" alt="" style="display: block;margin-left: 10px;"> -->
                    <span
                        style="z-index:100; font-weight: 700; font-style: normal; font-size: 16px; color: #fff;;display:inline-block;position: absolute;left: 20px;top:20px ;">
                        一键顺控任务</span>
                </div>
                <!-- <img src="@/assets/MenuIcon/lxhf_hf1.png" alt="" style="width:100%;z-index:51;position: absolute;"> -->
                <el-tree ref="treeRef" :data="Treedata" :current-node-key="currentNodeKey" node-key="taskTodoId"
                    :highlight-current="true" :props="defaultProps" @node-click="handleNodeClick"
                    style="padding:15px 15px 0px ;">
                    <template #default="{ node, data }">
                        <div style="display: flex; justify-content: space-between;width: 100%;align-items: center;">
                            <div style="width: 74%;">
                                {{ node.label }}
                            </div>
                            <div style="width: 25%;">
                                <span v-if="data.taskState == 0" style="color: #00FFFF;">待执行</span>
                                <span v-else-if="data.taskState == 1">已完成</span>
                                <span v-else-if="data.taskState == 2" style="color: #00F9A2;">执行中</span>
                                <span v-else-if="data.taskState == 3" style="color: #FFBD00;">暂停</span>
                                <span v-else-if="data.taskState == 4" style="color: #FF3300;">终止</span>
                                <span v-else-if="data.taskState == 5" style="color: #09f;">未执行</span>
                                <span v-else-if="data.taskState == 6" style="color: #a851ff;">超期执行</span>
                                <span v-else>--</span>
                            </div>
                        </div>


                    </template>
                </el-tree>
            </div>
            <div class="rightNav">
                <div class="rightNav-bottom">
                    <div class="rightNav-left">
                        <div style="display: flex;justify-content: center;align-items: center;width: 100%;height:100%;">
                            <div style="width: 100%;height:100%;">
                                <JessibucaPlayer ref="recordVideoPlayer" :_uid="906" :devicechannelInfo="devicechannelInfo"
                                    :visible.sync="true" :videoUrl="videoUrl" :videofmp4="videofmp4" :hasAudio="false"
                                    fluent autoplay live @closeVideo="closeVideo">
                                </JessibucaPlayer>
                            </div>
                        </div>
                    </div>
                    <div style="width: 100%;margin-top: 15px;height:28%;display: flex; justify-content: space-between;">
                        <div style="width:32%;height:100%;">
                            <JessibucaPlayer ref="recordVideoPlayer" :_uid="907" :devicechannelInfo="devicechannelInfo1"
                                :visible.sync="true" :videoUrl="videoUrl1" :videofmp4="videofmp41" :hasAudio="false" fluent
                                autoplay live @closeVideo="closeVideo">
                            </JessibucaPlayer>
                        </div>
                        <div style="width:32%;height:100%;">
                            <JessibucaPlayer ref="recordVideoPlayer" :_uid="908" :devicechannelInfo="devicechannelInfo2"
                                :visible.sync="true" :videoUrl="videoUrl2" :videofmp4="videofmp42" :hasAudio="false" fluent
                                autoplay live @closeVideo="closeVideo">
                            </JessibucaPlayer>
                        </div>
                        <div style="width:32%;height:100%;">
                            <JessibucaPlayer ref="recordVideoPlayer" :_uid="909" :devicechannelInfo="devicechannelInfo3"
                                :visible.sync="true" :videoUrl="videoUrl3" :videofmp4="videofmp43" :hasAudio="false" fluent
                                autoplay live @closeVideo="closeVideo">
                            </JessibucaPlayer>
                        </div>
                    </div>
                </div>
                <div class="rightNavRight">
                    <div class="right-right">
                        <div style="height:38px;position: relative;display: flex;align-items: center;">
                            <span
                                style="z-index:100; font-weight: 700; font-style: normal; font-size: 16px; color: #fff;;display:inline-block;position: absolute;left: 20px;top:13px ;">
                                基本信息</span>
                        </div>
                        <div style="width: 100%;height:88%;display:flex;justify-content:center;align-items: center;">
                            <div v-if="dataTask"
                                style="width:93%;height:73%; border:1px solid #0f5e91 ; border-right: none;border-bottom: none; font-size: 16px;">
                                <div style="display: flex;width: 100%;height: 45px;color: #fff;line-height: 45px;">
                                    <div
                                        style="width: 30%;height: 45px;border:1px solid #0f5e91 ; border-left: none;border-top: none;color: #869995;padding-left: 10px;font-size: 16px;">
                                        任务名称</div>
                                    <div
                                        style="width: 70%;height: 45px;border:1px solid #0f5e91 ; border-left: none;border-top: none;padding-left: 10px;font-size: 13px;">
                                        {{ dataTask.taskName }}</div>
                                </div>
                                <div style="display: flex;width: 100%;height: 45px;color: #fff;line-height: 45px;">
                                    <div
                                        style="width: 30%;height: 45px;border:1px solid #0f5e91 ; border-left: none;border-top: none;padding-left: 10px;color: #869995;font-size: 16px;">
                                        站序号</div>
                                    <div
                                        style="width: 70%;height: 45px;border:1px solid #0f5e91 ; border-left: none;border-top: none;padding-left: 10px;font-size: 13px;">
                                        {{ dataTask.stationNum }}</div>
                                </div>
                                <div style="display: flex;width: 100%;height: 45px;color: #fff;line-height: 45px;">
                                    <div
                                        style="width: 30%;height: 45px;border:1px solid #0f5e91 ; border-left: none;border-top: none;padding-left: 10px;color: #869995;font-size: 16px;">
                                        监控索引号</div>
                                    <div
                                        style="width: 70%;height: 45px;border:1px solid #0f5e91 ; border-left: none;border-top: none;padding-left: 10px;font-size: 13px;">
                                        {{ dataTask.controlNum }}</div>
                                </div>

                                <div style="display: flex;width: 100%;height: 45px;color: #fff;line-height: 45px;">
                                    <div
                                        style="width: 30%;height: 45px;border:1px solid #0f5e91 ; border-left: none;border-top: none;padding-left: 10px;color: #869995;font-size: 16px;">
                                        信号设备</div>
                                    <div
                                        style="width: 70%;height: 45px;border:1px solid #0f5e91 ; border-left: none;border-top: none;padding-left: 10px;font-size: 13px;">
                                        {{ dataTask.linkageDeviceName }} </div>
                                </div>
                                <div style="display: flex;width: 100%;height: 45px;color: #fff;line-height: 45px;">
                                    <div
                                        style="width: 30%;height: 45px;border:1px solid #0f5e91 ; border-left: none;border-top: none;padding-left: 10px;color: #869995;font-size: 16px;">
                                        信号来源</div>
                                    <div
                                        style="width: 70%;height: 45px;border:1px solid #0f5e91 ; border-left: none;border-top: none;padding-left: 10px;font-size: 13px;">
                                        {{ dataTask.linkageDeviceType }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rightNav-right">
                        <div style="height:38px;position: relative;display: flex;align-items: center;">
                            <span
                                style="z-index:100; font-weight: 700; font-style: normal; font-size: 16px; color: #FFF;;display:inline-block;position: absolute;left: 20px;top:13px ;">
                                巡视结果</span>
                        </div>

                        <div v-if="alarmInfo"
                            style="width: 95%;height: 55%; margin: auto;display: flex;justify-content: center;align-items: center;margin-top: 40px;">
                            <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/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>

                            <div style="width: 96%;height: 100%; "
                                v-if="alarmInfo.filePath != null && alarmInfo.filePath != ''">
                                <div style="width:100%;height:95%; 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>
                        <el-scrollbar height="calc(100px)">
                            <div v-if="alarmInfo" style="width:40%;color: #fff;font-size: 14px;margin-left: 20px;">
                                <div style="margin-bottom:20px ;">点位名称：{{ alarmInfo.deviceName }}</div>
                                <div style="margin-bottom:20px ;width: 220px;">巡视时间：{{ alarmInfo.time }}</div>
                                <div style="margin-bottom:20px; ">巡视结果：<span
                                        style="color: rgb(0, 249, 162);font-weight: 800;">{{ alarmInfo.value }}</span></div>
                                <div style="margin-bottom:20px ;">巡视结论:<span v-if="alarmInfo.analysisResult == '正常'"
                                        style="color: rgb(0, 249, 162)">正常</span>
                                    <span v-if="alarmInfo.analysisResult == '异常'"
                                        style="color: rgb(255, 51, 0);color: red;font-size: 16px;font-weight: bold;">异常</span>
                                    <span v-if="alarmInfo.analysisResult == '设备检修'"
                                        style="color: rgb(0, 153, 255)">设备检修</span>
                                    <span v-if="alarmInfo.analysisResult == '失败'" style="color: rgb(255, 189, 0)">失败</span>
                                    <span v-if="alarmInfo.analysisResult == '成功'" style="color: rgb(0, 249, 162)">成功</span>
                                    <span
                                        v-if="alarmInfo.analysisResult == '' || alarmInfo.analysisResult == null">--</span>
                                </div>

                            </div>
                        </el-scrollbar>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.leftNav {
    min-width: 280px;
    height: calc(100vh - 155px);
    overflow: auto;
    position: relative;
    background: url(@/assets/monitorsystem/spjk_lbbj.png) no-repeat center center;
    background-size: 100% 100%;
}

.rightNav {
    width: 85%;
    height: calc(100vh - 155px);
    overflow: auto;
    margin-left: 8px;
    position: relative;
    display: flex;
    justify-content: space-between;

    // //   background: url(@/assets/MenuIcon/xsri_lb.png) no-repeat center center;
    //   background-size: 100% 100%;
    .rightNav-top {
        width: 100%;
        height: calc(20vh);
        overflow: auto;
        background: url(@/assets/MenuIcon/xsri_jdbj.png) no-repeat center center;
        background-size: 100% 100%;
        color: #fff;
    }

    .rightNav-bottom {
        width: 67%;
        height: calc(100vh - 155px);
        overflow: auto;

        // border: 1px solid red;
        .rightNav-left {
            width: 100%;
            height: 70%;
        }


    }
}

.rightNavRight {
    width: 32%;
    height: calc(100vh - 155px);
    overflow: auto;
    // border: 1px solid red;

    .right-right {
        width: 100%;
        height: 350px;
        // border: 1px solid red;
        background: url(@/assets/newimg/xsjk_640.png) no-repeat center center;
        background-size: 100% 100%;
    }

    .rightNav-right {
        width: 100%;
        height: calc(100vh - 520px);
        margin-top: 10px;
        background: url(@/assets/newimg/xsjk_640.png) no-repeat center center;
        background-size: 100% 100%;
    }
}

:deep(.el-tree) {
    background: #ffffff00 !important;
    --el-tree-text-color: #fff !important;
}



:deep(.el-tree-node__content) {
    height: 45px !important;
    padding: 0px 5px !important;
    border: 1px solid rgba(255, 0, 0, 0);

}

:deep(.el-tree-node) {
    white-space: pre-wrap;
}

:deep(.el-tree-node__content:hover) {
    border: #0f5e91 1px solid;
    height: 45px !important;
}

:deep(.el-tree-node__content:hover) {
    background-color: #f5f7fa00;
}

:deep(.el-scrollbar) {
    height: 100px !important;
}

:deep(.el-tree-node__expand-icon.is-leaf) {
    display: none !important;
}
</style>

