修改冀北问题
This commit is contained in:
guanj
@@ -1,341 +1,341 @@
|
||||
<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>
|
||||
</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(0)
|
||||
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) * 100)
|
||||
}
|
||||
// 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>
|
||||
<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>
|
||||
</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(0)
|
||||
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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div >
|
||||
<TableHeader ref="TableHeaderRef">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="名称">
|
||||
@@ -26,6 +26,7 @@ const tableStore = new TableStore({
|
||||
url: '/supervision-boot/libModel/pageLibModelQuery',
|
||||
method: 'POST',
|
||||
showPage: true, // 确保启用分页
|
||||
publicHeight: 60,
|
||||
column: [
|
||||
{
|
||||
title: '典型设备',
|
||||
|
||||
@@ -1,15 +1,19 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div>
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable
|
||||
placeholder="请输入搜索名称" maxlength="32" show-word-limit/>
|
||||
<el-input
|
||||
v-model="tableStore.table.params.searchValue"
|
||||
clearable
|
||||
placeholder="请输入搜索名称"
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup/>
|
||||
<Table ref="tableRef" isGroup />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="tsx">
|
||||
@@ -23,7 +27,8 @@ const tableRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/supervision-boot/libModel/pageLibModelQuery',
|
||||
method: 'POST',
|
||||
column: [
|
||||
publicHeight: 60,
|
||||
column: [
|
||||
{
|
||||
title: '谐波源',
|
||||
children: [
|
||||
@@ -32,12 +37,14 @@ const tableStore = new TableStore({
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
return (
|
||||
(tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
)
|
||||
}
|
||||
},
|
||||
{ field: 'name', title: '名称',minWidth: 200 },
|
||||
{ field: 'voltage', title: '电压等级',minWidth: 200 },
|
||||
{ field: 'capacity', title: '容量',minWidth: 200 }
|
||||
{ field: 'name', title: '名称', minWidth: 200 },
|
||||
{ field: 'voltage', title: '电压等级', minWidth: 200 },
|
||||
{ field: 'capacity', title: '容量', minWidth: 200 }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -50,13 +57,13 @@ const tableStore = new TableStore({
|
||||
}))
|
||||
}
|
||||
],
|
||||
// 在请求发送前处理参数
|
||||
// 在请求发送前处理参数
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.pageSize = 100
|
||||
tableStore.table.params.pageSize = 100
|
||||
},
|
||||
resetCallback: () => {
|
||||
resetCallback: () => {
|
||||
tableStore.table.params.searchValue = ''
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.type = 1
|
||||
@@ -70,5 +77,4 @@ const queryData = () => {
|
||||
defineExpose({
|
||||
queryData
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,212 +1,212 @@
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<!-- 标准库 -->
|
||||
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<standardTree ref="treeRef"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId" @node-click="handleNodeClick"
|
||||
@init="handleNodeClick"></standardTree>
|
||||
</pane>
|
||||
<pane style="background: #fff" :style="height">
|
||||
<div class="pd10" style="display: flex; justify-content: end">
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="addUser" v-if="information">新增</el-button>
|
||||
<el-button icon="el-icon-Edit" type="primary" @click="editUser" v-if="information">修改</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deleteEven"
|
||||
v-if="information">删除</el-button>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="download" v-if="flag">下载</el-button>
|
||||
</div>
|
||||
<el-empty v-if="url.length == 0" description="暂无数据" class="custom-empty"
|
||||
:style="`height: calc(${height.height} - 60px);`" />
|
||||
<div :style="`height: calc(${height.height} - 60px);overflow: auto;`" v-else>
|
||||
<vue-office-docx v-if="url.includes('.doc') || url.includes('.docx')" :src="url" />
|
||||
<vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url"
|
||||
:options="excelOptions" />
|
||||
<!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url"/> -->
|
||||
<iframe v-if="url.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
|
||||
<img v-if="
|
||||
url.includes('.png') || url.includes('.jpg') || url.includes('.gif') || url.includes('.bmp')
|
||||
" :src="url" />
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
<!-- 新增 -->
|
||||
|
||||
<addTree ref="addTreeRef" @onSubmit="treeRef.loadData(dotList.id)"></addTree>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import standardTree from '@/components/tree/pqs/standardTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import addTree from './components/addTree.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
|
||||
|
||||
//引入相关样式
|
||||
import '@vue-office/excel/lib/index.css'
|
||||
//引入VueOfficeDocx组件
|
||||
import VueOfficeDocx from '@vue-office/docx'
|
||||
import VueOfficeExcel from '@vue-office/excel'
|
||||
//引入VueOfficePdf组件
|
||||
import VueOfficePdf from '@vue-office/pdf'
|
||||
import { deleteyLibstandard } from '@/api/supervision-boot/database/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'database/standard'
|
||||
})
|
||||
const excelOptions = ref({})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(20)
|
||||
const size = ref(0)
|
||||
const treeRef = ref()
|
||||
const addTreeRef = ref()
|
||||
const url = ref('')
|
||||
const dotList: any = ref({})
|
||||
const flag: any = ref(false)
|
||||
const information = adminInfo.roleCode.includes('information_info')
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
}
|
||||
})
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
console.log("🚀 ~ handleNodeClick ~ data:", data)
|
||||
dotList.value = data
|
||||
url.value = ''
|
||||
flag.value = false
|
||||
if (data?.url != null && data?.url != '') {
|
||||
flag.value = true
|
||||
|
||||
setTimeout(() => {
|
||||
url.value = `/api-docx/excelreport` + data.url
|
||||
excelOptions.value = { xls: data.url.split('.')[1] == 'xls' ? true : false }
|
||||
// getFileNameAndFilePath({ filePath: data.url }).then(res => {
|
||||
// url.value = res.data.url
|
||||
// })
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
// 删除
|
||||
const deleteEven = () => {
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteyLibstandard({ id: dotList.value.id }).then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功！'
|
||||
})
|
||||
setTimeout(() => {
|
||||
treeRef.value.loadData()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
}
|
||||
const addUser = () => {
|
||||
addTreeRef.value.open('新增')
|
||||
}
|
||||
const editUser = () => {
|
||||
addTreeRef.value.open('修改', dotList.value)
|
||||
}
|
||||
// 下载
|
||||
const download = () => {
|
||||
let url = dotList.value.url
|
||||
let urls = url
|
||||
let name = url.match(/\/([^/]+)\.(\w+)$/)[1]
|
||||
downloadFile({ filePath: url }).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: urls.includes('.pdf')
|
||||
? 'application/pdf'
|
||||
: urls.includes('.docx')
|
||||
? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||||
: urls.includes('.xls')
|
||||
? 'application/vnd.ms-excel'
|
||||
: urls.includes('.xlsx')
|
||||
? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
: urls.includes('.png')
|
||||
? 'image/png'
|
||||
: urls.includes('.jpeg')
|
||||
? 'image/jpeg'
|
||||
: urls.includes('.jpg')
|
||||
? 'image/jpg'
|
||||
: ''
|
||||
})
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = name
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 自定义 el-empty 的样式 */
|
||||
:deep(.custom-empty) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
/* 调整高度 */
|
||||
padding: 20px;
|
||||
|
||||
/* 调整内边距 */
|
||||
.el-empty__image {
|
||||
display: none;
|
||||
/* 隐藏默认图片 */
|
||||
}
|
||||
|
||||
.el-empty__description {
|
||||
font-size: 14px;
|
||||
/* 调整字体大小 */
|
||||
color: var(--vxe-font-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<!-- 标准库 -->
|
||||
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<standardTree ref="treeRef"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId" @node-click="handleNodeClick"
|
||||
@init="handleNodeClick"></standardTree>
|
||||
</pane>
|
||||
<pane style="background: #fff" :style="height">
|
||||
<div class="pd10" style="display: flex; justify-content: end">
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="addUser" v-if="information">新增</el-button>
|
||||
<el-button icon="el-icon-Edit" type="primary" @click="editUser" v-if="information">修改</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deleteEven"
|
||||
v-if="information">删除</el-button>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="download" v-if="flag">下载</el-button>
|
||||
</div>
|
||||
<el-empty v-if="url.length == 0" description="暂无数据" class="custom-empty"
|
||||
:style="`height: calc(${height.height} - 60px);`" />
|
||||
<div :style="`height: calc(${height.height} - 60px);overflow: auto;`" v-else>
|
||||
<vue-office-docx v-if="url.includes('.doc') || url.includes('.docx')" :src="url" />
|
||||
<vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url"
|
||||
:options="excelOptions" />
|
||||
<!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url"/> -->
|
||||
<iframe v-if="url.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
|
||||
<img v-if="
|
||||
url.includes('.png') || url.includes('.jpg') || url.includes('.gif') || url.includes('.bmp')
|
||||
" :src="url" />
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
<!-- 新增 -->
|
||||
|
||||
<addTree ref="addTreeRef" @onSubmit="treeRef.loadData(dotList.id)"></addTree>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import standardTree from '@/components/tree/pqs/standardTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import addTree from './components/addTree.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
|
||||
|
||||
//引入相关样式
|
||||
import '@vue-office/excel/lib/index.css'
|
||||
//引入VueOfficeDocx组件
|
||||
import VueOfficeDocx from '@vue-office/docx'
|
||||
import VueOfficeExcel from '@vue-office/excel'
|
||||
//引入VueOfficePdf组件
|
||||
import VueOfficePdf from '@vue-office/pdf'
|
||||
import { deleteyLibstandard } from '@/api/supervision-boot/database/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'database/standard'
|
||||
})
|
||||
const excelOptions = ref({})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(20)
|
||||
const size = ref(0)
|
||||
const treeRef = ref()
|
||||
const addTreeRef = ref()
|
||||
const url = ref('')
|
||||
const dotList: any = ref({})
|
||||
const flag: any = ref(false)
|
||||
const information = adminInfo.roleCode.includes('information_info')
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
})
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
console.log("🚀 ~ handleNodeClick ~ data:", data)
|
||||
dotList.value = data
|
||||
url.value = ''
|
||||
flag.value = false
|
||||
if (data?.url != null && data?.url != '') {
|
||||
flag.value = true
|
||||
|
||||
setTimeout(() => {
|
||||
url.value = `/api-docx/excelreport` + data.url
|
||||
excelOptions.value = { xls: data.url.split('.')[1] == 'xls' ? true : false }
|
||||
// getFileNameAndFilePath({ filePath: data.url }).then(res => {
|
||||
// url.value = res.data.url
|
||||
// })
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
// 删除
|
||||
const deleteEven = () => {
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteyLibstandard({ id: dotList.value.id }).then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功！'
|
||||
})
|
||||
setTimeout(() => {
|
||||
treeRef.value.loadData()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
}
|
||||
const addUser = () => {
|
||||
addTreeRef.value.open('新增')
|
||||
}
|
||||
const editUser = () => {
|
||||
addTreeRef.value.open('修改', dotList.value)
|
||||
}
|
||||
// 下载
|
||||
const download = () => {
|
||||
let url = dotList.value.url
|
||||
let urls = url
|
||||
let name = url.match(/\/([^/]+)\.(\w+)$/)[1]
|
||||
downloadFile({ filePath: url }).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: urls.includes('.pdf')
|
||||
? 'application/pdf'
|
||||
: urls.includes('.docx')
|
||||
? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||||
: urls.includes('.xls')
|
||||
? 'application/vnd.ms-excel'
|
||||
: urls.includes('.xlsx')
|
||||
? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
: urls.includes('.png')
|
||||
? 'image/png'
|
||||
: urls.includes('.jpeg')
|
||||
? 'image/jpeg'
|
||||
: urls.includes('.jpg')
|
||||
? 'image/jpg'
|
||||
: ''
|
||||
})
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = name
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 自定义 el-empty 的样式 */
|
||||
:deep(.custom-empty) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
/* 调整高度 */
|
||||
padding: 20px;
|
||||
|
||||
/* 调整内边距 */
|
||||
.el-empty__image {
|
||||
display: none;
|
||||
/* 隐藏默认图片 */
|
||||
}
|
||||
|
||||
.el-empty__description {
|
||||
font-size: 14px;
|
||||
/* 调整字体大小 */
|
||||
color: var(--vxe-font-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user