admin-sjzx/src/views/pqs/database/algorithm/index.vue

<template>
    <div class="default-main" :style="height">
        <!-- 算法库 -->
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <algorithmTree
                    :default-expand-all="false"
                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                    :current-node-key="monitoringPoint.state.lineId"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                ></algorithmTree>
            </pane>
            <pane style="background: #fff" :style="height">
                <!-- <div :style="height"></div> -->
                <TableHeader ref="TableHeaderRef" :show-search="false">
                    <template v-slot:select>
                        <el-radio-group v-model="tableStore.table.params.radio2" @change="tableStore.index()">
                            <el-radio-button label="监测覆盖率" value="1" />
                            <el-radio-button label="装置在线率" value="2" />
                            <el-radio-button label="数据完整性" value="3" />
                        </el-radio-group>
                    </template>
                    <template #operation>
                        <el-button icon="el-icon-Plus" type="primary" @click="addUser">新增</el-button>
                    </template>
                </TableHeader>
                <Table ref="tableRef"></Table>
            </pane>
        </splitpanes>
        <!-- 弹框 -->
        <PopupEdit ref="popupEditRef" />
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import algorithmTree from '@/components/tree/pqs/algorithmTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import Table from '@/components/table/index.vue'
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
import PopupEdit from './components/form.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { ElMessage } from 'element-plus'
defineOptions({
    name: 'database/algorithm'
})
const monitoringPoint = useMonitoringPoint()
const height = mainHeight(20)
const size = ref(0)
const popupEditRef = ref()

const TableHeaderRef = ref()
const dotList: any = ref({
    name: monitoringPoint.state.lineName.split('>')[3],
    id: monitoringPoint.state.lineId,
    level: 6
})

const templatePolicy: any = ref([])
const tableStore = new TableStore({
    url: '/user-boot/dept/deptTree',
    method: 'POST',
    column: [
        { title: '算法名称', field: 'name' },
        {
            title: '定义',
            field: 'name1'
        },
        {
            title: '计算公式',
            field: 'name2'
        },
        {
            title: '计算周期',
            field: 'name3'
        },
        {
            title: '数据来源',
            field: 'name4'
        },
        {
            title: '是否启用',
            field: 'name5',
            render: 'tag',
            effect: 'dark',
            custom: {
                0: 'info',
                1: 'success'
            },
            replaceValue: {
                0: '否',
                1: '是'
            }
        }

        // {
        //     title: '操作',
        //     align: 'center',
        //     width: '180',
        //     render: 'buttons',
        //     buttons: [
        //         {
        //             name: 'edit',
        //             title: '编辑',
        //             type: 'primary',
        //             icon: 'el-icon-EditPen',
        //             render: 'basicButton',
        //             click: async row => {}
        //         }
        //     ]
        // }
    ],
    loadCallback: () => {
        tableStore.table.data = [
            {
                name: '测试名称',
                name1: 'xxx',
                name2: 'XXX',
                name3: '1月',
                name4: '单体系统',
                name5: '1'
            },
            {
                name: '测试名称',
                name1: 'xxx',
                name2: 'XXX',
                name3: '1月',
                name4: '单体系统',
                name5: '0'
            }
        ]
    }
})
tableStore.table.params.radio2 = '1'

// 弹框
const addUser = () => {
    popupEditRef.value.open('新增算法')
}

provide('tableStore', tableStore)
onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 100)
    }
    tableStore.index()
})

const handleNodeClick = (data: any, node: any) => {
    dotList.value = data
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}
.grid-content {
    text-align: center;
}
.divBox {
    width: 250px;
    height: 31px;
    margin: auto;
    line-height: 32px;
    border: 1px solid #c9c9c9;
    &:hover {
        border: 1px solid #002255;
    }
}
.box {
    padding: 10px;
    // margin-top: 10px;
    overflow-y: auto;
    font-size: 15px;
}
.el-divider--horizontal {
    margin: 10px 0;
}
.mTop {
    margin-top: 5px;
    margin-bottom: 5px;
}
</style>