Skip to content

R
relation-graph
Commit 7efb3722 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

获取要素接口更换v2

parent ef69b7de
Hide whitespace changes
Inline Side-by-side
Showing with 362 additions and 393 deletions
src/ajax/api.js
View file @ 7efb3722
...@@ -7,7 +7,8 @@ switch (process.env.NODE_ENV) { ...@@ -7,7 +7,8 @@ switch (process.env.NODE_ENV) {
export default { export default {
BASE_URL, BASE_URL,
GET_SUBJECTS: '/subjects', GET_SUBJECTS: '/subjects/v2',
PUT_SUBJECT: '/subject/{id}',
GET_RELATIONS: '/relations', GET_RELATIONS: '/relations',
POST_SUBJECT: '/subject', POST_SUBJECT: '/subject',
POST_NODE: '/node/relation', POST_NODE: '/node/relation',
...@@ -16,4 +17,5 @@ export default { ...@@ -16,4 +17,5 @@ export default {
DELETE_NODE: '/node/{id}', DELETE_NODE: '/node/{id}',
GET_SYSTEMS: '/systems', GET_SYSTEMS: '/systems',
POST_LINK_SUBJECTS: '/node/relations', POST_LINK_SUBJECTS: '/node/relations',
GET_TAGS: '/label/classification',
} }
src/components/main.vue
View file @ 7efb3722
...@@ -174,430 +174,397 @@ ...@@ -174,430 +174,397 @@
</n-drawer> </n-drawer>
</template> </template>
<script> <script setup>
import D3 from './d3.vue' import D3 from './d3.vue'
import Nav from './nav.vue' import Nav from './nav.vue'
import Side from './side.vue' import Side from './side.vue'
import Footer from './footer.vue' import Footer from './footer.vue'
import mockData from '@/util/mock.js'
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import { ajax, api } from '@/ajax' import { ajax, api } from '@/ajax'
import { useMessage, useDialog } from 'naive-ui' import { useMessage, useDialog } from 'naive-ui'
export default {
name: 'Main', const message = useMessage()
components: { D3, Nav, Side, Footer }, const dialog = useDialog()
setup() { const curSubject = ref(null)
const message = useMessage() const formRef = ref(null)
const dialog = useDialog() const formData = ref([
const curSubject = ref(null) {
const formRef = ref(null) propertyName: null,
const formData = ref([ relationId: null,
{ systemIds: null,
propertyName: null, },
relationId: null, ])
systemIds: null, const showDrawer = ref(false)
const isLoading = ref(false)
const d3Ref = ref(null)
const relationOptions = ref([])
const systemOptions = ref([])
const graphData = ref({ nodes: [], links: [] })
const subjectOptions = ref([])
function fetchSubjects() {
ajax
.get({
url: api.GET_SUBJECTS,
})
.then((res) => {
console.log('subject', res.data.content)
const [{ links, nodes }] = res.data.content
subjectOptions.value = nodes.map((item) => ({
label: item.subjectName,
value: item.nodeId,
}))
graphData.value = {
nodes: [...nodes],
links: [...links],
}
})
}
fetchSubjects()
function fetchTags() {
ajax
.get({
url: api.GET_TAGS,
})
.then((res) => {
console.log('tags', res.data.content)
})
}
fetchTags()
function getSelectOptions() {
ajax
.get({
url: api.GET_RELATIONS,
})
.then((res) => {
if (!res.data || !res.data.content) return
relationOptions.value = res.data.content.map((item) => ({
label: item.relationName,
value: item.id + '',
}))
})
ajax
.get({
url: api.GET_SYSTEMS,
})
.then((res) => {
if (!res.data || !res.data.content) return
systemOptions.value = res.data.content.map((item) => ({
label: item.systemName,
value: item.nodeId + '',
}))
})
}
getSelectOptions()
function fetchSubordinates(params = null) {
ajax
.get({
url: api.GET_NODES,
params: {
type: params.nodeLabel,
nodeId: params.nodeId,
}, },
]) })
const showDrawer = ref(false) .then((res) => {
const isLoading = ref(false) const { links, nodes } = res.data.content
const d3Ref = ref(null) graphData.value = {
const relationOptions = ref([]) nodes: [
const systemOptions = ref([]) ...graphData.value.nodes,
const graphData = ref({ nodes: [], links: [] }) ...nodes.filter(
const subjectOptions = ref([]) (node) =>
graphData.value.nodes.findIndex((e) => e.id == node.id) < 0
),
],
links: [
...graphData.value.links,
...links.filter(
(link) =>
graphData.value.links.findIndex((e) => e.id == link.id) < 0
),
],
}
})
}
function openAddDrawer(node) {
formData.value = [
{
propertyName: null,
relationId: null,
systemIds: null,
},
]
curSubject.value = node
showDrawer.value = true
}
function setLabelKey(key) {
d3Ref.value.setKey(key)
}
function fetchSubjects() { function submitNewNode(e) {
e.preventDefault()
formRef.value.validate((errors) => {
if (!errors) {
isLoading.value = true
const { nodeId, subjectName, subjectType } = curSubject.value
ajax ajax
.get({ .post({
url: api.GET_SUBJECTS, url: api.POST_NODE,
params: {
subjectId: nodeId,
subjectName,
subjectType,
propertyList: formData.value,
},
}) })
.then((res) => { .then(() => {
console.log('subject', res.data.content) fetchSubordinates({
const data = res.data.content nodeId: nodeId,
subjectOptions.value = data.map((item) => ({ nodeLabel: 'Subject',
label: item.subjectName, })
value: item.nodeId, isLoading.value = false
})) showDrawer.value = false
graphData.value = { message.success('提交成功')
nodes: [...data],
links: [],
}
}) })
} }
fetchSubjects() })
}
function getSelectOptions() { const curNode = ref(null)
ajax
.get({ function deleteNode(data) {
url: api.GET_RELATIONS, dialog.error({
}) title: '删除节点',
.then((res) => { content: `确定是否删除 '${
if (!res.data || !res.data.content) return data[data.nodeLabel.toLowerCase() + 'Name']
relationOptions.value = res.data.content.map((item) => ({ }' 节点？`,
label: item.relationName, positiveText: '确定',
value: item.id + '', negativeText: '取消',
})) maskClosable: false,
}) onPositiveClick: () => {
ajax ajax
.get({ .delete({
url: api.GET_SYSTEMS, url: api.DELETE_NODE.replace('{id}', data.id),
}) })
.then((res) => { .then(() => {
if (!res.data || !res.data.content) return if (data.nodeLabel === 'Subject') {
systemOptions.value = res.data.content.map((item) => ({ fetchSubjects()
label: item.systemName, } else {
value: item.nodeId + '', graphData.value = {
})) nodes: graphData.value.nodes.filter((node) => node.id != data.id),
links: graphData.value.links.filter(
(link) => link.source.id != data.id && link.target.id != data.id
),
}
}
message.success('删除成功！')
}) })
} },
getSelectOptions() })
}
function fetchSubordinates(params = null) { function deleteLink(data) {
const { source, target } = data
dialog.error({
title: '删除关联',
content: `确定是否删除 '${source.propertyName}_${target.systemName}' 关联关系？`,
positiveText: '确定',
negativeText: '取消',
maskClosable: false,
onPositiveClick: () => {
ajax ajax
.get({ .delete({
url: api.GET_NODES, url: api.DELETE_RELATION.replace('{id}', data.id),
params: {
type: params.nodeLabel,
nodeId: params.nodeId,
},
}) })
.then((res) => { .then(() => {
const { links, nodes } = res.data.content
graphData.value = { graphData.value = {
nodes: [ nodes: graphData.value.nodes,
...graphData.value.nodes, links: graphData.value.links.filter((link) => link.id != data.id),
...nodes.filter(
(node) =>
graphData.value.nodes.findIndex((e) => e.id == node.id) < 0
),
],
links: [
...graphData.value.links,
...links.filter(
(link) =>
graphData.value.links.findIndex((e) => e.id == link.id) < 0
),
],
} }
message.success('删除成功！')
}) })
} },
})
function openAddDrawer(node) { }
formData.value = [
{
propertyName: null,
relationId: null,
systemIds: null,
},
]
curSubject.value = node
showDrawer.value = true
}
function setLabelKey(key) {
d3Ref.value.setKey(key)
}
function submitNewNode(e) {
e.preventDefault()
formRef.value.validate((errors) => {
if (!errors) {
isLoading.value = true
const { nodeId, subjectName, subjectType } = curSubject.value
ajax
.post({
url: api.POST_NODE,
params: {
subjectId: nodeId,
subjectName,
subjectType,
propertyList: formData.value,
},
})
.then(() => {
fetchSubordinates({
nodeId: nodeId,
nodeLabel: 'Subject',
})
isLoading.value = false
showDrawer.value = false
message.success('提交成功')
})
}
})
}
const curNode = ref(null)
function deleteNode(data) {
dialog.error({
title: '删除节点',
content: `确定是否删除 '${
data[data.nodeLabel.toLowerCase() + 'Name']
}' 节点？`,
positiveText: '确定',
negativeText: '取消',
maskClosable: false,
onPositiveClick: () => {
ajax
.delete({
url: api.DELETE_NODE.replace('{id}', data.id),
})
.then(() => {
if (data.nodeLabel === 'Subject') {
fetchSubjects()
} else {
graphData.value = {
nodes: graphData.value.nodes.filter(
(node) => node.id != data.id
),
links: graphData.value.links.filter(
(link) =>
link.source.id != data.id && link.target.id != data.id
),
}
}
message.success('删除成功！')
})
},
})
}
function deleteLink(data) {
const { source, target } = data
dialog.error({
title: '删除关联',
content: `确定是否删除 '${source.propertyName}_${target.systemName}' 关联关系？`,
positiveText: '确定',
negativeText: '取消',
maskClosable: false,
onPositiveClick: () => {
ajax
.delete({
url: api.DELETE_RELATION.replace('{id}', data.id),
})
.then(() => {
graphData.value = {
nodes: graphData.value.nodes,
links: graphData.value.links.filter(
(link) => link.id != data.id
),
}
message.success('删除成功！')
})
},
})
}
const subjectFormRef = ref(null)
const showSubjectDrawer = ref(false)
const subjectData = ref({
subjectName: null,
subjectType: null,
targetSubjectId: null,
sourceSubjectId: null,
})
const addSubject = (e) => {
e.preventDefault()
subjectFormRef.value.validate((errors) => {
if (!errors) {
isLoading.value = true
ajax
.post({
url: api.POST_SUBJECT,
params: subjectData.value,
})
.then(() => {
fetchSubjects()
isLoading.value = false
showSubjectDrawer.value = false
message.success('提交成功')
})
}
})
}
const searchNodes = (type, key) => { const subjectFormRef = ref(null)
if (!key) { const showSubjectDrawer = ref(false)
fetchSubjects() const subjectData = ref({
return subjectName: null,
} subjectType: null,
targetSubjectId: null,
sourceSubjectId: null,
})
const addSubject = (e) => {
e.preventDefault()
subjectFormRef.value.validate((errors) => {
if (!errors) {
isLoading.value = true
ajax ajax
.get({ .post({
url: api.GET_NODES, url: api.POST_SUBJECT,
params: { type, nodeName: key }, params: subjectData.value,
}) })
.then((res) => { .then(() => {
graphData.value = res.data.content fetchSubjects()
isLoading.value = false
showSubjectDrawer.value = false
message.success('提交成功')
}) })
} }
})
}
const showLinkDrawer = ref(false) const searchNodes = (type, key) => {
const linkData = ref({ if (!key) {
sourceNodeId: null, fetchSubjects()
targetNodeId: null, return
}
ajax
.get({
url: api.GET_NODES,
params: { type, nodeName: key },
}) })
watch( .then((res) => {
() => curNode.value, graphData.value = res.data.content
(cur) => { })
linkData.value = { }
sourceNodeId: cur && cur.nodeId,
targetNodeId: null, const showLinkDrawer = ref(false)
} const linkData = ref({
} sourceNodeId: null,
) targetNodeId: null,
const linkFormRef = ref(null) })
const linkSubject = (e) => { watch(
e.preventDefault() () => curNode.value,
linkFormRef.value.validate((errors) => { (cur) => {
if (!errors) { linkData.value = {
isLoading.value = true sourceNodeId: cur && cur.nodeId,
ajax targetNodeId: null,
.post({
url: api.POST_LINK_SUBJECTS,
params: linkData.value,
})
.then(() => {
fetchSubordinates({
nodeId: linkData.value.sourceNodeId,
nodeLabel: 'Subject',
})
isLoading.value = false
showLinkDrawer.value = false
message.success('提交成功')
})
}
})
}
const rules = {
subjectName: [
{
required: true,
message: '请输入名称',
trigger: ['input', 'blur'],
},
],
subjectType: [
{
required: true,
message: '请选择要素类型',
trigger: ['change', 'blur'],
},
],
propertyName: [
{
required: true,
message: '请输入节点名称',
trigger: ['input', 'blur'],
},
],
relationId: [
{
required: true,
message: '请选择从属类型',
trigger: ['change', 'blur'],
},
],
sourceNodeId: [
{
required: true,
message: '请选择源要素',
trigger: ['change', 'blur'],
},
],
targetNodeId: [
{
required: true,
message: '请选择目标要素',
trigger: ['change', 'blur'],
},
{
validator(_, value) {
return value !== linkData.value.sourceNodeId
},
trigger: ['blur', 'change'],
message: '目标要素不能与源要素相同',
},
],
targetSubjectId: [
{
validator(_, value) {
return value !== subjectData.value.sourceSubjectId
},
trigger: ['blur', 'change'],
message: '目标要素不能与源要素相同',
},
],
sourceSubjectId: [
{
validator(_, value) {
return value !== subjectData.value.targetSubjectId
},
trigger: ['blur', 'change'],
message: '源要素不能与目标要素相同',
},
],
}
function openSubjectDrawer() {
showSubjectDrawer.value = true
subjectData.value = {
subjectName: null,
subjectType: null,
targetSubjectId: null,
sourceSubjectId: null,
}
}
function openLinkDrawer() {
showLinkDrawer.value = true
linkData.value = {
sourceNodeId: null,
targetNodeId: null,
}
}
function addNewItem() {
formData.value.push({
propertyName: null,
relationId: null,
systemIds: null,
})
}
function deleteItem(i) {
formData.value.splice(i, 1)
} }
return { }
formRef, )
formData, const linkFormRef = ref(null)
showDrawer, const linkSubject = (e) => {
submitNewNode, e.preventDefault()
isLoading, linkFormRef.value.validate((errors) => {
relationOptions, if (!errors) {
systemOptions, isLoading.value = true
graphData, ajax
mockData, .post({
fetchSubordinates, url: api.POST_LINK_SUBJECTS,
openAddDrawer, params: linkData.value,
d3Ref, })
setLabelKey, .then(() => {
rules, fetchSubordinates({
curNode, nodeId: linkData.value.sourceNodeId,
deleteNode, nodeLabel: 'Subject',
deleteLink, })
showSubjectDrawer, isLoading.value = false
subjectFormRef, showLinkDrawer.value = false
subjectData, message.success('提交成功')
addSubject, })
searchNodes,
showLinkDrawer,
linkFormRef,
linkData,
linkSubject,
subjectOptions,
openSubjectDrawer,
openLinkDrawer,
addNewItem,
deleteItem,
} }
}, })
}
const rules = {
subjectName: [
{
required: true,
message: '请输入名称',
trigger: ['input', 'blur'],
},
],
subjectType: [
{
required: true,
message: '请选择要素类型',
trigger: ['change', 'blur'],
},
],
propertyName: [
{
required: true,
message: '请输入节点名称',
trigger: ['input', 'blur'],
},
],
relationId: [
{
required: true,
message: '请选择从属类型',
trigger: ['change', 'blur'],
},
],
sourceNodeId: [
{
required: true,
message: '请选择源要素',
trigger: ['change', 'blur'],
},
],
targetNodeId: [
{
required: true,
message: '请选择目标要素',
trigger: ['change', 'blur'],
},
{
validator(_, value) {
return value !== linkData.value.sourceNodeId
},
trigger: ['blur', 'change'],
message: '目标要素不能与源要素相同',
},
],
targetSubjectId: [
{
validator(_, value) {
return value !== subjectData.value.sourceSubjectId
},
trigger: ['blur', 'change'],
message: '目标要素不能与源要素相同',
},
],
sourceSubjectId: [
{
validator(_, value) {
return value !== subjectData.value.targetSubjectId
},
trigger: ['blur', 'change'],
message: '源要素不能与目标要素相同',
},
],
}
function openSubjectDrawer() {
showSubjectDrawer.value = true
subjectData.value = {
subjectName: null,
subjectType: null,
targetSubjectId: null,
sourceSubjectId: null,
}
}
function openLinkDrawer() {
showLinkDrawer.value = true
linkData.value = {
sourceNodeId: null,
targetNodeId: null,
}
}
function addNewItem() {
formData.value.push({
propertyName: null,
relationId: null,
systemIds: null,
})
}
function deleteItem(i) {
formData.value.splice(i, 1)
} }
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment