SmartSubstationPlatform/riis-web/src/views/basedata/device/index.vue

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

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import {
    getTreefirst,
    getTreelist,
    getdevicedata,
    getMainEquipment,
    getMainType,
    getaccType,
    addPosition,
    changeStatus,
    editPosition,
    delPosition,
    GetCamera,
    getBayType,
    getDeviceByType,
    saveImgTemplate,
    uploadFile,
    deviceDownloadFile
} from "@/api/device";
import { ElMessageBox, ElMessage, ElTable, TabsPaneContext } from "element-plus";
import { useAppStore } from '@/store/modules/app';
import Page from '@/components/Pagination/page.vue'
import axios from 'axios';
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
import Measuringangles from '@/components/Measuringangles/index.vue'
import MaintenanceArea from '@/components/MaintenanceArea/index.vue'
import Measurement from '@/components/Measurement/index.vue'
import Measurement_2 from '@/components/Measurement_2/index.vue'
import { useUserStore } from '@/store/modules/user';
import { downloadFile } from '@/utils/index';
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
//左侧树形控件
interface Tree {
    [x: string]: any;
    label: string;
    children?: Tree[];
}
const defaultProps = {
    children: "children",
    label: "name"
};
const defaultprops = {
    label: "patroldeviceName"
}

const treedata: any = ref([]);
const treeRef = ref();
const treeloading = ref(true)
const currentNodeKey = ref("")

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

}
// 导航树点击事件
function handleNodeClick(data: Tree, node: any) {
    if (data.children) {
        node.isCurrent = false
        currentNodeKey.value = ""
        nextTick(() => {
            currentNodeKey.value = orgId.value
        })
    } else {
        loading.value = true
        orgId.value = data.bayId;
        areaId.value = data.areaId;
        allName.value = data
        getData()
    }
}
// 右侧表格

const orgId = ref("");
const deviceName = ref('')
const tableData: any = ref()
const loading = ref(false)
const paramstable = ref({
    size: 10,
    current: 1,
    deviceName: '',
    mainDeviceId: '',
    componentId: ''
})
const total = ref()
function getData() {
    loading.value = true
    const params = {
        bayId: orgId.value,
        size: paramstable.value.size,
        current: paramstable.value.current,
        deviceName: deviceName.value,
        mainDeviceId: paramstable.value.mainDeviceId,
        componentId: paramstable.value.componentId
    }
    getdevicedata(params).then((res: any) => {
        loading.value = true
        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
        // res.data.records.patroldeviceJson

    })
}
//重置
function resetting() {
    paramstable.value = {
        size: 10,
        current: 1,
        deviceName: '',
        mainDeviceId: '',
        componentId: ''
    }
    deviceName.value = ''
    getData()
}

//状态改变
const elMessage = ref('')
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,
                deviceId: row.deviceId,
            };

            changeStatus(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 = {
                deviceId: row.deviceId
            }
            delPosition(params).then((res: any) => {
                if (res.code == 0) {
                    getData()
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                }

            })
        })
}

// 删除表计参数
function Deletearr(row: any) {
    if (arrdata.value.length < 3) {
        ElMessage({
            message: '表计参数不能小于两个',
            type: 'warning',
        })
        return false
    }
    arrdata.value.splice(index, 1)
}
//多选删除
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.deviceId)
            })
            const params = {
                deviceId: deviceIds.value.toString()
            }
            delPosition(params).then((res: any) => {
                if (res.code == 0) {
                    getData()
                    deviceIds.value = []
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })

                }

            })
        })
}
//表格多选
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({
    deviceCode: '',
    deviceName: '',
    mainDeviceId: '',
    deviceType: '',
    componentId: '',
    meterType: '',
    appearanceType: '',
    dataType: '',
    isAlarm: '0',
    identifyMaterialId: '0',
    deviceInfo: '',
    lowerValue: '',
    upperValue: '',
    phase: '',
    recognitionTypeList: '',
    min_temp: '',
    max_temp: '',
    min_angle: '',
    max_angle: '',
    outsideAngle: '',
    videoPos: '',
    device_code: '',
    device_pos: '',
    robot_code: '',
    robot_pos: '',
    uav_code: '',
    pictureAnalysisTypeList: '',
    PictureAnalysisType: '',
    PictureDefectAnalysisType: [],
    PictureDiscriminateAnalysisType: '',
    outsideFeature: '',
    deviceClass: '',
});
//rules - 新增
const rules = ref({
    deviceName: [
        { required: true, message: '请输入巡视点位名称', trigger: 'blur' },
        { validator: stringlength, trigger: 'blur' }
    ],
    deviceCode: [
        { required: true, message: '请输入巡视点位编号', trigger: 'blur' },
        { validator: stringlength1, trigger: 'blur' }
    ],
    mainDeviceId: [
        { required: true, message: '请选择所属主设备', trigger: 'blur' }
    ],
    componentId: [
        { required: true, message: '请选择所属部件', trigger: 'blur' }
    ],
    recognitionTypeList: [
        { required: true, message: '请选择识别类型', trigger: 'blur' }
    ],
    meterType: [
        { required: true, message: '请选择表计类型', trigger: 'blur' }
    ],
    outsideFeature: [
        { required: true, message: '请选择表计特征', trigger: 'blur' }
    ],
    deviceClass: [
        { required: true, message: '请选择点位分类', trigger: 'blur' }
    ],
    dataType: [
        { required: true, message: '请选择数据来源', trigger: 'blur' }
    ],
    lowerValue: [
        { validator: numbloom, trigger: 'blur' }
    ],
    upperValue: [
        { validator: numbloom, trigger: 'blur' }, { validator: numbloom1, trigger: 'blur' }
    ],
    unit: [
        { validator: stringlength2, trigger: 'blur' }
    ],
    deviceInfo: [
        { validator: stringlength3, trigger: 'blur' }
    ]

})
//区域名称长度
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 > 20) {
        return callback(new Error('字符最大长度不超过20'))
    }
    callback()
}
function stringlength2(rule: any, value: any, callback: any) {
    if (!value) { //所以当没有值的时候，我们直接callback，让他不校验直接执行下一步
        return callback()
    } else {
        if (value.length > 10) {
            return callback(new Error('字符最大长度不超过10'))
        }
        callback()
    }
}
function stringlength3(rule: any, value: any, callback: any) {
    if (!value) { //所以当没有值的时候，我们直接callback，让他不校验直接执行下一步
        return callback()
    } else {
        if (value.length > 500) {
            return callback(new Error('字符最大长度不超过500'))
        }
        callback()
    }
}
function numbloom(rule: any, value: any, callback: any) {
    if (!value) { //所以当没有值的时候，我们直接callback，让他不校验直接执行下一步
        return callback()
    } else {
        var regs = /^-?\d+$/;
        var reg = /^(-?\d+)(\.\d+)?$/;
        if (regs.test(value) == false && reg.test(value) == false) {
            return callback(new Error('请输入整数或者小数'))
        }
        callback()
    }

}
function numbloom1(rule: any, value: any, callback: any) {
    if (!value) { //所以当没有值的时候，我们直接callback，让他不校验直接执行下一步
        return callback()
    } else {
        if (Number(value) < Number(info.value.lowerValue)) {
            return callback(new Error('正常范围上限不能小于正常范围下限'))
        }
        callback()
    }

}
const tabs = ref(1)
// 弹窗表格
//弹窗关闭
const infoForm = ref()
function handleClose() {

    // infoForm.value.resetFields();
    if (infoForm.value != null) infoForm.value.resetFields();
    dialogVisible.value = false;
}
const dialogVisible = ref(false);
const title = ref("");
const mainEquipment: any = ref([])
const getacaType: any = ref()
const Metertype = ref()
const auxitype = ref()
function addClick() {
    threshold.value = ''
    beforName.value = ''
    info.value = {
        deviceCode: '',
        deviceName: '',
        mainDeviceId: '',
        deviceType: '',
        componentId: '',
        meterType: '',
        appearanceType: '',
        dataType: '',
        isAlarm: '0',
        deviceInfo: '',
        identifyMaterialId: '0',
        lowerValue: '',
        upperValue: '',
        phase: '',
        recognitionTypeList: '',
        min_temp: '',
        max_temp: '',
        min_angle: '',
        max_angle: '',
        outsideAngle: '',
        videoPos: '',
        device_code: '',
        device_pos: '',
        robot_code: '',
        robot_pos: '',
        uav_code: '',
        pictureAnalysisTypeList: '',
        PictureAnalysisType: '',
        PictureDefectAnalysisType: '',
        PictureDiscriminateAnalysisType: '',
        outsideFeature: '',
        deviceClass: '',
        patroldeviceJson: {
            device_name: '',
            device_code: '',
            channel_code: '',
            device_pos: '',
        }
    }
    index.value = [
        {
            patroldevice_name: '',
            patroldevice_code: '',
            patroldevice_channelcode: '',
            patroldevice_pos: '',
            pos_name: '',
            baseimage: '',
            effective_region: '',
            alertvalue: '',
        }
    ]

    imgUrl.value = ''
    deviceIdText.value = ''
    device.value = ''
    title.value = "新增巡视点位";
    dialogVisible.value = true;
    beforehandPosition.value = 1
    notification()
}
//识别类型
const recognition_type = ref()
//相位
const DevicePhase = ref()

//间隔下所属部件
const getacaTypeBayId = ref()
//图像状态分析类型
const PictureAnalysisType = ref()
//图像缺陷分析类型
const PictureDefectAnalysisType = ref()
//图像判别分析类型
const PictureDiscriminateAnalysisType = ref()
//数据来源
const dataType = ref()
//表计特征
const OutsideFeature = ref()
// 主设备类型
const EquipmentType = ref()
//点位分类
const DeviceClass: any = ref([])
// 获取弹窗所需数据
function notification() {
    // 所属主设备
    if (orgId.value != '') {
        const params = {
            bayId: orgId.value
        }
        getMainEquipment(params).then((res: any) => {
            mainEquipment.value = res.data
            if (miannDeviceId.value) {
                mainChange(miannDeviceId.value)
            }

            miannDeviceId.value = ''
        });
    }
    //获取图像分析类型
    const paramssis = {
        dictcode: 'PictureAnalysisType'
    }
    getDeviceByType(paramssis).then((res: any) => {
        PictureAnalysisType.value = res.data
    })
    //获取图像分析类型
    const paramsect = {
        dictcode: 'PictureDefectAnalysisType'
    }
    getDeviceByType(paramsect).then((res: any) => {
        PictureDefectAnalysisType.value = res.data
    })

    //获取图像分析类型
    const paramsscr = {
        dictcode: 'PictureDiscriminateAnalysisType'
    }
    getDeviceByType(paramsscr).then((res: any) => {
        PictureDiscriminateAnalysisType.value = res.data
    })
    //h获取数据来源
    const paramsType = {
        dictcode: 'dataType'
    }
    getDeviceByType(paramsType).then((res: any) => {
        dataType.value = res.data
    })

    //主设备下所属部件
    if (info.value.mainDeviceId != '') {
        const paramsid = {
            mainDeviceId: info.value.mainDeviceId
        }
        getaccType(paramsid).then((res: any) => {
            getacaType.value = res.data
        })
    }

    //间隔下所属部件
    if (orgId.value != '') {
        const paramsbayId = {
            bayId: orgId.value
        }
        getBayType(paramsbayId).then((res: any) => {
            getacaTypeBayId.value = res.data
        })
    }
    //相位
    getDeviceByType({ dictcode: 'DevicePhase' }).then((res: any) => {
        DevicePhase.value = res.data
    })
    //表计类型和辅助设施类型
    // const recognitionType:any =  ref([])
    // 表计类型
    getDeviceByType({ dictcode: 'MeterType' }).then((res: any) => {
        Metertype.value = res.data
    })
    //分析仪表特征
    getDeviceByType({ dictcode: 'OutsideFeature' }).then((res: any) => {
        OutsideFeature.value = res.data
    })
    //点位分类
    getDeviceByType({ dictcode: 'DeviceClass' }).then((res: any) => {
        DeviceClass.value = res.data
    })
    // 辅助设施类型
    getDeviceByType({ dictcode: 'FacilityType' }).then((res: any) => {
        auxitype.value = res.data
    })
    // 识别类型
    getDeviceByType({ dictcode: 'recognition_type' }).then((res: any) => {
        recognition_type.value = res.data
    })
    //主设备类型
    getDeviceByType({ dictcode: 'EquipmentType' }).then((res: any) => {
        EquipmentType.value = res.data
    })

}
// 获取所属主设备类型
const typeid = ref('')
const device = ref('')
function mainChange(row: any) {
    mainEquipment.value.forEach((res: any) => {
        if (res.mainDeviceId == row) {
            typeid.value = res.deviceType
        }
    })
    const params = {
        deviceType: typeid.value
    }
    getMainType(params).then((res: any) => {
        if (res.data != null) {
            device.value = res.data.dictName
            info.value.deviceType = res.data.itemCode
        } else {
            device.value = ""
            info.value.deviceType = ""
        }

    })
}

//修改
const deviceIdText = ref()
const miannDeviceId = ref()
function handleEdit(row: any) {
    threshold.value = ''
    beforName.value = ''
    tabs.value = 1
    miannDeviceId.value = row.mainDeviceId
    deviceIdText.value = row.deviceId

    device.value = ''
    title.value = "修改巡视点位";
    dialogVisible.value = true;
    index.value = [
        {
            patroldevice_name: '',
            patroldevice_code: '',
            patroldevice_channelcode: '',
            patroldevice_pos: '',
            pos_name: '',
            baseimage: '',
            alertvalue: '',
            effective_region: ''
        }
    ]
    if (row.patroldeviceJson) {
        if (typeof row.patroldeviceJson != 'object') {
            row.patroldeviceJson = JSON.parse(row.patroldeviceJson)
        }

        if (row.patroldeviceJson.length == 0) {
            index.value = [
                {
                    patroldevice_name: '',
                    patroldevice_code: '',
                    patroldevice_channelcode: '',
                    patroldevice_pos: '',
                    pos_name: '',
                    baseimage: '',
                    alertvalue: '',
                    effective_region: ''
                }
            ]
        } else {
            index.value = row.patroldeviceJson
           
            // channelId.value 
            getCamera()
        }

    }

    const infoall = JSON.parse(JSON.stringify(row))
    if (infoall.outsideAngle) {
        if (infoall.recognitionTypeList == "4") {
            droPoint.value = JSON.parse(infoall.outsideAngle)
        } else {
            arrdata.value = JSON.parse(infoall.outsideAngle)
        }

    }
    if (infoall.videoPos) {
        infoall.videoPos = JSON.parse(infoall.videoPos)
        infoall.device_code = infoall.videoPos.device_code
        infoall.device_pos = infoall.videoPos.device_pos
        infoall.robot_code = infoall.videoPos.robot_code
        infoall.robot_pos = infoall.videoPos.robot_pos
        infoall.uav_code = infoall.videoPos.uav_code
    }
    if (infoall.pictureAnalysisTypeList) {
        infoall.pictureAnalysisTypeList = JSON.parse(infoall.pictureAnalysisTypeList)
        infoall.PictureAnalysisType = infoall.pictureAnalysisTypeList.PictureAnalysisType
        if (infoall.pictureAnalysisTypeList.PictureDefectAnalysisType != undefined) {
            infoall.PictureDefectAnalysisType = infoall.pictureAnalysisTypeList.PictureDefectAnalysisType.split(",")
        }
        infoall.PictureDiscriminateAnalysisType = infoall.pictureAnalysisTypeList.PictureDiscriminateAnalysisType
    }
    if (infoall.PictureDefectAnalysisType == undefined || infoall.PictureDefectAnalysisType[0] == '') {
        infoall.PictureDefectAnalysisType = []
    }
    info.value = infoall

    // info.value.componentId = infoall.componentName

    // beforehandPosition.value = info.value.device_pos
    notification()

}
//新增弹窗-基本信息-确定
function confirmClick(formEl: any) {
    tabs.value = 1
    formEl.validate((valid: any) => {
        if (valid) {
            const addAll = Object.assign({}, info.value, allName.value);
            var newObjOne = JSON.parse(JSON.stringify(addAll).replace(/name/g, 'bayName'))
            if (newObjOne.meterType) {
                newObjOne.meterType = newObjOne.meterType.toString()
            }
            if (newObjOne.appearanceType) {
                newObjOne.appearanceType = newObjOne.appearanceType.toString()
            }

            let newObjThree = {
                device_code: info.value.device_code,
                device_pos: info.value.device_pos,
                robot_code: info.value.robot_code,
                robot_pos: info.value.robot_pos,
                uav_code: info.value.uav_code,
            }
            let newObjFour: any = {
                PictureAnalysisType: info.value.PictureAnalysisType,
                PictureDefectAnalysisType: info.value.PictureDefectAnalysisType.toString(),
                PictureDiscriminateAnalysisType: info.value.PictureDiscriminateAnalysisType,
            }
            let tempObjFour: any = {}
            for (let key in newObjFour) {
                if (newObjFour[key] != "" && newObjFour[key] != undefined) {
                    tempObjFour[key] = newObjFour[key]
                }
            }
            newObjOne.PictureDefectAnalysisType = newObjOne.PictureDefectAnalysisType.toString()
            if (info.value.recognitionTypeList == "4") {
                newObjOne.outsideAngle = JSON.stringify(droPoint.value)
            } else {
                newObjOne.outsideAngle = JSON.stringify(arrdata.value)
            }
            if (newObjThree.device_code != undefined) {
                newObjOne.videoPos = JSON.stringify(newObjThree)
            } else {
                newObjOne.videoPos = null
            }


            newObjOne.pictureAnalysisTypeList = JSON.stringify(tempObjFour)
            if (index.value.length > 0) {
                if (typeof index.value == 'object') {
                    newObjOne.patroldeviceJson = JSON.stringify(index.value)
                }
            }

            if (info.value.deviceId) {
                editPosition(newObjOne).then((res: any) => {
                    if (res != undefined && res.code == 0) {
                        dialogVisible.value = false;
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        getData()
                    }
                })
            } else {
                addPosition(newObjOne).then((res: any) => {
                    if (res.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        dialogVisible.value = false;
                        getData()
                    }
                })
            }
        }
    })
}
const allCamera = ref([])
//获取摄像头数据
const patroldeviceName = ref()
//获取用户列表信息
onMounted(() => {
    getSelect();
    notification()
    getDeviceByType({ dictcode: 'DeviceClass' }).then((res: any) => {
        DeviceClass.value = res.data
    })
});
// function checkSelectable(row: any) {
//     return row.datastatus == 0
// }
// 保存模板图片
const imgUrl: any = ref()
function importclick() {
    const params = {
        deviceId: deviceIdText.value,
        devicecode: devicecode.value,
        channelcode: channelcode.value,
    }
    saveImgTemplate(params).then((res: any) => {
        if (res.data == undefined) {
            imgUrl.value = ''
        } else {
            imgUrl.value = res.data
        }

    })
}
// 导入点位
function importclick2() {
    const avatar = document.getElementById('avatar');
    avatar?.click();
}
function changeFiless(e: any) {
    loading.value = true
    const files = new FormData()
    files.append('file', e.target.files[0])
    uploadFile(files).then((res: any) => {
        if (res.code != 1) {
            getData()
            ElMessage({
                type: 'success',
                message: '上传成功',
            })

        }
        loading.value = false
        var file: any = document.getElementById('avatar');
        file.value = '';

    }).catch(() => {
        ElMessage({
            type: 'error',
            message: '上传失败',
        })
        var file: any = document.getElementById('avatar');
        file.value = '';
    });
}
// //导出点位
function exportDevice() {
    const params = {
        bayId: orgId.value,
        size: total.value,
        current: 1,
        deviceName: deviceName.value,
        mainDeviceId: paramstable.value.mainDeviceId,
        componentId: paramstable.value.componentId
    }
    loading.value = true
    deviceDownloadFile(params).then((response: any) => {
        loading.value = false
        downloadFile(response, '点位信息', 'xlsx')
    }).catch(() => {
        loading.value = false
    });
}
//时间转换
function dateFormat(row: any) {
    const daterc = row;
    if (daterc != null) {
        var date = new Date(daterc);
        var year = date.getFullYear();
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    }
}

// const value3 = ref(true)
// const addmost = ref(false)
// const num = ref()
// const options: any = ref()
// function addCameraAss() {
//     addmost.value = true
// }
// const data = [
//     {
//         name: '预置位1',
//     },
//     {
//         name: '预置位2',
//     },
//     {
//         name: '预置位13',
//     },
// ]
// 绑定巡视点位设置
const dialogMonitor = ref(false);
const indexRow = ref()
function monitorClick(row: any) {
    indexRow.value = row
    urls.value = ""
    MonitorTile.value = '关联摄像头'
    getCamera()
    dialogMonitor.value = true
    beforName.value = index.value[indexRow.value].pos_name
    threshold.value = index.value[indexRow.value].alertvalue
    imgUrl.value = index.value[indexRow.value].baseimage
}
const urls = ref("")

const MonitorTile = ref("")

const beforehandPosition = ref(1) // 预置位参数
const beforName = ref() // 预置位名称
const threshold = ref()
const deviceId = ref("")  // 摄像头国标编号
const channelId = ref("") // 通道国标编号
const controSpeed = ref(100) // 摄像头转动速度默认值 30
const videofmp4 = ref('')
function onSubmit(row: any) {
    deviceId.value = row.deviceId
    channelId.value = row.channelId
    axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + row.deviceId + '/' + row.channelId, {}).then((res: any) => {
        if (res.data.data != undefined) {
            urls.value = res.data.data.ws_flv
            videofmp4.value = res.data.data.fmp4

        }
    }).catch(function (error: any) {
    })
}
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(false)
function lightingClick(row: any) { // 灯光方法 
    const cmdCode = ref(10)
    const parameter1 = isLighting.value
    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=' + parameter1 + '&parameter2=128&combindCode2=0', {}).then((res: any) => { })
        }
    })
}
const isInfrared = ref(false)
function infraredClick(row: any) { // 红外方法
    const cmdCode = ref(13)
    const parameter1 = isInfrared.value
    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=' + parameter1 + '&parameter2=128&combindCode2=0', {}).then((res: any) => { })
        }
    })

}
const isWiper = ref(false)
function WiperClick(row: any) { // 雨刷方法
    const cmdCode = ref(1)
    const combindCode2 = isWiper.value
    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=0&combindCode2=' + combindCode2, {}).then((res: any) => { })
        }
    })
}
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 MonitorClose() { // 关闭监控设备
    axios.get(userStore.webApiMonitorUrl + '/api/play/stop/' + deviceId.value + '/' + channelId.value, {}).then((res: any) => { })
    urls.value = ""
    dialogMonitor.value = false
}
function MonitorClick() {
    if (channelcode.value == undefined) {
        ElMessage({
            type: 'warning',
            message: '该摄像头暂不可用,请重新绑定',
        })
        return false
    }
    index.value[indexRow.value].patroldevice_name = resData.value.patroldeviceName
    index.value[indexRow.value].patroldevice_code = resData.value.deviceId
    index.value[indexRow.value].patroldevice_channelcode = resData.value.channelId
    index.value[indexRow.value].patroldevice_pos = beforehandPosition.value
    index.value[indexRow.value].pos_name = beforName.value
    index.value[indexRow.value].alertvalue = threshold.value
    index.value[indexRow.value].baseimage = imgUrl.value
    // 
    // info.value.device_code = patroldeviceCode.value
    // info.value.device_pos = beforehandPosition.value
    if (patroldeviceJson.value.device_name != undefined && patroldeviceJson.value.device_name != "") {
        info.value.patroldeviceJson = JSON.parse(JSON.stringify(patroldeviceJson.value))
    }
    dialogMonitor.value = false
    patroldeviceJson.value = {
        device_name: '',
        device_code: '',
        channel_code: '',
        device_pos: '',
    }
    AngleUrl.value = userStore.webApiBaseUrl + "/snapandviewimage?devicecode=" + deviceId.value + "&channelcode=" + channelId.value
    getImgWidth()
}
const imgWidth = ref()
const imgHeight = ref()
function getImgWidth() {
    var img = new Image()
    img.src = AngleUrl.value
    img.onload = function () {
      
        imgWidth.value = img.width
        imgHeight.value = img.height
    }
}
//获取摄像头
function getCamera() {
    patroldeviceCode.value = ''
    const params = {
        patroldeviceName: patroldeviceName.value,
        type: '10',
        stationId: value.value,
        areaId: '',
    }
    GetCamera(params).then(res => {
        let num = 0;

        for (let i = 0; i < res.data.length; i++) {
            if (index.value[0].patroldevice_channelcode == res.data[i].channelId) {
                num = i
                break
            }
        }
        patroldeviceCode.value = res.data[num].patroldeviceCode
        resData.value = res.data[num]
        allCamera.value = res.data
        isLighting.value = false
        isInfrared.value = false
        isWiper.value = false
        onSubmit(res.data[num])
        devicecode.value = res.data[num].deviceId
        channelcode.value = res.data[num].channelId
      
        if (indexRow.value) {
            beforehandPosition.value = index.value[indexRow.value].patroldevice_pos
        } else {
            // if()
            beforehandPosition.value = index.value[0].patroldevice_pos
        }

        nextTick(() => {
            treeRef.value?.setCurrentKey(res.data[num].channelId);
        });
        AngleUrl.value = userStore.webApiBaseUrl + "/snapandviewimage?devicecode=" + deviceId.value + "&channelcode=" + channelId.value
        getImgWidth()
        temperature.value = true
        presetPosition(130, beforehandPosition.value)
    })
}
// 摄像头点击事件
const patroldeviceCode = ref()
const devicecode = ref()
const channelcode = ref()
const resData = ref()
const patroldeviceJson: any = ref({})

function handleClick(data: Tree, node: any) {
    resData.value = data
    devicecode.value = data.deviceId
    channelcode.value = data.channelId
    if (index.value[indexRow.value].patroldevice_channelcode == data.channelId) {
        beforehandPosition.value = index.value[indexRow.value].patroldevice_pos
    } else {
        beforehandPosition.value = 1
    }
    patroldeviceCode.value = data.patroldeviceCode
    patroldeviceJson.value = {
        device_name: data.patroldeviceName,
        device_code: data.patroldeviceCode,
        channel_code: data.channelId,
        device_pos: beforehandPosition.value,
    }
    presetPosition(130, beforehandPosition.value)
    onSubmit(data)
}
function recognitionChange(e: any) {
    if (e != 1) {
        info.value.meterType = ""
        info.value.outsideFeature = ""
    }

}
const isAngle = ref(false)
const AngleUrl = ref("")
function setAngle() {
    AngleUrl.value = userStore.webApiBaseUrl + "/snapandviewimage?devicecode=" + deviceId.value + "&channelcode=" + channelId.value
    isAngle.value = true
}
//测温设置
const isMeasurement = ref(false)
function toMeasurement() {
    temperature.value = false
    AngleUrl.value = userStore.webApiBaseUrl + "/snapandviewimage?devicecode=" + deviceId.value + "&channelcode=" + channelId.value
    isMeasurement.value = true
}
const droPoint = ref({})
function closeMeasurement(e: any) {
    temperature.value = true
    if (e.pos) {
        isMeasurement.value = false
        droPoint.value = e
    } else {
        isMeasurement.value = false
    }
}
const isMaintenanceArea = ref(false)
const Custom3 = ref()
function maintenanceArea() {
    // custom3
    AngleUrl.value = userStore.webApiBaseUrl + "/snapandviewimage?devicecode=" + deviceId.value + "&channelcode=" + channelId.value
    isMaintenanceArea.value = true
    if (info.value.effectiveArea != null) Custom3.value = JSON.parse(info.value.effectiveArea)
}
const arrdata: any = ref([])
function closeAngle(e: any) {
    isAngle.value = false
    if (e.length > 2 || e.length == 2) {
        arrdata.value = e
    }


}
function closeMaintenanceArea(e: any) {
    if (e.custom3 != '[]' || e.custom3 != null) info.value.effectiveArea = e.custom3
    isMaintenanceArea.value = false
    index.value[indexRow.value].effective_region = e.custom3
}
function videoRefresh() {
    urls.value = urls.value + '?Math=' + Math.random()
}
const preset = ref()
const presettime = ref()
function Position() {
    info.value.preset = preset.value
    info.value.presettime = presettime.value
}
const index: any = ref([
    {
        patroldevice_name: '',
        patroldevice_code: '',
        patroldevice_channelcode: '',
        patroldevice_pos: '',
        pos_name: '',
        baseimage: '',
        effective_region: '',
        alertvalue: '',
    }
])
function addindex() {
    index.value.push(
        {
            patroldevice_name: '',
            patroldevice_code: '',
            patroldevice_channelcode: '',
            patroldevice_pos: '',
            pos_name: '',
            baseimage: '',
            effective_region: '',
            alertvalue: '',
        }
    )
}
function delindex(row: any) {
    if (index.value.length == 1) {
        return false
    }
    index.value.splice(row, 1)
}
const temperature = ref(false)

function currency(list: any, itemcode: any) {
    let dictname = ''
    list.forEach((element: any) => {
        if (element.itemcode == itemcode) {
            dictname = element.dictname
        }
    })
    return dictname
}

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 activeName = ref('first')
const handleClick1 = (tab: TabsPaneContext, event: Event) => {
   
}

const isGaoliang: any = ref("")
</script>

<template>
    <div style="height: 10px;"></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" @tab-click="handleClick1">
                    <el-tab-pane label="基本信息" name="first">
                        <el-form ref="infoForm" :model="info" label-width="140px"
                            style="display: flex; flex-wrap: wrap; margin: 5px;height:593px;" :rules="rules">
                            <el-form-item label="巡视点位编号" style="width:50%" prop="deviceCode">
                                <el-input v-model="info.deviceCode" style="width: 90%;margin-left: 8px;"
                                    placeholder="请输入巡视点位编号"></el-input>
                            </el-form-item>
                            <el-form-item label="巡视点位名称" style="width:50%" prop="deviceName">
                                <el-input v-model="info.deviceName" style="width: 90%;margin-left: 8px;"
                                    placeholder="请输入巡视点位名称"></el-input>
                            </el-form-item>
                            <el-form-item label="点位分类" style="width:50%" prop="deviceClass">
                                <el-select v-model="info.deviceClass" placeholder="请选择" style="width: 90%;margin-left: 8px;"
                                    @visible-change="notification">
                                    <el-option v-for="item in DeviceClass" :key="item.id" :label="item.dictname"
                                        :value="item.itemcode" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所属主设备" style="width:50%" prop="mainDeviceId">
                                <el-select v-model="info.mainDeviceId" placeholder="请选择"
                                    style="width: 90%;margin-left: 8px;" @change="mainChange">
                                    <el-option v-for="item in mainEquipment" :key="item.mainDeviceId"
                                        :label="item.mainDeviceName" :value="item.mainDeviceId" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="主设备类型" style="width:50%">
                                <el-input v-model="device" disabled style="width: 90%;margin-left: 8px;"
                                    placeholder="请输入主设备类型"></el-input>
                            </el-form-item>
                            <el-form-item label="所属部件" style="width:50%" prop="componentId">
                                <el-select :disabled="info.mainDeviceId == ''" v-model="info.componentId" placeholder="请选择"
                                    style="width: 90%;margin-left: 8px;" @visible-change="notification">
                                    <el-option v-for="item in getacaType" :key="item.componentId"
                                        :label="item.componentName" :value="item.componentId" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="辅助设施类型" style="width:50%">
                                <el-select v-model="info.appearanceType" placeholder="请选择"
                                    style="width: 90%;margin-left: 8px;" clearable>
                                    <el-option v-for="item in auxitype" :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.dataType" placeholder="请选择" style="width: 90%;margin-left: 8px;"
                                    clearable>
                                    <el-option v-for="item in dataType" :key="item.id" :label="item.dictname"
                                        :value="item.itemcode" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="识别类型" style="width:50%" prop="recognitionTypeList">
                                <el-select v-model="info.recognitionTypeList" placeholder="请选择"
                                    style="width: 90%;margin-left: 8px;" @change="recognitionChange" clearable>
                                    <el-option v-for="item in recognition_type" :key="item.id" :label="item.dictname"
                                        :value="item.itemcode" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="表计类型" style="width:50%" prop="meterType"
                                v-if="info.recognitionTypeList == 1">
                                <el-select v-model="info.meterType" :disabled="info.recognitionTypeList != 1"
                                    placeholder="请选择" style="width: 90%;margin-left: 8px;">
                                    <el-option v-for="item in Metertype" :key="item.id" :label="item.dictname"
                                        :value="item.itemcode" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="表计类型" style="width:50%" v-if="info.recognitionTypeList != 1">
                                <el-select v-model="info.meterType" :disabled="info.recognitionTypeList != 1"
                                    placeholder="请选择" style="width: 90%;margin-left: 8px;">
                                    <el-option v-for="item in Metertype" :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.PictureAnalysisType" placeholder="请选择"
                                    style="width: 90%;margin-left: 8px;" clearable>
                                    <el-option v-for="item in PictureAnalysisType" :key="item.id" :label="item.dictname"
                                        :value="item.itemcode" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="分析仪表特征" style="width:50%" prop="outsideFeature"
                                v-if="info.PictureAnalysisType == 'meter'">
                                <el-select v-model="info.outsideFeature" :disabled="info.PictureAnalysisType != 'meter'"
                                    placeholder="请选择" style="width: 90%;margin-left: 8px;">
                                    <el-option v-for="item in OutsideFeature" :key="item.id" :label="item.dictname"
                                        :value="item.itemcode" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="分析仪表特征" style="width:50%" v-if="info.PictureAnalysisType != 'meter'">
                                <el-select v-model="info.outsideFeature" :disabled="info.PictureAnalysisType != 'meter'"
                                    placeholder="请选择" style="width: 90%;margin-left: 8px;">
                                    <el-option v-for="item in OutsideFeature" :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.PictureDefectAnalysisType" placeholder="请选择"
                                    style="width: 90%;margin-left: 8px;" multiple clearable>
                                    <el-option v-for="item in PictureDefectAnalysisType" :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.PictureDiscriminateAnalysisType" placeholder="请选择"
                                    style="width: 90%;margin-left: 8px;" clearable>
                                    <el-option v-for="item in PictureDiscriminateAnalysisType" :key="item.id"
                                        :label="item.dictname" :value="item.itemcode" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="正常范围下限" prop="lowerValue" style="width:50%">
                                <el-input v-model="info.lowerValue" style="width: 90%;margin-left: 8px;"
                                    placeholder="请输入正常范围下限"></el-input>
                            </el-form-item>
                            <el-form-item label="正常范围上限" prop="upperValue" style="width:50%">
                                <el-input v-model="info.upperValue" style="width: 90%;;margin-left: 8px;"
                                    placeholder="请输入正常范围上限"></el-input>
                            </el-form-item>
                            <el-form-item label="计量单位" style="width:50%" prop="unit">
                                <el-input v-model="info.unit" style="width: 90%;;margin-left: 8px;"
                                    placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item label="相位" style="width:50%;">
                                <el-select v-model="info.phase" style="width:90%;margin-left: 7px" clearable>
                                    <el-option v-for="item in DevicePhase" :key="item.id" :label="item.dictname"
                                        :value="item.itemcode" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否告警" style="width:50%">
                                <el-radio-group v-model="info.isAlarm" style="margin-left: 10px;">
                                    <el-radio :label="'1'">是</el-radio>
                                    <el-radio :label="'0'">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="是否识别实物ID" style="width:50%">
                                <el-radio-group v-model="info.identifyMaterialId" style="margin-left: 10px;">
                                    <el-radio :label="'1'">是</el-radio>
                                    <el-radio :label="'0'">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="备注信息" prop="deviceInfo"
                                style="width:100%;margin-left: 8px;display:flex;align-items:flex-start !important;">
                                <el-input type="textarea" v-model="info.deviceInfo" :autosize="{ minRows: 2, maxRows: 8 }"
                                    style="width: 96% ;" placeholder="请输入备注信息"></el-input>
                            </el-form-item>
                            <div style="width:90%;display:flex;">

                            </div>



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

                            <div class="details-button" @click="handleClose">取消</div>
                            <div class="details-button" @click="confirmClick(infoForm)">确定</div>
                        </span>
                    </el-tab-pane>
                    <el-tab-pane label="摄像机设置" name="second">
                        <el-scrollbar height="645px">
                            <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: #fff;">
                                    预置位设置</div>
                            </div>
                            <el-form>
                                <div v-for="(item, index1) in index">
                                    <el-form-item label="摄像头/预置位" style="width:100%">
                                        <el-input v-model="item.patroldevice_name" disabled placeholder="摄像头"
                                            style="width: 25%;margin-left: 8px;"></el-input>
                                        <el-input disabled v-model="item.patroldevice_pos" placeholder="预置位"
                                            style="width: 10%;margin-left: 8px;"></el-input>
                                        <el-input disabled v-model="item.pos_name" style="width: 25%;margin-left: 8px;"
                                            placeholder="预置位名称"></el-input>
                                        <el-button class="searchButton" type="primary" @click="monitorClick(index1)"
                                            style="margin-left: 20px;">设置</el-button>
                                        <el-button class="searchButton" type="primary" @click="delindex(index1)"
                                            style="margin-left: 20px;"> 删除</el-button>
                                        <el-button class="searchButton" type="primary" @click="addindex"
                                            style="margin-left: 20px;"> 添加</el-button>
                                    </el-form-item>
                                </div>
                            </el-form>

                            <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: #fff;">
                                    辅助识别参数设置</div>
                                <el-button class="searchButton" type="primary" style="margin:0px 10px 0px 15px"
                                    v-if="info.recognitionTypeList == 1" @click="setAngle">表计参数设置</el-button>
                                <el-button class="searchButton" type="primary" style="margin:0px 10px 0px 15px"
                                    v-if="info.recognitionTypeList == 4" @click="toMeasurement()">红外测温设置</el-button>
                            </div>
                            <div style="margin-top:10px;">

                                <el-table :data="arrdata" style="width: 100%;margin-top:10px;height: 418px; overflow: auto;"
                                    v-if="info.recognitionTypeList == 1"
                                    :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
                                    <el-table-column prop="index" label="序号" width="100" align="center" />
                                    <el-table-column prop="label" label="读数" align="center" />
                                    <el-table-column prop="angle" label="角度(°)" align="center" />
                                    <el-table-column label="操作" align="center" width="100">
                                        <template #default="scope">
                                            <div style="display: flex;justify-content: center;align-items: center;">
                                                <img src="@/assets/newimg/ht_sc.png" alt="" title="删除"
                                                    @click="Deletearr(scope.row.index)" style="cursor: pointer; ">
                                            </div>

                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div v-else-if="info.recognitionTypeList == 4" style="margin-top: 5px;height: 423px;">
                                    <div v-if="temperature == true && info.recognitionTypeList == 4">
                                        <Measurement_2 :AngleUrl="AngleUrl" :droPoint="droPoint" :imgWidth='imgWidth'
                                            :imgHeight='imgHeight' />
                                    </div>
                                    <div v-if="temperature == false && info.recognitionTypeList == 4"
                                        style="width: 100%;height: 423px;text-align: center;box-sizing: border-box;padding-top: 60px;border: 1px solid #2c26262c;color: #2c262675;">
                                        暂无数据</div>
                                </div>
                                <div v-else style="margin-top: 5px;height: 430px;">

                                </div>
                                <span class="dialog-footer"
                                    style="width: 100%;margin: auto; display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;margin-top:40px;">
                                    <div class="details-button" @click="handleClose">取消</div>
                                    <div class="details-button" @click="confirmClick(infoForm)">确定</div>
                                </span>
                            </div>
                        </el-scrollbar>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </Eldialog>
        <aside id="silderLeft">
            <div class="displayflex" style="margin: 10px 0px 5px 0px;padding-left: 8px;height: 30px;">
                <div class="line"></div>
                <div class="title" style="font-size: 14px;">分类导航</div>
            </div>
            <el-select v-model="value" placeholder=""
                style="width: 100% !important; padding:5px; display: flex; justify-content: center;margin-top:10px;"
                @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(78vh)" style="width:99%">
                <el-tree ref="treeRef" :class="useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'"
                    node-key="bayId" :data="treedata" :current-node-key="currentNodeKey" :highlight-current="true"
                    :props="defaultProps" v-loading="treeloading" @node-click="handleNodeClick">
                    <template #default="{ node }">
                        <span>{{ node.label }}</span><span
                            v-if="node.data.deviceCount > 0 || node.data.deviceCount == 0">({{
                                node.data.deviceCount }})</span>
                    </template>
                </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" placeholder="请输入巡视点位名称" @clear="getData()" @keyup.enter="getData()"
                        style="margin-right:15px ;width: 185px;" clearable />
                    <el-select clearable v-model="paramstable.mainDeviceId" placeholder="所属主设备" style="margin-right:15px ;"
                        @visible-change="notification" @change="getData()">
                        <el-option v-for="item in mainEquipment" :key="item.mainDeviceId" :label="item.mainDeviceName"
                            :value="item.mainDeviceId" />
                    </el-select>
                    <el-select clearable v-model="paramstable.componentId" placeholder="所属部件" style="margin-right:15px ;"
                        @visible-change="notification" @change="getData()">
                        <el-option v-for="item in getacaTypeBayId" :key="item.componentId" :label="item.componentName"
                            :value="item.componentId" />
                    </el-select>
                    <el-button class="searchButton" type="primary" @click="getData()">搜索</el-button>
                    <el-button class="searchButton" @click="resetting()">重置</el-button>
                </div>
                <div>
                    <el-button class="searchButton" type="primary" @click="importclick2()">
                        导入标准点位</el-button>
                    <el-button class="searchButton" type="primary" @click="exportDevice()" style="margin-right:12px;">
                        导出点位</el-button>
                    <input type="file" id="avatar" style="display:none;" @change="changeFiless">
                    <el-button class="searchButton" v-hasPerm="['add:device']" type="primary" @click="addClick"
                        :disabled="treedata.length == 0"> 新增</el-button>
                    <el-button class="searchButton" v-hasPerm="['del:device']" @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(78vh);
                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" />
                    <el-table-column type="index" label="序号" width="50px" align="center" />
                    <el-table-column label="巡视点位编号" prop="deviceCode" width="140"></el-table-column>
                    <el-table-column label="巡视点位名称" prop="deviceName"></el-table-column>
                    <el-table-column label="所属主设备" prop="mainDeviceName" width="120"></el-table-column>
                    <el-table-column label="主设备类型" prop="deviceType" width="120">
                        <template #default="scope">
                            <span>{{ currency(EquipmentType, scope.row.deviceType) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="所属部件" prop="componentName" width="160"></el-table-column>
                    <el-table-column label="表计类型" prop="meterType" width="100">
                        <template #default="scope">
                            <span>{{ currency(Metertype, scope.row.meterType) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="点位分类" width="100">
                        <template #default="scope">
                            <span>{{ currency(DeviceClass, scope.row.deviceClass) }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="文件类型" prop="datastatus"></el-table-column> -->
                    <el-table-column label="状态" width="120" prop="datastatus">
                        <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="90" 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:device']" src="@/assets/newimg/ht_xg.png" alt="" title="修改"
                                    @click="handleEdit(scope.row)" style="cursor: pointer;">
                                <img v-hasPerm="['del:device']" 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:device']" 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>

        <Eldialog v-if="dialogMonitor" :title="MonitorTile" :zIndex="2000" :width="'1200px'" :height="'600px'"
            @before-close="MonitorClose">
            <template v-slot:PopFrameContent>
                <div style="display: flex;justify-content: space-between; margin-top: 15px;">
                    <div class="CameraLeft">
                        <div class="displayflex" style="margin: 0;height: 30px;margin-top: 10px;margin-left:10px;">
                            <div class="line"></div>
                            <div class="title" style="font-size: 14px;">分类导航</div>
                        </div>
                        <el-input v-model="patroldeviceName" placeholder="请输入摄像机名称" clearable @clear="getCamera()"
                            @keyup.enter="getCamera()"
                            style="margin-right:15px ;margin-top:10px;width: 96%;margin-left:5px;" />
                        <div>
                            <el-tree ref="treeRef" class="Tree"
                                :class="useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'"
                                node-key="channelId" :data="allCamera" :current-node-key="currentNodeKey"
                                :highlight-current="true" :props="defaultprops" v-loading="treeloading"
                                @node-click="handleClick"
                                style="height: calc(80vh - 65px);width:96% ;margin-top: 10px; overflow: auto;margin-left:5px;">
                                <template #default="{ node }">
                                    <span v-if="node.data.type == 10 && node.data.useMode == 10">
                                        <span v-if="node.level == 1"
                                            :style="{ color: node.data.online == '1' ? '#409eff' : 'red' }">
                                            <svg style="margin-right: 5px;" t="1682315445615" class="icon"
                                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                p-id="11437" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                                                height="20">
                                                <path fill="currentColor"
                                                    d="M218.3 124.6h77.8l635.8 415.2-223.8 165.5h-48.7L117.7 338.7v-51.9z"
                                                    p-id="11438"></path>
                                                <path fill="currentColor"
                                                    d="M701.6 799.3c-3.1 0-6.2-0.9-8.9-2.7L138.8 432.5c-7.5-4.9-9.6-15-4.6-22.5 4.9-7.5 15-9.6 22.5-4.6l542.9 356.9 29.6-29.6c6.3-6.3 16.6-6.3 22.9 0 6.3 6.3 6.3 16.6 0 22.9l-38.9 38.9c-3.3 3.2-7.4 4.8-11.6 4.8zM130.7 895.6c-9 0-16.2-7.3-16.2-16.2V530.1c0-9 7.3-16.2 16.2-16.2 9 0 16.2 7.3 16.2 16.2v349.3c0 9-7.3 16.2-16.2 16.2z"
                                                    p-id="11439"></path>
                                                <path fill="currentColor"
                                                    d="M292.9 721.5H130.7c-9 0-16.2-7.3-16.2-16.2s7.3-16.2 16.2-16.2h153l56.9-95.9c4.6-7.7 14.5-10.2 22.2-5.7 7.7 4.6 10.2 14.5 5.7 22.2l-61.6 103.8c-3 5-8.3 8-14 8z"
                                                    p-id="11440"></path>
                                            </svg>
                                        </span>
                                    </span>
                                    <span v-if="node.data.type == 10 && node.data.useMode == 11">
                                        <span v-if="node.level == 1"
                                            :style="{ color: node.data.online == '1' ? '#409eff' : 'red' }">
                                            <svg t="1686725618148" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" p-id="2814"
                                                xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18">
                                                <path fill="currentColor"
                                                    d="M954.88 590.72a432.64 432.64 0 0 0-409.6-457.6V0H151.04v64h263.04v76.8c-201.6 38.4-344.96 203.52-344.96 448-1.28 0.64 887.04 4.48 885.76 1.92zM197.76 661.12C198.4 860.16 311.68 1024 512 1024s314.24-161.92 314.24-360.96H197.76zM512 912A85.76 85.76 0 0 1 420.48 832 86.4 86.4 0 0 1 512 752.64 86.4 86.4 0 0 1 603.52 832 85.76 85.76 0 0 1 512 912z"
                                                    p-id="2815"></path>
                                            </svg>
                                        </span>

                                    </span>

                                    <!-- <span>{{ node.data.name }}</span> -->
                                    <span>{{ node.label }}</span>
                                </template>
                            </el-tree>
                        </div>
                    </div>
                    <div class="Camera">
                        <div class="Camera-left">
                            <div class="Camera-img">
                                <JessibucaPlayer v-if="dialogMonitor" :_uid="33" ref="jessibuca" :visible.sync="true"
                                    :videoUrl="urls" :videofmp4="videofmp4" height="100px" :hasAudio="true" 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">
                                    <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" style="border-radius:0 4px 4px 0;"
                                            :class="{ 'gaolaing': isGaoliang == 'zoomin' }" @mousedown="ptzCamera('zoomin')"
                                            @mouseup="ptzCamera('stop')"><el-icon>
                                                <Plus />
                                            </el-icon></div>
                                    </div>
                                    <div style="display: flex;margin-top:15px;">
                                        <div class="videoOperations" @mouseup="quxiao"
                                            :class="{ 'gaolaing': isGaoliang == '66' }" @mousedown="condensationChang('减')">
                                            <el-icon>
                                                <Minus />
                                            </el-icon>
                                        </div>
                                        <div class="videoOperationstext">光聚</div>
                                        <div class="videoOperations" @mouseup="quxiao"
                                            :class="{ 'gaolaing': isGaoliang == '65' }" style="border-radius:0 4px 4px 0;"
                                            @mousedown="condensationChang('加')"><el-icon>
                                                <Plus />
                                            </el-icon></div>
                                    </div>
                                    <div style="display: flex;margin-top:15px;">
                                        <div class="videoOperations" @mouseup="quxiao"
                                            :class="{ 'gaolaing': isGaoliang == '72' }" @mousedown="apertureChang('减')">
                                            <el-icon>
                                                <Minus />
                                            </el-icon>
                                        </div>
                                        <div class="videoOperationstext">光圈</div>
                                        <div class="videoOperations" @mouseup="quxiao"
                                            :class="{ 'gaolaing': isGaoliang == '70' }" style="border-radius:0 4px 4px 0;"
                                            @mousedown="apertureChang('加')">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </div>
                                    </div>
                                </div>
                                <div style="width:470px;margin-top:35px;margin-left: 70px;">
                                    <div style="display: flex;margin-left:50px;">
                                        <div style="display: flex;">
                                            <span
                                                style="display: block; ;display: inline-block;width: 50px;text-align: right;">灯光</span>
                                            <el-switch class="nei" style="display: block;margin-left:20px;"
                                                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-left:15px;display: inline-block;width: 50px;">红外</span>
                                            <el-switch class="nei" style="display: block;margin-left:0px"
                                                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-left:15px;display: inline-block;width: 50px;">雨刷</span>
                                            <el-switch class="nei" style="display: block;margin-left:0px" v-model="isWiper"
                                                inline-prompt active-text="开" inactive-text="关" @change="WiperClick"
                                                active-value="1" inactive-value="0" />
                                        </div>

                                    </div>
                                    <div style="display: flex;align-items: center;margin-top: 10px;margin-left: 20px;">
                                        <div style="width: 90px;margin-left:10px;">预置位名称</div>
                                        <el-input v-model="beforName" style="width: 70%;margin-left: 0px;"></el-input>
                                    </div>
                                    <div
                                        style="display: flex;align-items: center;  padding-top: 10px; padding-left: 30px; width: 680px;">
                                        <div style="width: 70px;text-align: right;">预置位</div>
                                        <el-input-number class='one' style="width: 100px !important; margin-left: 20px;"
                                            v-model="beforehandPosition" controls-position="right" />

                                        <el-button class="searchButton" style="margin-left:10px"
                                            @click="presetPosition(129, beforehandPosition)">设置</el-button>
                                        <el-button class="searchButton" style="margin-left:10px"
                                            @click="presetPosition(131, beforehandPosition)">删除</el-button>
                                        <el-button class="searchButton" type="primary" style="margin-left:10px"
                                            @click="presetPosition(130, beforehandPosition)">调用</el-button>

                                    </div>
                                    <div
                                        style="display: flex; align-items: center; position: relative;margin-top:10px;margin-left:5px;">
                                        <div v-if="indexRow % 2 == 1">非同源告警阈值</div>
                                        <div v-if="indexRow % 2 == 1" style="width: 60px;margin-left: 20px;"><el-input
                                                v-model="threshold"></el-input></div>
                                        <div v-if="indexRow % 2 == 0" style="margin-left: 100px;"></div>
                                        <el-button class="searchButton" type="primary" style="width:90px;margin-left: 15px;"
                                            @click="maintenanceArea">有效区域设置</el-button>
                                        <el-button class="searchButton" type="primary" style="width:90px;"
                                            @click="importclick()">保存基准图</el-button>
                                        <el-image v-if="imgUrl != 'null' && deviceIdText != ''"
                                            style=" margin-left: 10px;height: 30px;" :src="url + '/temp/' + imgUrl"
                                            :zoom-rate="1.2" :preview-src-list="[url + '/temp/' + imgUrl]"
                                            :preview-teleported="true" fit="cover" />
                                    </div>

                                </div>
                            </div>
                            <div style="width:100%;display: flex;margin: 10px 0px ;">

                                <!-- <div style="width: 50%; ">
                                <div style="display: inline-block;">表计量程最小值/最小值角度</div>
                                <el-input v-model="info.min_temp" style="width: 28%;margin-left: 8px;"></el-input>
                                <div style="width:28%;position: relative;display: inline-block;margin-left: 10px;">
                                    <el-input v-model="info.min_angle" style="width: 100%;;margin-left: 8px;"></el-input>
                                    <div style="position:absolute; top: 5px;right:8px; color:#a8abb2 ;">度</div>
                                </div>
                            </div>
                            <div style="width: 50%; ">
                                <div style="display: inline-block;">表计量程最大值/最大值角度</div>
                                <el-input v-model="info.max_temp" style="width: 28%;margin-left: 8px;"></el-input>
                                <div style="width:28%;position: relative;display: inline-block;margin-left: 10px;">
                                    <el-input v-model="info.max_angle" style="width: 100%;;margin-left: 8px;"></el-input>
                                    <div style="position:absolute; top: 5px;right:8px; color:#a8abb2 ;">度</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="MonitorClose">取消</div>
                                <div class="details-button" @click="MonitorClick">确定</div>
                            </span>
                        </div>
                    </div>
                </div>
            </template>
        </Eldialog>

        <Eldialog v-if="isAngle" :title="'设置表计量角度'" class="AngleBox" :zIndex="2000" :width="'1280px'" :height="'600px'"
            @before-close="closeAngle">
            <template v-slot:PopFrameContent>
                <Measuringangles v-if="isAngle" :AngleUrl="AngleUrl" :arrdata="arrdata" @closeAngle="closeAngle"
                    style="margin-top: 15px;" />
            </template>
        </Eldialog>
        <Eldialog v-if="isMaintenanceArea" class="AngleBox" :title="'维护生效区域'" :zIndex="2000" :width="'1280px'"
            :height="'600px'" @before-close="closeMaintenanceArea">
            <template v-slot:PopFrameContent>
                <MaintenanceArea v-if="isMaintenanceArea" :AngleUrl="AngleUrl" :Custom3="Custom3" style="margin-top: 15px;"
                    @closeMaintenanceArea="closeMaintenanceArea" />
            </template>
        </Eldialog>
        <Eldialog v-if="isMeasurement" class="AngleBox" :title="'测温设置'" :zIndex="2000" :width="'1320px'" :height="'600px'"
            @before-close="closeMeasurement">
            <template v-slot:PopFrameContent>
                <!-- <el-scrollbar height="720px"> -->
                    <!-- <el-scrollbar> -->
                        <div  style=" width:1280px;height:720px;overflow-y: auto;overflow-x: auto;margin-top:10px;">
                            <Measurement v-if="isMeasurement" :AngleUrl="AngleUrl" :droPoint="droPoint" :imgWidth='imgWidth'
                                style="margin-top: 15px;" :imgHeight='imgHeight' @closeMeasurement="closeMeasurement" />
                        </div>
                    <!-- </el-scrollbar> -->

                <!-- </el-scrollbar> -->

            </template>
        </Eldialog>

    </div>
</template>
<style scoped lang="scss">
.Camera-buttons-box {
    position: relative;
    height: 204px;
    height: 204px;
    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: 13px;
    left: 33px;
    width: 74px;
    height: 57px;
    background: url(@/assets/videoimg/sxj_1.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button2 {
    cursor: pointer;
    position: absolute;
    top: 20px;
    left: 92px;
    width: 73px;
    height: 72px;
    background: url(@/assets/videoimg/sxj_2.png) no-repeat center center;
    background-size: 100% 100%;
}

.Camera-left-button3 {
    cursor: pointer;
    position: absolute;
    top: 72px;
    left: 117px;
    width: 57px;
    height: 75px;
    background: url(@/assets/videoimg/sxj_3.png) no-repeat center center;
    background-size: 100% 100%;
}

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

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

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

.Camera-left-button7 {
    cursor: pointer;
    position: absolute;
    top: 79px;
    left: -28px;
    width: 57px;
    height: 73px;
    background: url(@/assets/videoimg/sxj_7.png) no-repeat center center;
    background-size: 100% 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

    .Camera-left {
        width: 100%;

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

        .Camera-left-bottom {
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            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-left: 180px;

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

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

.faulttemplate-box {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    padding: 5px 20px;
    // 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 - 165px);
    overflow: auto;
    // background-color: rgba(255, 255, 255, 1);
    border-radius: 3px;
    padding: 0px 15px 15px 15px;
    padding-bottom: 0px;
    box-sizing: border-box;
    margin-left: 15px;
    background: #17212e;
    background: url(@/assets/newimg/cjrw_1890.png);
    background-size: 100% 100%;
}

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

:deep(.el-input-number--large) {
    width: 260px !important;
}

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

:deep(.Tree .el-tree-node.is-current>.el-tree-node__content) {
    width: 100%;
    height: 40px;
    // color: #209F84 !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%;
    border-bottom: 1px solid #409eff;
    display: flex;
    color: #fff;

    div {
        width: 85px;
        height: 30px;
        // line-height: 20px;
        margin-left: 10px;
        text-align: center;
        cursor: pointer;
    }

    .tabbas1 {
        width: 85px;
        height: 30px;
        text-align: center;
        // line-height: 20px;
        color: #409eff;
        border-bottom: 3px solid #409eff;
        box-sizing: border-box;
        margin-left: 10px;
        cursor: pointer;
    }
}

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

.tabbas2-toner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0px;
}

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

: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: 102% !important;
// }

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

    // .line {
    //     width: 5px;
    //     height: 14px;
    //     background: #179f84;
    // }

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

}

:deep(.el-form-item__content) {
    margin-left: 0px !important;
}

.videoOperations {
    border: 1px solid rgba(50, 177, 245, 0.4);
    width: 40px;
    height: 40px;
    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: 130px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #B5D7FF;


}

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

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

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

:deep(.el-input--large .el-input__inner) {
    --el-input-inner-height: 32px;
}

:deep(.el-input-number.is-controls-right) {
    --el-input-number-controls-height: 17px;
}

:deep(.select-trigger) {
    width: 100%;
}

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

// :deep(.el-form-item--default){
//     margin-bottom:10px;
// }
// :deep(.Tree .el-tree-node.is-current > .el-tree-node__content) {
//     background-color: #209f843d !important;
// }



/* 拖动条 */
.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;
    border-radius: 3px;
    position: relative;
    background: url(@/assets/navigation/ty_260x988.png);
    background-size: 100% 100%;
    padding: 0px 10px;

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

:deep(.el-input) {
    --el-input-focus-border-color: #209f84 !important;
}

// .el-input-number__decrease:hover, 
:deep(.el-input-number__increase:hover) {
    color: #409eff !important;
}

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

: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-input-group__append) {
    background-color: #ffffff00 !important;
}

.CameraLeft {
    width: 240px;
    background: url(@/assets/newimg/spjk_260.png);
    background-size: 100% 100%;
    margin-right: 10px;
}

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

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