<script lang="ts">
export default {
    name: "device",
};
</script>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
import MaintenanceArea from '@/components/MaintenanceArea/index.vue'
import axios from 'axios';
import {
    getdata,
    addPosition,
    changeStatus,
    setDailyMonitorStatus,
    editPosition,
    delPosition,
    getArea,
    setEffectiveArea,
    getDvrStorageStatus,
    getRobotList
} from "@/api/monitordevice";
import { getTreeList } from "@/api/linksignal";
import { getDeviceByType, getTreefirst } from "@/api/device";
import { ElMessageBox, ElMessage, TabsPaneContext } from "element-plus";
import { useAppStore } from '@/store/modules/app';
import Page from '@/components/Pagination/page.vue';
import { useUserStore } from '@/store/modules/user';
import { downloadFile } from '@/utils/index';
import { exportPatrolDeviceList } from "@/api/robot";
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
const userStore = useUserStore();
//左侧树形控件
interface Tree {
    [x: string]: any;
    label: string;
    children?: Tree[];
}
const defaultProps = {
    children: "children",
    label: "name"
};
const treedata: any = ref([]);
const treeRef = ref();
const treeloading = ref(true)
const currentNodeKey = ref("")

//获取企业树形信息
const value = ref()
const stationId = ref()
const optionSelect = ref()
const stationCode = ref()
const areaId = ref()
function getSelect() {
    getTreefirst().then((res: any) => {
        optionSelect.value = res.data
        value.value = res.data[0].stationId
        // stationId.value = res.data[0].stationId
        stationCode.value = res.data[0].stationCode
        getTree(res.data[0].stationId)
    })
}
function getTree(val: any) {
    stationId.value = val
    const params = {
        stationId: val
    }
    getTreeList(params).then((res: any) => {
        if (res.data.length == 0) {
            tableData.value = []
        }
        treedata.value = res.data
        treeloading.value = false
        areaId.value = res.data[0].children[0].areaId
        orgId.value = res.data[0].children[0].areaId
        allName.value = res.data[0].children[0]
        loading.value = true
        getData()
        nextTick(() => {
            treeRef.value?.setCurrentKey(orgId.value);
        });
    })
        .catch((error: any) => {
            treeloading.value = false
        })

}
// 导航树点击事件
const disabled = ref(false)
function handleNodeClick(data: Tree, node: any) {
    if (data.children) {
        stationCode.value = data.stationCode
        areaId.value = data.areaId
        orgId.value = ''
        getData()
        disabled.value = true
    } else {
        stationCode.value = data.stationCode
        areaId.value = data.areaId
        loading.value = true
        orgId.value = data.areaId;
        allName.value = data
        getData()
        disabled.value = false
    }
}
// 右侧表格
const deviceModel = ref()
const manufacturer = ref()
const orgId = ref("");
const deviceName = ref('')
const tableData: any = ref()
const loading = ref(false)
const flag = ref()
const paramstable:any = ref({
    size: 10,
    current: 1,
    deviceName: '',
    type: '',
})
const total = ref()
function getData() {
    loading.value = true
    const params = {
        stationId: stationId.value,
        areaId: orgId.value,
        size: paramstable.value.size,
        current: paramstable.value.current,
        patrolDeviceName: deviceName.value,
        type: paramstable.value.type,
        deviceModel: deviceModel.value,
        manufacturer: manufacturer.value,
        flag: flag.value == true ? '1' : '0',
        online:paramstable.value.online,
    }
    getdata(params).then((res: any) => {
        loading.value = false
        tableData.value = res.data.records
        total.value = res.data.total
        paramstable.value.size = res.data.size
        paramstable.value.current = res.data.current
        loading.value = false
    })
}
//重置
function resetting() {
    paramstable.value = {
        size: 10,
        current: 1,
        deviceName: '',
        type: '',
        online: '',
    }

    deviceName.value = ''
    deviceModel.value = ''
    manufacturer.value = ''
    getData()
}

//改变摄像机状态
function switchChange(row: any) {
    if (row.datastatus == '0') {
        elMessage.value = "确定停用该巡视设备吗？"
    } else if (row.datastatus == '1') {
        elMessage.value = "确定启用该巡视设备吗？"
    }
    ElMessageBox.confirm(elMessage.value, "提示信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            let params = {
                dataStatus: row.datastatus,
                id: row.patroldeviceId,
            };

            changeStatus(params).then((res: any) => {
                if (res.code == 0) {
                    getData()
                    ElMessage({
                        type: "success",
                        message: "改变成功",
                    });
                }

            });
        })
        .catch(() => {
            getData();
        })
}
//状态静默任务
function switchDailymonitor(row: any) {
    if (row.dailymonitor == '0') {
        elMessage.value = "确定停用该巡视设备的静默任务吗？"
    } else if (row.dailymonitor == '1') {
        elMessage.value = "确定启用该巡视设备的静默任务吗？"
    }
    ElMessageBox.confirm(elMessage.value, "提示信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            let params = {
                dailyMonitor: row.dailymonitor,
                id: row.patroldeviceId,
            };

            setDailyMonitorStatus(params).then((res: any) => {
                if (res.code == 0) {
                    getData()
                    ElMessage({
                        type: "success",
                        message: "改变成功",
                    });
                }

            });
        })
        .catch(() => {
            getData();
        })
}

//删除
function handleDelete(row: any) {
    elMessage.value = '确定删除此巡视设备吗？'
    ElMessageBox.confirm(elMessage.value, "提示信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            const params = {
                id: row.patroldeviceId
            }
            delPosition(params).then((res: any) => {
                if (res.code == 0) {
                    getData()
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                }

            })
        })
        .catch(() => {
            getData();
        })
}

//多选删除
const deviceIds: any = ref([])
function delClick() {

    for (let i = 0; i < deviceInfos.value.length; i++) {
        if (deviceInfos.value[i].datastatus == 1) {
            ElMessage({
                message: '已选择的巡视设备中包含启用状态数据，请重新选择。',
                type: 'warning',
            })
            return false;
        }
    }
    elMessage.value = '确定删除此巡视设备吗？'
    ElMessageBox.confirm(elMessage.value, "提示信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            deviceInfos.value.forEach((res: any) => {
                deviceIds.value.push(res.patroldeviceId)
            })
            const params = {
                id: deviceIds.value.toString()
            }
            delPosition(params).then((res: any) => {
                if (res.code == 0) {
                    getData()
                    deviceIds.value = []
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                }

            })
        })
        .catch(() => {
            getData();
        })
}


//表格多选
const deviceInfos: any = ref([])
function handleSelectionChange(val: any) {
    deviceInfos.value = val
}
//表格多选样式
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (rowIndex % 2 === 0) {
        return 'warning-row'
    } else if (rowIndex % 2 === 1) {
        return 'success-row'
    }
    return ''
}
//弹窗
//新增-传参变电站信息-变电站到间隔 name和id
const allName: any = ref({})
//新建用户弹窗
const info: any = ref({
    patroldeviceCode: '',
    patroldeviceName: '',
    type: '',
    videoMode: '',
    useMode: '',
    deviceModel: '',
    useUnit: '',
    deviceSource: '',
    productionDate: '',
    productionCode: '',
    manufacturer: '',
    place: '',
    ipaddr: '',
    macaddr: '',
    preset: '',
    custom1: '',
    presetTime: '10',
    materialId: '',
    internationalId: '',
    areaId: '',
    areaName: '',
    rtspurl: '',
    robotsCode: ''

});
const checked4 = ref(false)
//rules - 新增 
//未带安全帽
const infoRefAll = ref({
    helmet_confidence: [
        { required: true, message: '请输入置信度', trigger: 'blur' }
    ],
    helmet_color: [
        { required: true, message: '请选择颜色', trigger: 'blur' }
    ],
    helmet_color_ratio: [
        { required: true, message: '请输入颜色占比', trigger: 'blur' }
    ],
    helmet_person_area: [
        { required: true, message: '请输入人员最小面积', trigger: 'blur' }
    ],
    frame_interval: [
        { required: true, message: '请输入帧间隔', trigger: 'blur' }
    ],
    helmet_person_confidence: [
        { required: true, message: '请输人员相似度', trigger: 'blur' }
    ],
    helmet_frequency: [
        { required: true, message: '请输入安全帽报警频次', trigger: 'blur' }
    ],
})


//未穿长袖工作服
const clothesRefInfoAll = ref({
    frame_interval: [
        { required: true, message: '请输入帧间隔', trigger: 'blur' }
    ],
    uniform_frequency: [
        { required: true, message: '请输入报警频次', trigger: 'blur' }
    ],
    uniform_confidence: [
        { required: true, message: '请输入相似度', trigger: 'blur' }
    ],
    work_colors: [
        { required: true, message: '请输入工服颜色', trigger: 'blur' }
    ],
    uniform_color_proportion: [
        { required: true, message: '请输入颜色占比', trigger: 'blur' }
    ],
    shorts: [
        { required: true, message: '请输入是否识别短袖短裤', trigger: 'blur' }
    ],
    uniform_short_sleeve_confidence: [
        { required: true, message: '请输入短袖短裤相似度', trigger: 'blur' }
    ],
})
//人员聚集     
const infoRefMation = ref({
    frame_interval: [
        { required: true, message: '请输入帧间隔', trigger: 'blur' }
    ],
    intensive_frequency: [
        { required: true, message: '请输入相似度', trigger: 'blur' }
    ],
    intensive_score: [
        { required: true, message: '请输入报警频次', trigger: 'blur' }
    ],
    intensive_people_count: [
        { required: true, message: '请输入密集人数', trigger: 'blur' }
    ],
})

//烟火
const smokeRefInfo = ref({
    fire_frequency: [
        { required: true, message: '请输入帧间隔', trigger: 'blur' }
    ],
    fire_score: [
        { required: true, message: '请选择检测人员', trigger: 'blur' }
    ],
    camera_monitor_person: [
        { required: true, message: '请输入相似度', trigger: 'blur' }
    ],
    frame_interval: [
        { required: true, message: '请输入报警频次', trigger: 'blur' }
    ],
})

//渗漏油
const leakageRefInfo = ref({
    frame_interval: [
        { required: true, message: '请输入帧间隔', trigger: 'blur' }
    ],
    leakage_frequency: [
        { required: true, message: '请输入泄露报警频次', trigger: 'blur' }
    ],
    leakage_score: [
        { required: true, message: '请输入泄露相似度', trigger: 'blur' }
    ],
    leakage_min_area: [
        { required: true, message: '请输入泄露最小面积', trigger: 'blur' }
    ],
})



const rules = ref({
    patroldeviceCode: [
        { required: true, message: '请输入设备编码', trigger: 'blur' },
        { validator: stringlength1, trigger: 'blur' }
    ],
    patroldeviceName: [
        { required: true, message: '请选择设备名称', trigger: 'blur' },
        { validator: stringlength, trigger: 'blur' }
    ],
    areaId: [
        { required: true, message: '请选择区域', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '请输入设备类型', trigger: 'blur' }
    ],
    presetTime: [
        { pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'blur' }
    ],
    materialId: [
        { pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'blur' },
        { validator: stringlength3, trigger: 'blur' }


    ],

    videoMode: [
        { required: true, message: '请选择视频类型', trigger: 'blur' }
    ],
    useMode: [
        { required: true, message: '请选择使用类型', trigger: 'blur' }
    ],
    manufacturer: [
        { required: true, message: '请输入生产厂家', trigger: 'blur' }
    ],
    place: [
        { required: true, message: '请输入安装位置', trigger: 'blur' }
    ],
    ipaddr: [
        { required: true, message: '请输入以太网IP地址', pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, trigger: 'blur' }
    ],
    macaddr: [{
        message: '请输入正确的以太网Mac地址', pattern: /^[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}$/, trigger: 'blur'
    }],
    internationalId: [
        { required: true, message: '请输入国际编码', trigger: 'blur' },
        { validator: stringlength4, trigger: 'blur' }
    ],
    deviceModel: [
        { validator: stringlength2, trigger: 'blur' }
    ],
    // materialId
})
function stringlength(rule: any, value: any, callback: any) {
    if (value.length > 50) {
        return callback(new Error('字符最大长度不超过50'))
    }
    callback()
}
function stringlength1(rule: any, value: any, callback: any) {
    if (value.length > 40) {
        return callback(new Error('字符最大长度不超过40'))
    }
    callback()
}
function stringlength2(rule: any, value: any, callback: any) {
    if (!value) {
        return callback()
    }
    if (value.length > 50) {
        return callback(new Error('字符最大长度不超过50'))
    }
    callback()
}
function stringlength3(rule: any, value: any, callback: any) {
    if (!value) {
        return callback()
    }
    if (value.length > 20) {
        return callback(new Error('字符最大长度不超过20'))
    }
    callback()
}
function stringlength4(rule: any, value: any, callback: any) {
    if (!value) {
        return callback()
    }
    if (value.length > 40) {
        return callback(new Error('字符最大长度不超过40'))
    }
    callback()
}
const tabs = ref(1)
//弹窗关闭
const infoForm = ref()
function handleClose() {
    if (infoForm.value != null) infoForm.value.resetFields();
    dialogVisible.value = false;
}
function MonitorClose() { // 关闭监控设备
    axios.get(userStore.webApiMonitorUrl + '/api/play/stop/' + deviceId.value + '/' + channelId.value, {}).then((res: any) => { })
    urls.value = ""
    dialogMonitor.value = false
}
const dialogVisible = ref(false);
const title = ref("");
const VideoMode = ref()
const CameraType = ref()
const manufacturerList: any = ref([])


const PatrolEquipmentType: any = ref([])
function addClick() {

    isOnline.value = false
    tabs.value = 1
    activeName.value = 'first'
    disableds.value = 0
    ExecutionOrder.value = ''
    info.value = {
        patroldeviceCode: '',
        patroldeviceName: '',
        type: '',
        videoMode: '',
        useMode: '',
        deviceModel: '',
        useUnit: '',
        deviceSource: '',
        productionDate: '',
        productionCode: '',
        manufacturer: '',
        place: '',
        ipaddr: '',
        macaddr: '',
        preset: '',
        custom1: '',
        presetTime: '10',
        materialId: '',
        internationalId: '',
        areaId: '',
        areaName: '',
        stationId: '',
        stationName: '',
        rtspurl: '',
        robotsCode: ''
    }
    checkedlist.value = []
    infoAll.value = {
        type: 'ryxw',
        frame_interval: '20',
        check_enter: false,
    }
    // 烟火value
    smokeInfo.value = {
        type: 'hzyw',
        frame_interval: '20',
    }
    //渗漏value
    leakageInfo.value = {
        type: 'sly_dmyw',
        frame_interval: '20',
    }
    title.value = "新增巡视设备";
    dialogVisible.value = true;
    getRobotListInit(value.value)
    notification()
}
// 获取弹窗所需数据
const SilentMonitoringType: any = ref([])
function notification() {
    //静默监视类型
    const paramsSilent = {
        dictcode: 'SilentMonitoringType'
    }
    getDeviceByType(paramsSilent).then((res: any) => {
        SilentMonitoringType.value = res.data
    })


    //表计类型和辅助设施类型
    getDeviceByType({ dictcode: 'PatrolEquipmentType' }).then((res: any) => {
        const PatrolEquipment: any = ref([])
        res.data.forEach((element: any) => {
            if (element.itemcode == 10 || element.itemcode == 11) {
                PatrolEquipment.value.push(element)
            }
        });
        PatrolEquipmentType.value = Array.from(new Set(PatrolEquipment.value))
    })
    getDeviceByType({ dictcode: 'VideoMode' }).then((res: any) => {
        VideoMode.value = res.data
    })
    getDeviceByType({ dictcode: 'CameraType' }).then((res: any) => {
        CameraType.value = res.data
    })
    if (ExecutionOrder.value) {
        typeall(ExecutionOrder.value)
    }
}
//设备类型关联
const disableds = ref(0)
function typeall(val: any) {
    PatrolEquipmentType.value.forEach((res: any) => {
        if (val == res.itemcode) {
            disableds.value = res.custom2
        }
    })
}
//获取变电站下的区域
const areaList: any = ref([])
function GetArea() {
    optionSelect.value.forEach((element: any) => {
        if (element.stationId == info.value.stationId) {
            info.value.stationCode = element.stationCode
        }
    });
    const parmas = {
        stationCode: info.value.stationCode
    }
    getArea(parmas).then((res: any) => {
        areaList.value = res.data
    })
}
//修改
const ExecutionOrder = ref()
const infoall: any = ref({})
const isOnline = ref(false)
const videoNolie = ref()
function handleEdit(row: any) {
    videoNolie.value = row.online
    if (row.channelinfo) {
        visibleLight.value = {
            channel_type: '1',
            channel_code: '',
            channel_rtspurl: '',
            assist_rtspurl: '',
            from_device: '',
            recorder_code: '',
            recorder_channelcode: ''
        }
        infrared.value = {
            channel_type: '2',
            channel_code: '',
            channel_rtspurl: '',
            from_device: '',
            recorder_code: '',
            recorder_channelcode: '',
            pan_code: '',
            pan_channelcode: ''
        }
        var channeLinfo = []
        channeLinfo = JSON.parse(row.channelinfo)
        channeLinfo.forEach((element: any) => {
            if (element.channel_type == 1) {
                if (element.from_device == '2') {
                    checked1.value = true
                } else if (element.from_device == '1') {
                    checked1.value = false
                }
                visibleLight.value = element
            } else if (element.channel_type == 2) {
                if (element.from_device == '2') {
                    checked2.value = true
                } else if (element.from_device == '1') {
                    checked2.value = false
                }
                infrared.value = element

            }
        });
    }
    row.online == 1 ? isOnline.value = true : isOnline.value = false
    for (let i = 0; i < SilentMonitoringType.value.length; i++) {
        SilentMonitoringType.value[i].checkInfo = false
    }
    checkedlist.value = []
    tabs.value = 1
    activeName.value = 'first'
    ExecutionOrder.value = row.type
    notification()
    title.value = "修改巡视设备";

    dialogVisible.value = true;
    infoall.value = JSON.parse(JSON.stringify(row))
    info.value = infoall.value
    getRobotListInit(info.value.stationId)
    GetArea()
    if (row.slienceType != '') {
        checkedlist.value = row.slienceType.split(",")
        infoAll.value = {
            type: 'ryxw',
            frame_interval: '20',
            check_enter: false,
        }
        smokeInfo.value = {
            type: 'hzyw',
            frame_interval: '20',
        }
        leakageInfo.value = {
            type: 'sly_dmyw',
            frame_interval: '20',
        }
    } else {
        infoAll.value = {
            type: 'ryxw',
            frame_interval: '20',
            check_enter: false,
        }
        smokeInfo.value = {
            type: 'hzyw',
            frame_interval: '20',
        }
        leakageInfo.value = {
            type: 'sly_dmyw',
            frame_interval: '20',
        }
    }
    if (row.slienceParams != '') {
        if (typeof row.slienceParams != 'object') {
            row.slienceParams = JSON.parse(row.slienceParams)
        }

    }
    for (let i = 0; i < checkedlist.value.length; i++) {

        if (checkedlist.value[i] == 'ryxw') { // 未带安全帽

            row.slienceParams.forEach((res: any) => {
                if (res.type == 'ryxw') {
                    infoAll.value = res
                    if (infoAll.value.check_enter == 1) {
                        infoAll.value.check_enter = true
                    } else if (infoAll.value.check_enter == 0) {
                        infoAll.value.check_enter = false
                    }
                }
            });
        }
        if (checkedlist.value[i] == 'hzyw') { // 烟火
            row.slienceParams.forEach((res: any) => {
                if (res.type == 'hzyw') {
                    smokeInfo.value = res

                }
            })

        }

        if (checkedlist.value[i] == 'sly_dmyw') { // 渗漏油
            row.slienceParams.forEach((res: any) => {
                if (res.type == 'sly_dmyw') {
                    leakageInfo.value = res
                }
            })
        }

        if (checkedlist.value[i] == 'xdwcr') { // 小动物

        }
        if (checkedlist.value[i] == 'yw_gkxfw') { // 异物

        }
    }
}
function GetSafety() {
    tabs.value = 2
    SilentMonitoringType.value.forEach((element: any) => {
        checkedlist.value.forEach((res: any) => {
            if (res == element.itemcode) {
                element.checkInfo = true
            }
        });
    });
}
const infoRefAlls = ref()
const clothesRefInfoAlls = ref()
const infoRefMations = ref()
const smokeRefInfos = ref()
const leakageRefInfos = ref()
//新增弹窗-基本信息-确定
function confirmClick(formEl: any) {
    infoRefAlls.value.validate((valid1: any) => {
        if (valid1) {
            smokeRefInfos.value.validate((valid4: any) => {
                if (valid4) {
                    leakageRefInfos.value.validate((valid5: any) => {
                        if (valid5) {
                            formEl.validate((valid: any) => {
                                if (valid) {
                                    if (info.value.areaId != '') {
                                        areaList.value.forEach((element: any) => {
                                            if (element.areaId == info.value.areaId) {
                                                info.value.areaName = element.areaName
                                            }
                                        });
                                    } else {
                                        info.value.areaId = allName.value.areaId
                                        info.value.areaName = allName.value.name
                                    }
                                    if (info.value.stationId != '') {
                                        optionSelect.value.forEach((element: any) => {
                                            if (element.stationId == info.value.stationId) {
                                                info.value.stationName = element.stationName
                                                info.value.stationCode = element.stationCode
                                            }
                                        });
                                    } else {
                                        info.value.stationId = allName.value.stationId
                                        info.value.stationName = allName.value.stationName
                                        info.value.stationCode = allName.value.stationCode
                                    }


                                    info.value['slienceType'] = checkedlist.value.toString()
                                    const dataArr: any = []
                                    for (let i = 0; i < checkedlist.value.length; i++) {
                                        if (checkedlist.value[i] == 'ryxw') { // 未带安全帽
                                            if (infoAll.value.check_enter == true) {
                                                infoAll.value.check_enter = 1
                                            } else if (infoAll.value.check_enter == false) {
                                                infoAll.value.check_enter = 0
                                            }
                                            dataArr.push(infoAll.value)
                                        }
                                        if (checkedlist.value[i] == 'hzyw') { // 烟火

                                            dataArr.push(smokeInfo.value)
                                        }
                                        if (checkedlist.value[i] == 'sly_dmyw') { // 渗漏油

                                            dataArr.push(leakageInfo.value)
                                        }
                                        if (checkedlist.value[i] == 'xdwcr') { // 小动物

                                        }
                                        if (checkedlist.value[i] == 'yw_gkxfw') { // 异物

                                        }
                                    }
                                    var channElinfo = []
                                    if (checked1.value == true) {
                                        visibleLight.value.from_device = '2'
                                        visibleLight.value.channel_rtspurl = ''
                                        visibleLight.value.assist_rtspurl = ''
                                        visibleLight.value.channel_code = ''
                                    } else {
                                        visibleLight.value.from_device = '1'
                                        visibleLight.value.recorder_code = ''
                                        visibleLight.value.recorder_channelcode = ''
                                    }
                                    if (checked2.value == true) {
                                        infrared.value.from_device = '2'
                                        infrared.value.channel_rtspurl = ''
                                        infrared.value.channel_code = ''
                                        infrared.value.pan_code = ''
                                        infrared.value.pan_channelcode = ''
                                    } else {
                                        infrared.value.from_device = '1'
                                        infrared.value.recorder_code = ''
                                        infrared.value.recorder_channelcode = ''
                                    }
                                    if (visibleLight.value.recorder_code != '' && checked1.value == true || visibleLight.value.channel_rtspurl != '' && visibleLight.value.assist_rtspurl != '' && checked1.value == false || visibleLight.value.channel_code != '' && checked1.value == false || visibleLight.value.recorder_channelcode != '' && checked1.value == true) {
                                        channElinfo.push(visibleLight.value)
                                    }
                                    if (infrared.value.recorder_code != '' && checked2.value == true || infrared.value.channel_rtspurl != '' && checked2.value == false || infrared.value.channel_code != '' && checked2.value == false || infrared.value.recorder_channelcode != '' && checked2.value == true || infrared.value.pan_code != '' && checked2.value == false || infrared.value.pan_channelcode != '' && checked2.value == false) {
                                        channElinfo.push(infrared.value)
                                    }
                                    info.value['slienceParams'] = JSON.stringify(dataArr)
                                    info.value['channelinfo'] = JSON.stringify(channElinfo)
                                    if (info.value.patroldeviceId) {
                                        editPosition(info.value).then((res: any) => {
                                            if (res.code == 0) {
                                                dialogVisible.value = false;
                                                ElMessage({
                                                    type: 'success',
                                                    message: '修改成功',
                                                })
                                                getData()
                                                dataArr.lenght = 0
                                            }

                                        })

                                    } else {
                                        addPosition(info.value).then((res: any) => {
                                            if (res.code == 0) {
                                                ElMessage({

                                                    type: 'success',
                                                    message: '添加成功',
                                                })
                                                cameraId.value = res.data
                                                dialogVisible.value = false;
                                                getData()
                                                dataArr.lenght = 0
                                            }


                                        })
                                    }
                                }
                            })
                        }
                    })


                }
            })


        }
    })
}
const cameraId = ref()
//提交安全帽信息
const infoAll: any = ref({
    type: 'ryxw ',
    frame_interval: '20',
    check_enter: false,
})

//提交烟火信息
const smokeInfo: any = ref({
    type: 'hzyw',
    frame_interval: '',

})
//提交渗漏油信息
const leakageInfo: any = ref({
    type: 'sly_dmyw',
    frame_interval: '',

})
// 颜色选择
const safety = ref([
    {
        id: '1',
        value: 'yellow',
        label: '黄',
    },
    {
        id: '2',
        value: 'white',
        label: '白',
    },
    {
        id: '3',
        value: 'red',
        label: '红',
    },
    {
        id: '4',
        value: 'blue',
        label: '蓝',
    },
    {
        id: '5',
        value: 'orange',
        label: '橙',
    },
])
//静默监视配置
const checkedlist: any = ref([])
function checkchange(val: any) {
    checkedlist.value = []
    SilentMonitoringType.value.forEach((res: any) => {
        if (res.checkInfo == true) {
            checkedlist.value.push(res.itemcode)
        }
    })
}

//获取用户列表信息
onMounted(() => {
    // 生成厂家
    const dictcode = {
        dictcode: 'ManuFacturer'
    }
    getDeviceByType(dictcode).then((res: any) => {
        if (res.data != undefined) {
            manufacturerList.value = res.data
        }
    })
    getSelect();
});


function checkSelectable(row: any) {
    return row.datastatus == 0
}

const dialogMonitor = ref(false);
const videofmp4 = ref('')
function monitorClick(row: any, index: any) {
    patroldeviceId.value = row.patroldeviceId
    preset.value = row.preset
    presettime.value = row.presettime
    urls.value = ""
    beforehandPosition.value = 1
    MonitorTile.value = row.patroldeviceName
    info.value = row
    if (row.channelList[index].deviceid != undefined) {
        deviceId.value = row.channelList[index].deviceid
        channelId.value = row.channelList[index].channelid
    } else {
        deviceId.value = row.channelList[index].deviceId
        channelId.value = row.channelList[index].channelId
    }

    axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + deviceId.value + '/' + channelId.value, {}).then((res: any) => {
        if (res.data.data != undefined) {
            urls.value = res.data.data.ws_flv
            videofmp4.value = res.data.data.fmp4

        } else {

            urls.value = ""
        }
    }).catch(function (error: any) {
    })

    dialogMonitor.value = true
}
const urls = ref("")

const MonitorTile = ref("")

const beforehandPosition = ref(1) // 预置位参数
const deviceId = ref("")  // 摄像头国标编号
const channelId = ref("") // 通道国标编号
const controSpeed = ref(100) // 摄像头转动速度默认值 30
function ptzCamera(command: any) { // 监控视频控制方法
    isGaoliang.value = command
    axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + info.value.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
        if (res.data.data == "0") {
            axios.post(userStore.webApiMonitorUrl + '/api/ptz/control/' + deviceId.value + '/' + channelId.value + '?command=' + command +
                '&horizonSpeed=' + controSpeed.value + '&verticalSpeed=' + controSpeed.value + '&zoomSpeed=' + controSpeed.value, {}).then((res: any) => { })
        }
    })
}
function presetPosition(cmdCode: any, presetPos: any) { // 预置位操作 ---设置、删除、调用
    axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + info.value.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
        if (res.data.data == "0") {
            axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode + '&parameter1=0&parameter2=' + presetPos + '&combindCode2=0', {}).then((res: any) => { })
        }
    })

}
const isLighting = ref("0")
function lightingClick(row: any) { // 灯光方法 
    axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + info.value.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
        if (res.data.data == "0") {
            axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=10&parameter1=' + isLighting.value + '&parameter2=128&combindCode2=0', {}).then((res: any) => { })
        }
    })

}
const isInfrared = ref("0")
function infraredClick(row: any) { // 红外方法
    axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + info.value.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
        if (res.data.data == "0") {
            axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=13&parameter1=' + isInfrared.value + '&parameter2=128&combindCode2=0', {}).then((res: any) => { })
        }
    })

}
const isWiper = ref("0")
function WiperClick(row: any) { // 雨刷方法
    axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + info.value.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
        if (res.data.data == "0") {
            axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=1&parameter1=0&parameter2=0&combindCode2=' + isWiper.value, {}).then((res: any) => { })
        }
    })

}

const dialogVideo = ref(false)
function VideoClose() {
    axios.get(userStore.webApiMonitorUrl + '/api/play/stop/' + deviceId.value + '/' + channelId.value, {}).then((res: any) => { })
    urls.value = ""
    dialogVideo.value = false
}
function quxiao() {
    isGaoliang.value = ''
}
function condensationChang(command: any) { // 光聚方法  
    // 近（42H ）    66    远（41H） 65
    const cmdCode = ref()
    if (command == '加') {
        cmdCode.value = 65
        isGaoliang.value = '65'
    } else if (command == '减') {
        isGaoliang.value = '66'
        cmdCode.value = 66
    }
    axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + info.value.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
        if (res.data.data == "0") {
            axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode.value + '&parameter1=80&parameter2=0&combindCode2=0', {}).then((res: any) => { })
        }
    })

}
function apertureChang(command: any) { // 光圈方法
    // 缩小（48H ）    72    放大（44H） 70
    const cmdCode = ref(72)
    if (command == '加') {
        cmdCode.value = 70
        isGaoliang.value = '70'
    } else if (command == '减') {
        cmdCode.value = 72
        isGaoliang.value = '72'
    }

    axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + info.value.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
        if (res.data.data == "0") {
            axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode.value + '&parameter1=0&parameter2=80&combindCode2=0', {}).then((res: any) => { })
        }
    })
}
function saveMonitorClick() {
    info.value.preset = beforehandPosition.value
    dialogVideo.value = false
}
function videoRefresh() {
    urls.value = urls.value + '?Math=' + Math.random()
}
function currency(list: any, itemcode: any) {
    if (list == undefined) {
        return ''
    }
    let dictname = ''
    list.forEach((element: any) => {
        if (element.itemcode == itemcode) {
            dictname = element.dictname
        }
    })
    return dictname
}
const isMaintenanceArea = ref(false)
const Custom3 = ref()
const AngleUrl = ref()
const areaName = ref()
function maintenanceArea(name: string) {
    Custom3.value = ''
    areaName.value = name
    AngleUrl.value = userStore.webApiBaseUrl + "/snapandviewimage?devicecode=" + info.value.channelList[0].deviceId + "&channelcode=" + info.value.channelList[0].channelId
    isMaintenanceArea.value = true
    let custom3 = ''
    if (name == 'ryxw') {
        custom3 = infoAll.value.effectiveArea
    } else if (name == 'hzyw') {
        custom3 = smokeInfo.value.effectiveArea
    } else if (name == 'sly_dmyw') {
        custom3 = leakageInfo.value.effectiveArea
    }
    if (Custom3 != null) Custom3.value = JSON.parse(custom3)
}
function closeMaintenanceArea(e: any) {
    if (e.custom3 != '[]' && e.custom3 != null) {
        let params: any = {}
        if (areaName.value == 'ryxw') {
            params.id = infoAll.value.id
            params.type = 'ryxw'
        } else if (areaName.value == 'hzyw') {
            params.id = smokeInfo.value.id
            params.type = 'hzyw'
        } else if (areaName.value == 'sly_dmyw') {
            params.id = leakageInfo.value.id
            params.type = 'sly_dmyw'
        }
        params.effecttivearea = e.custom3
        setEffectiveArea(params).then((res: any) => {
            if (areaName.value == 'ryxw') {
                infoAll.value.effectiveArea = e.custom3
            } else if (areaName.value == 'hzyw') {
                smokeInfo.value.effectiveArea = e.custom3
            } else if (areaName.value == 'sly_dmyw') {
                leakageInfo.value.effectiveArea = e.custom3
            }
            ElMessage({
                type: "success",
                message: "修改成功"
            })
        })
    }
    isMaintenanceArea.value = false
}
//导出
function exportDevice() {

    const params = {
        type: 10,
        stationId: value.value
    }
    loading.value = true
    exportPatrolDeviceList(params).then((response: any) => {
        loading.value = false
        downloadFile(response, '摄像机台账', 'xlsx')
    }).catch(() => {
        loading.value = false
    });
}
const preset = ref()
const presettime = ref()
const patroldeviceId = ref()
function Position() {
    const params = {
        patroldeviceId: patroldeviceId.value,
        preset: preset.value,
        presetTime: presettime.value,
    }
    editPosition(params).then((res: any) => {
        if (res.code == 0) {
            dialogVisible.value = false;
            ElMessage({
                type: 'success',
                message: '设置成功',
            })
            getData()
        }

    })
}
const elMessage = ref()
//通道设置
// 可见光
const checked1 = ref(false)
const checked2 = ref(false)
const visibleLights = ref()
const visibleLight = ref({
    channel_type: '1',
    channel_code: '',
    channel_rtspurl: '',
    from_device: '',
    recorder_code: '',
    recorder_channelcode: '',
    assist_rtspurl: '',

})
const infrareds = ref()
const infrared = ref({
    channel_type: '2',
    channel_code: '',
    channel_rtspurl: '',
    from_device: '',
    recorder_code: '',
    recorder_channelcode: '',
    pan_code: '',
    pan_channelcode: ''

})
const vMove = {
    mounted(el: any) {
        el.onmousedown = function (e: any) {
            var init = e.clientX;
            var parent: any = document.getElementById("silderLeft");
            const initWidth: any = parent.offsetWidth;
            document.onmousemove = function (e) {
                var end = e.clientX;
                var newWidth = end - init + initWidth;
                parent.style.width = newWidth + "px";
            };
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            };
        };
    }
}
const harddisk: any = ref([])
const goLoading: any = ref(false)
function HardDisk() {
    tabs.value = 4
    if (videoNolie.value == '0') {
        harddisk.value.length = 0
        return false
    }
    goLoading.value = true

    getDvrStorageStatus({ rtspUrl: info.value.rtspurl }).then((res: any) => {
        goLoading.value = false
        if (res.code == 0) {
            harddisk.value.length = 0
            harddisk.value.push(res.data)
        }
    })
}
const robotList: any = ref([])
function getRobotListInit(stationId: any) {
    let params = {
        stationId: stationId,
        patroldeviceName: '',
        type: '1,2,3,13'
    }

    getRobotList(params).then((res: any) => {
        robotList.value = res.data
    })
}

const activeName = ref('first')
const handleClick1 = (tab: TabsPaneContext, event: Event) => {
}
const isGaoliang: any = ref("")
const statusList = ref([
    {
        id:1,
        name:'在线'
    },
    {
        id:0,
        name:'离线'
    }
])
</script>

<template>
    <div style="height: 15px;"></div>
    <div class="faulttemplate-box">
        <Eldialog v-if="dialogVisible" :title="title" :zIndex="2000" :width="'1180px'" :height="'600px'"
            @before-close="handleClose">
            <template v-slot:PopFrameContent>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick1">
                    <el-tab-pane label="基本信息" name="first">
                        <div class="tabbas1-toner">
                            <el-form ref="infoForm" :model="info" label-width="90px"
                                style="display: flex; flex-wrap: wrap;margin: 5px;" :rules="rules">
                                <el-form-item label="设备编码" style="width:50%" prop="patroldeviceCode">
                                    <el-input v-model="info.patroldeviceCode" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入设备编码"></el-input>
                                </el-form-item>
                                <el-form-item label="设备名称" style="width:50%" prop="patroldeviceName">
                                    <el-input v-model="info.patroldeviceName" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入设备名称"></el-input>
                                </el-form-item>
                                <el-form-item v-if="infoall.stationId == ''" label="变电站" style="width:50%"
                                    prop="areaId">
                                    <el-select v-model="info.stationId" placeholder="请选择变电站" style="width: 90%"
                                        @change="typeall, GetArea()">
                                        <el-option v-for="item in optionSelect" :key="item.stationId"
                                            :label="item.stationName" :value="item.stationId" style="width:90%" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="areaId == undefined || infoall.areaId == ''" label="区域"
                                    style="width:50%" prop="areaId">
                                    <el-select v-model="info.areaId" placeholder="请选择区域" style="width: 90%"
                                        :disabled="info.stationId == ''">
                                        <el-option v-for="item in areaList" :key="item.areaId" :label="item.areaName"
                                            :value="item.areaId" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="设备类型" style="width:50%" prop="type">
                                    <el-select v-model="info.type" placeholder="请选择设备类型" style="width: 92%"
                                        @change="typeall">
                                        <el-option v-for="item in PatrolEquipmentType" :key="item.id"
                                            :label="item.dictname" :value="item.itemcode" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="视频类型" style="width:50%">
                                    <el-select v-model="info.videoMode" placeholder="请选择视频类型" style="width: 92%">
                                        <el-option v-for="item in VideoMode" :key="item.id" :label="item.dictname"
                                            :value="item.itemcode" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="使用类型" style="width:50%">
                                    <el-select v-model="info.useMode" placeholder="请选择使用类型" style="width: 92%">
                                        <el-option v-for="item in CameraType" :key="item.id" :label="item.dictname"
                                            :value="item.itemcode" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="设备型号" style="width:50%" prop="deviceModel">
                                    <el-input v-model="info.deviceModel" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入设备型号"></el-input>
                                </el-form-item>
                                <el-form-item label="使用单位" style="width:50%">
                                    <el-input v-model="info.useUnit" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入使用单位"></el-input>
                                </el-form-item>
                                <el-form-item label="设备来源" style="width:50%">
                                    <el-input v-model="info.deviceSource" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入设备来源"></el-input>
                                </el-form-item>
                                <el-form-item label="生产日期" style="width:50%">
                                    <div class="block" style="width: 92%;">
                                        <el-date-picker v-model="info.productionDate" type="date" placeholder="请选择"
                                            value-format="YYYY-MM-DD" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="出厂编号" style="width:50%">
                                    <el-input v-model="info.productionCode" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入出厂编号"></el-input>
                                </el-form-item>
                                <el-form-item label="生产厂家" style="width:50%" prop="manufacturer">
                                    <el-select v-model="info.manufacturer" placeholder="请选择生产厂家" style="width: 92%">
                                        <el-option v-for="item in manufacturerList" :key="item.id"
                                            :label="item.dictname" :value="item.itemcode" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="安装位置" style="width:50%" prop="place">
                                    <el-input v-model="info.place" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入安装位置"></el-input>
                                </el-form-item>
                                <el-form-item label="摄像头流地址" style="width:50%">
                                    <el-input v-model="info.rtspurl" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入摄像头流地址"></el-input>
                                </el-form-item>
                                <el-form-item label="以太网IP地址" style="width:50%" prop="ipaddr">
                                    <el-input v-model="info.ipaddr" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入以太网IP地址"></el-input>
                                </el-form-item>
                                <el-form-item label="以太网Mac地址" prop="macaddr" style="width:50%">
                                    <el-input v-model="info.macaddr" style="width: 90%;margin-left: 8px;"
                                        placeholder="以太网Mac地址"></el-input>
                                </el-form-item>
                                <el-form-item label="实物id" style="width:50%;" prop="materialId">
                                    <el-input v-model="info.materialId" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入实物id"></el-input>

                                </el-form-item>
                                <el-form-item label="国际编码" style="width:50%;" prop="internationalId">
                                    <el-input v-model="info.internationalId" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入国际编码"></el-input>

                                </el-form-item>
                                <el-form-item label="静默监视点位" style="width:50%;">
                                    <el-input v-model="info.custom2" style="width: 90%;margin-left: 8px;"
                                        placeholder="请输入静默监视点位名称"></el-input>

                                </el-form-item>
                                <el-form-item label="所属机器人" style="width:50%;">
                                    <el-select v-model="info.robotsCode" placeholder="请选择所属机器人" style="width: 92%">
                                        <el-option v-for="item in robotList" :key="item.patroldeviceCode"
                                            :label="item.patroldeviceName" :value="item.patroldeviceId" />
                                    </el-select>

                                </el-form-item>
                                <el-form-item label="备注信息"
                                    style="width:100%;display:flex;align-items:flex-start !important;">
                                    <el-input type="textarea" v-model="info.custom1"
                                        :autosize="{ minRows: 2, maxRows: 8 }" style="width: 96% ;margin-left: 8px;"
                                        placeholder="请输入备注信息"></el-input>
                                </el-form-item>
                            </el-form>
                            <span class="dialog-footer"
                                style="width: 100%;margin: auto; display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content:center;margin: 10px 0px;">

                                <div class="details-button" @click="handleClose">取消</div>
                                <div class="details-button" @click="confirmClick(infoForm)">确定</div>
                            </span>
                        </div>
                    </el-tab-pane>
                 
                    <el-tab-pane v-if="info.type == 10 || info.type == ''" label="通道设置" name="third">
                        <div>
                            <div style="height: 562px;">
                                <div style="display: flex;align-items: center;margin-top: 20px;">
                                    <div style="width: 5px;height: 15px;background: #409eff;"></div>
                                    <div
                                        style="margin-left:15px;font-family: 'Arial Negreta', 'Arial Normal', 'Arial'; font-weight: 700; font-style: normal; font-size: 16px;color: #409eff;">
                                        可见光设置</div>
                                </div>
                                <div>
                                    <el-form :model="visibleLight" label-width="90px" ref="visibleLights"
                                        :rules="leakageRefInfo" style="display: flex; flex-wrap: wrap;">
                                        <el-form-item label="通道编号" style="width:100%;position:relative">
                                            <el-input :disabled="checked1 == true" v-model="visibleLight.channel_code"
                                                style="width: 90%;margin-left: 8px;" placeholder="请输入通道编号"></el-input>
                                        </el-form-item>
                                        <el-form-item label="RTSP主码流地址" style="width:100%;">
                                            <el-input :disabled="checked1 == true"
                                                v-model="visibleLight.channel_rtspurl"
                                                style="width: 100%;margin-left: 8px;"
                                                placeholder="请输入RTSP流地址"></el-input>
                                        </el-form-item>
                                        <el-form-item label="RTSP辅码流地址" style="width:100%;">
                                            <el-input :disabled="checked1 == true" v-model="visibleLight.assist_rtspurl"
                                                style="width: 100%;margin-left: 8px;"
                                                placeholder="请输入RTSP流地址"></el-input>
                                        </el-form-item>
                                        <el-form-item label="来源" style="width:100%;">
                                            <el-checkbox v-model="checked1" label="录像机" size="large"
                                                style="margin-left: 8px;" />
                                        </el-form-item>
                                        <el-form-item label="录像机编号" style="width:50%;">
                                            <el-input :disabled="checked1 == false" v-model="visibleLight.recorder_code"
                                                style="width: 77%;margin-left: 8px;" placeholder="录像机编号"></el-input>
                                        </el-form-item>
                                        <el-form-item label="录像通道编号" style="width:50%;">
                                            <el-input :disabled="checked1 == false"
                                                v-model="visibleLight.recorder_channelcode"
                                                style="width: 77%;margin-left: 8px;" placeholder="录像通道编号"></el-input>
                                        </el-form-item>
                                    </el-form>

                                </div>
                                <div style="display: flex;align-items: center;margin-top: 20px;">
                                    <div style="width: 5px;height: 15px;background: #409eff;"></div>
                                    <div
                                        style="margin-left:15px;font-family: 'Arial Negreta', 'Arial Normal', 'Arial'; font-weight: 700; font-style: normal; font-size: 16px;color: #409eff;">
                                        红外设置</div>
                                </div>
                                <div>
                                    <el-form :model="infrared" label-width="90px" ref="infrareds"
                                        :rules="leakageRefInfo" style="display: flex; flex-wrap: wrap;">
                                        <el-form-item label="通道编号" style="width:100%;position:relative">
                                            <el-input :disabled="checked2 == true" v-model="infrared.channel_code"
                                                style="width: 90%;margin-left: 8px;" placeholder="请输入通道编号"></el-input>
                                        </el-form-item>
                                        <el-form-item label="RTSP流地址" style="width:100%;">
                                            <el-input :disabled="checked2 == true" v-model="infrared.channel_rtspurl"
                                                style="width: 90%;margin-left: 8px;"
                                                placeholder="请输入RTSP流地址"></el-input>
                                        </el-form-item>
                                        <el-form-item label="云台编号" style="width:50%;">
                                            <el-input :disabled="checked2 == true" v-model="infrared.pan_code"
                                                style="width: 77%;margin-left: 8px;" placeholder="请输入云台编号"></el-input>
                                        </el-form-item>
                                        <el-form-item label="云台通道编号" style="width:50%;">
                                            <el-input :disabled="checked2 == true" v-model="infrared.pan_channelcode"
                                                style="width: 77%;margin-left: 8px;" placeholder="请输入云台通道编号"></el-input>
                                        </el-form-item>

                                        <el-form-item label="来源" style="width:100%;">
                                            <el-checkbox v-model="checked2" label="录像机" size="large"
                                                style="margin-left: 8px;" />
                                        </el-form-item>
                                        <el-form-item label="录像机编号" style="width:50%;">
                                            <el-input :disabled="checked2 == false" v-model="infrared.recorder_code"
                                                style="width: 77%;margin-left: 8px;" placeholder="录像机编号"></el-input>
                                        </el-form-item>
                                        <el-form-item label="录像通道编号" style="width:50%;">
                                            <el-input :disabled="checked2 == false"
                                                v-model="infrared.recorder_channelcode"
                                                style="width: 77%;margin-left: 8px;" placeholder="录像通道编号"></el-input>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </div>

                            <span class="dialog-footer"
                                style="width: 100%;margin: auto; display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;margin: 20px 0px 10px 0px;">

                                <div class="details-button" @click="handleClose">取消</div>
                                <div class="details-button" @click="confirmClick(infoForm)">确定</div>
                            </span>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane v-if="info.type == 11" label="硬盘信息" name="fourth">
                        <div style="height: 639px;">
                            <el-table v-loading="goLoading" :data="harddisk" style="width: 100%;height: calc(100vh - 370px) ;margin-top:10px;
                        overflow: auto;margin-bottom: 15px;" row-key="id" default-expand-all
                                :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
                                <el-table-column type="index" label="序号" width="80px" align="center" />
                                <el-table-column label="总容量" prop="dwCapacity">
                                    <template #default="scope">
                                        <span>{{ scope.row.dwCapacity }}GB</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="已用容量">
                                    <template #default="scope">
                                        <span>{{ scope.row.usedSpace }}GB</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="已用百分比" align="center">
                                    <template #default="scope">
                                        <span>{{ scope.row.rate }}%</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="硬盘状态" prop="dwHdStatus">
                                    <template #default="scope">
                                        <span v-if="scope.row.dwHdStatus == 0">正常</span>
                                        <span v-if="scope.row.dwHdStatus == 1">未格式化</span>
                                        <span v-if="scope.row.dwHdStatus == 2">错误</span>
                                        <span v-if="scope.row.dwHdStatus == 3">SMART状态</span>
                                        <span v-if="scope.row.dwHdStatus == 4">不匹配</span>
                                        <span v-if="scope.row.dwHdStatus == 5">休眠</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>


            </template>
        </Eldialog>
        <aside id="silderLeft">
            <div class="displayflex"
                style="margin: 0;padding-left: 8px;height: 30px;margin-top:10px;margin-bottom:10px;">
                <div class="line"></div>
                <div class="title" style="font-size: 14px;">数据列表</div>
            </div>
            <el-select v-model="value" placeholder=""
                style="width: 98% !important;  display: flex; justify-content: center" @change="getTree">
                <el-option v-for="item in optionSelect" :key="item.stationId" :label="item.stationName"
                    :value="item.stationId" style="width:100%" />
            </el-select>
            <el-scrollbar height="calc(80vh)" style="width:99%;">
                <el-tree ref="treeRef"
                    :class="useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'"
                    node-key="areaId" :data="treedata" :current-node-key="currentNodeKey" :highlight-current="true"
                    :props="defaultProps" v-loading="treeloading" @node-click="handleNodeClick">
                </el-tree>
            </el-scrollbar>
            <div class="moveBtn" v-move>
                <div class="moveBtn-line" v-move></div>
            </div>
        </aside>
        <section class="silderRight">
            <div
                style="display: flex;display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between;  margin:15px 0px">
                <div style="display: flex;display: -webkit-flex; align-items: center;">

                    <el-input v-model="deviceName" clearable placeholder="请输入设备名称" @clear="getData()"
                        @keyup.enter="getData()" style="margin-right:10px ;width: 185px;" />
                    <el-select clearable v-model="paramstable.type" placeholder="设备类型"
                        style="margin-right:10px ;width: 25%;" @visible-change="notification" @change="getData()">
                        <el-option v-for="item in PatrolEquipmentType" :key="item.id" :label="item.dictname"
                            :value="item.itemcode" />
                    </el-select>
                    <el-input v-model="deviceModel" clearable placeholder="请输入设备型号" @clear="getData()"
                        @keyup.enter="getData()" style="margin-right:10px ;width: 185px;" />
                    <el-select v-model="manufacturer" placeholder="请选择生产厂家" style="margin-right: 10px;"
                        @change="getData()" clearable>
                        <el-option v-for="item in manufacturerList" :key="item.id" :label="item.dictname"
                            :value="item.itemcode" />
                    </el-select>
                    <el-select v-model="paramstable.online" placeholder="实时状态" style="margin-right: 10px;width: 140px;"
                        @change="getData()" clearable>
                        <el-option v-for="item in statusList" :key="item.id" :label="item.name"
                            :value="item.id" />
                    </el-select>
                    <el-button class="searchButton" type="primary" @click="getData()">搜索</el-button>
                    <el-button class="searchButton" @click="resetting()">重置</el-button>
                </div>
                <div style="display: flex;align-items: center;">
                    <el-checkbox v-model="flag" style="margin-right:10px;" @change="getData()">新注册摄像头</el-checkbox>
                    <el-button class="searchButton" type="primary" @click="exportDevice()" style="margin-right: 10px;">
                        导出</el-button>
                    <el-button class="searchButton" v-hasPerm="['add:patroldevice']" type="primary" @click="addClick"
                        :disabled="treedata.length == 0 || disabled || flag == true"> 新增</el-button>
                    <!-- <el-button type="primary" @click="addClick"><img style="margin-right:5px;"
                                                src="@/assets/MenuIcon/u429.png" alt=""> 导入</el-button> -->
                    <el-button class="searchButton" v-hasPerm="['del:patroldevice']" @click="delClick"
                        :disabled="deviceInfos.length == 0" :type="deviceInfos.length > 0 ? 'primary' : ''">
                        删除</el-button>
                </div>
            </div>
            <div class="draggable">
                <el-table v-loading="loading" :data="tableData" style="width: 100%;height: calc(75vh);
                        overflow: auto;margin-bottom: 15px;" row-key="id" @selection-change="handleSelectionChange"
                    default-expand-all :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                    <el-table-column type="selection" width="30" align="center" :selectable="checkSelectable" />
                    <el-table-column type="index" label="序号" width="50px" align="center" />
                    <el-table-column label="设备编码" prop="patroldeviceCode" align="center"></el-table-column>
                    <el-table-column label="设备名称" prop="patroldeviceName" align="center"></el-table-column>
                    <el-table-column label="设备类型" prop="typeName" width="80" align="center"></el-table-column>
                    <el-table-column label="设备型号" prop="deviceModel" align="center"></el-table-column>
                    <el-table-column label="设备来源" prop="deviceSource" align="center" width="80"></el-table-column>
                    <el-table-column label="生产厂家" prop="manufacturer" align="center" width="80">
                        <template #default="scope">
                            {{ currency(manufacturerList, scope.row.manufacturer) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="安装位置" prop="place" width="80" align="center"></el-table-column>
                    <el-table-column label="实时状态" width="100" prop="datastatus" align="center">
                        <template #default="scope">
                            <span style="color:#F24444" v-if="scope.row.online != 1">
                                <img src="@/assets/MenuIcon/u499.png" alt=""
                                    style="display: inline-block; margin: 0px 5px; ">离线

                            </span>
                            <span style="color:#F24444" v-else-if="scope.row.online == 1">
                                <span v-if="scope.row.online == 1" style="color:#00CC66"><img
                                        src="@/assets/newimg/u387.png" alt=""
                                        style="display: inline-block; margin: 0px 5px; "> 在线
                                </span>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="查看视频" width="100" prop="datastatus" align="center" fixed="right">
                        <template #default="scope">
                            <span v-if="scope.row.type == 11 && scope.row.channelList != undefined">
                                <span v-if="scope.row.channelList != undefined">
                                    <img v-if="scope.row.online == 1" src="@/assets/newimg/ht_yp.png" alt="" title=""
                                        style="margin:auto;display: inline-block;margin-left:15px;">
                                    <img v-else src="@/assets/newimg/ht_yp1.png" alt="" title=""
                                        style="margin:auto;display: inline-block;margin-left:15px;">
                                </span>
                            </span>

                            <span v-if="scope.row.type == 10 && scope.row.useMode == 10">
                                <span v-if="scope.row.channelList != undefined && scope.row.channelList.length == 1">
                                    <img v-if="scope.row.online == 1" src="@/assets/newimg/ht_qij.png" alt=""
                                        title="查看通道1" @click="monitorClick(scope.row, 0)"
                                        style="cursor: pointer;margin:auto;display: inline-block;margin-left:15px;">
                                    <img v-else src="@/assets/newimg/ht_qij1.png" alt="" title="离线通道1"
                                        style="margin:auto;display: inline-block;margin-left:15px;">
                                </span>

                                <span v-if="scope.row.channelList != undefined && scope.row.channelList.length == 2">
                                    <img v-if="scope.row.online == 1" src="@/assets/newimg/ht_qij.png" alt=""
                                        title="查看通道1" @click="monitorClick(scope.row, 0)"
                                        style="cursor: pointer;margin:auto;display: inline-block;">
                                    <img v-if="scope.row.online == 1" src="@/assets/newimg/ht_qij.png" alt=""
                                        title="查看通道2" @click="monitorClick(scope.row, 1)"
                                        style="cursor: pointer;margin:auto;display: inline-block;margin-left:15px;">
                                    <img v-if="scope.row.online != 1" src="@/assets/newimg/ht_qij1.png" alt=""
                                        title="离线通道1" style="margin:auto;display: inline-block;">
                                    <img v-if="scope.row.online != 1" src="@/assets/newimg/ht_qij1.png" alt=""
                                        title="离线通道1" style="margin:auto;display: inline-block;margin-left:15px;">

                                </span>
                                <span v-if="scope.row.channelList.length == 0">
                                    ----
                                </span>
                            </span>
                            <span v-if="scope.row.type == 10 && scope.row.useMode == 11">
                                <span v-if="scope.row.channelList != undefined && scope.row.channelList.length == 1">
                                    <img v-if="scope.row.online == 1" src="@/assets/newimg/ht_qj.png" alt=""
                                        title="查看通道1" @click="monitorClick(scope.row, 0)"
                                        style="cursor: pointer;margin:auto;display: inline-block;margin-left:15px;">
                                    <img v-else src="@/assets/newimg/ht_qj1.png" alt="" title="离线通道1"
                                        style="margin:auto;display: inline-block;margin-left:15px;">
                                </span>

                                <span v-if="scope.row.channelList != undefined && scope.row.channelList.length == 2">
                                    <img v-if="scope.row.online == 1" src="@/assets/newimg/ht_qj.png" alt=""
                                        title="查看通道1" @click="monitorClick(scope.row, 0)"
                                        style="cursor: pointer;margin:auto;display: inline-block;">
                                    <img v-if="scope.row.online == 1" src="@/assets/newimg/ht_qj.png" alt=""
                                        title="查看通道2" @click="monitorClick(scope.row, 1)"
                                        style="cursor: pointer;margin:auto;display: inline-block;margin-left:15px;">
                                    <img v-if="scope.row.online != 1" src="@/assets/newimg/ht_qj1.png" alt=""
                                        title="离线通道1" style="margin:auto;display: inline-block;">
                                    <img v-if="scope.row.online != 1" src="@/assets/newimg/ht_qj1.png" alt=""
                                        title="离线通道1" style="margin:auto;display: inline-block;margin-left:15px;">

                                </span>
                                <span v-if="scope.row.channelList.length == 0">
                                    ----
                                </span>
                            </span>

                            <span v-if="scope.row.type == 10 && scope.row.useMode == 12">
                                <span v-if="scope.row.channelList != undefined && scope.row.channelList.length == 1">
                                    <img v-if="scope.row.online == 1" src="@/assets/newimg/ht_yt.png" alt=""
                                        title="查看通道1" @click="monitorClick(scope.row, 0)"
                                        style="cursor: pointer;margin:auto;display: inline-block;margin-left:15px;">
                                    <img v-else src="@/assets/newimg/ht_yt1.png" alt="" title="离线通道1"
                                        style="margin:auto;display: inline-block;margin-left:15px;">
                                </span>

                                <span v-if="scope.row.channelList != undefined && scope.row.channelList.length == 2">
                                    <img v-if="scope.row.online == 1" src="@/assets/newimg/ht_yt.png" alt=""
                                        title="查看通道1" @click="monitorClick(scope.row, 0)"
                                        style="cursor: pointer;margin:auto;display: inline-block;">
                                    <img v-if="scope.row.online == 1" src="@/assets/newimg/ht_yt.png" alt=""
                                        title="查看通道2" @click="monitorClick(scope.row, 1)"
                                        style="cursor: pointer;margin:auto;display: inline-block;margin-left:15px;">
                                    <img v-if="scope.row.online != 1" src="@/assets/newimg/ht_yt1.png" alt=""
                                        title="离线通道1" style="margin:auto;display: inline-block;">
                                    <img v-if="scope.row.online != 1" src="@/assets/newimg/ht_yt1.png" alt=""
                                        title="离线通道1" style="margin:auto;display: inline-block;margin-left:15px;">
                                    <span v-if="scope.row.channelList == undefined">
                                        ----
                                    </span>
                                </span>
                                <span v-if="scope.row.channelList.length == 0">
                                    ----
                                </span>
                            </span>

                        </template>
                    </el-table-column>
                    <el-table-column label="摄像机状态" width="100" prop="datastatus" align="center" fixed="right">
                        <template #default="scope">
                            <el-switch v-model="scope.row.datastatus" active-value="1" inactive-value="0"
                                @change="switchChange(scope.row)" style="margin-right: 4px"></el-switch>
                            <span v-if="scope.row.datastatus == 1" class="effective">有效</span>
                            <span v-else style="color: #d7d7d7">无效</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="60" fixed="right" align="center"
                        style="display: flex; display: -webkit-flex;">
                        <template #default="scope">
                            <span
                                style="display: flex;display: -webkit-flex; justify-content: space-around;-webkit-justify-content: space-around; ">
                                <img v-hasPerm="['update:patroldevice']" src="@/assets/newimg/ht_xg.png" alt=""
                                    title="修改" @click="handleEdit(scope.row)" style="cursor: pointer;">
                                <img v-hasPerm="['del:patroldevice']" src="@/assets/newimg/ht_sc.png" alt=""
                                    v-if="scope.row.datastatus == 0" title="删除" @click="handleDelete(scope.row)"
                                    style="cursor: pointer; ">
                                <img v-hasPerm="['del:patroldevice']" src="@/assets/newimg/ht_sc1.png" alt="" v-else
                                    title="删除" style="cursor: pointer; ">
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <Page :total="total" v-model:size="paramstable.size" v-model:current="paramstable.current"
                    @pagination="getData()"></Page>
            </div>
        </section>
        <!-- <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :title="title"
            append-to-body width="1175px" draggable>
           

        </el-dialog> -->
        <Eldialog v-if="dialogMonitor" :title="MonitorTile" :zIndex="2000" :width="'860px'" :height="'600px'"
            @before-close="MonitorClose">
            <template v-slot:PopFrameContent>
                <div class="Camera" style="margin-top:10px;">
                    <div class="Camera-left">
                        <div class="Camera-img">
                            <JessibucaPlayer v-if="dialogMonitor" ref="jessibuca" :visible.sync="true" :videoUrl="urls"
                                :videofmp4="videofmp4" :_uid="32" height="100px" :hasAudio="false" fluent autoplay live>
                            </JessibucaPlayer>
                        </div>
                        <div class="Camera-left-bottom">
                            <div class="Camera-buttons-box">
                                <div class="Camera-left-button1" @mousedown="ptzCamera('up')"
                                    @mouseup="ptzCamera('stop')">
                                </div>
                                <div class="Camera-left-button2" @mousedown="ptzCamera('upright')"
                                    @mouseup="ptzCamera('stop')"></div>
                                <div class="Camera-left-button3" @mousedown="ptzCamera('right')"
                                    @mouseup="ptzCamera('stop')"></div>
                                <div class="Camera-left-button4" @mousedown="ptzCamera('downright')"
                                    @mouseup="ptzCamera('stop')"></div>
                                <div class="Camera-left-button5" @mousedown="ptzCamera('down')"
                                    @mouseup="ptzCamera('stop')"></div>
                                <div class="Camera-left-button6" @mousedown="ptzCamera('downleft')"
                                    @mouseup="ptzCamera('stop')"></div>
                                <div class="Camera-left-button7" @mousedown="ptzCamera('left')"
                                    @mouseup="ptzCamera('stop')"></div>
                                <div class="Camera-left-button8" @mousedown="ptzCamera('upleft')"
                                    @mouseup="ptzCamera('stop')"></div>
                                <div class="Camera-left-button9" @click="presetPosition(130, beforehandPosition)"
                                    title="回到初始位置"></div>
                            </div>
                            <div class="Camera-left-buttons" style="margin-left:15px;">
                                <div style="display: flex;">
                                    <div class="videoOperations" :class="{ 'gaolaing': isGaoliang == 'zoomout' }"
                                        @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')">
                                        <el-icon>
                                            <Minus />
                                        </el-icon>
                                    </div>
                                    <div class="videoOperationstext">缩放</div>
                                    <div class="videoOperations" :class="{ 'gaolaing': isGaoliang == 'zoomin' }"
                                        style="border-radius:0 4px 4px 0;" @mousedown="ptzCamera('zoomin')"
                                        @mouseup="ptzCamera('stop')"><el-icon>
                                            <Plus />
                                        </el-icon></div>
                                </div>
                                <div style="display: flex;">
                                    <div class="videoOperations" :class="{ 'gaolaing': isGaoliang == '66' }"
                                        @mouseup="quxiao" @mousedown="condensationChang('减')"><el-icon>
                                            <Minus />
                                        </el-icon></div>
                                    <div class="videoOperationstext">光聚</div>
                                    <div class="videoOperations" :class="{ 'gaolaing': isGaoliang == '65' }"
                                        style="border-radius:0 4px 4px 0;" @mouseup="quxiao"
                                        @mousedown="condensationChang('加')"><el-icon>
                                            <Plus />
                                        </el-icon></div>
                                </div>
                                <div style="display: flex;">
                                    <div class="videoOperations" :class="{ 'gaolaing': isGaoliang == '72' }"
                                        @mouseup="quxiao" @mousedown="apertureChang('减')"><el-icon>
                                            <Minus />
                                        </el-icon></div>
                                    <div class="videoOperationstext">光圈</div>
                                    <div class="videoOperations" :class="{ 'gaolaing': isGaoliang == '70' }"
                                        style="border-radius:0 4px 4px 0;" @mouseup="quxiao"
                                        @mousedown="apertureChang('加')">
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                    </div>
                                </div>
                            </div>
                            <div style="width:500px">
                                <div style="display: flex;align-items: center;  padding-top: 25px; padding-left: 30px;"
                                    class="buttonstyleheight">
                                    <div style="width: 60px;">预置位</div>
                                    <el-input-number class="Camera-number-input" style="width:140px"
                                        v-model="beforehandPosition" controls-position="right" size="large" />
                                    <div>
                                        <el-button class="searchButton" style="margin-left:30px"
                                        @click="presetPosition(129, beforehandPosition)">设置</el-button>
                                    <el-button class="searchButton" style="margin-left:30px"
                                        @click="presetPosition(131, beforehandPosition)">删除</el-button>
                                    <el-button class="searchButton" type="primary" style="margin-left:30px"
                                        @click="presetPosition(130, beforehandPosition)">调用</el-button>
                                    </div>
                                    
                                    
                                </div>

                            </div>

                        </div>
                       
                    </div>
                </div>
            </template>
        </Eldialog>
        <!-- <el-dialog v-model="dialogMonitor" :close-on-click-modal="false" :before-close="MonitorClose" :title="MonitorTile"
            append-to-body width="855px" draggable class="monitor-dialog">
           
        </el-dialog> -->
        <Eldialog v-if="dialogVideo" :title="'编辑守望位预置'" :zIndex="2000" :width="'855px'" :height="'600px'"
            @before-close="VideoClose">
            <template v-slot:PopFrameContent>
                <div class="Camera">
                    <div class="Camera-left">
                        <div class="Camera-img">
                            <JessibucaPlayer v-if="dialogVideo" ref="jessibuca" :visible.sync="true" :videoUrl="urls"
                                height="100px" :hasAudio="false" fluent autoplay live></JessibucaPlayer>
                        </div>
                        <div class="Camera-left-bottom">
                            <div class="Camera-left-buttons">
                                <div class="Camera-left-button" @mousedown="ptzCamera('upleft')"
                                    @mouseup="ptzCamera('stop')">
                                    <img src="@/assets/MenuIcon/u1158.png" alt="" style="transform:rotate(-45deg)">
                                </div>
                                <div class="Camera-left-button" @mousedown="ptzCamera('up')"
                                    @mouseup="ptzCamera('stop')">
                                    <img src="@/assets/MenuIcon/u1158.png" alt="">
                                </div>
                                <div class="Camera-left-button" @mousedown="ptzCamera('upright')"
                                    @mouseup="ptzCamera('stop')">
                                    <img src="@/assets/MenuIcon/u1158.png" alt="" style="transform:rotate(45deg)">
                                </div>
                                <div class="Camera-left-button" @mousedown="ptzCamera('left')"
                                    @mouseup="ptzCamera('stop')">
                                    <img src="@/assets/MenuIcon/u1158.png" alt="" style="transform:rotate(-90deg)">
                                </div>
                                <div class="Camera-left-button" @mousedown="videoRefresh"><img
                                        src="@/assets/MenuIcon/u1168.png" alt=""></div>
                                <div class="Camera-left-button" @mousedown="ptzCamera('right')"
                                    @mouseup="ptzCamera('stop')">
                                    <img src="@/assets/MenuIcon/u1158.png" alt="" style="transform:rotate(90deg)">
                                </div>
                                <div class="Camera-left-button" @mousedown="ptzCamera('downleft')"
                                    @mouseup="ptzCamera('stop')">
                                    <img src="@/assets/MenuIcon/u1158.png" alt="" style="transform:rotate(-135deg)">
                                </div>
                                <div class="Camera-left-button" @mousedown="ptzCamera('down')"
                                    @mouseup="ptzCamera('stop')">
                                    <img src="@/assets/MenuIcon/u1158.png" alt="" style="transform:rotate(180deg)">
                                </div>
                                <div class="Camera-left-button" @mousedown="ptzCamera('downright')"
                                    @mouseup="ptzCamera('stop')">
                                    <img src="@/assets/MenuIcon/u1158.png" alt="" style="transform:rotate(135deg)">
                                </div>
                            </div>
                            <div class="Camera-left-buttons">
                                <div style="display: flex;">
                                    <div class="videoOperations" @mousedown="ptzCamera('zoomout')"
                                        @mouseup="ptzCamera('stop')">
                                        <el-icon>
                                            <Minus />
                                        </el-icon>
                                    </div>
                                    <div class="videoOperationstext">缩放</div>
                                    <div class="videoOperations" style="border-radius:0 4px 4px 0;"
                                        @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')"><el-icon>
                                            <Plus />
                                        </el-icon></div>
                                </div>
                                <div style="display: flex;">
                                    <div class="videoOperations" @click="condensationChang('减')"><el-icon>
                                            <Minus />
                                        </el-icon></div>
                                    <div class="videoOperationstext">光聚</div>
                                    <div class="videoOperations" style="border-radius:0 4px 4px 0;"
                                        @click="condensationChang('加')"><el-icon>
                                            <Plus />
                                        </el-icon></div>
                                </div>
                                <div style="display: flex;">
                                    <div class="videoOperations" @click="apertureChang('减')"><el-icon>
                                            <Minus />
                                        </el-icon></div>
                                    <div class="videoOperationstext">光圈</div>
                                    <div class="videoOperations" style="border-radius:0 4px 4px 0;"
                                        @click="apertureChang('加')">
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                    </div>
                                </div>
                            </div>
                            <div style="width:500px">

                                <div
                                    style="display: flex;justify-content:space-between;  padding-top: 10px;padding-left: 30px;">
                                    <div style="display: flex;">
                                        <span style="display: block; padding-top: 4px;padding-left: 15px;">灯光</span>
                                        <el-switch style="display: block;margin-left:15px;" v-model="isLighting"
                                            inline-prompt active-text="开" inactive-text="关" @change="lightingClick"
                                            active-value="255" inactive-value="0" />
                                    </div>
                                    <div style="display: flex;"><span
                                            style="display: block;padding-top: 4px;padding-left:30px">红外</span>
                                        <el-switch style="display: block;margin-left:15px" v-model="isInfrared"
                                            inline-prompt active-text="开" inactive-text="关" @change="infraredClick"
                                            active-value="255" inactive-value="0" />
                                    </div>
                                    <div style="display: flex;"><span
                                            style="display: block;padding-top: 4px;padding-left:30px">雨刷</span>
                                        <el-switch style="display: block;margin-left:15px" v-model="isWiper"
                                            inline-prompt active-text="开" inactive-text="关" @change="WiperClick"
                                            active-value="1" inactive-value="0" />
                                    </div>



                                </div>

                                <!-- <div class="Camera-left-switchs-two"></div> -->
                                <div style="display: flex;align-items: center;  padding-top: 20px; padding-left: 30px;"
                                    class="buttonstyleheight">
                                    <div style="width: 60px;">预置位</div>
                                    <el-input-number class="Camera-number-input" style="width:140px"
                                        v-model="beforehandPosition" controls-position="right" size="large" />
                                    <el-button class="searchButton" style="margin-left:30px"
                                        @click="presetPosition(129, beforehandPosition)">设置</el-button>
                                    <el-button class="searchButton" style="margin-left:30px"
                                        @click="presetPosition(131, beforehandPosition)">删除</el-button>
                                    <el-button class="searchButton" type="primary" style="margin-left:30px"
                                        @click="presetPosition(130, beforehandPosition)">调用</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="dialog-footer"
                    style="width: 100%;margin: auto; display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;margin-top: 20px;">

                    <div class="details-button" @click="VideoClose">取消</div>
                    <div class="details-button" @click="saveMonitorClick">确定</div>
                </span>
            </template>
        </Eldialog>
        <!-- <el-dialog v-model="dialogVideo" :close-on-click-modal="false" :before-close="VideoClose" :title="'编辑守望位预置'"
            append-to-body width="855px" draggable class="monitor-dialog">

        </el-dialog> -->
        <Eldialog v-if="isMaintenanceArea" :title="'维护生效区域'" :zIndex="2000" :width="'1280px'" :height="'600px'"
            @before-close="closeMaintenanceArea">
            <template v-slot:PopFrameContent>
                <MaintenanceArea v-if="isMaintenanceArea" :AngleUrl="AngleUrl" :Custom3="Custom3"
                    @closeMaintenanceArea="closeMaintenanceArea" />
            </template>
        </Eldialog>
        <!-- <el-dialog v-model="isMaintenanceArea" class="AngleBox" :close-on-click-modal="false"
            :before-close="closeMaintenanceArea" title="维护生效区域">
            
        </el-dialog> -->
    </div>
</template>

<style scoped lang="scss">
.Camera-buttons-box {
    position: relative;
    width: 122px;
    height: 122px;
    //   margin-top:  20px;
    //   margin-left:  50px;
    //   margin-bottom: 10px;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: center;
}

.Camera-left-button1 {
    cursor: pointer;
    position: absolute;
    top: -2px;
    left: 32px;
    width: 44px;
    height: 35px;
    background: url(@/assets/videoimg/sxj_01.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button2 {
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 69px;
    width: 44px;
    height: 44px;
    background: url(@/assets/videoimg/sxj_02.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button3 {
    cursor: pointer;
    position: absolute;
    top: 35px;
    left: 85px;
    width: 34px;
    height: 44px;
    background: url(@/assets/videoimg/sxj_03.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button4 {
    cursor: pointer;
    position: absolute;
    top: 70px;
    left: 72px;
    width: 44px;
    height: 44px;
    background: url(@/assets/videoimg/sxj_04.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button5 {
    cursor: pointer;
    position: absolute;
    top: 87px;
    left: 37px;
    width: 44px;
    height: 34px;
    background: url(@/assets/videoimg/sxj_05.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button6 {
    cursor: pointer;
    position: absolute;
    top: 73px;
    left: 1px;
    width: 43px;
    height: 44px;
    background: url(@/assets/videoimg/sxj_06.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button7 {
    cursor: pointer;
    position: absolute;
    top: 39px;
    left: -5px;
    width: 35px;
    height: 44px;
    background: url(@/assets/videoimg/sxj_07.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button8 {
    cursor: pointer;
    position: absolute;
    top: 5px;
    left: 0px;
    width: 43px;
    height: 43px;
    background: url(@/assets/videoimg/sxj_08.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button9 {
    cursor: pointer;
    position: absolute;
    top: 33px;
    left: 30px;
    width: 54px;
    height: 54px;
    background: url(@/assets/videoimg/sxj_09.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button1:hover {
    background: url(@/assets/videoimg/sxj_01.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_011.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button2:hover {
    background: url(@/assets/videoimg/sxj_02.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_022.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button3:hover {
    background: url(@/assets/videoimg/sxj_03.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_033.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button4:hover {
    background: url(@/assets/videoimg/sxj_04.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_044.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button5:hover {
    background: url(@/assets/videoimg/sxj_05.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_055.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button6:hover {
    background: url(@/assets/videoimg/sxj_06.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_066.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button7:hover {
    background: url(@/assets/videoimg/sxj_07.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_077.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button8:hover {
    background: url(@/assets/videoimg/sxj_08.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_088.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button9:hover {
    background: url(@/assets/videoimg/sxj_09.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_099.png) no-repeat center center;
    background-size: 100% 100%;
}

.custom3 {
    position: fixed;
    height: 100%;
    width: 100%;
    background: #0d141cbb;
    z-index: 2023;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;

    .custom3-back {
        width: 452px;
        height: 266px;
        background: url(@/assets/monitorsystem/ejectbg/tsbj.png);
        background-size: 100% 100%;
        position: absolute;
        z-index: 2023;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        margin: auto;
        padding: 70px 20px 0px 0px;

        .custom3-title {
            position: absolute;
            color: #fff;
            top: 10px;
            left: 200px;
            font-size: 16px;
        }

        .custom3-close {
            position: absolute;
            color: #fff;
            top: 30px;
            right: 20px;
            font-size: 18px;
            cursor: pointer;
        }

        .custom3-text {
            color: #fff;
            font-size: 16px;
            margin-left: 40px;
            margin-top: 50px;
        }
    }
}

.custom1 {
    .custom1-back {
        width: 1180px;
        height: 780px;
        background: url(@/assets/newimg/xsjk_yl_1.png);
        background-size: 100% 100%;
        position: absolute;
        z-index: 2023;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        margin: auto;
        padding: 60px 20px 0px 0px;

        .custom1-title {
            position: absolute;
            color: #fff;
            top: 0px;
            left: 550px;
        }

        .custom1-close {
            position: absolute;
            color: #fff;
            top: 20px;
            right: 20px;
            font-size: 18px;
            cursor: pointer;
        }
    }
}

.silderLeft-default {
    :deep(.el-tree-node__label) {
        font-size: 16px !important;
    }
}

.faulttemplate-box {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    padding: 5px 15px;
    // background-color: #f2f4f9;

}

#silderLeft {
    width: 260px;
    padding: 5px 0px 10px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 3px;
    position: relative;

}

.silderRight {
    flex: 1;
    width: 100%;
    height: calc(100vh - 160px);
    overflow: auto;
    background-color: #17212e;
    border-radius: 3px;
    padding: 0px 15px 15px 15px;
    padding-bottom: 0px;
    box-sizing: border-box;
    margin-left: 15px;
    background: url(@/assets/newimg/cjrw_1890.png);
    background-size: 100% 100%;
}

.tabbas2Bottom {
    width: 245px;
    height: 16px;
    // border-left: #409eff 4px solid;
    font-size: 16px;
    // text-align: center;
    line-height: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: #fff;
}

.tabbas3Bottom {
    width: 160px;
    height: 16px;
    // border-left: #409eff 4px solid;
    font-size: 16px;
    // text-align: center;
    line-height: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: #fff;
}

:deep(.el-dialog.AngleBox) {
    margin-top: 20px !important;
    width: 1280px;
}

:deep(.el-dialog.AngleBox .el-dialog__body) {
    padding: 0 !important;
}

.avatar {
    width: 86px;
    height: 86px;
    display: block;
}

:deep(.el-tree-node.is-current>.el-tree-node__content) {
    width: 100%;
    height: 40px;
    color: #fff !important;
}

:deep(.el-tree-node__content) {
    width: 100% !important;
    height: 40px !important;
    margin: auto !important;
}

.el-message-box {
    width: 300px !important;
}

//tabs
.tabbas {
    width: 100%;
    margin-top: 15px;
    border-bottom: 1px solid #009bff;
    display: flex;
    color: #fff;

    .tabbas-left {
        width: 100px;
    }

    .tabbas-right {
        width: 100px;
    }

    div {
        width: 100px;
        height: 51px;
        line-height: 51px;
        // margin-left: 15px;
        text-align: center;
        cursor: pointer;
    }

    .tabbas1 {
        width: 100px;
        height: 51px;
        text-align: center;
        line-height: 51px;
        color: #009bff;
        border-bottom: 2px solid #009bff;
        box-sizing: border-box;
        // margin-left: 10px;
        cursor: pointer;
    }

    .tabbas2 {
        width: 100px;
        height: 51px;
        text-align: center;
        line-height: 51px;
        color: #009bff;
        border-bottom: 2px solid #009bff;
        box-sizing: border-box;
        // margin-left: 10px;
        cursor: pointer;
    }
}

.tabbas1-toner {
    margin-top: 20px;
}

.checkedchange {
    padding: 0px 10px;
    border: #009dffa9 1px solid;
    border-radius: 5px;

    margin: 0px 15px 15px 0px;
}

.changechecked {
    padding: 0px 10px;
    border: #009bff 1px solid;
    border-radius: 5px;
    margin: 0px 15px 15px 0px;
}

.tabbas2-toner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 20px 0px 3px 0px;
    padding: 0px 17px;

}

.tabbas2-bottom {
    width: 1100px;
    height: 510px;
    margin: auto;
    text-align: center;
    line-height: 480px;
    color: #949494;
    background-color: #fafafa00;
    // border: #e4e4e456 1px solid;
}

:deep(.el-form-item) {
    display: flex;
    align-items: center;
}

:deep(.el-form-item__label) {
    width: 135px !important;
    color: #fff !important;
}

:deep(.el-form-item__error) {
    margin-left: 10px;
}

.operate {
    display: flex;
    align-items: center;
    justify-content: space-around;

    div {
        width: 40px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        cursor: pointer;
    }
}

:deep(.el-tooltip__trigger) {
    width: 100% !important;
    padding-left: 8px;
}

.displayflex {
    display: flex;
    align-items: center;


    .title {
        text-decoration: none !important;
        font-family: "阿里妈妈数黑体 Bold";
        font-weight: 700;
        font-style: normal;
        font-size: 16px !important;
        color: rgb(255, 255, 255);
        line-height: 12px;
    }

}

.Camera {
    width: 100%;
    // height: 500px;
    margin: auto;
    display: flex;
    justify-content: space-between;

    .Camera-left {
        width: 100%;

        .Camera-img {
            width: 100%;
            height: 500px;
        }

        .Camera-left-bottom {
            margin: auto;
            display: flex;
            width: 100%;
            padding: 10px 10px;
            padding-bottom: 5px;
            margin-top: 10px;

            .Camera-left-switch {
                width: 260px;
                display: flex;
                flex-wrap: wrap;

                .Camera-left-switchs {
                    width: 135px;
                    display: flex;
                }

                .Camera-left-switchs-two {
                    width: 95px;
                    display: flex;
                }
            }

            .Camera-left-buttons {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                width: 122px;
                height: 122px;
                margin-right: 10px;

                .Camera-left-input {
                    width: 130px;
                    height: 36px;
                }

                .Camera-left-button {
                    width: 36px;
                    height: 36px;
                    border: 1px #c9c9c9 solid;
                    // border:1px solid #209F84;
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;

                    .img {
                        width: 12px;
                        height: 12px;
                    }
                }

                .Camera-left-button:hover {
                    background-color: rgba(242, 242, 242, 1);
                }
            }
        }

        :deep(.el-switch__core) {
            border-radius: 0px !important;
        }

        :deep(.el-switch__core .el-switch__action) {
            border-radius: 0px !important;
        }

        :deep(.el-select .el-input) {
            height: 40px;
        }
    }

    .Camera-right {
        width: 310px;
        border: 1px solid #e4e4e4;

        .Camera-right-title {
            width: 100%;
            height: 47px;
            background-color: #fafafa;
            display: flex;
            align-items: center;
        }
    }
}


.videoOperations {
    border: 1px solid rgba(50, 177, 245, 0.4);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.videoOperationstext {
    border-top: 1px solid rgba(50, 177, 245, 0.4);
    border-bottom: 1px solid rgba(50, 177, 245, 0.4);
    width: 80px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #B5D7FF;
}

/* 拖动条 */
.moveBtn {
    height: 100%;
    width: 15px;
    padding: 0 6px;
    opacity: 0;
    position: absolute;
    right: -15px;
    top: 0;
}

.moveBtn-line {
    width: 100%;
    height: 100%;
    cursor: col-resize;
    user-select: none;
}

#silderLeft {
    width: 300px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 3px;
    position: relative;
    background: #17212e;
    background: url(@/assets/navigation/ty_260x988.png);
    background-size: 100% 100%;
    padding: 0px 10px;

    &:hover {
        .moveBtn {
            opacity: 1;
        }
    }
}

:deep(.el-table:not(.el-table--border) .el-table__cell) {
    border: none;
}







:deep(.el-tree) {
    background-color: #ffffff00 !important;
    --el-tree-node-hover-bg-color: #0099ff09;
}

:deep(.el-input__wrapper) {
    background-color: rgba(19, 26, 37, 0);
}

:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
    box-shadow: 0 0 0 1px #009bff inset;
}

:deep(.el-select) {
    --el-select-input-focus-border-color: #009bff !important;
}

:deep(.el-checkbox__label) {
    color: #009dffa9;
}

.gaolaing {
    background: rgba(50, 177, 245, 0.4)
}
</style>
