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

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import {
    getdata,
    changeStatus,
    delPosition,
    addPosition,
    editPosition,
} from "@/api/voiceprint";
import { getDeviceByType, getTreefirst } from "@/api/device";
import { ElMessageBox, ElMessage } 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 { downloadFile } from '@/utils/index';
import { exportPatrolDeviceList } from "@/api/robot";
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
import {
    getArea,
} from "@/api/monitordevice";
import { useUserStore } from '@/store/modules/user';
import { getTreeList } from "@/api/linksignal";
const userStore = useUserStore();
//左侧树形控件
interface Tree {
    [x: string]: any;
    label: string;
    children?: Tree[];
}
const defaultProps = {
    children: "children",
    label: "name"
};
const treedata: any = ref([]);
const treeRef = ref();
const treeloading = ref(true)
const currentNodeKey = ref("")

//获取企业树形信息
const stationId = ref()
const stationName = ref()
const stationCode = ref()
function getSelect() {
    getTreeList({stationId:userStore.stationId}).then((res: any) => {
        if (res.code == 0) {
            if (res.data.length == 0) {
                tableData.value = []
                loading.value = false
            }
            treedata.value = res.data
            stationId.value = userStore.stationId
            areaId.value = res.data[0].areaId
            stationName.value = res.data[0].stationName
            stationCode.value = res.data[0].stationCode
            GetArea()
            treeloading.value = false
            loading.value = true
            nextTick(() => {
                treeRef.value?.setCurrentKey(areaId.value);
            });
            getData()
        } else {
            treeloading.value = false
        }

    })
}
// 导航树点击事件
const disabled = ref(false)
function handleNodeClick(data: Tree, node: any) {
    areaId.value = data.areaId
    stationId.value = userStore.stationId
    stationName.value = data.stationName
    stationCode.value = data.stationCode
    GetArea()
    loading.value = true
    getData()
    disabled.value = false
}
// 右侧表格
const deviceName = ref('')
const areaId = ref('')
const tableData: any = ref()
const loading = ref(false)
const paramstable:any = ref({
    size: 10,
    current: 1,
    stationId: '',
    type: 14,
    patrolDeviceName: '',
    deviceModel: '',
    manufacturer: '',
})
const patrolDeviceName = ref()
const deviceModel = ref()
const manufacturer = ref()

const total = ref()
function getData() {
    loading.value = true
    paramstable.value.stationId = userStore.stationId
    paramstable.value.areaId = areaId.value
    paramstable.value.patrolDeviceName = patrolDeviceName.value
    paramstable.value.deviceModel = deviceModel.value
    paramstable.value.manufacturer = manufacturer.value

    getdata(paramstable.value).then((res: any) => {
        loading.value = false
        tableData.value = res.data.records
        total.value = res.data.total
        paramstable.value.size = res.data.size
        paramstable.value.current = res.data.current
        loading.value = false
    })
}
//重置
function resetting() {
    patrolDeviceName.value = ''
    deviceModel.value = ''
    manufacturer.value = ''
    getData()
}

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

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

            });
        })
        .catch(() => {
            getData();
        })
}
//删除
const elMessage = ref('')

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

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

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

//表格多选
const deviceInfos: any = ref([])
function handleSelectionChange(val: any) {
    deviceInfos.value = val
}
//表格多选样式
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (rowIndex % 2 === 0) {
        return 'warning-row'
    } else if (rowIndex % 2 === 1) {
        return 'success-row'
    }
    return ''
}
//弹窗
//新建用户弹窗
//声纹信息
const info: any = ref({
    patroldeviceCode: '',
    patroldeviceName: '',
    istransport: '',
    deviceModel: '',
    useUnit: '',
    deviceSource: '',
    productionDate: '',
    productionCode: '',
    manufacturer: '',
    productionCountry: '',
    place: '',
    ipaddr: '',
    macaddr: '',
    custom1: '',
    materialId: '',
    internationalId: '',
    stationName: '',
    stationCode: '',
});

//rules - 新增
const rules = ref({
    areaId: [
        { required: true, message: '请输入设备编码', trigger: 'blur' },
    ],
    patroldeviceCode: [
        { required: true, message: '请输入设备编码', trigger: 'blur' },
        { validator: stringlength1, trigger: 'blur' }
    ],
    patroldeviceName: [
        { required: true, message: '请输入设备名称', trigger: 'blur' },
        { validator: stringlength, trigger: 'blur' }
    ],
    ipaddr: [
        { required: true, message: '请输入以太网IP地址', pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, trigger: 'blur' }
    ],
    macaddr: [{
        message: '请输入正确的以太网Mac地址', pattern: /^[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}$/, trigger: 'blur'
    }],
    materialId: [
        { required: true, pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'blur' },
        { validator: stringlength3, trigger: 'blur' }
    ],
    internationalId: [
        { required: true, message: '请输入国际编码', trigger: 'blur' },
        { validator: stringlength2, trigger: 'blur' }
    ],
    deviceModel: [
        { validator: stringlength2, 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 > 40) {
        return callback(new Error('字符最大长度不超过40'))
    }
    callback()
}
function stringlength2(rule: any, value: any, callback: any) {
    if (!value) {
        return callback()
    }
    if (value.length > 40) {
        return callback(new Error('字符最大长度不超过40'))
    }
    callback()
}
function stringlength3(rule: any, value: any, callback: any) {
    if (!value) {
        return callback()
    }
    if (value.length > 20) {
        return callback(new Error('字符最大长度不超过20'))
    }
    callback()
}
const tabs = ref(1)
//弹窗关闭
const infoForm = ref()
const infoFormall = ref()
function handleClose() {


    if (infoForm.value != null) infoForm.value.resetFields();
    if (infoFormall.value != null) infoFormall.value.resetFields();
    dialogVisible.value = false;
    dialogMonitor.value = false

}
const dialogVisible = ref(false);
const title = ref("");
function addClick() {
    info.value = {
        type: 14,
        stationId: '',
        stationName: '',
        stationCode: '',
        patroldeviceCode: '',
        patroldeviceName: '',
        deviceModel: '',
        useUnit: '',
        deviceSource: '',
        productionDate: '',
        productionCode: '',
        manufacturer: '',
        place: '',
        ipaddr: '',
        macaddr: '',
        custom1: '',
        materialId: '',
        internationalId: '',
        areaId: areaId.value,
    }
    title.value = "新增声纹监测装置"
    dialogVisible.value = true;
}
//修改
function handleEdit(row: any) {
    title.value = "修改声纹监测装置"
    dialogVisible.value = true;
    const infoall = JSON.parse(JSON.stringify(row))
    info.value = infoall
}
//新增弹窗-基本信息-确定
function confirmClick(formEl: any) {
    formEl.validate((valid: any) => {
        if (valid) {
            info.value.stationId = stationId.value
            info.value.stationName = stationName.value
            info.value.stationCode = stationCode.value
            if (info.value.areaId != '') {
                areaList.value.forEach((element: any) => {
                    if (element.areaId == info.value.areaId) {
                        info.value.areaName = element.areaName
                    }
                });
            } 
            if (info.value.patroldeviceId) {
                editPosition(info.value).then((res: any) => {
                    if (res.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        dialogVisible.value = false;
                        getData()
                    }
                })
            } else {
                addPosition(info.value).then((res: any) => {
                    if (res.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        dialogVisible.value = false;
                        getData()
                    }
                })
            }

        }
    })
}

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


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

//上传文件
// const type = ref('')
// function importclick(row: any) {
//     type.value = row
//     const avatar = document.getElementById('avatar');
//     avatar?.click();
// }
// function changeFiless(e: any) {
//     const files = new FormData()
//     files.append('file', e.target.files[0])
//     files.append('type', type.value)
//     uploadfile(files).then((res) => {
//         getData()
//         ElMessage({
//             type: 'success',
//             message: '上传成功',
//         })
//         var file: any = document.getElementById('avatar');
//         file.value = '';
//     }).catch(() => {
//         ElMessage({
//             type: 'error',
//             message: '上传失败',
//         })
//         var file: any = document.getElementById('avatar');
//         file.value = '';
//     });
// }
const dialogMonitor = ref(false);
function monitorClick(row: any) {
    urls.value = ""
    Scale.value = null
    condensation.value = null
    aperture.value = null
    isLighting.value = false
    isInfrared.value = false
    beforehandPosition.value = ""
    MonitorTile.value = row.patroldeviceName + '--' + row.patroldeviceCode
    onSubmit(row)

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

const MonitorTile = ref("")

function callClick(row: any) { // 调用
    urls.value = "http://localhost:3000/video.flv?name=1"
}
const isLighting = ref(false)
function lightingClick(row: any) { // 灯光方法
    urls.value = "http://localhost:3000/video.flv?name=2"
}
const isInfrared = ref(false)
function infraredClick(row: any) { // 红外方法
    urls.value = "http://localhost:3000/video.flv?name=3"
}
const beforehandPosition = ref("") // 预置位参数
function setUpClick(row: any) { // 预置位--设置方法
}
function delPositionClick(row: any) {// 预置位--删除方法
}
function onSubmit(row: any) {
}


const Scale = ref() //缩放参数
const condensation = ref()//光聚参数
const aperture = ref()//光圈参数
function scaleChang() { // 缩放方法

}
function condensationChang() {// 光圈方法

}
function apertureChang() {// 光圈方法

}
function handleChange() {// 光圈方法

}
//导出
function exportDevice() {

    const params = {
        type: 14,
        stationId: stationId.value
    }
    loading.value = true
    exportPatrolDeviceList(params).then((response: any) => {
        loading.value = false
        downloadFile(response, '声纹台账', 'xlsx')
    }).catch(() => {
        loading.value = false
    });
}
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;
            };
        };
    }
}
function currency(list: any, itemcode: any) {
    let dictname = ''
    list.forEach((element: any) => {
        if (element.itemcode == itemcode) {
            dictname = element.dictname
        }
    })
    return dictname
}
const areaList: any = ref([])
function GetArea() {
    const parmas = {
        stationCode: stationCode.value
    }
    getArea(parmas).then((res: any) => {
        areaList.value = res.data
    })
}
</script>

<template>
    <div style="height: 15px;"></div>
    <div class="faulttemplate-box">
        <Eldialog v-if="dialogVisible" :title="title" :zIndex="2000" :width="'1180px'" :height="'600px'"
            @before-close="handleClose">
            <template v-slot:PopFrameContent>
                <div>
                    <div v-show="tabs == 1" class="tabbas1-toner">
                        <el-form ref="infoForm" :model="info" label-width="90px"
                            style="display: flex; flex-wrap: wrap;margin: 5px;" :rules="rules">
                            <el-form-item label="设备编码" style="width:50%" prop="patroldeviceCode">
                                <el-input v-model="info.patroldeviceCode" style="width: 100%;margin-left: 8px;"
                                    placeholder="请输入设备编码"></el-input>
                            </el-form-item>
                            <el-form-item label="设备名称" style="width:50%" prop="patroldeviceName">
                                <el-input v-model="info.patroldeviceName" style="width: 100%;margin-left: 8px;"
                                    placeholder="请输入设备名称"></el-input>
                            </el-form-item>
                            <el-form-item label="区域" style="width:50%" prop="areaId">
                                <el-select v-model="info.areaId" placeholder="请选择区域" disabled
                                    style="width: 100%;">
                                    <el-option v-for="item in areaList" :key="item.areaId" :label="item.areaName"
                                        :value="item.areaId" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="设备型号" style="width:50%" prop="deviceModel">
                                <el-input v-model="info.deviceModel" style="width: 100%;margin-left: 8px;"
                                    placeholder="请输入设备型号"></el-input>
                            </el-form-item>
                            <el-form-item label="使用单位" style="width:50%">
                                <el-input v-model="info.useUnit" style="width: 100%;margin-left: 8px;"
                                    placeholder="请输入使用单位"></el-input>
                            </el-form-item>
                            <el-form-item label="设备来源" style="width:50%">
                                <el-input v-model="info.deviceSource" style="width: 100%;margin-left: 8px;"
                                    placeholder="请输入设备来源"></el-input>
                            </el-form-item>
                            <el-form-item label="生产日期" style="width:50%">
                                <div class="block" style="width: 100%;">
                                    <el-date-picker v-model="info.productionDate" type="date" placeholder="请选择"
                                        value-format="YYYY-MM-DD" />
                                </div>
                            </el-form-item>
                            <el-form-item label="出厂编号" style="width:50%">
                                <el-input v-model="info.productionCode" style="width: 100%;margin-left: 8px;"
                                    placeholder="请输入出厂编号"></el-input>
                            </el-form-item>
                            <el-form-item label="生产厂家" style="width:50%">
                                <el-select v-model="info.manufacturer" placeholder="请选择生产厂家" style="width:100%;">
                                    <el-option v-for="item in manufacturerList" :key="item.id" :label="item.dictname"
                                        :value="item.itemcode" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="安装位置" style="width:50%">
                                <el-input v-model="info.place" style="width: 100%;margin-left: 8px;"
                                    placeholder="请输入安装位置"></el-input>
                            </el-form-item>
                            <el-form-item label="以太网IP地址" style="width:50%" prop="ipaddr">
                                <el-input v-model="info.ipaddr" style="width: 100%;margin-left: 8px;"
                                    placeholder="请输入以太网IP地址"></el-input>
                            </el-form-item>
                            <el-form-item label="以太网Mac地址" style="width:50%" prop="macaddr">
                                <el-input v-model="info.macaddr" style="width: 100%;margin-left: 8px;"
                                    placeholder="以太网Mac地址"></el-input>
                            </el-form-item>
                            <el-form-item label="实物id" style="width:50%;" prop="materialId">
                                <el-input v-model="info.materialId" style="width: 100%;margin-left: 8px;"
                                    placeholder="请输入实物id"></el-input>

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

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

                    </div>
                </div>
                <span class="dialog-footer"
                    style="width: 100%;margin: auto; display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;margin: 10px 0px; ">
                    <!-- <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="confirmClick(infoForm)">保存</el-button> -->
                    <div class="details-button" @click="handleClose">取消</div>
                    <div class="details-button" @click="confirmClick(infoForm)">确定</div>
                </span>
            </template>
        </Eldialog>
        <!-- 删除 -->
        <aside id="silderLeft">
            <div class="displayflex" style="margin: 0;padding-left: 15px;height: 30px;margin-top: 10px;">
                <div class="line"></div>
                <div class="title" style="font-size: 14px;">分类导航</div>
            </div>
            <el-scrollbar height="calc(84vh)">
                <el-tree ref="treeRef"
                    :class="useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'"
                    node-key="stationId" :data="treedata" :current-node-key="currentNodeKey" :highlight-current="true"
                    :props="defaultProps" v-loading="treeloading" @node-click="handleNodeClick"
                    style="padding:10px 15px 0px;">
                </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="patrolDeviceName" clearable placeholder="请输入设备名称" @clear="getData()"
                        @keyup.enter="getData()" style="margin-right:15px ;width: 180px;" />
                    <el-input v-model="deviceModel" clearable placeholder="请输入设备型号" @clear="getData()"
                        @keyup.enter="getData()" style="margin-right:15px ;width: 180px;" />
                    <el-select v-model="manufacturer" placeholder="请选择生产厂家" style="margin-right: 15px; "
                        @change="getData">
                        <el-option v-for="item in manufacturerList" :key="item.id" :label="item.dictname"
                            :value="item.itemcode" />
                    </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="exportDevice()" style="margin-right: 10px;">
                        导出</el-button>

                    <el-button class="searchButton" v-hasPerm="['add:patroldevice']" type="primary" @click="addClick"
                        :disabled="treedata.length == 0 || disabled"> 新增</el-button>
                    <!-- <el-button type="primary" @click="addClick"><img style="margin-right:5px;"
                                                    src="@/assets/MenuIcon/u429.png" alt=""> 导入</el-button> -->
                    <el-button class="searchButton" v-hasPerm="['del:patroldevice']" @click="delClick"
                        :disabled="deviceInfos.length == 0" :type="deviceInfos.length > 0 ? 'primary' : ''">
                        删除</el-button>
                </div>
            </div>
            <div class="draggable">
                <el-table v-loading="loading" :data="tableData" style="width: 100%;height: calc(75vh);
                            overflow: auto;margin-bottom: 15px;" row-key="id" @selection-change="handleSelectionChange"
                    default-expand-all :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                    <el-table-column type="selection" width="30" align="center" :selectable="checkSelectable" />
                    <el-table-column type="index" label="序号" width="50px" align="center" />
                    <el-table-column label="设备编码" prop="patroldeviceCode" align="center" ></el-table-column>
                    <el-table-column label="设备名称" prop="patroldeviceName" align="center" ></el-table-column>
                    <el-table-column label="设备型号" prop="deviceModel" align="center" ></el-table-column>
                    <el-table-column label="设备来源" prop="deviceSource" align="center" width="110"></el-table-column>
                    <el-table-column label="生产厂家" prop="manufacturer" align="center"  width="110">
                        <template #default="scope">
                            {{ currency(manufacturerList, scope.row.manufacturer) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="安装位置" prop="place" align="center"  ></el-table-column>
                    <el-table-column label="实时状态" width="100" align="center"  prop="datastatus">
                        <template #default="scope">
                            <span v-if="scope.row.datastatus == 1" style="color:rgb(0, 204, 102)"><img
                                    src="@/assets/newimg/u387.png" alt=""
                                    style="display: inline-block; margin: 0px 5px; ">
                                在线</span>
                            <span v-else style="color:#F24444"> <img src="@/assets/MenuIcon/u499.png" alt=""
                                    style="display: inline-block; margin: 0px 5px; ">离线</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="120" align="center"  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:patroldevice']" src="@/assets/newimg/ht_xg.png" alt=""
                                    title="修改" @click="handleEdit(scope.row)" style="cursor: pointer;">
                                <img v-hasPerm="['del:patroldevice']" src="@/assets/newimg/ht_sc.png" alt=""
                                    v-if="scope.row.datastatus == 0" title="删除" @click="handleDelete(scope.row)"
                                    style="cursor: pointer; ">
                                <img v-hasPerm="['del:patroldevice']" src="@/assets/newimg/ht_sc1.png" alt="" v-else
                                    title="删除" style="cursor: pointer; ">
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <Page :total="total" v-model:size="paramstable.size" v-model:current="paramstable.current"
                    @pagination="getData()"></Page>
            </div>
        </section>
        <!-- <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :title="title"
            append-to-body width="1175px" draggable>


        </el-dialog> -->
        <el-dialog v-model="dialogMonitor" :close-on-click-modal="false" :before-close="handleClose"
            :title="MonitorTile" append-to-body width="855px" draggable class="monitor-dialog">
            <div class="Camera">
                <div class="Camera-left">
                    <div class="Camera-img">
                        <JessibucaPlayer v-if="dialogMonitor" ref="jessibuca" :_uid="35" :visible.sync="true"
                            :videoUrl="urls" height="100px" :hasAudio="false" fluent autoplay live></JessibucaPlayer>
                    </div>
                    <div class="Camera-left-bottom">
                        <div class="Camera-left-buttons">
                            <div class="Camera-left-button"><img src="@/assets/MenuIcon/u1158.png" alt=""
                                    style="transform:rotate(-45deg)"></div>
                            <div class="Camera-left-button"><img src="@/assets/MenuIcon/u1158.png" alt=""></div>
                            <div class="Camera-left-button"><img src="@/assets/MenuIcon/u1158.png" alt=""
                                    style="transform:rotate(45deg)"></div>
                            <div class="Camera-left-button"><img src="@/assets/MenuIcon/u1158.png" alt=""
                                    style="transform:rotate(-90deg)"></div>
                            <div class="Camera-left-button"><img src="@/assets/MenuIcon/u1168.png" alt=""></div>
                            <div class="Camera-left-button"><img src="@/assets/MenuIcon/u1158.png" alt=""
                                    style="transform:rotate(90deg)"></div>
                            <div class="Camera-left-button"><img src="@/assets/MenuIcon/u1158.png" alt=""
                                    style="transform:rotate(-135deg)"></div>
                            <div class="Camera-left-button"><img src="@/assets/MenuIcon/u1158.png" alt=""
                                    style="transform:rotate(180deg)"></div>
                            <div class="Camera-left-button"><img src="@/assets/MenuIcon/u1158.png" alt=""
                                    style="transform:rotate(135deg)"></div>
                        </div>
                        <div class="Camera-left-buttons">
                            <el-input-number class="Camera-left-input" v-model="Scale" @change="handleChange"
                                placeholder="缩放" />
                            <el-input-number class="Camera-left-input" v-model="condensation" @change="handleChange"
                                placeholder="光聚" />
                            <el-input-number class="Camera-left-input" v-model="aperture" @change="handleChange"
                                placeholder="光圈" />
                        </div>
                        <div style="width:400px">

                            <div style="display: flex;padding-top: 10px;padding-left: 30px;">
                                <span style="display: block; padding-top: 4px;padding-left: 15px;">灯光</span>
                                <el-switch style="display: block;margin-left:10px" v-model="isLighting" inline-prompt
                                    active-text="开" inactive-text="关" @change="lightingClick" />
                                <span style="display: block;padding-top: 4px;padding-left:30px">红外</span>
                                <el-switch style="display: block;margin-left:10px" v-model="isInfrared" inline-prompt
                                    active-text="开" inactive-text="关" @change="infraredClick" />
                            </div>
                            <!-- <div class="Camera-left-switchs-two"></div> -->
                            <div style="display: flex;align-items: center;    padding-top: 20px; padding-left: 30px;">
                                <div style="width: 50px;">预置位</div>
                                <el-input type="number" class="Camera-number-input" style="width:100px"
                                    v-model="beforehandPosition" placeholder="" />
                                <el-button class="searchButton" style="margin-left:10px"
                                    @click="setUpClick">设置</el-button>
                                <el-button class="searchButton" @click="delPositionClick">删除</el-button>
                                <el-button class="searchButton" type="primary" @click="callClick">调用</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.silderLeft-default {
    :deep(.el-tree-node__label) {
        font-size: 16px !important;
    }
}

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

}

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

}

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

.tabbas2Bottom {
    width: 155px;
    height: 16px;
    border-left: #209F84 4px solid;
    font-size: 16px;
    text-align: center;
    line-height: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}

.tabbas3Bottom {
    width: 70px;
    height: 16px;
    border-left: #209F84 4px solid;
    font-size: 16px;
    text-align: center;
    line-height: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}

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

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

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

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

//tabs
.tabbas {
    width: 100%;
    border-bottom: 1px solid rgb(228 228 228);
    display: flex;

    .tabbas-left {
        width: 70px;
    }

    .tabbas-right {
        width: 70px;
    }

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

    .tabbas1 {
        width: 70px;
        height: 51px;
        text-align: center;
        line-height: 51px;
        color: #209F84;
        border-bottom: 3px solid #209F84;
        box-sizing: border-box;
        margin-left: 10px;
        cursor: pointer;
    }

    .tabbas2 {
        width: 70px;
        height: 51px;
        text-align: center;
        line-height: 51px;
        color: #209F84;
        border-bottom: 3px solid #209F84;
        box-sizing: border-box;
        margin-left: 10px;
        cursor: pointer;
    }
}

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

.checkedchange {
    padding: 0px 10px;
    border: #dcdfe6 1px solid;
    border-radius: 5px;
    margin: 0px 15px 15px 0px;
}

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

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

}

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

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

:deep(.el-form-item__label) {
    width: 125px !important;
}

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

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

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

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

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



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

}

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

    .Camera-left {
        width: 100%;

        .Camera-img {
            width: 100%;
            height: 500px;
            border: 2px solid rgb(7, 162, 110);
        }

        .Camera-left-bottom {
            margin: auto;
            display: flex;
            width: 100%;
            padding: 10px 10px;
            padding-bottom: 5px;
            background: rgb(53 222 176);
            margin-top: 10px;

            .Camera-left-switch {
                width: 260px;
                display: flex;
                flex-wrap: wrap;
                // justify-content: space-between;

                .Camera-left-switchs {
                    width: 135px;
                    display: flex;
                    // align-items: center;
                    // justify-content: space-between;
                }

                .Camera-left-switchs-two {
                    width: 95px;
                    display: flex;
                    // align-items: center;
                    // justify-content: space-between;
                }
            }

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

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

                .Camera-left-button {
                    width: 36px;
                    height: 36px;
                    background-color: rgb(53, 222, 176);
                    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: rgb(33, 191, 149);
                }
            }
        }

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

/* 拖动条 */
.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: 260px;
    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-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;
}
</style>
