拓扑图配置

This commit is contained in:
仲么了
2024-01-17 14:22:34 +08:00
parent 0068eace86
commit 694b5b181d
15 changed files with 395 additions and 79 deletions

View File

@@ -104,7 +104,7 @@ onMounted(() => {
tableStore.index()
})
setTimeout(() => {
tableStore.table.height = mainHeight(190).height as any
tableStore.table.height = mainHeight(180).height as any
}, 0)
const addMenu = () => {}
</script>

View File

@@ -103,7 +103,7 @@ onMounted(() => {
tableStore.index()
})
setTimeout(() => {
tableStore.table.height = mainHeight(190).height as any
tableStore.table.height = mainHeight(180).height as any
}, 0)
const addMenu = () => {}
</script>

View File

@@ -219,7 +219,7 @@ onMounted(() => {
})
const bxecharts = mainHeight(175).height as any
setTimeout(() => {
tableStore.table.height = mainHeight(190).height as any
tableStore.table.height = mainHeight(180).height as any
}, 0)
const addMenu = () => {}

View File

@@ -31,7 +31,7 @@
v-for="(item, index) in deviceData.dataSetList"
:key="index"
></el-tab-pane>
<el-form :inline="true" style="white-space: nowrap">
<el-form :inline="true" style="white-space: nowrap;margin-top: 10px">
<el-form-item label="指标">
<el-input
v-model="formInline.searchValue"
@@ -159,7 +159,7 @@ const dataSet = ref('')
const devTypeOptions = ref([])
const devModelOptions = ref([])
const tableData = ref<any[]>([])
const tableHeight = mainHeight(320).height
const tableHeight = mainHeight(310).height
const mangePopup = ref()
const datePickerRef = ref()
const formInline = reactive({

View File

@@ -82,7 +82,7 @@ const dataSet = ref('')
const devTypeOptions = ref([])
const devModelOptions = ref([])
const tableData = ref([])
const tableHeight = mainHeight(225).height
const tableHeight = mainHeight(215).height
const mangePopup = ref()
const nodeClick = (e: anyObj) => {
if (e.level == 2) {

View File

@@ -0,0 +1,106 @@
<template>
<div class="default-main">
<TableHeader>
<template v-slot:operation>
<el-upload
action=""
class="upload-demo"
:show-file-list="false"
:auto-upload="false"
:on-change="chooseImage"
>
<el-button type="primary" icon="el-icon-Plus">新增拓扑图</el-button>
</el-upload>
</template>
</TableHeader>
<Table ref="tableRef" />
<popupEdit ref="popupRef"></popupEdit>
</div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import popupEdit from './popupEdit.vue'
import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
import { ElMessage } from 'element-plus'
defineOptions({
name: 'govern/manage/gplot'
})
const tableRef = ref()
const popupRef = ref()
const tableStore = new TableStore({
showPage: false,
url: '/cs-device-boot/topologyTemplate/queryImage',
method: 'POST',
column: [
{ title: '序号', type: 'seq', width: 60 },
{ title: '拓扑图模版名称', field: 'name', align: 'center' },
{ title: '监测点数量', field: 'pointNum', align: 'center' },
{ title: '拓扑图', field: 'filePath', align: 'center', render: 'image' },
{
title: '操作',
align: 'center',
width: '130',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'tipButton',
click: row => {
popupRef.value.open('编辑菜单', row)
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除该菜单吗?'
},
click: row => {
deleteTopoTemplate(row.id).then(res => {
ElMessage.success('删除成功')
tableStore.index()
})
}
}
]
}
],
loadCallback: () => {
tableStore.table.data.forEach((item: any) => {
item.pointNum = item.csLineTopologyTemplateVOList.length
})
}
})
provide('tableStore', tableStore)
onMounted(() => {
tableStore.table.ref = tableRef.value
tableStore.index()
tableStore.table.loading = false
})
const addMenu = () => {
console.log(popupRef)
popupRef.value.open('新增菜单')
}
const chooseImage = e => {
console.warn(e)
uploadTopo(e.raw).then(res => {
ElMessage.success('新增成功')
tableStore.index()
})
}
</script>

View File

@@ -0,0 +1,103 @@
<template>
<el-dialog class='cn-operate-dialog' v-model='dialogVisible' :title='title'>
<el-scrollbar>
<el-form :inline='false' :model='form' label-width='120px'>
<el-form-item label='上级菜单'>
<el-cascader
v-model='form.pid'
:options='tableStore.table.data'
:props='cascaderProps'
style='width: 100%'
/>
</el-form-item>
<el-form-item label='菜单名称'>
<el-input v-model='form.name' placeholder='请输入菜单名称' />
</el-form-item>
<el-form-item label='图标'>
<IconSelector v-model='form.icon' placeholder='请选择图标' />
</el-form-item>
<el-form-item label='菜单路由'>
<el-input v-model='form.path' placeholder='请输入菜单名称' />
</el-form-item>
<el-form-item label='组件路径'>
<el-input v-model='form.routeName' placeholder='请输入组件路径,如/src/views/dashboard/index.vue' />
</el-form-item>
<el-form-item label='排序'>
<el-input-number v-model='form.sort' :min='0' />
</el-form-item>
<el-form-item label='菜单描述'>
<el-input v-model='form.remark' :rows='2' type='textarea' 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 TableStore from '@/utils/tableStore'
import IconSelector from '@/components/baInput/components/iconSelector.vue'
import { updateMenu, addMenu } from '@/api/systerm'
const tableStore = inject('tableStore') as TableStore
const cascaderProps = {
label: 'title',
value: 'id'
}
const form: any = reactive({
code: '',
icon: '',
id: '',
name: '',
path: '',
pid: '0',
remark: '',
routeName: '',
sort: 0,
type: 0
})
const dialogVisible = ref(false)
const title = ref('新增菜单')
const open = (text: string, data?: anyObj) => {
console.log(data)
title.value = text
if (data) {
for (let key in form) {
form[key] = data[key]
}
form.path = data.routePath
form.name = data.title
} else {
// 重置表单
for (let key in form) {
form[key] = ''
}
form.pid = '0'
form.sort = 0
form.type = 0
}
dialogVisible.value = true
}
const submit = async () => {
if (form.id) {
await updateMenu(form)
} else {
form.code = 'menu'
let obj = JSON.parse(JSON.stringify(form))
delete obj.id
await addMenu(obj)
}
tableStore.index()
dialogVisible.value = false
}
defineExpose({ open })
</script>

View File

@@ -7,22 +7,23 @@
<el-tab-pane label='使用手册' name='User_Manual'></el-tab-pane>
<el-tab-pane label='公司介绍' name='Company_Profile'></el-tab-pane>
</el-tabs>
<div class='agreement' style='height: calc(100vh - 190px)'>
<div class='agreement' :style='{height:height}'>
<div style='margin-top: 5px; right: 10px; position: absolute; z-index: 9999999'>
<el-button type='primary' @click='submit' icon='el-icon-Checked'>保存</el-button>
</div>
<WangEditor v-model='html' style='height: 100%' />
<WangEditor v-model='html' style='border-top: none' />
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { ref, nextTick } from 'vue'
import { mainHeight } from '@/utils/layout'
import { useDictData } from '@/stores/dictData'
import { BasicDictData } from '@/stores/interface'
import { queryAppInfo } from '@/api/cs-system-boot/appinfo'
import { addAppInfo, queryAppInfo } from '@/api/cs-system-boot/appinfo'
import WangEditor from '@/components/wangEditor/index.vue'
import { ElMessage } from 'element-plus'
defineOptions({
name: 'govern/setting/app'
@@ -31,17 +32,28 @@ const dic = useDictData().getBasicData('appInformationType')
const id = ref('')
const activeName = ref('User_Agreement')
const html = ref('')
const height = mainHeight(60).height
const submit = () => {
addAppInfo({
type: id.value,
content: html.value
}).then((res) => {
ElMessage.success('保存成功')
})
}
const init = () => {
dic.forEach((item: BasicDictData) => {
if (item.code == activeName.value) {
id.value = item.id
}
})
queryAppInfo(id.value).then((res: any) => {
html.value = res.data.content
nextTick(() => {
dic.forEach((item: BasicDictData) => {
if (item.code == activeName.value) {
console.log(activeName.value)
console.log(item.id)
id.value = item.id
}
})
queryAppInfo(id.value).then((res: any) => {
html.value = res.data.content
})
})
}
init()