Skip to content

liangzhen / framework-tools-web

Go to a project
Commit ac3f7c70 by liangzhen
Options

角色权限管理

1 parent ded8f87a
Expand all
Inline Side-by-side
Showing with 40 additions and 1476 deletions
src/api/system.js
......@@ -57,4 +57,40 @@ export function userGetId(params) {
return post(ARCH_MANAGE +'/user/get', params)
}
//角色管理
\ No newline at end of file
//角色管理
export function getFunctionList(params) {
return post(`${ARCH_MANAGE}/menu/list`, params, head) // head
}
//角色管理列表查询
export function rolePage(params) {
return post(`${ARCH_MANAGE}/role/page`, params)
}
//添加角色管理
export function roleAdd(params) {
return post(`${ARCH_MANAGE}/role/add`, params)
}
//修改角色管理
export function roleUpdate(params) {
return post(`${ARCH_MANAGE}/role/update`, params)
}
//根据id获取角色信息
export function roleGetById(params) {
return post(`${ARCH_MANAGE}/role/getById`, params, true)
}
//单条删除角色
export function roleDelete(params) {
return post(`${ARCH_MANAGE}/role/delete`, params, true)
}
//批量删除角色
export function roleBatchDelete(params) {
return post(`${ARCH_MANAGE}/role/batchDelete`, params)
}
//禁用或启用角色
export function roleEnableOrUnEnable(params) {
return post(`${ARCH_MANAGE}/role/enableOrUnEnable/`, params)
}
src/router/index.js
......@@ -229,30 +229,6 @@ export const routes = [
},
},
{
path: "/main/archiEvoluteLine", //架构演进路线资产管理
name: "archiEvoluteLine",
component: () => import("@/views/archi-evolute-line/index.vue"),
meta: {
title: "架构演进路线资产管理",
},
},
{
path: "/main/archiIntelligenceSearch", //总体架构资产智能搜索
name: "archiIntelligenceSearch",
component: () => import("@/views/archi-intelligence-search/index.vue"),
meta: {
title: "总体架构资产智能搜索",
},
},
{
path: "/main/archiAssetVisualShow", //总体架构资产可视化展示
name: "archiAssetVisualShow",
component: () => import("@/views/archiAssetVisualShow/index.vue"),
meta: {
title: "总体架构资产可视化展示",
},
},
{
path: "/main/systemInfoManage", //系统信息维护
name: "systemInfoManage",
component: () => import("@/views/systemInfoManage/index.vue"),
......
src/views/Main/menu.js
......@@ -179,7 +179,7 @@ export const menuOptions = [
//新建的
{
name: '系统功能',
width: '1000',
width: '700',
children: [
{
name: '用户与组织管理',
......@@ -195,7 +195,7 @@ export const menuOptions = [
],
},
{
name: '角色管理',
name: '角色权限管理',
children: [
{
name: '角色权限管理',
......
src/views/archi-intelligence-search/index.vue deleted 100644 → 0
<template>
<div class="archiIntelligenceSearch">
<div class="left_container">
<div class="search_menu_item" style="margin-top: 15px">
<span class="search_title">架构内容:</span>
<!-- <el-input v-no-backslash v-model="query_item1" placeholder="请输入" style="width: 300px;" maxlength="100"></el-input> -->
<el-input
placeholder="请输入内容"
v-no-backslash
v-model="query_item1"
clearable
style="width: 300px"
>
<template slot="append">
<div
style="
cursor: pointer;
width: 50px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
"
@click="select1"
>
<i class="el-icon-search"></i>
</div>
</template>
</el-input>
</div>
<div class="search_menu_item">
<span class="search_title">架构版本:</span>
<el-select
v-model="query_item2"
clearable
placeholder="请选择"
style="width: 300px"
@change="select2"
>
<el-option
v-for="item in archiList"
:key="item.versionId"
:label="item.versionName"
:value="item.versionId"
></el-option>
</el-select>
</div>
<el-tree
class="filter-tree"
:data="treeData"
:highlight-current="true"
:props="{ children: 'children', label: 'assetName', assetId: 'id' }"
default-expand-all
show-checkbox
node-key="id"
:check-strictly="true"
@check="treeCheckChange"
ref="tree"
>
</el-tree>
</div>
<div class="right_container">
<div id="echartsContainer" style="width: 100%; height: 100%"></div>
</div>
</div>
</template>
<script>
import {
archiIntelligenceSearchTree,
archiIntelligenceSearchVersionList,
} from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
import $ from 'jquery'
export default {
name: 'ArchiIntelligenceSearch',
data() {
return {
treeData: [],
myChart: null,
query_item1: null,
query_item2: null,
archiList: [],
}
},
mounted() {
this.getTreeData()
this.getVisionList()
},
methods: {
select1() {
this.getTreeData()
},
select2(data) {
if (this.myChart) {
this.myChart.dispose()
}
this.getTreeData()
},
echarts1(seriesData, linkData) {
this.myChart = this.$echarts.init(
document.getElementById('echartsContainer'),
)
var option = {
tooltip: {
formatter: function (x) {
return x.data.name
},
},
series: [
{
type: 'graph',
layout: 'force',
roam: true,
symbolSize: [120, 60],
label: {
normal: {
show: true,
width: 80,
overflow: 'truncate',
textStyle: {
fontSize: 12,
},
},
},
lineStyle: {
normal: {
opacity: 0.9,
width: 5,
curveness: 0,
},
},
force: {
// repulsion: 500,
repulsion: 1000, //节点之间的斥力因子。
edgeLength: 100, //边的两个节点之间的距离，这个距离也会受 repulsion。
},
// edgeSymbol: ['circle', 'arrow'],
data: seriesData,
links: linkData,
},
],
}
this.myChart.setOption(option)
},
getVisionList() {
//查询架构版本
archiIntelligenceSearchVersionList({}).then((res) => {
if (res.code == 200) {
this.archiList = res.data
}
})
},
getTreeData() {
//查询左侧树
const params = {
assetName: this.query_item1,
versionId: this.query_item2,
}
archiIntelligenceSearchTree(params).then((res) => {
if (res.code == 200) {
this.treeData = res.data
}
})
},
treeCheckChange(data, tree) {
//左侧树勾选
let seriesData = [],
linkData = []
if (tree.checkedNodes.length > 0) {
tree.checkedNodes.forEach((item) => {
if (!item.targetList) {
return
}
seriesData.push({
name: item.assetName,
id: item.assetCode,
symbol: item.icon,
draggable: true,
itemStyle: {
normal: {
color: item.color,
},
},
})
if (item.targetList.length > 0) {
item.targetList.forEach((item2) => {
seriesData.push({
name: item2.assetName,
id: item2.assetCode,
symbol: item.icon,
draggable: true,
itemStyle: {
normal: {
color: item2.color,
},
},
})
linkData.push({
source: item.assetCode,
target: item2.assetCode,
})
})
}
})
var new_arr2 = []
for (var i = 0; i < seriesData.length; i++) {
var flag = true
for (var j = 0; j < new_arr2.length; j++) {
if (new_arr2[j].id == seriesData[i].id) {
flag = false
}
}
if (flag) {
new_arr2.push(seriesData[i])
}
}
seriesData = new_arr2
this.echarts1(seriesData, linkData)
} else {
this.myChart.dispose()
}
},
},
}
</script>
<style></style>
<style scoped>
.filter-tree {
width: 300px;
height: calc(100% - 120px);
overflow-y: auto;
display: inline-block;
}
/deep/ .is-leaf {
background-color: #fff !important;
}
.search_menu_item {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.search_title {
font-size: 14px;
color: #606291;
flex-shrink: 0;
margin-right: 10px;
}
.archiIntelligenceSearch {
width: 100%;
height: 100%;
display: flex;
}
.left_container {
width: 25%;
margin-right: 20px;
height: 100%;
border: 1px solid #ccc;
text-align: center;
}
.right_container {
width: 75%;
height: 100%;
pornhub: hidden;
}
/deep/ .el-input-group__append {
padding: 0;
}
</style>
src/views/archiAssetVisualShow/index(旧).vue deleted 100644 → 0
<template>
<template>
<div class="archiAssetVisualShow">
<el-tree
class="filter-tree"
:data="treeData"
:highlight-current="true"
:props="{ children: 'children', label: 'name', id: 'id' }"
default-expand-all
node-key="assetId"
@node-click="treeClick"
ref="tree"
>
</el-tree>
<div class="right_container">
<div id="echartsContainer" style="width: 800px; height: 500px"></div>
</div>
</div>
</template>
<script>
import { archiAssetShowTree } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
import $ from 'jquery'
export default {
name: 'ArchiAssetVisualShow',
components: {},
data() {
return {
treeData: [
{ id: 'BUSI', name: '业务架构', children: [] },
{ id: 'APP', name: '应用架构', children: [] },
{ id: 'DATA', name: '数据架构', children: [] },
{ id: 'TECH', name: '技术架构', children: [] },
{ id: 'SAFE', name: '安全架构', children: [] },
],
myChart: null,
}
},
mounted() {
this.getTreeData('BUSI')
this.echarts1()
},
methods: {
echarts1(seriesData, linkData) {
this.myChart = this.$echarts.init(
document.getElementById('echartsContainer'),
)
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
this.myChart.setOption(option)
},
getTreeData(type) {
//查询左侧树
const params = {
assetEnum: type,
}
archiAssetShowTree(params).then((res) => {
if (res.code == 200) {
this.treeData.forEach((item) => {
if (item.id == type) {
item.children = res.data
}
})
}
})
},
treeClick(data, node, e) {
//树点击的时候
// console.log(data.assetId);
const type = ['BUSI', 'APP', 'DATA', 'TECH', 'SAFE']
if (type.includes(data.id)) {
this.getTreeData(data.id)
}
},
},
}
</script>
<style scoped>
.archiAssetVisualShow {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.filter-tree {
width: 300px;
height: 100%;
overflow-y: auto;
border-right: 1px solid #ccc;
}
.right_container {
width: calc(100% - 300px);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/deep/ .is-leaf {
background-color: #fff !important;
}
</style>
src/views/archiAssetVisualShow/index.vue deleted 100644 → 0
<template>
<div class="archiAssetVisualShow">
<el-tabs @tab-click="tabsClick">
<el-tab-pane label="业务架构">
<Tab1 ref="tab1ComP"></Tab1>
</el-tab-pane>
<el-tab-pane label="应用架构">
<Tab2 ref="tab2ComP"></Tab2>
</el-tab-pane>
<el-tab-pane label="数据架构">
<Tab3 ref="tab3ComP"></Tab3>
</el-tab-pane>
<el-tab-pane label="技术架构">
<Tab4 ref="tab4ComP"></Tab4>
</el-tab-pane>
<el-tab-pane label="安全架构">
<Tab5 ref="tab5ComP"></Tab5>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Tab1 from './tab1.vue';
import Tab2 from './tab2.vue';
import Tab3 from './tab3.vue';
import Tab4 from './tab4.vue';
import Tab5 from './tab5.vue';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import {
saveArchiViewManageCardDetails
} from '@/api/index.js';
export default {
name: 'archiAssetVisualShow',
components: {
Tab1,
Tab2,
Tab3,
Tab4,
Tab5,
},
data() {
return {
routerId: null,
};
},
mounted(){
this.$refs.tab1ComP.main();
},
methods: {
tabsClick(data) {
switch(data.label){
case '业务架构':
this.$refs.tab1ComP.main();
break;
case '应用架构':
this.$refs.tab2ComP.main();
break;
case '数据架构':
this.$refs.tab3ComP.main();
break;
case '技术架构':
this.$refs.tab4ComP.main();
break;
case '安全架构':
this.$refs.tab5ComP.main();
break;
}
}
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.el-tabs{
width: 100%;
height: 100%;
}
/deep/ .el-tabs__item.is-active {
color: #0D867F;
}
/deep/ .el-tabs__item:hover{
color: #0D867F;
}
/deep/ .el-tabs__active-bar{
background-color: #0D867F;
}
/deep/ .el-tabs__content{
height: calc(100% - 38px);
padding: 0;
}
.el-tab-pane{
height: 100%;
}
.archiAssetVisualShow{
width: 100%;
height: 100%;
display: flex;
position: relative;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
</style>
src/views/archiAssetVisualShow/tab1.vue deleted 100644 → 0
<template>
<div class="tab1">
<div class="containerLeft">
<p style="text-align: left; margin-left: 20px">业务域</p>
<el-divider></el-divider>
<div class="buttonContainer">
<span v-for="item in leftData" :key="item.assetId">
<el-button style="margin: 10px 20px" @click="showCurrent(item)">{{
item.assetName
}}</el-button>
</span>
</div>
</div>
<div class="containerCenter">
<el-collapse
accordion
v-for="item in centerData"
:key="item.assetId"
style="margin-bottom: 20px"
>
<el-collapse-item>
<template slot="title">
<div
style="
width: 100%;
display: flex;
align-items: center;
padding-left: 20px;
"
>
<el-button size="medium">{{ item.assetName }}</el-button>
<p
style="
width: 76%;
margin-left: 20px;
border-top: 1px dotted #000;
"
></p>
</div>
</template>
<span v-for="item2 in item.children" :key="item2.assetId">
<el-button style="margin: 10px 20px">{{
item2.assetName
}}</el-button>
</span>
</el-collapse-item>
</el-collapse>
</div>
<div class="containerRight">
<div id="echartsContainer" style="width: 800px; height: 500px"></div>
</div>
</div>
</template>
<script>
import { archiAssetShowTree, queryArchiBelongId } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
export default {
name: 'tab1',
components: {},
data() {
return {
leftData: [],
centerData: [],
}
},
mounted() {
},
methods: {
main() {
this.getArchiBelongId().then(res => {
const current = res.find(item => item.label == '业务架构');
this.getLeftData(current.value);
this.echarts1();
})
},
getArchiBelongId() {
const params = {
"typeValue": "archi_belong"
}
return new Promise((resolve, reject) => {
queryArchiBelongId(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
} else {
Message({
type: 'error',
message: res.msg,
})
reject(res.msg)
}
})
})
},
showCurrent(data) {
this.centerData = data.children
},
getLeftData(data) {
const params = {
"archiBelongId": data
}
archiAssetShowTree(params).then((res) => {
if (res.code == 200) {
this.leftData = res.data
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
},
echarts1() {
this.myChart = this.$echarts.init(
document.getElementById('echartsContainer'),
)
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
this.myChart.setOption(option)
},
},
}
</script>
<style>
.el-tabs__nav {
margin-left: 20px;
}
</style>
<style scoped>
.tab1 {
height: calc(100% - 20px);
display: flex;
}
.buttonContainer {
height: calc(100% - 90px);
overflow-y: auto;
text-align: left;
}
/deep/ .el-collapse-item__content {
text-align: left;
}
.containerLeft {
width: 20%;
height: 100%;
border-right: 2px solid #ccc;
}
.containerCenter {
width: 35%;
height: 100%;
border-right: 2px solid #ccc;
overflow-y: auto;
}
.containerRight {
width: 45%;
height: 100%;
}
.el-button--primary {
background: rgba(13, 134, 127, 1);
color: #fff;
border: 0;
}
</style>
src/views/archiAssetVisualShow/tab2.vue deleted 100644 → 0
<template>
<div class="tab2">
<div class="containerLeft">
<p style="text-align: left; margin-left: 20px">业务域</p>
<el-divider></el-divider>
<div class="buttonContainer">
<span v-for="item in leftData" :key="item.assetId">
<el-button style="margin: 10px 20px" @click="showCurrent(item)">{{
item.assetName
}}</el-button>
</span>
</div>
</div>
<div class="containerCenter">
<el-collapse
accordion
v-for="item in centerData"
:key="item.assetId"
style="margin-bottom: 20px"
>
<el-collapse-item>
<template slot="title">
<div
style="
width: 100%;
display: flex;
align-items: center;
padding-left: 20px;
"
>
<el-button size="medium">{{ item.assetName }}</el-button>
<p
style="
width: 76%;
margin-left: 20px;
border-top: 1px dotted #000;
"
></p>
</div>
</template>
<span v-for="item2 in item.children" :key="item2.assetId">
<el-button style="margin: 10px 20px">{{
item2.assetName
}}</el-button>
</span>
</el-collapse-item>
</el-collapse>
</div>
<div class="containerRight">
<div id="echartsContainer2" style="width: 800px; height: 500px"></div>
</div>
</div>
</template>
<script>
import { archiAssetShowTree, queryArchiBelongId } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
export default {
name: 'tab2',
components: {},
data() {
return {
leftData: [],
centerData: [],
}
},
mounted() {
},
methods: {
main() {
this.getArchiBelongId().then(res => {
const current = res.find(item => item.label == '应用架构');
this.getLeftData(current.value);
this.echarts1();
})
},
getArchiBelongId() {
const params = {
"typeValue": "archi_belong"
}
return new Promise((resolve, reject) => {
queryArchiBelongId(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
} else {
Message({
type: 'error',
message: res.msg,
})
reject(res.msg)
}
})
})
},
showCurrent(data) {
this.centerData = data.children
},
getLeftData(data) {
const params = {
"archiBelongId": data
}
archiAssetShowTree(params).then((res) => {
if (res.code == 200) {
this.leftData = res.data
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
},
echarts1() {
this.myChart = this.$echarts.init(
document.getElementById('echartsContainer2'),
)
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
this.myChart.setOption(option)
},
},
}
</script>
<style>
.el-tabs__nav {
margin-left: 20px;
}
</style>
<style scoped>
.tab2 {
height: calc(100% - 20px);
display: flex;
}
/deep/ .el-collapse-item__content {
text-align: left;
}
.buttonContainer {
height: calc(100% - 90px);
overflow-y: auto;
text-align: left;
}
.containerLeft {
width: 20%;
height: 100%;
border-right: 2px solid #ccc;
}
.containerCenter {
width: 35%;
height: 100%;
border-right: 2px solid #ccc;
overflow-y: auto;
}
.containerRight {
width: 45%;
height: 100%;
}
.el-button--primary {
background: rgba(13, 134, 127, 1);
color: #fff;
border: 0;
}
</style>
src/views/archiAssetVisualShow/tab3.vue deleted 100644 → 0
<template>
<div class="tab3">
<div class="containerLeft">
<p style="text-align: left; margin-left: 20px">业务域</p>
<el-divider></el-divider>
<div class="buttonContainer">
<span v-for="item in leftData" :key="item.assetId">
<el-button style="margin: 10px 20px" @click="showCurrent(item)">{{
item.assetName
}}</el-button>
</span>
</div>
</div>
<div class="containerCenter">
<el-collapse
accordion
v-for="item in centerData"
:key="item.assetId"
style="margin-bottom: 20px"
>
<el-collapse-item>
<template slot="title">
<div
style="
width: 100%;
display: flex;
align-items: center;
padding-left: 20px;
"
>
<el-button size="medium">{{ item.assetName }}</el-button>
<p
style="
width: 76%;
margin-left: 20px;
border-top: 1px dotted #000;
"
></p>
</div>
</template>
<span v-for="item2 in item.children" :key="item2.assetId">
<el-button style="margin: 10px 20px">{{
item2.assetName
}}</el-button>
</span>
</el-collapse-item>
</el-collapse>
</div>
<div class="containerRight">
<div id="echartsContainer3" style="width: 800px; height: 500px"></div>
</div>
</div>
</template>
<script>
import { archiAssetShowTree, queryArchiBelongId } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
export default {
name: 'tab3',
components: {},
data() {
return {
leftData: [],
centerData: [],
}
},
mounted() {
},
methods: {
main() {
this.getArchiBelongId().then(res => {
const current = res.find(item => item.label == '数据架构');
this.getLeftData(current.value);
this.echarts1();
})
},
getArchiBelongId() {
const params = {
"typeValue": "archi_belong"
}
return new Promise((resolve, reject) => {
queryArchiBelongId(params).then((res) => {
if (res.code == 200) {
console.log(res.data);
resolve(res.data)
} else {
Message({
type: 'error',
message: res.msg,
})
reject(res.msg)
}
})
})
},
showCurrent(data) {
this.centerData = data.children
},
getLeftData(data) {
const params = {
"archiBelongId": data
}
archiAssetShowTree(params).then((res) => {
if (res.code == 200) {
this.leftData = res.data
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
},
echarts1() {
this.myChart = this.$echarts.init(
document.getElementById('echartsContainer3'),
)
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
this.myChart.setOption(option)
},
},
}
</script>
<style>
.el-tabs__nav {
margin-left: 20px;
}
</style>
<style scoped>
.tab3 {
height: calc(100% - 20px);
display: flex;
}
/deep/ .el-collapse-item__content {
text-align: left;
}
.buttonContainer {
height: calc(100% - 90px);
overflow-y: auto;
text-align: left;
}
.containerLeft {
width: 20%;
height: 100%;
border-right: 2px solid #ccc;
}
.containerCenter {
width: 35%;
height: 100%;
border-right: 2px solid #ccc;
overflow-y: auto;
}
.containerRight {
width: 45%;
height: 100%;
}
.el-button--primary {
background: rgba(13, 134, 127, 1);
color: #fff;
border: 0;
}
</style>
src/views/archiAssetVisualShow/tab4.vue deleted 100644 → 0
<template>
<div class="tab4">
<div class="containerLeft">
<p style="text-align: left; margin-left: 20px">业务域</p>
<el-divider></el-divider>
<div class="buttonContainer">
<span v-for="item in leftData" :key="item.assetId">
<el-button style="margin: 10px 20px" @click="showCurrent(item)">{{
item.assetName
}}</el-button>
</span>
</div>
</div>
<div class="containerCenter">
<el-collapse
accordion
v-for="item in centerData"
:key="item.assetId"
style="margin-bottom: 20px"
>
<el-collapse-item>
<template slot="title">
<div
style="
width: 100%;
display: flex;
align-items: center;
padding-left: 20px;
"
>
<el-button size="medium">{{ item.assetName }}</el-button>
<p
style="
width: 76%;
margin-left: 20px;
border-top: 1px dotted #000;
"
></p>
</div>
</template>
<span v-for="item2 in item.children" :key="item2.assetId">
<el-button style="margin: 10px 20px">{{
item2.assetName
}}</el-button>
</span>
</el-collapse-item>
</el-collapse>
</div>
<div class="containerRight">
<div id="echartsContainer4" style="width: 800px; height: 500px"></div>
</div>
</div>
</template>
<script>
import { archiAssetShowTree, queryArchiBelongId } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
export default {
name: 'tab4',
components: {},
data() {
return {
leftData: [],
centerData: [],
}
},
mounted() {
},
methods: {
main() {
this.getArchiBelongId().then(res => {
const current = res.find(item => item.label == '技术架构');
this.getLeftData(current.value);
this.echarts1();
})
},
getArchiBelongId() {
const params = {
"typeValue": "archi_belong"
}
return new Promise((resolve, reject) => {
queryArchiBelongId(params).then((res) => {
if (res.code == 200) {
console.log(res.data);
resolve(res.data)
} else {
Message({
type: 'error',
message: res.msg,
})
reject(res.msg)
}
})
})
},
showCurrent(data) {
this.centerData = data.children
},
getLeftData(data) {
const params = {
"archiBelongId": data
}
archiAssetShowTree(params).then((res) => {
if (res.code == 200) {
this.leftData = res.data
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
},
echarts1() {
this.myChart = this.$echarts.init(
document.getElementById('echartsContainer4'),
)
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
this.myChart.setOption(option)
},
},
}
</script>
<style>
.el-tabs__nav {
margin-left: 20px;
}
</style>
<style scoped>
.tab4 {
height: calc(100% - 20px);
display: flex;
}
/deep/ .el-collapse-item__content {
text-align: left;
}
.buttonContainer {
height: calc(100% - 90px);
overflow-y: auto;
text-align: left;
}
.containerLeft {
width: 20%;
height: 100%;
border-right: 2px solid #ccc;
}
.containerCenter {
width: 35%;
height: 100%;
border-right: 2px solid #ccc;
overflow-y: auto;
}
.containerRight {
width: 45%;
height: 100%;
}
.el-button--primary {
background: rgba(13, 134, 127, 1);
color: #fff;
border: 0;
}
</style>
src/views/archiAssetVisualShow/tab5.vue deleted 100644 → 0
<template>
<div class="tab5">
<div class="containerLeft">
<p style="text-align: left; margin-left: 20px">业务域</p>
<el-divider></el-divider>
<div class="buttonContainer">
<span v-for="item in leftData" :key="item.assetId">
<el-button style="margin: 10px 20px" @click="showCurrent(item)">{{
item.assetName
}}</el-button>
</span>
</div>
</div>
<div class="containerCenter">
<el-collapse
accordion
v-for="item in centerData"
:key="item.assetId"
style="margin-bottom: 20px"
>
<el-collapse-item>
<template slot="title">
<div
style="
width: 100%;
display: flex;
align-items: center;
padding-left: 20px;
"
>
<el-button size="medium">{{ item.assetName }}</el-button>
<p
style="
width: 76%;
margin-left: 20px;
border-top: 1px dotted #000;
"
></p>
</div>
</template>
<span v-for="item2 in item.children" :key="item2.assetId">
<el-button style="margin: 10px 20px">{{
item2.assetName
}}</el-button>
</span>
</el-collapse-item>
</el-collapse>
</div>
<div class="containerRight">
<div id="echartsContainer5" style="width: 800px; height: 500px"></div>
</div>
</div>
</template>
<script>
import { archiAssetShowTree, queryArchiBelongId } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
export default {
name: 'tab5',
components: {},
data() {
return {
leftData: [],
centerData: [],
}
},
mounted() {
},
methods: {
main() {
this.getArchiBelongId().then(res => {
const current = res.find(item => item.label == '安全架构');
this.getLeftData(current.value);
this.echarts1();
})
},
getArchiBelongId() {
const params = {
"typeValue": "archi_belong"
}
return new Promise((resolve, reject) => {
queryArchiBelongId(params).then((res) => {
if (res.code == 200) {
console.log(res.data);
resolve(res.data)
} else {
Message({
type: 'error',
message: res.msg,
})
reject(res.msg)
}
})
})
},
showCurrent(data) {
this.centerData = data.children
},
getLeftData(data) {
const params = {
"archiBelongId": data
}
archiAssetShowTree(params).then((res) => {
if (res.code == 200) {
this.leftData = res.data
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
},
echarts1() {
this.myChart = this.$echarts.init(
document.getElementById('echartsContainer5'),
)
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
this.myChart.setOption(option)
},
},
}
</script>
<style>
.el-tabs__nav {
margin-left: 20px;
}
</style>
<style scoped>
.tab5 {
height: calc(100% - 20px);
display: flex;
}
.buttonContainer {
height: calc(100% - 90px);
overflow-y: auto;
text-align: left;
}
/deep/ .el-collapse-item__content {
text-align: left;
}
.containerLeft {
width: 20%;
height: 100%;
border-right: 2px solid #ccc;
}
.containerCenter {
width: 35%;
height: 100%;
border-right: 2px solid #ccc;
overflow-y: auto;
}
.containerRight {
width: 45%;
height: 100%;
}
.el-button--primary {
background: rgba(13, 134, 127, 1);
color: #fff;
border: 0;
}
</style>
src/views/system/roleAdmin/index.vue
......@@ -168,7 +168,7 @@
roleGetById,
roleUpdate,
addLog
} from "@/api/index.js";
} from "@/api/system.js";
export default {
mixins: [mixins],
components: {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!