修改冀北现场问题
This commit is contained in:
guanj
@@ -1,96 +1,96 @@
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="700px">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef">
|
||||
<el-form-item label="上级名称">
|
||||
<!-- <el-input v-model="form.pid" placeholder="上级名称" /> -->
|
||||
<el-tree-select
|
||||
v-model="form.pid"
|
||||
:data="dataTree"
|
||||
check-strictly
|
||||
clearable
|
||||
default-expand-all
|
||||
:render-after-expand="false"
|
||||
:props="defaultProps"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { queryAllAlgorithmLibrary, addAlgorithm } from '@/api/supervision-boot/database/index'
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const emit = defineEmits(['getTree'])
|
||||
const formRef = ref()
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = reactive<anyObj>({
|
||||
name: '',
|
||||
pid: ''
|
||||
})
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
||||
}
|
||||
const dataTree = ref([])
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
getTheTree()
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
// 表单赋值
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
} else {
|
||||
// 在此处恢复默认表单
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
const getTheTree = () => {
|
||||
queryAllAlgorithmLibrary().then(res => {
|
||||
res.data.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.childrens = item2.children
|
||||
item2.children = []
|
||||
})
|
||||
})
|
||||
dataTree.value = res.data
|
||||
})
|
||||
}
|
||||
const submit = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
addAlgorithm({
|
||||
pid: form.pid.length == 0 ? '' : form.pid,
|
||||
name: form.name
|
||||
}).then(res => {
|
||||
ElMessage.success('新增成功')
|
||||
emit('getTree')
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="700px">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef">
|
||||
<el-form-item label="上级名称">
|
||||
<!-- <el-input v-model="form.pid" placeholder="上级名称" /> -->
|
||||
<el-tree-select
|
||||
v-model="form.pid"
|
||||
:data="dataTree"
|
||||
check-strictly
|
||||
clearable
|
||||
default-expand-all
|
||||
:render-after-expand="false"
|
||||
:props="defaultProps"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { queryAllAlgorithmLibrary, addAlgorithm } from '@/api/supervision-boot/database/index'
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const emit = defineEmits(['getTree'])
|
||||
const formRef = ref()
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = reactive<anyObj>({
|
||||
name: '',
|
||||
pid: ''
|
||||
})
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
||||
}
|
||||
const dataTree = ref([])
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
getTheTree()
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
// 表单赋值
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
} else {
|
||||
// 在此处恢复默认表单
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
const getTheTree = () => {
|
||||
queryAllAlgorithmLibrary().then(res => {
|
||||
res.data.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.childrens = item2.children
|
||||
item2.children = []
|
||||
})
|
||||
})
|
||||
dataTree.value = res.data
|
||||
})
|
||||
}
|
||||
const submit = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
addAlgorithm({
|
||||
pid: form.pid.length == 0 ? '' : form.pid,
|
||||
name: form.name
|
||||
}).then(res => {
|
||||
ElMessage.success('新增成功')
|
||||
emit('getTree')
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
@@ -1,190 +1,195 @@
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="1200px">
|
||||
|
||||
<el-form :model="form" label-width="120px" class="form-two" :rules="rules" ref="formRef">
|
||||
<el-form-item :label="title == '修改算法' ? '选择修改的数据' : '选择父级'" :prop="title == '修改算法' ? 'pid' : ''">
|
||||
<el-tree-select v-model="form.pid" :data="dataTree" check-strictly clearable filterable
|
||||
@node-click="changeTree" default-expand-all :render-after-expand="false" :props="defaultProps"
|
||||
@clear="TreeList = {}" />
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name" v-if="title == '修改算法' ? TreeList.level != 4 : TreeList.level != 3">
|
||||
<el-input v-model="form.name" placeholder="名称" clearable maxlength="32" show-word-limit @input="handleInput('name', $event)"/>
|
||||
</el-form-item>
|
||||
<!-- <div v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3"> -->
|
||||
<el-form-item label="算法名称" prop="name" v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3">
|
||||
<el-input v-model="form.name" placeholder="请输入算法名称" clearable maxlength="32" show-word-limit @input="handleInput('name', $event)"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="计算周期" prop="period" v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3">
|
||||
<el-select v-model="form.period" placeholder="请选择计算周期" clearable>
|
||||
<el-option v-for="item in cycle" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据来源" prop="source" v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3">
|
||||
<el-input v-model="form.source" placeholder="请输入数据来源" clearable maxlength="32" show-word-limit @input="handleInput('source', $event)"/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="定义" prop="definition" style="width: 100%;" v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3">
|
||||
|
||||
<editor v-model="form.definition" />
|
||||
</el-form-item> -->
|
||||
<!-- </div> -->
|
||||
</el-form>
|
||||
<div style="display: flex" v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3">
|
||||
<div style="width: 140px;margin-right: -20px;text-align: center;flex-shrink: 0;">定义</div>
|
||||
<editor v-model="form.definition" />
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit" v-loading="loading">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { queryAllAlgorithmLibrary, addAlgorithm, updateAlgorithmLibrary } from '@/api/supervision-boot/database/index'
|
||||
import editor from '@/components/wangEditor/index.vue'
|
||||
const emit = defineEmits(['getTree'])
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const formRef = ref()
|
||||
const loading = ref(false)
|
||||
const dataTree = ref([])
|
||||
const key = ref(0)
|
||||
const TreeList: any = ref({})
|
||||
const List = ref({})
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = reactive<anyObj>({
|
||||
name: '',
|
||||
period: '',
|
||||
definition: '',
|
||||
source: '',
|
||||
pid: ''
|
||||
})
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入算法名称', trigger: 'blur' }],
|
||||
period: [{ required: true, message: '请选择计算周期', trigger: 'change' }],
|
||||
pid: [{ required: true, message: '请选择数据', trigger: 'change' }],
|
||||
definition: [{ required: true, message: '请输入定义', trigger: 'blur' }],
|
||||
source: [{ required: true, message: '请输入数据来源', trigger: 'blur' }]
|
||||
}
|
||||
const cycle = [
|
||||
{ value: '0', label: '日' },
|
||||
{ value: '1', label: '月' },
|
||||
{ value: '2', label: '季' },
|
||||
{ value: '3', label: '年' }
|
||||
]
|
||||
const changeTree = (row: any) => {
|
||||
console.log("🚀 ~ changeTree ~ row:", row)
|
||||
TreeList.value = row
|
||||
if (title.value == '修改算法') {
|
||||
if (row.level != 4) {
|
||||
form.name = row.name
|
||||
|
||||
} else {
|
||||
for (let key in form) {
|
||||
form[key] = row[key]
|
||||
}
|
||||
}
|
||||
|
||||
form.id = row.id
|
||||
key.value += 1
|
||||
}
|
||||
}
|
||||
|
||||
const open = (row: any) => {
|
||||
title.value = row.title
|
||||
dialogVisible.value = true
|
||||
List.value = row.row
|
||||
getTheTree()
|
||||
// 在此处恢复默认表单
|
||||
nextTick(() => {
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
if (row.title == '修改算法') {
|
||||
|
||||
form.pid = row.row.id
|
||||
TreeList.value = row.row
|
||||
changeTree(row.row)
|
||||
|
||||
// row.row
|
||||
}
|
||||
})
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
const submit = async () => {
|
||||
loading.value = true
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (title.value == '新增算法') {
|
||||
let forms: any = {}
|
||||
if (TreeList.value.level == 3) {
|
||||
forms = form
|
||||
} else {
|
||||
forms.name = form.name
|
||||
forms.pid = form.pid
|
||||
}
|
||||
await addAlgorithm(forms).then(res => {
|
||||
ElMessage.success('新增成功')
|
||||
dialogVisible.value = false
|
||||
emit('getTree')
|
||||
})
|
||||
} else {
|
||||
let forms: any = {}
|
||||
if (TreeList.value.level == 4) {
|
||||
forms = JSON.parse(JSON.stringify(form))
|
||||
} else {
|
||||
forms.name = form.name
|
||||
forms.id = form.id
|
||||
}
|
||||
forms.pid = null
|
||||
await updateAlgorithmLibrary(forms).then(res => {
|
||||
ElMessage.success('修改成功')
|
||||
dialogVisible.value = false
|
||||
emit('getTree')
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
await setTimeout(() => {
|
||||
|
||||
loading.value = false
|
||||
}, 0)
|
||||
}
|
||||
const getTheTree = () => {
|
||||
queryAllAlgorithmLibrary().then(res => {
|
||||
res.data.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.children.forEach((item3: any) => {
|
||||
if (title.value != '修改算法') {
|
||||
item3.childrens = item3.children
|
||||
item3.children = []
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
dataTree.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const handleInput = (field: string, value: string) => {
|
||||
// 过滤空格
|
||||
const filteredValue = value.replace(/\s/g, '')
|
||||
if (filteredValue !== value) {
|
||||
form[field] = filteredValue
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="1200px">
|
||||
|
||||
<el-form :model="form" label-width="120px" class="form-two" :rules="rules" ref="formRef">
|
||||
<el-form-item :label="title == '修改算法' ? '选择修改的数据' : '选择父级'" :prop="title == '修改算法' ? 'pid' : ''">
|
||||
<el-tree-select v-model="form.pid" :data="dataTree" check-strictly clearable filterable
|
||||
@node-click="changeTree" default-expand-all :render-after-expand="false" :props="defaultProps"
|
||||
@clear="TreeList = {}" />
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name" v-if="title == '修改算法' ? TreeList.level != 4 : TreeList.level != 3">
|
||||
<el-input v-model="form.name" placeholder="名称" clearable maxlength="32" show-word-limit @input="handleInput('name', $event)"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="绑定页面" v-if="title == '修改算法' ? TreeList.level == 3 : TreeList.level == 2">
|
||||
<el-input v-model="form.path" placeholder="请输入需要绑定的路由" clearable maxlength="32" show-word-limit @input="handleInput('name', $event)"/>
|
||||
</el-form-item>
|
||||
<!-- <div v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3"> -->
|
||||
<el-form-item label="算法名称" prop="name" v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3">
|
||||
<el-input v-model="form.name" placeholder="请输入算法名称" clearable maxlength="32" show-word-limit @input="handleInput('name', $event)"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="计算周期" prop="period" v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3">
|
||||
<el-select v-model="form.period" placeholder="请选择计算周期" clearable>
|
||||
<el-option v-for="item in cycle" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据来源" prop="source" v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3">
|
||||
<el-input v-model="form.source" placeholder="请输入数据来源" clearable maxlength="32" show-word-limit @input="handleInput('source', $event)"/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="定义" prop="definition" style="width: 100%;" v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3">
|
||||
|
||||
<editor v-model="form.definition" />
|
||||
</el-form-item> -->
|
||||
<!-- </div> -->
|
||||
</el-form>
|
||||
<div style="display: flex" v-if="title == '修改算法' ? TreeList.level == 4 : TreeList.level == 3">
|
||||
<div style="width: 140px;margin-right: -20px;text-align: center;flex-shrink: 0;">定义</div>
|
||||
<editor v-model="form.definition" />
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit" v-loading="loading">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { queryAllAlgorithmLibrary, addAlgorithm, updateAlgorithmLibrary } from '@/api/supervision-boot/database/index'
|
||||
import editor from '@/components/wangEditor/index.vue'
|
||||
const emit = defineEmits(['getTree'])
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const formRef = ref()
|
||||
const loading = ref(false)
|
||||
const dataTree = ref([])
|
||||
const key = ref(0)
|
||||
const TreeList: any = ref({})
|
||||
const List = ref({})
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = reactive<anyObj>({
|
||||
name: '',
|
||||
period: '',
|
||||
definition: '',
|
||||
source: '',
|
||||
pid: '',
|
||||
path: ''
|
||||
})
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入算法名称', trigger: 'blur' }],
|
||||
period: [{ required: true, message: '请选择计算周期', trigger: 'change' }],
|
||||
pid: [{ required: true, message: '请选择数据', trigger: 'change' }],
|
||||
definition: [{ required: true, message: '请输入定义', trigger: 'blur' }],
|
||||
source: [{ required: true, message: '请输入数据来源', trigger: 'blur' }]
|
||||
}
|
||||
const cycle = [
|
||||
{ value: '0', label: '日' },
|
||||
{ value: '1', label: '月' },
|
||||
{ value: '2', label: '季' },
|
||||
{ value: '3', label: '年' }
|
||||
]
|
||||
const changeTree = (row: any) => {
|
||||
console.log("🚀 ~ changeTree ~ row:", row)
|
||||
TreeList.value = row
|
||||
if (title.value == '修改算法') {
|
||||
if (row.level != 4) {
|
||||
form.name = row.name
|
||||
|
||||
} else {
|
||||
for (let key in form) {
|
||||
form[key] = row[key]
|
||||
}
|
||||
}
|
||||
|
||||
form.id = row.id
|
||||
key.value += 1
|
||||
}
|
||||
}
|
||||
|
||||
const open = (row: any) => {
|
||||
title.value = row.title
|
||||
dialogVisible.value = true
|
||||
List.value = row.row
|
||||
getTheTree()
|
||||
// 在此处恢复默认表单
|
||||
nextTick(() => {
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
if (row.title == '修改算法') {
|
||||
|
||||
form.pid = row.row.id
|
||||
TreeList.value = row.row
|
||||
changeTree(row.row)
|
||||
|
||||
// row.row
|
||||
}
|
||||
})
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
const submit = async () => {
|
||||
loading.value = true
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (title.value == '新增算法') {
|
||||
let forms: any = {}
|
||||
if (TreeList.value.level == 3) {
|
||||
forms = form
|
||||
} else {
|
||||
forms.name = form.name
|
||||
forms.pid = form.pid
|
||||
forms.path = form.path||''
|
||||
}
|
||||
await addAlgorithm(forms).then(res => {
|
||||
ElMessage.success('新增成功')
|
||||
dialogVisible.value = false
|
||||
emit('getTree')
|
||||
})
|
||||
} else {
|
||||
let forms: any = {}
|
||||
if (TreeList.value.level == 4) {
|
||||
forms = JSON.parse(JSON.stringify(form))
|
||||
} else {
|
||||
forms.name = form.name
|
||||
forms.id = form.id
|
||||
}
|
||||
forms.pid = null
|
||||
await updateAlgorithmLibrary(forms).then(res => {
|
||||
ElMessage.success('修改成功')
|
||||
dialogVisible.value = false
|
||||
emit('getTree')
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
await setTimeout(() => {
|
||||
|
||||
loading.value = false
|
||||
}, 0)
|
||||
}
|
||||
const getTheTree = () => {
|
||||
queryAllAlgorithmLibrary().then(res => {
|
||||
res.data.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.children.forEach((item3: any) => {
|
||||
if (title.value != '修改算法') {
|
||||
item3.childrens = item3.children
|
||||
item3.children = []
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
dataTree.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const handleInput = (field: string, value: string) => {
|
||||
// 过滤空格
|
||||
const filteredValue = value.replace(/\s/g, '')
|
||||
if (filteredValue !== value) {
|
||||
form[field] = filteredValue
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
@@ -1,346 +1,53 @@
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<!-- 算法库 -->
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<algorithmTree
|
||||
ref="treeRef"
|
||||
:default-expand-all="false"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId"
|
||||
@node-click="handleNodeClick"
|
||||
@init="handleNodeClick"
|
||||
@onAddTree="onAddTree"
|
||||
></algorithmTree>
|
||||
</pane>
|
||||
<pane style="background: #fff" :style="height">
|
||||
<div class="boxTop">
|
||||
<div>
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio-button v-for="(item, i) in dotList?.childrens" :label="item.name" :value="i" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-if="information">
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="addUser">新增</el-button>
|
||||
<el-button icon="el-icon-Edit" type="primary" @click="revise">修改</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deletes">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :style="heightTab">
|
||||
<vxe-table height="auto" v-bind="defaultAttribute" :data="dotList?.childrens[radio]?.children">
|
||||
<vxe-column field="name" title="算法名称"></vxe-column>
|
||||
<vxe-column field="createTime" title="创建时间"></vxe-column>
|
||||
|
||||
<vxe-column field="period" title="计算周期">
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
row.period == 0
|
||||
? '日'
|
||||
: row.period == 1
|
||||
? '月'
|
||||
: row.period == 2
|
||||
? '季'
|
||||
: row.period == 3
|
||||
? '年'
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="source" title="数据来源"></vxe-column>
|
||||
<!-- <vxe-column field="useFLag" title="是否启用">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.useFLag === 1 ? 'success' : 'info'" effect="dark"
|
||||
style="cursor: pointer" @click="change(row)">
|
||||
{{ row.useFLag === 1 ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column> -->
|
||||
<vxe-column field="definition" title="定义">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="view(row)">查看</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<!-- <vxe-column title="操作" width="150px">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="edit(row)">修改</el-button>
|
||||
<el-button type="danger" link @click="del(row)">删除</el-button>
|
||||
<el-popconfirm title="确定删除吗？" confirm-button-type='danger' @confirm="del(row)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</vxe-column> -->
|
||||
</vxe-table>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
<!-- 树弹框 -->
|
||||
<addTree ref="addTreeRef" @getTree="treeRef.loadData(dotList.id)" />
|
||||
<!-- 弹框 -->
|
||||
<PopupEdit
|
||||
ref="popupEditRef"
|
||||
v-if="popupEditFlag"
|
||||
@getTree="treeRef.loadData(dotList.id), (popupEditFlag = false)"
|
||||
/>
|
||||
<!-- 定义 -->
|
||||
<el-dialog draggable v-model="viewFlag" title="定义" width="60%">
|
||||
<div style="min-height: 300px; max-height: 55vh">
|
||||
<div class="editor" ref="editorRef" v-html="summary" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 删除 -->
|
||||
<el-dialog draggable v-model="dialogVisible" title="请选择需要删除的数据" width="400">
|
||||
<el-tree-select
|
||||
v-model="TreeValue"
|
||||
:data="TreeData"
|
||||
filterable
|
||||
check-strictly
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:render-after-expand="false"
|
||||
/>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="del">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<div class="default-main">
|
||||
<el-tabs v-model="activeName" type="border-card">
|
||||
<el-tab-pane label="总览" name="1" v-if="tabList.includes('1')">
|
||||
<overview v-if="activeName == '1'" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="算法库" name="2" v-if="tabList.includes('2')">
|
||||
<list v-if="activeName == '2'" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import algorithmTree from '@/components/tree/pqs/algorithmTree.vue'
|
||||
import { nextTick, ref, provide, onMounted } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
|
||||
import addTree from './components/addTree.vue'
|
||||
import PopupEdit from './components/form.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { deleteyById } from '@/api/supervision-boot/database/index'
|
||||
import { queryAllAlgorithmLibrary, updateAlgorithmLibrary } from '@/api/supervision-boot/database/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import katex from 'katex'
|
||||
import 'katex/dist/katex.css'
|
||||
const adminInfo = useAdminInfo()
|
||||
import overview from './overview.vue'
|
||||
import list from './list.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
|
||||
const route = useRoute()
|
||||
const Undocumented = ref()
|
||||
const InterferenceUserTable = ref()
|
||||
defineOptions({
|
||||
name: 'database/algorithm'
|
||||
name: 'supervision/interferencemanagement '
|
||||
})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(20)
|
||||
const heightTab = mainHeight(82)
|
||||
const size = ref(23)
|
||||
const addTreeRef = ref()
|
||||
const editorRef = ref()
|
||||
const dialogVisible = ref(false)
|
||||
const viewFlag = ref(false)
|
||||
const popupEditFlag = ref(false)
|
||||
const treeRef = ref()
|
||||
const summary = ref('')
|
||||
const popupEditRef = ref()
|
||||
const TreeData = ref([])
|
||||
const TreeValue = ref([])
|
||||
const information = adminInfo.roleCode.includes('information_info')
|
||||
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const dotList: any = ref()
|
||||
|
||||
const templatePolicy: any = ref([])
|
||||
// const tableStore = new TableStore({
|
||||
// url: '/supervision-boot/libalgorithm/queryAllAlgorithmLibrary',
|
||||
// method: 'GET',
|
||||
// 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: '是'
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// loadCallback: () => {}
|
||||
// })
|
||||
const radio = ref(0)
|
||||
|
||||
// 新增弹框
|
||||
const addUser = () => {
|
||||
popupEditFlag.value = true
|
||||
setTimeout(() => {
|
||||
popupEditRef.value.open({
|
||||
title: '新增算法'
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
// 修改弹框
|
||||
const revise = () => {
|
||||
popupEditFlag.value = true
|
||||
setTimeout(() => {
|
||||
popupEditRef.value.open({
|
||||
title: '修改算法',
|
||||
row: dotList.value
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const activeName = ref('1')
|
||||
const id = ref('')
|
||||
const key = ref('')
|
||||
const tabList = ref(['1', '2'])
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
let key = window.location.href.split('?')[0].slice(-1)
|
||||
const isNumber = /^\d$/.test(key)
|
||||
if (isNumber) {
|
||||
tabList.value = [key]
|
||||
activeName.value = key
|
||||
}
|
||||
// tableStore.index()
|
||||
})
|
||||
|
||||
const view = (row: any) => {
|
||||
viewFlag.value = true
|
||||
summary.value = row.definition
|
||||
setTimeout(() => {
|
||||
const spans = document.querySelectorAll('span[data-value]')
|
||||
// 遍历每个 span 标签
|
||||
spans.forEach(function (span) {
|
||||
let val = katex.renderToString(span.getAttribute('data-value'), {
|
||||
throwOnError: false
|
||||
})
|
||||
// var newDiv = document.createElement('div');
|
||||
var newDiv = span
|
||||
newDiv.innerHTML = val
|
||||
|
||||
span.parentNode.replaceChild(newDiv, span)
|
||||
})
|
||||
}, 100)
|
||||
|
||||
//
|
||||
}
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
if (data.pid != '0') {
|
||||
dotList.value = data
|
||||
radio.value = 0
|
||||
}
|
||||
}
|
||||
const onAddTree = () => {
|
||||
addTreeRef.value.open('新增')
|
||||
}
|
||||
const deletes = () => {
|
||||
TreeValue.value = []
|
||||
queryAllAlgorithmLibrary().then(res => {
|
||||
TreeData.value = res.data
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// 删除
|
||||
const del = () => {
|
||||
if (TreeValue.value.length == 0) {
|
||||
return ElMessage.warning('请选择数据')
|
||||
}
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteyById({ id: TreeValue.value }).then(res => {
|
||||
ElMessage.success('删除成功')
|
||||
dialogVisible.value = false
|
||||
treeRef.value.loadData()
|
||||
})
|
||||
})
|
||||
|
||||
// if (TreeValue.value.length > 0) {
|
||||
// ElMessage.warning('请选择数据')
|
||||
// return
|
||||
// }
|
||||
}
|
||||
// 启用
|
||||
const change = (row: any) => {
|
||||
console.log('🚀 ~ change ~ row:', row)
|
||||
ElMessageBox.confirm(`请确认是否${row.useFLag == 0 ? '启用' : '关闭'}算法?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
updateAlgorithmLibrary({ ...row, useFLag: row.useFLag == 0 ? 1 : 0 }).then(res => {
|
||||
ElMessage.success(row.useFLag == 0 ? '启用' : '关闭' + '成功')
|
||||
treeRef.value.loadData(dotList.value.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
const layout = mainHeight(63) as any
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bars_w {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.mTop {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.boxTop {
|
||||
height: 52px;
|
||||
padding: 10px 10px 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.editor {
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid black;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
:deep(.el-tabs__content) {
|
||||
height: v-bind('layout.height');
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
346
src/views/pqs/database/algorithm/list.vue
Normal file
346
src/views/pqs/database/algorithm/list.vue
Normal file
@@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<!-- 算法库 -->
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<algorithmTree
|
||||
ref="treeRef"
|
||||
:default-expand-all="false"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId"
|
||||
@node-click="handleNodeClick"
|
||||
@init="handleNodeClick"
|
||||
@onAddTree="onAddTree"
|
||||
></algorithmTree>
|
||||
</pane>
|
||||
<pane style="background: #fff;width: 100%;" :style="height" >
|
||||
<div class="boxTop">
|
||||
<div>
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio-button v-for="(item, i) in dotList?.childrens" :label="item.name" :value="i" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-if="information">
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="addUser">新增</el-button>
|
||||
<el-button icon="el-icon-Edit" type="primary" @click="revise">修改</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deletes">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :style="heightTab">
|
||||
<vxe-table height="auto" v-bind="defaultAttribute" :data="dotList?.childrens[radio]?.children">
|
||||
<vxe-column field="name" title="算法名称"></vxe-column>
|
||||
<vxe-column field="createTime" title="创建时间"></vxe-column>
|
||||
|
||||
<vxe-column field="period" title="计算周期">
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
row.period == 0
|
||||
? '日'
|
||||
: row.period == 1
|
||||
? '月'
|
||||
: row.period == 2
|
||||
? '季'
|
||||
: row.period == 3
|
||||
? '年'
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="source" title="数据来源"></vxe-column>
|
||||
<!-- <vxe-column field="useFLag" title="是否启用">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.useFLag === 1 ? 'success' : 'info'" effect="dark"
|
||||
style="cursor: pointer" @click="change(row)">
|
||||
{{ row.useFLag === 1 ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column> -->
|
||||
<vxe-column field="definition" title="定义">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="view(row)">查看</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<!-- <vxe-column title="操作" width="150px">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="edit(row)">修改</el-button>
|
||||
<el-button type="danger" link @click="del(row)">删除</el-button>
|
||||
<el-popconfirm title="确定删除吗？" confirm-button-type='danger' @confirm="del(row)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</vxe-column> -->
|
||||
</vxe-table>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
<!-- 树弹框 -->
|
||||
<addTree ref="addTreeRef" @getTree="treeRef.loadData(dotList.id)" />
|
||||
<!-- 弹框 -->
|
||||
<PopupEdit
|
||||
ref="popupEditRef"
|
||||
v-if="popupEditFlag"
|
||||
@getTree="treeRef.loadData(dotList.id), (popupEditFlag = false)"
|
||||
/>
|
||||
<!-- 定义 -->
|
||||
<el-dialog draggable v-model="viewFlag" title="定义" width="60%">
|
||||
<div style="min-height: 300px; max-height: 55vh">
|
||||
<div class="editor" ref="editorRef" v-html="summary" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 删除 -->
|
||||
<el-dialog draggable v-model="dialogVisible" title="请选择需要删除的数据" width="400">
|
||||
<el-tree-select
|
||||
v-model="TreeValue"
|
||||
:data="TreeData"
|
||||
filterable
|
||||
check-strictly
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:render-after-expand="false"
|
||||
/>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="del">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import algorithmTree from '@/components/tree/pqs/algorithmTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
|
||||
import addTree from './components/addTree.vue'
|
||||
import PopupEdit from './components/form.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { deleteyById } from '@/api/supervision-boot/database/index'
|
||||
import { queryAllAlgorithmLibrary, updateAlgorithmLibrary } from '@/api/supervision-boot/database/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import katex from 'katex'
|
||||
import 'katex/dist/katex.css'
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'database/algorithm'
|
||||
})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(20)
|
||||
const heightTab = mainHeight(82)
|
||||
const size = ref(23)
|
||||
const addTreeRef = ref()
|
||||
const editorRef = ref()
|
||||
const dialogVisible = ref(false)
|
||||
const viewFlag = ref(false)
|
||||
const popupEditFlag = ref(false)
|
||||
const treeRef = ref()
|
||||
const summary = ref('')
|
||||
const popupEditRef = ref()
|
||||
const TreeData = ref([])
|
||||
const TreeValue = ref([])
|
||||
const information = adminInfo.roleCode.includes('information_info')
|
||||
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const dotList: any = ref()
|
||||
|
||||
const templatePolicy: any = ref([])
|
||||
// const tableStore = new TableStore({
|
||||
// url: '/supervision-boot/libalgorithm/queryAllAlgorithmLibrary',
|
||||
// method: 'GET',
|
||||
// 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: '是'
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// loadCallback: () => {}
|
||||
// })
|
||||
const radio = ref(0)
|
||||
|
||||
// 新增弹框
|
||||
const addUser = () => {
|
||||
popupEditFlag.value = true
|
||||
setTimeout(() => {
|
||||
popupEditRef.value.open({
|
||||
title: '新增算法'
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
// 修改弹框
|
||||
const revise = () => {
|
||||
popupEditFlag.value = true
|
||||
setTimeout(() => {
|
||||
popupEditRef.value.open({
|
||||
title: '修改算法',
|
||||
row: dotList.value
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
// tableStore.index()
|
||||
})
|
||||
|
||||
const view = (row: any) => {
|
||||
viewFlag.value = true
|
||||
summary.value = row.definition
|
||||
setTimeout(() => {
|
||||
const spans = document.querySelectorAll('span[data-value]')
|
||||
// 遍历每个 span 标签
|
||||
spans.forEach(function (span) {
|
||||
let val = katex.renderToString(span.getAttribute('data-value'), {
|
||||
throwOnError: false
|
||||
})
|
||||
// var newDiv = document.createElement('div');
|
||||
var newDiv = span
|
||||
newDiv.innerHTML = val
|
||||
|
||||
span.parentNode.replaceChild(newDiv, span)
|
||||
})
|
||||
}, 100)
|
||||
|
||||
//
|
||||
}
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
if (data.pid != '0') {
|
||||
dotList.value = data
|
||||
radio.value = 0
|
||||
}
|
||||
}
|
||||
const onAddTree = () => {
|
||||
addTreeRef.value.open('新增')
|
||||
}
|
||||
const deletes = () => {
|
||||
TreeValue.value = []
|
||||
queryAllAlgorithmLibrary().then(res => {
|
||||
TreeData.value = res.data
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// 删除
|
||||
const del = () => {
|
||||
if (TreeValue.value.length == 0) {
|
||||
return ElMessage.warning('请选择数据')
|
||||
}
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteyById({ id: TreeValue.value }).then(res => {
|
||||
ElMessage.success('删除成功')
|
||||
dialogVisible.value = false
|
||||
treeRef.value.loadData()
|
||||
})
|
||||
})
|
||||
|
||||
// if (TreeValue.value.length > 0) {
|
||||
// ElMessage.warning('请选择数据')
|
||||
// return
|
||||
// }
|
||||
}
|
||||
// 启用
|
||||
const change = (row: any) => {
|
||||
console.log('🚀 ~ change ~ row:', row)
|
||||
ElMessageBox.confirm(`请确认是否${row.useFLag == 0 ? '启用' : '关闭'}算法?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
updateAlgorithmLibrary({ ...row, useFLag: row.useFLag == 0 ? 1 : 0 }).then(res => {
|
||||
ElMessage.success(row.useFLag == 0 ? '启用' : '关闭' + '成功')
|
||||
treeRef.value.loadData(dotList.value.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.mTop {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.boxTop {
|
||||
height: 52px;
|
||||
padding: 10px 10px 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.editor {
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid black;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
197
src/views/pqs/database/algorithm/overview.vue
Normal file
197
src/views/pqs/database/algorithm/overview.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="default-main pt50" :style="height">
|
||||
<!-- 算法库 -->
|
||||
<!-- -->
|
||||
|
||||
<MyEchart :options="echartList" style="width: 100%" :style="height" @echart-click="echartClick"></MyEchart>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { queryAllAlgorithmLibrary, updateAlgorithmLibrary } from '@/api/supervision-boot/database/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import 'katex/dist/katex.css'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const router = useRouter()
|
||||
const config = useConfig()
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'database/algorithm'
|
||||
})
|
||||
const height = mainHeight(20)
|
||||
const size = ref(23)
|
||||
|
||||
const popupEditFlag = ref(false)
|
||||
|
||||
const popupEditRef = ref()
|
||||
const TreeList: any = ref([])
|
||||
|
||||
const echartList = ref({})
|
||||
|
||||
const dotList: any = ref()
|
||||
|
||||
const radio = ref(0)
|
||||
|
||||
// 新增弹框
|
||||
const addUser = () => {
|
||||
popupEditFlag.value = true
|
||||
setTimeout(() => {
|
||||
popupEditRef.value.open({
|
||||
title: '新增算法'
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
info()
|
||||
// tableStore.index()
|
||||
})
|
||||
|
||||
const info = () => {
|
||||
queryAllAlgorithmLibrary().then(async res => {
|
||||
TreeList.value = await setTreeAllNodeExpand([
|
||||
{
|
||||
name: '算法库',
|
||||
level: 0,
|
||||
children: res.data
|
||||
}
|
||||
])
|
||||
|
||||
echartList.value = {
|
||||
series: [
|
||||
{
|
||||
type: 'tree',
|
||||
data: TreeList.value,
|
||||
top: '20',
|
||||
bottom: '40',
|
||||
left: '20',
|
||||
symbolSize: 7,
|
||||
label: {
|
||||
position: 'left',
|
||||
verticalAlign: 'middle',
|
||||
align: 'left',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
backgroundColor: config.layout.elementUiPrimary[0],
|
||||
color: '#fff',
|
||||
borderRadius: 5,
|
||||
formatter: function (params) {
|
||||
return [`{name|${params.data.name}}`]
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
padding: [10, 10]
|
||||
}
|
||||
}
|
||||
},
|
||||
leaves: {
|
||||
label: {
|
||||
position: 'left',
|
||||
verticalAlign: 'middle',
|
||||
fontWeight: 600,
|
||||
align: 'left'
|
||||
}
|
||||
},
|
||||
|
||||
edgeShape: 'polyline', // 折线连接线
|
||||
roam: true, // 可移动,可缩放
|
||||
expandAndCollapse: false,
|
||||
animationDuration: 550,
|
||||
animationDurationUpdate: 750
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
// 点击echart
|
||||
const echartClick = (params: any) => {
|
||||
if (params.data.level == 3 && params.data.path != '') {
|
||||
router.push({
|
||||
name: params.data.path
|
||||
})
|
||||
}
|
||||
}
|
||||
const setTreeAllNodeExpand = (treeData: any) => {
|
||||
if (!treeData) return []
|
||||
// 兼容单对象/数组两种树数据格式
|
||||
const data = Array.isArray(treeData) ? treeData : [treeData]
|
||||
return data.map(node => {
|
||||
// 深拷贝节点，彻底隔离原数据
|
||||
const newNode = {
|
||||
...node,
|
||||
collapsed: node.level <= 2 ? false : true // 强制添加展开属性
|
||||
}
|
||||
// 递归处理子节点
|
||||
if (node.children && node.children.length > 0) {
|
||||
newNode.children = setTreeAllNodeExpand(node.children)
|
||||
}
|
||||
return newNode
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.mTop {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.boxTop {
|
||||
height: 52px;
|
||||
padding: 10px 10px 10px 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.editor {
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid black;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user