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

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

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
import Page from '@/components/Pagination/page.vue'
import { useUserStore } from '@/store/modules/user';
import {
    getAlgorithmClassList,
    addAlgorithmClassAndParams,
    getAlgorithmParamsList,
    deleteAlgorithmClass,
    getSubstationAreaByCode,
    getSubstationBayByArea,
    getAlgorithmClassComponentPage,
    getComponentPage,
    batchAddAlgorithmClassComponent,
    getSubstationMaindeviceList,
    deleteAlgorithmClassComponent,
    batchAddAlgorithmDevice
} from "@/api/algorithm";
import {
    getTreelist,
    getDeviceByType,
    getdevicedata,
    getMainEquipment,
    getBayType,
} from "@/api/device";
import {
    getDeviceTree,
    queryDeviceSignal
} from '@/api/equipmentsignal';
import { publicTree } from '@/utils/validate';
const userStore = useUserStore();
const defaultProps = {
    label: "algorithmClassName"
};
const defaultProps1 = {
    children: "children",
    label: "name"
};
const treedata = ref([])
const currentNodeKey = ref("")
const treeloading = ref(false)
const treeRef = ref()
const algorithmClassName = ref('')
function gettreedata() {
    treeloading.value = true
    getAlgorithmClassList({ algorithmClassName: algorithmClassName.value }).then((res: any) => {
        treedata.value = res.data
        treeloading.value = false
        algorithmId.value = res.data[0].id
        gatdata()
        nextTick(() => {
            treeRef.value?.setCurrentKey(algorithmId.value);
        });

    })
}
//新增算法
const algorithmible = ref(false)
const title = ref('')
function addAlgorithm() {
    algorithmible.value = true
    title.value = '新增算法'
    algorithmData.value.length = 0
    algorithmform.value = {
        algorithmClassCode: '',
        algorithmClassName: '',
        serviceAddress: '',
        description: ''
    }
}
function editAlgorithm(row: any) {
    algorithmible.value = true
    title.value = '修改算法'
    algorithmform.value = JSON.parse(JSON.stringify(row));
    getAlgorithmParamsList({ algorithmId: row.id }).then((res: any) => {
        algorithmData.value = res.data
    })
}
function delAlgorithm(row: any) {
    ElMessageBox.confirm("确定删除此算法吗？", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            deleteAlgorithmClass({ id: row.id }).then((res: any) => {
                if (res.code == '0') {
                    gettreedata()
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                }
            })
        })

}
function handleClose() {
    ruleFormRef.value.resetFields();
    algorithmible.value = false
}
function handleNodeClick(data: any, node: any) {
    algorithmId.value = data.id
    gatdata()
}
const moderules: any = ref({
    algorithmClassCode: [{ required: true, message: "请输入算法编号", trigger: "blur" }],
    algorithmClassName: [{ required: true, message: "请输入算法名称", trigger: "blur" }],
    serviceAddress: [{ required: true, message: "请输入算法描述", trigger: "blur" }],
});
const algorithmform: any = ref({
    algorithmClassCode: '',
    algorithmClassName: '',
    serviceAddress: '',
    description: ''
})
const dataarr = ref([
    {
        dictname: '否',
        itemcode: '0'
    },
    {
        dictname: '是',
        itemcode: '1'
    },
])
const algorithmData: any = ref([])
const algorithmDialog = ref(false)
const paramType: any = ref([])
function addAlgorithmsan() {
    algorithmData.value.push({
        paramOrder: '', //参数序号
        paramName: '', //参数名称
        paramDesc: '', //参数中文描述
        paramType: '', //参数类型：[('01', '单个文本'), ('02', '文本数组'), ('03', '单个数值'),  ('04', '数值数组'), ('05', 'Json对象'),('06', 'Json数组'), ('07', 'csv数据文件'), ('08', '单张图片'),('09', '图片文件包'),('10', 'Json文件')]
        paramUnit: '', //自定义描述参数单位
        paramRange: '', //参数范围
        defaultValues: '', //默认值
        paramFixed: '', //是否固定参数，0：否；1：是；当为否时需要关联巡视点位或者信号'
        algor: true
    })
}

function saveAlgor(row: any) {
    if (row.algor) {
        if (!(row.paramName && row.paramType && row.paramFixed)) {
            ElMessage.warning('请填写参数名称，类型和是否固定参数')
            return
        } else {
            row.algor = !row.algor
        }
    } else {
        row.algor = !row.algor
    }
}
function delAlgor(row: any) {
    algorithmData.value.splice(row.$index, 1);
}
const areaList: any = ref([])
function gettype() {
    getDeviceByType({ dictcode: 'paramType' }).then((res: any) => {
        paramType.value = res.data
    })
    getSubstationAreaByCode({ stationCode: userStore.stationCode }).then((res: any) => {
        areaList.value = res.data
    })
    getDeviceByType({ dictcode: 'ykytType' }).then((ress: any) => {
        typeoptions.value = ress.data
    })
}
const ruleFormRef = ref();
//用户弹窗-保存
function confirmClick(formEl: any) {
    formEl.validate((valid: any) => {
        if (valid) {
            algorithmData.value.forEach((item: any, index: any) => {
                item.paramOrder = index + 1
            })
            for (let i = 0; i < algorithmData.value.length; i++) {
                if (!(algorithmData.value[i].paramName && algorithmData.value[i].paramType &&algorithmData.value[i].paramFixed)) {
                    ElMessage.warning('请填写参数名称，类型和是否固定参数')
                    return
                }
            }
            addAlgorithmClassAndParams({ algorithmClass: algorithmform.value, algorithmParamsList: algorithmData.value }).then((res: any) => {
                console.log(res)
                if (res.code == 0) {
                    algorithmible.value = false
                    ElMessage.success('更改成功')
                    gettreedata()
                }
            })
            // if(algorithmform.value.id){

            // }else{

            // }
        }
    })
}
//左侧表格
const tableData = ref([]);
const total = ref()
const dialog = ref(false)
const algorithmId = ref('')
const queryParams = ref({
    algorithmId: '',
    current: 1,
    size: 10,
});
function gatdata() {
    dialog.value = true
    queryParams.value.algorithmId = algorithmId.value
    getAlgorithmClassComponentPage(queryParams.value).then((res: any) => {
        dialog.value = false
        tableData.value = res.data.records
        total.value = res.data.total
        queryParams.value.size = res.data.size
        queryParams.value.current = res.data.current
    })
}
//选择主设备
const masterble = ref(false)
const masterdata = ref([])
const mastertotal = ref()
const masterLoading = ref(false)
const masterform: any = ref({
    size: 20,
    current: 1
})
const multipleTableRef = ref()
function addMaster() {
    title.value = '选择主设备'
    masterble.value = true
    getbybay()

}
function handleClose1() {
    masterble.value = false
}
function replace() {
    meterdata.value.forEach((item: any) => {
        item.componentId = componentId.value
    })
    batchAddAlgorithmDevice(meterdata.value).then((res: any) => {
        if (res.code == 0) {
            mainble.value = false
            ElMessage.success('关联成功')
        }
    })
}
function handleClose2() {
    mainble.value = false
}
const multipleSelection = ref()
function handleSelectionChange(val: any) {
    multipleSelection.value = val;
}
function getbybay() {
    masterLoading.value = true
    masterform.value.algorithmId = algorithmId.value
    getComponentPage(masterform.value).then((res: any) => {
        masterLoading.value = false
        masterdata.value = res.data.records
        masterform.value.size = res.data.size
        masterform.value.current = res.data.current
        mastertotal.value = res.data.total
    })
}
function addmasteras() {
    multipleSelection.value.forEach((item: any) => {
        item.algorithmId = algorithmId.value
    })
    batchAddAlgorithmClassComponent(multipleSelection.value).then((res: any) => {
        if (res.code == 0) {
            getbybay()
            ElMessage({
                type: 'success',
                message: '添加成功'
            })
            masterble.value = false
            gatdata()
        }
    })
}
const bayList: any = ref([])
function getcomponent() {
    getSubstationBayByArea({ stationCode: userStore.stationCode, areaId: masterform.value.areaId }).then((res: any) => {
        bayList.value = res.data
        getbybay()
    })
}
const mainList: any = ref([])
function getmainDevice() {
    getbybay()
    getSubstationMaindeviceList({ bayId: masterform.value.bayId }).then((res: any) => {
        mainList.value = res.data
    })
}
function cleraareaId() {
    masterform.value.bayId = ''
    masterform.value.mainDeviceId = ''
}
function cleramainId() {
    masterform.value.mainDeviceId = ''
}
function delmain(row: any) {
    ElMessageBox.confirm("确定删除此主设备吗？", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            deleteAlgorithmClassComponent({ id: row.id }).then((res: any) => {
                if (res.code == 0) {
                    gatdata()
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                }
            })
        })

}
const mainble = ref()
function editmain(row: any) {
    mainble.value = true
    meterloding.value = true
    componentId.value = row.componentId
    getAlgorithmParamsList({ algorithmId: row.algorithmId, componentId: componentId.value }).then((res: any) => {
        meterdata.value = res.data
        meterloding.value = false
    })
}
//关联参数 
const meterdata = ref([])
const meterloding = ref(false)
const selectble = ref(false)
const sourceType = ref(1)
const cnshuId = ref('')
const tableref = ref()
const deviceId = ref('')
const componentId = ref('')
function selentDevide(row: any) {
    cnshuId.value = row.paramId
    if (row.deviceId) {
        deviceId.value = row.deviceId
    }
    selectble.value = true
    sourceType.value = 1
    typeChange(1)
    notification()
}

function selectbleClose() {
    selectble.value = false
    deviceIdList.value = null
    sourceType.value = 0
    devicedata.value.length = 0
}
function suredevice() {
    selectble.value = false
    devicedata.value.length = 0
    meterdata.value.forEach((item: any) => {
        if (item.paramId == cnshuId.value) {
            if (sourceType.value == 1) {
                item.deviceId = deviceIdList.value.deviceId
                item.deviceName = deviceIdList.value.deviceName
                item.paramValue = deviceIdList.value.deviceName
            } else if (sourceType.value == 2) {
                item.deviceId = deviceIdList.value.signalId
                item.deviceName = deviceIdList.value.signalName
                item.paramValue = deviceIdList.value.signalName
            }
            item.sourceType = sourceType.value

        }
    })
    console.log(meterdata.value)
}
function typeChange(val: any) {
    sourceType.value = val
    getdevicedata1()
}
//////
const bayId = ref('')
const devicedataloading = ref(false)
const devicetaotal = ref()
const devicedata = ref([])
const paramstable: any = ref({
    size: 10,
    current: 1,
    deviceName: '',
    componentId: ''
})
function getdevicedata1() {

    if (sourceType.value == 1) {
        paramstable.value.bayId = bayId.value
        paramstable.value.componentId = componentId.value
        getdevicedata(paramstable.value).then((res: any) => {
            devicedata.value = res.data.records
            devicetaotal.value = res.data.total
            paramstable.value.size = res.data.size
            paramstable.value.current = res.data.current
            devicedataloading.value = false
            nextTick(() => {
                if (deviceId.value) {
                    const foundObj = devicedata.value.find((item: any) => item.deviceId == deviceId.value);
                    tableref.value!.setCurrentRow(foundObj)
                }
            });

        })
    } else if (sourceType.value == 2) {
        paramstable.value.mainComponentId = componentId.value
        queryDeviceSignal(paramstable.value).then((res: any) => {
            devicedata.value = res.data.records
            devicetaotal.value = res.data.total
            paramstable.value.size = res.data.size
            paramstable.value.current = res.data.current
            devicedataloading.value = false
            nextTick(() => {
                if (deviceId.value) {
                    const foundObj = devicedata.value.find((item: any) => item.signalId == deviceId.value);
                    tableref.value!.setCurrentRow(foundObj)
                }
            });
        })
    }
    devicedataloading.value = true



}
function resetting() {
    paramstable.value = {
        size: 10,
        current: 1,
        deviceName: '',
        mainDeviceId: '',
        componentId: ''
    }
    getdevicedata1()
}
const deviceInfos: any = ref([])
function handleSelectionChange1(val: any) {
    deviceInfos.value = val
}
//间隔下所属部件
const getacaTypeBayId = ref()
// 主设备类型
const EquipmentType = ref()
//点位分类
const DeviceClass: any = ref([])
const Metertype = ref([])
const mainEquipment: any = ref([])
// 获取弹窗所需数据
function notification() {
    // 所属主设备
    const params = {
        bayId: bayId.value
    }
    getMainEquipment(params).then((res: any) => {
        mainEquipment.value = res.data
    });
    //间隔下所属部件
    const paramsbayId = {
        bayId: bayId.value
    }
    getBayType(paramsbayId).then((res: any) => {
        getacaTypeBayId.value = res.data
    })
    // 表计类型
    getDeviceByType({ dictcode: 'MeterType' }).then((res: any) => {
        Metertype.value = res.data
    })
    //点位分类
    getDeviceByType({ dictcode: 'DeviceClass' }).then((res: any) => {
        DeviceClass.value = res.data
    })
    //主设备类型
    getDeviceByType({ dictcode: 'EquipmentType' }).then((res: any) => {
        EquipmentType.value = res.data
    })

}
//////
/////
const typeoptions: any = ref([])
function isykyttype(val: any) {
    let name: any = ''
    for (let i = 0; i < typeoptions.value.length; i++) {
        if (typeoptions.value[i].itemcode === val) {
            name = typeoptions.value[i].dictname
            break
        }
    }
    return name
}
const deviceIdList: any = ref()
function rowClick(row: any) {
    deviceIdList.value = row
}
/////
//表格多选样式
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (rowIndex % 2 === 0) {
        return 'warning-row'
    } else if (rowIndex % 2 === 1) {
        return 'success-row'
    }
    return ''
}
function currency(list: any, itemcode: any) {
    let dictname = ''
    list.forEach((element: any) => {
        if (element.itemcode == itemcode) {
            dictname = element.dictname
        }
    })
    return dictname
}
onMounted(() => {
    gettreedata();
    gettype();

});
</script>

<template>
    <div class="faulttemplate-box">
        <aside id="silderLeft">
            <div class="left_title">
                <div class="left_title_text">
                    <img src="@/assets/navigation/ty_bq.png" alt="">
                    <div>算法分类</div>
                </div>
                <div class="left_title_txt" @click="addAlgorithm()">
                    <img src="@/assets/navigation/u126.svg" alt="" title="新增算法">
                </div>
            </div>
            <el-input v-model="algorithmClassName" clearable placeholder="请输入名称" @change="gettreedata"
                style="width:100%;margin-top: 10px;" class="videomonitor-input">
                <template #suffix>
                    <img src="@/assets/videoimg/u2937.png" style="cursor:pointer ;" @click="gettreedata">
                </template>
            </el-input>
            <el-tree ref="treeRef" node-key="id" :data="treedata" :current-node-key="currentNodeKey"
                :highlight-current="true" :props="defaultProps" v-loading="treeloading" @node-click="handleNodeClick"
                style="height: calc(80vh); overflow: auto;margin-top: 10px;">
                <template #default="{ node, data }">
                    <div class="custom_tree_node">
                        <span>{{ node.label }}</span>
                        <div class="tree_node_img">
                            <img src="@/assets/newimg/ht_xg.png" alt="" title="修改算法" @click="editAlgorithm(data)"
                                style="cursor: pointer;">
                            <img src="@/assets/newimg/ht_sc.png" alt="" title="删除算法" @click="delAlgorithm(data)"
                                style="cursor: pointer;">
                        </div>
                    </div>
                </template>
            </el-tree>
        </aside>
        <section class="silderRight">
            <el-button class="searchButton" type="primary" @click="addMaster()"
                style="margin-bottom: 15px;">选择主设备</el-button>
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;height: calc(77vh);
                    overflow: auto;" row-key="componentId" default-expand-all :v-loading="dialog"
                :row-class-name="tableRowClassName"
                :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                <el-table-column type="index" label="序号" width="50" align="center" />
                <el-table-column prop="areaName" label="区域" align="center"></el-table-column>
                <el-table-column prop="bayName" label="间隔" align="center"></el-table-column>
                <el-table-column prop="mainDeviceName" label="主设备" align="center"></el-table-column>
                <el-table-column prop="componentName" label="部件" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="60">
                    <template #default="scope">
                        <span
                            style="display: flex;display: -webkit-flex;justify-content: space-around;-webkit-justify-content: space-around; ">
                            <img src="@/assets/newimg/ht_xg.png" alt="" title="关联" @click="editmain(scope.row)"
                                style="cursor: pointer;">
                            <img src="@/assets/newimg/ht_sc.png" alt="" title="删除" @click="delmain(scope.row)"
                                style="cursor: pointer;">
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current"
                @pagination="gatdata()">
            </Page>
        </section>
        <!--弹框-->
        <Eldialog v-if="algorithmible" :title="title" :zIndex="2000" :width="'1150px'" @before-close="handleClose">
            <template v-slot:PopFrameContent>
                <el-form ref="ruleFormRef" style="padding: 15px 0px 0px;" :model="algorithmform" :rules="moderules"
                    label-width="auto">
                    <div class="form_box">
                        <el-form-item label="算法编号" prop="algorithmClassCode" style="width: 49%;">
                            <el-input v-model="algorithmform.algorithmClassCode" />
                        </el-form-item>
                        <el-form-item label="算法名称" prop="algorithmClassName" style="width: 49%;">
                            <el-input v-model="algorithmform.algorithmClassName" />
                        </el-form-item>
                    </div>
                    <div class="form_box">
                        <el-form-item label="服务地址" prop="serviceAddress" style="width: 49%;">
                            <el-input v-model="algorithmform.serviceAddress" />
                        </el-form-item>
                        <el-form-item label="算法描述" style="width: 49%;">
                            <el-input v-model="algorithmform.description" />
                        </el-form-item>
                    </div>
                </el-form>
                <el-table :data="algorithmData" style="width: 100%;margin-bottom: 20px;height: calc(65vh);
                    overflow: auto;" default-expand-all :v-loading="algorithmDialog"
                    :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                    <el-table-column type="index" label="序号" width="50" align="center" />
                    <el-table-column prop="paramName" label="参数名称" width="100" align="center">
                        <template #default="scope">
                            <div style="height:35px;padding: 2px 0px;">
                                <el-input v-if="scope.row.algor" v-model="scope.row.paramName" style="width: 100%"
                                    clearable />
                                <div v-else style="line-height: 35px;">{{ scope.row.paramName }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="paramDesc" label="中文描述" align="center">
                        <template #default="scope">
                            <div style="height:35px;padding: 2px 0px;">
                                <el-input v-if="scope.row.algor" v-model="scope.row.paramDesc" style="width: 100%"
                                    clearable />
                                <div v-else style="line-height: 35px;">{{ scope.row.paramDesc }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="paramType" label="类型" width="130" align="center">
                        <template #default="scope">
                            <div style="height:35px;padding: 2px 0px;">

                                <el-select v-if="scope.row.algor" v-model="scope.row.paramType" placeholder=" ">
                                    <el-option v-for="item in paramType" :key="item.id" :label="item.dictname"
                                        :value="item.itemcode" />
                                </el-select>
                                <div v-else style="line-height: 35px;">{{ currency(paramType, scope.row.paramType) }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="paramUnit" label="单位" width="100" align="center">
                        <template #default="scope">
                            <div style="height:35px;padding: 2px 0px;">
                                <el-input v-if="scope.row.algor" v-model="scope.row.paramUnit" style="width: 100%"
                                    clearable />
                                <div v-else style="line-height: 35px;">{{ scope.row.paramUnit }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="paramRange" label="范围" width="100" align="center">
                        <template #default="scope">
                            <div style="height:35px;padding: 2px 0px;">
                                <el-input v-if="scope.row.algor" v-model="scope.row.paramRange" style="width: 100%"
                                    clearable />
                                <div v-else style="line-height: 35px;">{{ scope.row.paramRange }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="defaultValues" label="默认值" width="100" align="center">
                        <template #default="scope">
                            <div style="height:35px;padding: 2px 0px;">
                                <el-input v-if="scope.row.algor" v-model="scope.row.defaultValues" style="width: 100%"
                                    clearable />
                                <div v-else style="line-height: 35px;">{{ scope.row.defaultValues }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="paramFixed" label="是否固定参数" width="100" align="center">
                        <template #default="scope">
                            <div style="height:35px;padding: 2px 0px;">
                                <el-select v-if="scope.row.algor" v-model="scope.row.paramFixed" placeholder=" ">
                                    <el-option v-for="item in dataarr" :key="item.itemcode" :label="item.dictname"
                                        :value="item.itemcode">
                                    </el-option>
                                </el-select>
                                <div v-else style="line-height: 35px;">{{ currency(dataarr, scope.row.paramFixed) }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="60" align="center">
                        <template #header>
                            <div class="table_header">
                                <div>操作</div>
                                <img src="@/assets/navigation/u331.svg" alt="" title="增加算法" @click="addAlgorithmsan">
                            </div>
                        </template>
                        <template #default="scope">
                            <span
                                style="display: flex;display: -webkit-flex;justify-content: space-around;-webkit-justify-content: space-around; ">
                                <img src="@/assets/newimg/ht_xg.png" alt="" title="修改" @click="saveAlgor(scope.row)"
                                    style="cursor: pointer;">
                                <img src="@/assets/newimg/ht_sc.png" alt="" title="删除" @click="delAlgor(scope)"
                                    style="cursor: pointer;">
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <span class="dialog-footer"
                    style="width: 100%;margin: auto; display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;">
                    <div class="details-button" @click="handleClose">取消</div>
                    <div class="details-button" @click="confirmClick(ruleFormRef)">确定</div>
                </span>
            </template>
        </Eldialog>
        <Eldialog v-if="masterble" :title="title" :zIndex="2000" :width="'1150px'" @before-close="handleClose1">
            <template v-slot:PopFrameContent>
                <div
                    style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
                    <div style="width: 100%;display: flex;align-items: center;">
                        <el-input v-model="masterform.componentName" placeholder="请输入部件名称" clearable
                            @change="getbybay()" style="width: 220px;margin-right: 10px;" />
                        <el-select v-model="masterform.areaId" placeholder="区域 " @change="getcomponent()"
                            style="width: 220px;margin-right: 10px;" @clear="cleraareaId()" clearable>
                            <el-option v-for="item in areaList" :key="item.areaId" :label="item.areaName"
                                :value="item.areaId" />
                        </el-select>
                        <el-select v-model="masterform.bayId" placeholder="间隔" :disabled="!masterform.areaId"
                            @change="getmainDevice()" style="width: 220px;margin-right: 10px;" clearable
                            @clear="cleramainId()">
                            <el-option v-for="item in bayList" :key="item.bayId" :label="item.bayName"
                                :value="item.bayId" />
                        </el-select>
                        <el-select v-model="masterform.mainDeviceId" placeholder="主设备" :disabled="!masterform.bayId"
                            @change="getbybay()" style="width: 220px;margin-right: 10px;" clearable>
                            <el-option v-for="item in mainList" :key="item.mainDeviceId" :label="item.mainDeviceName"
                                :value="item.mainDeviceId" />
                        </el-select>
                        <el-button class="searchButton" type="primary" @change="getbybay()">搜索</el-button>
                    </div>
                    <el-button class="searchButton" type="primary" @click="addmasteras()">确定</el-button>
                </div>
                <el-table ref="multipleTableRef" row-key="componentId" :data="masterdata" style="width: 100%;margin: 20px 0px;height: calc(65vh);  
                    overflow: auto;" default-expand-all v-loading="masterLoading" :row-class-name="tableRowClassName"
                    @selection-change="handleSelectionChange"
                    :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column type="index" label="序号" width="50" align="center" />
                    <el-table-column prop="areaName" label="区域" align="center"></el-table-column>
                    <el-table-column prop="bayName" label="间隔" align="center"></el-table-column>
                    <el-table-column prop="mainDeviceName" label="主设备" align="center"></el-table-column>
                    <el-table-column prop="componentName" label="部件" align="center"></el-table-column>
                </el-table>
                <Page :total="mastertotal" v-model:size="masterform.size" v-model:current="masterform.current"
                    @pagination="getbybay()"></Page>
            </template>
        </Eldialog>
        <Eldialog v-if="mainble" :title="'关联参数'" :zIndex="2000" :width="'900px'" @before-close="handleClose2">
            <template v-slot:PopFrameContent>
                <el-table :data="meterdata" style="width: 100%;margin: 20px 0px;height: calc(65vh);
                    overflow: auto;" default-expand-all :v-loading="meterloding" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                    <el-table-column type="index" label="序号" width="50" align="center" />
                    <el-table-column prop="paramName" label="参数名称" width="160" align="center"></el-table-column>
                    <el-table-column prop="paramDesc" label="中文描述" align="center"></el-table-column>
                    <el-table-column prop="paramType" label="类型" width="130" align="center">
                        <template #default="scope">
                            <div style="height:35px;padding: 2px 0px;">
                                <div style="line-height: 35px;">{{ currency(paramType, scope.row.paramType) }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="paramRange" label="范围" width="70" align="center"></el-table-column>
                    <el-table-column prop="paramValue" label="参数值" align="center">
                        <template #default="scope">
                            <div style="padding: 2px 0px;">
                                <el-input v-if="scope.row.paramFixed == 1" v-model="scope.row.paramValue"
                                    style="width: 100%" clearable />
                                <span v-else-if="scope.row.paramFixed == 0">{{ scope.row.paramValue }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="80" align="center">
                        <template #default="scope">
                            <span
                                style="display: flex;display: -webkit-flex;justify-content: space-around;-webkit-justify-content: space-around; ">
                                <!-- 0 否 1是 -->
                                <el-button size="small" class="searchButton" type="primary"
                                    :disabled="scope.row.paramFixed == 1"
                                    @click="selentDevide(scope.row)">选择点位</el-button>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <span class="dialog-footer"
                    style="width: 100%;margin: auto; display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;">
                    <div class="details-button" @click="handleClose2">取消</div>
                    <div class="details-button" @click="replace">确定</div>
                </span>
            </template>
        </Eldialog>
        <Eldialog v-if="selectble" :title="'选择点位'" :zIndex="2000" :width="'80%'" @before-close="selectbleClose">
            <template v-slot:PopFrameContent>
                <div class="device_box">
                    <div class="box_tabs">
                        <div :class="sourceType == 1 ? 'bianhua' : ''" @click="typeChange(1)">关联点位</div>
                        <div :class="sourceType == 2 ? 'bianhua' : ''" @click="typeChange(2)">关联信号</div>
                    </div>
                    <div class="faulttemplate-box1">

                        <div class="silderRight1">
                            <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-if="sourceType == 1" v-model="paramstable.deviceName"
                                        placeholder="请输入巡视点位名称" @clear="getdevicedata1()" @change="getdevicedata1()"
                                        style="margin-right:15px ;width: 185px;" clearable />
                                    <el-input v-if="sourceType == 2" v-model="paramstable.signalName"
                                        placeholder="请输入信号名称" @clear="getdevicedata1()" @change="getdevicedata1()"
                                        style="margin-right:15px ;width: 185px;" clearable />
                                    <el-button class="searchButton" type="primary"
                                        @click="getdevicedata1()">搜索</el-button>
                                    <el-button class="searchButton" @click="resetting()">重置</el-button>
                                </div>

                            </div>
                            <el-table v-loading="devicedataloading" :data="devicedata" ref="tableref"
                                style="width: 100%;height: calc(50vh);  overflow: auto;margin-bottom: 15px;"
                                row-key="deviceId" class="PatrolMonitoring" highlight-current-row default-expand-all
                                :row-class-name="tableRowClassName" @row-click="rowClick"
                                :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                                <el-table-column type="index" label="序号" width="50px" align="center" />
                                <el-table-column v-if="sourceType == 1" label="巡视点位编号" prop="deviceCode" align="center"
                                    width="140"></el-table-column>
                                <el-table-column v-if="sourceType == 1" label="巡视点位名称" align="center"
                                    prop="deviceName"></el-table-column>
                                <el-table-column v-if="sourceType == 1" label="所属主设备" prop="mainDeviceName"
                                    align="center" width="120"></el-table-column>
                                <el-table-column v-if="sourceType == 1" label="主设备类型" prop="deviceType" align="center"
                                    width="120">
                                    <template #default="scope">
                                        <span>{{ currency(EquipmentType, scope.row.deviceType) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="sourceType == 1" label="所属部件" align="center" prop="componentName"
                                    width="160"></el-table-column>
                                <el-table-column v-if="sourceType == 1" label="表计类型" align="center" prop="meterType"
                                    width="100">
                                    <template #default="scope">
                                        <span>{{ currency(Metertype, scope.row.meterType) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="sourceType == 1" label="点位分类" align="center" width="100">
                                    <template #default="scope">
                                        <span>{{ currency(DeviceClass, scope.row.deviceClass) }}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column v-if="sourceType == 2" label="信号编号" align="center" prop="signalCode"
                                    width="100" />
                                <el-table-column v-if="sourceType == 2" label="信号名称" align="center" prop="signalName"
                                    min-width="140" />
                                <el-table-column v-if="sourceType == 2" label="信号单位" align="center" prop="signalUnit"
                                    width="80" />
                                <el-table-column v-if="sourceType == 2" label="遥控遥调类型" align="center" prop="ykytType"
                                    width="150">
                                    <template #default="scope">
                                        <span>{{ isykyttype(scope.row.ykytType) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="sourceType == 2" label="是否告警信号" align="center" prop="signalType"
                                    width="100">
                                    <template #default="scope">
                                        <span v-if="scope.row.signalType === '1'">是</span>
                                        <span v-else>否</span>
                                    </template>
                                </el-table-column>

                                <el-table-column v-if="sourceType == 2" label="遥信地址(yx)" align="center" prop="yxAddr" />
                                <el-table-column v-if="sourceType == 2" label="遥测地址(yc)" align="center" prop="ycAddr" />
                                <el-table-column v-if="sourceType == 2" label="遥控地址(yk)" align="center" prop="ykAddr" />
                                <el-table-column v-if="sourceType == 2" label="遥调地址(yt)" align="center" prop="ytAddr" />

                            </el-table>
                            <Page :total="devicetaotal" v-model:size="paramstable.size"
                                v-model:current="paramstable.current" @pagination="getdevicedata1()"></Page>
                        </div>
                    </div>
                    <span class="dialog-footer"
                        style="width: 100%;margin: auto; display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;">
                        <div class="details-button" @click="selectbleClose">取消</div>
                        <div class="details-button" @click="suredevice">确定</div>
                    </span>
                </div>

            </template>
        </Eldialog>
    </div>
</template>

<style scoped lang="scss">
.faulttemplate-box {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    background-color: #f2f4f900;
    padding: 15px 15px 0px 15px;

}

.faulttemplate-box1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f2f4f900;
    padding: 15px;

    .silderLeft1 {
        width: 300px;
        height: calc(65vh);
        box-sizing: border-box;
        background: url(@/assets/navigation/ty_260x988.png);
        background-size: 100% 100%;
        padding: 10px;

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

            .line {
                width: 5px;
                height: 14px;
                background: #0099ff;
                margin-right: 10px;
            }

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

        }
    }

    .silderRight1 {
        flex: 1;
        width: 100%;
        height: calc(65vh);
        overflow: auto;
        padding: 15px;
        box-sizing: border-box;
        margin-left: 15px;
        background: url(@/assets/navigation/ty_1614x988.png);
        background-size: 100% 100%;
    }
}

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

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

    .left_title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left_title_text {
            display: flex;
            align-items: center;
            color: #fff;

            img {
                margin-right: 10px;
                font-size: 16px;
                font-weight: bold;
            }
        }

        .left_title_txt {
            cursor: pointer;
        }
    }

    .custom_tree_node {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

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

            img {
                margin-left: 5px;
            }
        }
    }
}


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

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

.table_header {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        margin-left: 3px;
        cursor: pointer;
    }
}

.device_box {
    width: 100%;

    .box_tabs {
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #0099ff;
        border-radius: 5px 0px 0px 0px;
        box-sizing: border-box;
        margin-bottom: 20px;

        div {
            padding: 10px 20px 10px 24px;
            box-sizing: border-box;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }

        .bianhua {
            padding: 10px 20px 10px 20px !important;
            border-bottom: 4px solid #0099ff;
            color: #0099ff;
        }
    }
}

.PatrolMonitoring {
    :deep(.el-table__body tr.current-row td) {
        border: 1px solid #009bff !important;
        border-right: 0px solid transparent !important;
        border-left: 0px solid transparent !important;
    }

    :deep(.current-row.el-table__row td) {
        border-right: 1px solid #009bff;
    }

    :deep(.current-row.el-table__row td:first-child) {
        border-left: 1px solid #009bff !important;
    }

    :deep(.current-row.el-table__row td:last-child) {
        border-right: 1px solid #009bff !important;
    }

    :deep(.current-row.el-table__row :last-child td) {
        border-bottom: 1px solid #009bff !important;
    }
}
</style>