Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 3ca9c344 by songchangcheng
Options

Merge branch 'master' of http://47.97.176.204:19000/wangwansu/iact_jiagou_drowio

2 parents d00d03f9 d682231d
Inline Side-by-side
Showing with 1360 additions and 8 deletions
public/drawio/extention/js/exApp.js
......@@ -93,6 +93,7 @@ const leftCustomGraph = function(that) {//左侧自定义图形
}),
contentType: "application/json",
success: function(result) {
result.data.reverse();
result.data.forEach(function(item) {
if(item.eleDtos) {
if(item.eleDtos.length > 0) {
......@@ -101,7 +102,7 @@ const leftCustomGraph = function(that) {//左侧自定义图形
item.eleDtos.forEach(function(item2) {
if(item2.icon) {
if(item2.icon.includes('data')) {
images.push({
images.unshift({
aspect: "fixed",
data: setIcon(item2.icon, item2.dicys, item2.color).icon,
h: setIcon(item2.icon, item2.dicys, item2.color).height,
......@@ -113,7 +114,7 @@ const leftCustomGraph = function(that) {//左侧自定义图形
})
var xml = that.createLibraryDataFromImages(images);
var file = new LocalLibrary(that, xml, libraryName);
that.libraryLoaded(file, images);
that.libraryLoaded(file, images, null, false);
// that.saveLibrary(libraryName, images, null, 'ajax', undefined, undefined, undefined);
}else {
......
src/api/index.js
......@@ -149,11 +149,14 @@ export function getYMXZDGLProyAdd(params) {
export function getYMXZDGLProyUpdate(params) {
return post('/network/ma-ml-dicy/upd-dicy-proy', params);
}
// 删除字典数据
export function getYMXZDGLProyDel(params) {
return post('/network/ma-ml-dicy/del-proy', params);
}
// 业务，应用，数据，技术，安全架构视图管理
export function get_YeWu_YingYong_ShuJu_JiShu_AnQuan_ViewManage(params) {
return post('/network/archi-view/lsViewTypes', params);
}
// 技术政策结构化-列表
export function getJiShuZhengCeJieGouHuaTable(params) {
return post('/kl-tech-policy/', params);
......
src/router/index.js
......@@ -115,6 +115,31 @@ const routes = [
name: 'reportTemplateRelativeUse',
component: () => import('@/views/report-template-relative-use/index.vue'),
},
{
path: '/main/businessArchiViewManage',//业务架构视图管理
name: 'businessArchiViewManage',
component: () => import('@/views/business-archi-view-manage/index.vue'),
},
{
path: '/main/applicationArchiViewManage',//应用架构视图管理
name: 'applicationArchiViewManage',
component: () => import('@/views/application-archi-view-manage/index.vue'),
},
{
path: '/main/dataArchiViewManage',//数据架构视图管理
name: 'dataArchiViewManage',
component: () => import('@/views/data-archi-view-manage/index.vue'),
},
{
path: '/main/techArchiViewManage',//技术架构视图管理
name: 'techArchiViewManage',
component: () => import('@/views/tech-archi-view-manage/index.vue'),
},
{
path: '/main/secureArchiViewManage',//安全架构视图管理
name: 'secureArchiViewManage',
component: () => import('@/views/secure-archi-view-manage/index.vue'),
},
]
}
]
......
src/views/Main/index.vue
......@@ -68,23 +68,23 @@
<span style="margin-left: 5px;">架构视图管理</span>
</div>
<div class="menu_1_item_subtitle">
<div class="menu_1_item_subtitle" @click="jumpPage('总体架构资产设计与维护', '架构视图管理', '业务架构视图管理')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">业务架构视图管理</span>
</div>
<div class="menu_1_item_subtitle">
<div class="menu_1_item_subtitle" @click="jumpPage('总体架构资产设计与维护', '架构视图管理', '应用架构视图管理')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">应用架构视图管理</span>
</div>
<div class="menu_1_item_subtitle">
<div class="menu_1_item_subtitle" @click="jumpPage('总体架构资产设计与维护', '架构视图管理', '数据架构视图管理')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">数据架构视图管理</span>
</div>
<div class="menu_1_item_subtitle">
<div class="menu_1_item_subtitle" @click="jumpPage('总体架构资产设计与维护', '架构视图管理', '技术架构视图管理')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">技术架构视图管理</span>
</div>
<div class="menu_1_item_subtitle">
<div class="menu_1_item_subtitle" @click="jumpPage('总体架构资产设计与维护', '架构视图管理', '安全架构视图管理')">
<img src="@/assets/main/3img.png" alt="">
<span style="margin-left: 5px;">安全架构视图管理</span>
</div>
......@@ -595,6 +595,26 @@
this.$router.push( '/main/reportTemplateRelativeUse', () => {}, () => {} );
this.visible5 = false;
break;
case '业务架构视图管理':
this.$router.push( '/main/businessArchiViewManage', () => {}, () => {} );
this.visible1 = false;
break;
case '应用架构视图管理':
this.$router.push( '/main/applicationArchiViewManage', () => {}, () => {} );
this.visible1 = false;
break;
case '数据架构视图管理':
this.$router.push( '/main/dataArchiViewManage', () => {}, () => {} );
this.visible1 = false;
break;
case '技术架构视图管理':
this.$router.push( '/main/techArchiViewManage', () => {}, () => {} );
this.visible1 = false;
break;
case '安全架构视图管理':
this.$router.push( '/main/secureArchiViewManage', () => {}, () => {} );
this.visible1 = false;
break;
}
}
}
......
src/views/application-archi-view-manage/canvas/index.vue 0 → 100644
<template>
<div class="canvas">
<!-- <Drawio :initGraphId="routerId"></Drawio> -->
</div>
</template>
<script>
import Drawio from '@/components/drawio.vue';
import { MessageBox, Message } from 'element-ui';
import {
} from '@/api/index.js';
export default {
name: 'Canvas',
components: {
Drawio
},
data() {
return {
routerId: null
};
},
mounted(){
},
methods: {
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.canvas{
width: 100%;
height: 100%;
}
</style>
src/views/application-archi-view-manage/details.vue 0 → 100644
<template>
<div class="Details">
<el-tabs type="border-card" @tab-click="tabs_click_func">
<el-tab-pane>
<span slot="label">
<i class="el-icon-picture"></i>
</span>
<YuanMoXingGuanLiCanvas ref="canvasComponent"></YuanMoXingGuanLiCanvas>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-s-grid"></i>
</span>
<YuanMoXingGuanLiTable ref="tableComponent"></YuanMoXingGuanLiTable>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import YuanMoXingGuanLiCanvas from './canvas/index.vue';
import YuanMoXingGuanLiTable from './table/index.vue';
export default {
name: 'Details',
components: {
YuanMoXingGuanLiCanvas,
YuanMoXingGuanLiTable
},
data() {
return {
};
},
mounted(){
},
methods: {
tabs_click_func(data) {
if(data.index == '0') {
console.log('画布页面')
}else{
console.log('表格页面')
this.$refs.tableComponent.get_table();
}
}
}
}
</script>
<style scoped>
.Details{
width: 100%;
height: 100%;
position: relative;
}
/deep/ .el-tabs__nav{
float: right;
}
.el-tabs{
height: 100%;
}
/deep/ .el-tabs__content{
height: calc(100% - 38px);
padding: 0;
}
.el-tab-pane{
height: 100%;
}
</style>
\ No newline at end of file
src/views/application-archi-view-manage/index.vue 0 → 100644
<template>
<div class="applicationArchiViewManage">
<el-tabs v-model="activeId">
<el-tab-pane
v-for="item in tabData"
:key="item.viewTypeId"
:label="item.viewTypeName"
:name="item.viewTypeId">
用户管理
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import {
get_YeWu_YingYong_ShuJu_JiShu_AnQuan_ViewManage
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import GraphGallery from '@/components/graphGallery.vue';
export default {
name: 'ApplicationArchiViewManage',
components: {
GraphGallery
},
data() {
return {
activeId: null,
tabData: []
};
},
mounted(){
this.getData();
},
methods: {
getData() {
const params = {
"parentId": 2
}
get_YeWu_YingYong_ShuJu_JiShu_AnQuan_ViewManage(params).then(res => {
if(res.code == 200) {
res.data.map(item => {
item.viewTypeId = ''+item.viewTypeId;
})
this.activeId = res.data[0].viewTypeId;
this.tabData = res.data;
}
})
}
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
/deep/ .el-tabs__item:hover {
color: #0D867F;
}
/deep/ .el-tabs__active-bar{
background-color: #0D867F;
}
/deep/ .el-tabs__item.is-active{
color: #0D867F;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.applicationArchiViewManage{
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/application-archi-view-manage/table/index.vue 0 → 100644
<template>
<div class="table">
<div class="table_container">
<el-table v-loading="loading" :data="tableData" stripe border height="500">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="sourceId" label="元素id" align="center"></el-table-column>
<el-table-column prop="source" label="元素名称" align="center"></el-table-column>
<el-table-column prop="target" label="关联关系名称" align="center"></el-table-column>
<el-table-column prop="targetId" label="关联元素id" align="center"></el-table-column>
<el-table-column prop="linkName" label="关联元素名称" align="center"></el-table-column>
<el-table-column prop="linkNameDesc" label="关联关系描述" align="center"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {
,
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'Table',
components: {
},
data() {
return {
tableData: [],
loading: false,
};
},
mounted(){
},
methods: {
get_table() {
this.loading = true;
}
}
}
</script>
<style scoped>
.table{
width: 100%;
height: 100%;
}
.table_container{
margin-top: 20px;
}
/deep/ .el-dialog__header{
text-align: left;
}
</style>
\ No newline at end of file
src/views/business-archi-view-manage/canvas/index.vue 0 → 100644
<template>
<div class="canvas">
<!-- <Drawio :initGraphId="routerId"></Drawio> -->
</div>
</template>
<script>
import Drawio from '@/components/drawio.vue';
import { MessageBox, Message } from 'element-ui';
import {
} from '@/api/index.js';
export default {
name: 'Canvas',
components: {
Drawio
},
data() {
return {
routerId: null
};
},
mounted(){
},
methods: {
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.canvas{
width: 100%;
height: 100%;
}
</style>
src/views/business-archi-view-manage/details.vue 0 → 100644
<template>
<div class="Details">
<el-tabs type="border-card" @tab-click="tabs_click_func">
<el-tab-pane>
<span slot="label">
<i class="el-icon-picture"></i>
</span>
<YuanMoXingGuanLiCanvas ref="canvasComponent"></YuanMoXingGuanLiCanvas>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-s-grid"></i>
</span>
<YuanMoXingGuanLiTable ref="tableComponent"></YuanMoXingGuanLiTable>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import YuanMoXingGuanLiCanvas from './canvas/index.vue';
import YuanMoXingGuanLiTable from './table/index.vue';
export default {
name: 'Details',
components: {
YuanMoXingGuanLiCanvas,
YuanMoXingGuanLiTable
},
data() {
return {
};
},
mounted(){
},
methods: {
tabs_click_func(data) {
if(data.index == '0') {
console.log('画布页面')
}else{
console.log('表格页面')
this.$refs.tableComponent.get_table();
}
}
}
}
</script>
<style scoped>
.Details{
width: 100%;
height: 100%;
position: relative;
}
/deep/ .el-tabs__nav{
float: right;
}
.el-tabs{
height: 100%;
}
/deep/ .el-tabs__content{
height: calc(100% - 38px);
padding: 0;
}
.el-tab-pane{
height: 100%;
}
</style>
\ No newline at end of file
src/views/business-archi-view-manage/index.vue 0 → 100644
<template>
<div class="businessArchiViewManage">
<el-tabs v-model="activeId" @tab-click="handleClick">
<el-tab-pane
v-for="item in tabData"
:key="item.viewTypeId"
:label="item.viewTypeName"
:name="item.viewTypeId">
用户管理
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import {
get_YeWu_YingYong_ShuJu_JiShu_AnQuan_ViewManage
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import GraphGallery from '@/components/graphGallery.vue';
export default {
name: 'BusinessArchiViewManage',
components: {
GraphGallery
},
data() {
return {
activeId: null,
tabData: []
};
},
mounted(){
this.getData();
},
methods: {
handleClick(tab, event) {
console.log(tab);
},
getData() {
const params = {
"parentId": 1
}
get_YeWu_YingYong_ShuJu_JiShu_AnQuan_ViewManage(params).then(res => {
if(res.code == 200) {
res.data.map(item => {
item.viewTypeId = ''+item.viewTypeId;
})
this.activeId = res.data[0].viewTypeId;
this.tabData = res.data;
}
})
}
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
/deep/ .el-tabs__item:hover {
color: #0D867F;
}
/deep/ .el-tabs__active-bar{
background-color: #0D867F;
}
/deep/ .el-tabs__item.is-active{
color: #0D867F;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.businessArchiViewManage{
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/business-archi-view-manage/table/index.vue 0 → 100644
<template>
<div class="table">
<div class="table_container">
<el-table v-loading="loading" :data="tableData" stripe border height="500">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="sourceId" label="元素id" align="center"></el-table-column>
<el-table-column prop="source" label="元素名称" align="center"></el-table-column>
<el-table-column prop="target" label="关联关系名称" align="center"></el-table-column>
<el-table-column prop="targetId" label="关联元素id" align="center"></el-table-column>
<el-table-column prop="linkName" label="关联元素名称" align="center"></el-table-column>
<el-table-column prop="linkNameDesc" label="关联关系描述" align="center"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {
,
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'Table',
components: {
},
data() {
return {
tableData: [],
loading: false,
};
},
mounted(){
},
methods: {
get_table() {
this.loading = true;
}
}
}
</script>
<style scoped>
.table{
width: 100%;
height: 100%;
}
.table_container{
margin-top: 20px;
}
/deep/ .el-dialog__header{
text-align: left;
}
</style>
\ No newline at end of file
src/views/data-archi-view-manage/canvas/index.vue 0 → 100644
<template>
<div class="canvas">
<!-- <Drawio :initGraphId="routerId"></Drawio> -->
</div>
</template>
<script>
import Drawio from '@/components/drawio.vue';
import { MessageBox, Message } from 'element-ui';
import {
} from '@/api/index.js';
export default {
name: 'Canvas',
components: {
Drawio
},
data() {
return {
routerId: null
};
},
mounted(){
},
methods: {
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.canvas{
width: 100%;
height: 100%;
}
</style>
src/views/data-archi-view-manage/details.vue 0 → 100644
<template>
<div class="Details">
<el-tabs type="border-card" @tab-click="tabs_click_func">
<el-tab-pane>
<span slot="label">
<i class="el-icon-picture"></i>
</span>
<YuanMoXingGuanLiCanvas ref="canvasComponent"></YuanMoXingGuanLiCanvas>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-s-grid"></i>
</span>
<YuanMoXingGuanLiTable ref="tableComponent"></YuanMoXingGuanLiTable>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import YuanMoXingGuanLiCanvas from './canvas/index.vue';
import YuanMoXingGuanLiTable from './table/index.vue';
export default {
name: 'Details',
components: {
YuanMoXingGuanLiCanvas,
YuanMoXingGuanLiTable
},
data() {
return {
};
},
mounted(){
},
methods: {
tabs_click_func(data) {
if(data.index == '0') {
console.log('画布页面')
}else{
console.log('表格页面')
this.$refs.tableComponent.get_table();
}
}
}
}
</script>
<style scoped>
.Details{
width: 100%;
height: 100%;
position: relative;
}
/deep/ .el-tabs__nav{
float: right;
}
.el-tabs{
height: 100%;
}
/deep/ .el-tabs__content{
height: calc(100% - 38px);
padding: 0;
}
.el-tab-pane{
height: 100%;
}
</style>
\ No newline at end of file
src/views/data-archi-view-manage/index.vue 0 → 100644
<template>
<div class="dataArchiViewManage">
<el-tabs v-model="activeId" @tab-click="handleClick">
<el-tab-pane
v-for="item in tabData"
:key="item.viewTypeId"
:label="item.viewTypeName"
:name="item.viewTypeId">
用户管理
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import {
get_YeWu_YingYong_ShuJu_JiShu_AnQuan_ViewManage
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import GraphGallery from '@/components/graphGallery.vue';
export default {
name: 'DataArchiViewManage',
components: {
GraphGallery
},
data() {
return {
activeId: null,
tabData: []
};
},
mounted(){
this.getData();
},
methods: {
handleClick(tab, event) {
console.log(tab);
},
getData() {
const params = {
"parentId": 3
}
get_YeWu_YingYong_ShuJu_JiShu_AnQuan_ViewManage(params).then(res => {
if(res.code == 200) {
res.data.map(item => {
item.viewTypeId = ''+item.viewTypeId;
})
this.activeId = res.data[0].viewTypeId;
this.tabData = res.data;
}
})
}
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
/deep/ .el-tabs__item:hover {
color: #0D867F;
}
/deep/ .el-tabs__active-bar{
background-color: #0D867F;
}
/deep/ .el-tabs__item.is-active{
color: #0D867F;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.dataArchiViewManage{
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/data-archi-view-manage/table/index.vue 0 → 100644
<template>
<div class="table">
<div class="table_container">
<el-table v-loading="loading" :data="tableData" stripe border height="500">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="sourceId" label="元素id" align="center"></el-table-column>
<el-table-column prop="source" label="元素名称" align="center"></el-table-column>
<el-table-column prop="target" label="关联关系名称" align="center"></el-table-column>
<el-table-column prop="targetId" label="关联元素id" align="center"></el-table-column>
<el-table-column prop="linkName" label="关联元素名称" align="center"></el-table-column>
<el-table-column prop="linkNameDesc" label="关联关系描述" align="center"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {
,
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'Table',
components: {
},
data() {
return {
tableData: [],
loading: false,
};
},
mounted(){
},
methods: {
get_table() {
this.loading = true;
}
}
}
</script>
<style scoped>
.table{
width: 100%;
height: 100%;
}
.table_container{
margin-top: 20px;
}
/deep/ .el-dialog__header{
text-align: left;
}
</style>
\ No newline at end of file
src/views/secure-archi-view-manage/canvas/index.vue 0 → 100644
<template>
<div class="canvas">
<!-- <Drawio :initGraphId="routerId"></Drawio> -->
</div>
</template>
<script>
import Drawio from '@/components/drawio.vue';
import { MessageBox, Message } from 'element-ui';
import {
} from '@/api/index.js';
export default {
name: 'Canvas',
components: {
Drawio
},
data() {
return {
routerId: null
};
},
mounted(){
},
methods: {
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.canvas{
width: 100%;
height: 100%;
}
</style>
src/views/secure-archi-view-manage/details.vue 0 → 100644
<template>
<div class="Details">
<el-tabs type="border-card" @tab-click="tabs_click_func">
<el-tab-pane>
<span slot="label">
<i class="el-icon-picture"></i>
</span>
<YuanMoXingGuanLiCanvas ref="canvasComponent"></YuanMoXingGuanLiCanvas>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-s-grid"></i>
</span>
<YuanMoXingGuanLiTable ref="tableComponent"></YuanMoXingGuanLiTable>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import YuanMoXingGuanLiCanvas from './canvas/index.vue';
import YuanMoXingGuanLiTable from './table/index.vue';
export default {
name: 'Details',
components: {
YuanMoXingGuanLiCanvas,
YuanMoXingGuanLiTable
},
data() {
return {
};
},
mounted(){
},
methods: {
tabs_click_func(data) {
if(data.index == '0') {
console.log('画布页面')
}else{
console.log('表格页面')
this.$refs.tableComponent.get_table();
}
}
}
}
</script>
<style scoped>
.Details{
width: 100%;
height: 100%;
position: relative;
}
/deep/ .el-tabs__nav{
float: right;
}
.el-tabs{
height: 100%;
}
/deep/ .el-tabs__content{
height: calc(100% - 38px);
padding: 0;
}
.el-tab-pane{
height: 100%;
}
</style>
\ No newline at end of file
src/views/secure-archi-view-manage/index.vue 0 → 100644
<template>
<div class="secureArchiViewManage">
<el-tabs v-model="activeId">
<el-tab-pane
v-for="item in tabData"
:key="item.viewTypeId"
:label="item.viewTypeName"
:name="item.viewTypeId">
用户管理
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import {
get_YeWu_YingYong_ShuJu_JiShu_AnQuan_ViewManage
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import GraphGallery from '@/components/graphGallery.vue';
export default {
name: 'SecureArchiViewManage',
components: {
GraphGallery
},
data() {
return {
activeId: null,
tabData: []
};
},
mounted(){
this.getData();
},
methods: {
getData() {
const params = {
"parentId": 5
}
get_YeWu_YingYong_ShuJu_JiShu_AnQuan_ViewManage(params).then(res => {
if(res.code == 200) {
res.data.map(item => {
item.viewTypeId = ''+item.viewTypeId;
})
this.activeId = res.data[0].viewTypeId;
this.tabData = res.data;
}
})
}
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
/deep/ .el-tabs__item:hover {
color: #0D867F;
}
/deep/ .el-tabs__active-bar{
background-color: #0D867F;
}
/deep/ .el-tabs__item.is-active{
color: #0D867F;
}
/deep/ .el-form-item__content{
width: 80%;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.secureArchiViewManage{
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/secure-archi-view-manage/table/index.vue 0 → 100644
<template>
<div class="table">
<div class="table_container">
<el-table v-loading="loading" :data="tableData" stripe border height="500">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="sourceId" label="元素id" align="center"></el-table-column>
<el-table-column prop="source" label="元素名称" align="center"></el-table-column>
<el-table-column prop="target" label="关联关系名称" align="center"></el-table-column>
<el-table-column prop="targetId" label="关联元素id" align="center"></el-table-column>
<el-table-column prop="linkName" label="关联元素名称" align="center"></el-table-column>
<el-table-column prop="linkNameDesc" label="关联关系描述" align="center"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {
,
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'Table',
components: {
},
data() {
return {
tableData: [],
loading: false,
};
},
mounted(){
},
methods: {
get_table() {
this.loading = true;
}
}
}
</script>
<style scoped>
.table{
width: 100%;
height: 100%;
}
.table_container{
margin-top: 20px;
}
/deep/ .el-dialog__header{
text-align: left;
}
</style>
\ No newline at end of file
src/views/tech-archi-view-manage/canvas/index.vue 0 → 100644
<template>
<div class="canvas">
<!-- <Drawio :initGraphId="routerId"></Drawio> -->
</div>
</template>
<script>
import Drawio from '@/components/drawio.vue';
import { MessageBox, Message } from 'element-ui';
import {
} from '@/api/index.js';
export default {
name: 'Canvas',
components: {
Drawio
},
data() {
return {
routerId: null
};
},
mounted(){
},
methods: {
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.canvas{
width: 100%;
height: 100%;
}
</style>
src/views/tech-archi-view-manage/details.vue 0 → 100644
<template>
<div class="Details">
<el-tabs type="border-card" @tab-click="tabs_click_func">
<el-tab-pane>
<span slot="label">
<i class="el-icon-picture"></i>
</span>
<YuanMoXingGuanLiCanvas ref="canvasComponent"></YuanMoXingGuanLiCanvas>
</el-tab-pane>
<el-tab-pane>
<span slot="label">
<i class="el-icon-s-grid"></i>
</span>
<YuanMoXingGuanLiTable ref="tableComponent"></YuanMoXingGuanLiTable>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import YuanMoXingGuanLiCanvas from './canvas/index.vue';
import YuanMoXingGuanLiTable from './table/index.vue';
export default {
name: 'Details',
components: {
YuanMoXingGuanLiCanvas,
YuanMoXingGuanLiTable
},
data() {
return {
};
},
mounted(){
},
methods: {
tabs_click_func(data) {
if(data.index == '0') {
console.log('画布页面')
}else{
console.log('表格页面')
this.$refs.tableComponent.get_table();
}
}
}
}
</script>
<style scoped>
.Details{
width: 100%;
height: 100%;
position: relative;
}
/deep/ .el-tabs__nav{
float: right;
}
.el-tabs{
height: 100%;
}
/deep/ .el-tabs__content{
height: calc(100% - 38px);
padding: 0;
}
.el-tab-pane{
height: 100%;
}
</style>
\ No newline at end of file
src/views/tech-archi-view-manage/index.vue 0 → 100644
<template>
<div class="techArchiViewManage">
<el-tabs v-model="activeId">
<el-tab-pane
v-for="item in tabData"
:key="item.viewTypeId"
:label="item.viewTypeName"
:name="item.viewTypeId">
用户管理
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import {
get_YeWu_YingYong_ShuJu_JiShu_AnQuan_ViewManage
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import GraphGallery from '@/components/graphGallery.vue';
export default {
name: 'TechArchiViewManage',
components: {
GraphGallery
},
data() {
return {
activeId: null,
tabData: []
};
},
mounted(){
this.getData();
},
methods: {
getData() {
const params = {
"parentId": 4
}
get_YeWu_YingYong_ShuJu_JiShu_AnQuan_ViewManage(params).then(res => {
if(res.code == 200) {
res.data.map(item => {
item.viewTypeId = ''+item.viewTypeId;
})
this.activeId = res.data[0].viewTypeId;
this.tabData = res.data;
}
})
}
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
/deep/ .el-tabs__item:hover {
color: #0D867F;
}
/deep/ .el-tabs__active-bar{
background-color: #0D867F;
}
/deep/ .el-tabs__item.is-active{
color: #0D867F;
}
/deep/ .el-form-item__content{
width: 80%;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.techArchiViewManage{
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/tech-archi-view-manage/table/index.vue 0 → 100644
<template>
<div class="table">
<div class="table_container">
<el-table v-loading="loading" :data="tableData" stripe border height="500">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="sourceId" label="元素id" align="center"></el-table-column>
<el-table-column prop="source" label="元素名称" align="center"></el-table-column>
<el-table-column prop="target" label="关联关系名称" align="center"></el-table-column>
<el-table-column prop="targetId" label="关联元素id" align="center"></el-table-column>
<el-table-column prop="linkName" label="关联元素名称" align="center"></el-table-column>
<el-table-column prop="linkNameDesc" label="关联关系描述" align="center"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {
,
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'Table',
components: {
},
data() {
return {
tableData: [],
loading: false,
};
},
mounted(){
},
methods: {
get_table() {
this.loading = true;
}
}
}
</script>
<style scoped>
.table{
width: 100%;
height: 100%;
}
.table_container{
margin-top: 20px;
}
/deep/ .el-dialog__header{
text-align: left;
}
</style>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!