Skip to content

liangzhen / framework-tools-web

Go to a project
Commit ac3f7c70 by liangzhen
Options

角色权限管理

1 parent ded8f87a
Inline Side-by-side
Showing with 40 additions and 2656 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-evolute-line/index.vue deleted 100644 → 0
<template>
<div class="archiEvoluteLine">
<div class="table_container">
<div class="search_menu">
<div class="search_menu_item_container">
<div class="search_menu_item">
<span class="search_title">演进项</span>
<el-select
v-model="searchParams.evolutionItem"
placeholder="请选择"
class="search_item"
>
<el-option
v-for="item in yanJingXiang"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="search_table">
<img
class="btn_icon"
src="@/assets/archi-ele-list/search.png"
alt=""
/>
<p>查询</p>
</div>
<div class="reset_btn" @click="reset">
<img
class="btn_icon"
src="@/assets/archi-ele-list/reset.png"
alt=""
/>
<p>重置</p>
</div>
</div>
</div>
<div class="search_btn">
<el-button
type="primary"
size="medium"
icon="el-icon-document-add"
@click="addItem"
>新建</el-button
>
<el-button
type="primary"
size="medium"
icon="el-icon-delete"
@click="deleteMore"
>删除</el-button
>
<!-- <div class="version_btn" @click="releaseMore">
<img class="btn_icon" src="@/assets/archi-ele-list/version.png" alt="" />
<p>发布</p>
</div>
<div class="cancel_version_btn" @click="cancelReleaseMore">
<img class="btn_icon" src="@/assets/archi-ele-list/version.png" alt="" />
<p>取消发布</p>
</div> -->
</div>
<el-tabs v-model="activeTabs" @tab-click="handleClick">
<el-tab-pane label="演进策略" name="演进策略">
<el-table
:height="tableHeight"
@selection-change="select_table_rows1"
v-loading="loading1"
:data="tableData1"
stripe
border
>
<el-table-column
type="selection"
width="55"
:selectable="selectable"
></el-table-column>
<el-table-column
type="index"
:index="indexMethod"
label="序号"
width="80"
align="center"
></el-table-column>
<el-table-column
prop="evolutionItem_"
label="演进项"
align="center"
></el-table-column>
<el-table-column
prop="nowArchi"
label="现状架构"
align="center"
></el-table-column>
<el-table-column
prop="targetArchi"
label="目标架构"
align="center"
></el-table-column>
<el-table-column
prop="evolutionContent"
label="演进策略"
align="center"
></el-table-column>
<el-table-column label="发布状态" align="center">
<template slot-scope="scope">
<div v-if="scope.row.state == 0">已停用</div>
<div v-else-if="scope.row.state == 1">已发布</div>
<div v-else>暂存</div>
</template>
</el-table-column>
<el-table-column label="操作" width="320" align="center">
<template slot-scope="scope">
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<el-button
icon="el-icon-edit"
type="primary"
size="mini"
@click="editItem(scope.row)"
:disabled="scope.row.state == 1"
>编辑</el-button
>
<el-button
icon="el-icon-upload2"
type="primary"
size="mini"
@click="cancelReleaseItem(scope.row)"
v-if="scope.row.state == 1"
>取消发布</el-button
>
<el-button
icon="el-icon-upload2"
type="primary"
size="mini"
@click="releaseItem(scope.row)"
v-if="scope.row.state != 1"
>发布</el-button
>
<el-button
class="shanChu_btn"
icon="el-icon-delete"
size="mini"
@click="deleteItem(scope.row)"
:disabled="scope.row.state == 1"
>删除</el-button
>
</div>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="演进路线" name="演进路线">
<el-table
:height="tableHeight"
@selection-change="select_table_rows2"
v-loading="loading2"
:data="tableData2"
stripe
border
>
<el-table-column
type="selection"
width="55"
:selectable="selectable"
></el-table-column>
<el-table-column
type="index"
label="序号"
width="80"
align="center"
></el-table-column>
<el-table-column
prop="evolutionItem_"
label="演进项"
align="center"
></el-table-column>
<el-table-column
prop="nowArchi"
label="现状架构"
align="center"
></el-table-column>
<el-table-column
prop="targetArchi"
label="目标架构"
align="center"
></el-table-column>
<el-table-column
prop="evolutionContent"
label="演进路线"
align="center"
></el-table-column>
<el-table-column label="发布状态" align="center">
<template slot-scope="scope">
<div v-if="scope.row.state == 0">已停用</div>
<div v-else-if="scope.row.state == 1">已发布</div>
<div v-else>暂存</div>
</template>
</el-table-column>
<el-table-column label="操作" width="320" align="center">
<template slot-scope="scope">
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<el-button
icon="el-icon-edit"
type="primary"
size="mini"
@click="editItem(scope.row)"
:disabled="scope.row.state == 1"
>编辑</el-button
>
<el-button
icon="el-icon-upload2"
type="primary"
size="mini"
@click="cancelReleaseItem(scope.row)"
v-if="scope.row.state == 1"
>取消发布</el-button
>
<el-button
icon="el-icon-upload2"
type="primary"
size="mini"
@click="releaseItem(scope.row)"
v-if="scope.row.state != 1"
>发布</el-button
>
<el-button
class="shanChu_btn"
icon="el-icon-delete"
size="mini"
@click="deleteItem(scope.row)"
:disabled="scope.row.state == 1"
>删除</el-button
>
</div>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pager.current"
:page-sizes="pager.sizes"
:page-size="pager.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager.total"
>
</el-pagination>
</div>
<el-dialog
:title="is_add_edit == 'add' ? '新建' + activeTabs : '编辑' + activeTabs"
:visible.sync="add_dialog"
:center="false"
:close-on-click-modal="false"
width="60%"
>
<el-form
:model="ruleForm"
:rules="rules"
ref="form"
style="margin-left: 20px"
>
<el-form-item label="演进项:" prop="let1" style="margin-left: 17px">
<el-select clearable placeholder="请选择" v-model="ruleForm.let1">
<el-option
v-for="item in yanJingXiang"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item class="cross1" label="现状架构:" prop="let2">
<el-input
v-no-backslash
type="textarea"
:rows="3"
maxlength="200"
show-word-limit
placeholder="请输入内容"
v-model="ruleForm.let2"
></el-input>
</el-form-item>
<el-form-item class="cross1" label="目标架构:" prop="let3">
<el-input
v-no-backslash
type="textarea"
:rows="3"
maxlength="200"
show-word-limit
placeholder="请输入内容"
v-model="ruleForm.let3"
></el-input>
</el-form-item>
<el-form-item
class="cross1"
:label="activeTabs + ':'"
:rules="[
{ required: true, message: '请输入' + activeTabs, trigger: 'blur' },
]"
prop="let4"
>
<el-input
v-no-backslash
type="textarea"
:rows="3"
maxlength="200"
show-word-limit
placeholder="请输入内容"
v-model="ruleForm.let4"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" v-debounce:click="release_dialog"
>发布</el-button
>
<el-button class="greenButton" v-debounce:click="save_dialog"
>保存</el-button
>
<el-button @click="add_dialog = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
queryEvoluteFunAndLine,
getDianXingAnLiSelectData,
evoluteFunAndLineDeleteReleaseCancel,
evoluteFunAndLineDeleteMore,
evoluteFunAndLineAdd,
} from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
import $ from 'jquery'
export default {
name: 'ArchiEvoluteLine',
components: {},
data() {
return {
ruleForm: {
let1: null,
let2: null,
let3: null,
let4: null,
},
rules: {
let1: [{ required: true, message: '请选择演进项', trigger: 'change' }],
let2: [{ required: true, message: '请输入现状架构', trigger: 'blur' }],
let3: [{ required: true, message: '请输入目标架构', trigger: 'blur' }],
},
add_dialog: false,
activeTabs: '演进策略',
tableData1: [],
tableData2: [],
query_item3: null,
query_item4: null,
loading1: false,
loading2: false,
search_select1: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0, //总条数
},
tableHeight: null,
searchParams: {
evolutionItem: null,
},
yanJingXiang: [],
is_add_edit: 'add',
selectRow1: [],
selectRow2: [],
editId: null,
}
},
mounted() {
window.addEventListener('resize', () => {
this.set_table_height()
})
this.set_table_height()
this.get_table()
this.get_yan_jing_xiang_select().then((res) => {
this.yanJingXiang = res
})
},
methods: {
indexMethod(index) {
return (this.pager.current - 1) * this.pager.size + index + 1
},
selectable(row) {
//表格勾选框禁用
if (row.state == 1 || row.state == 0) {
return false // 禁用
} else {
return true //不禁用
}
},
select_table_rows1(data) {
//表格的勾选
this.selectRow1 = data
},
select_table_rows2(data) {
//表格的勾选
this.selectRow2 = data
},
addItem() {
//新建
this.add_dialog = true
this.is_add_edit = 'add'
this.$nextTick(() => {
this.$refs.form.resetFields()
this.ruleForm.let1 = null
this.ruleForm.let2 = null
this.ruleForm.let3 = null
this.ruleForm.let4 = null
})
},
editItem(row) {
//编辑
this.is_add_edit = 'edit'
this.add_dialog = true
this.editId = row.evolutionId
this.ruleForm.let1 = String(row.evolutionItem)
this.ruleForm.let2 = row.nowArchi
this.ruleForm.let3 = row.targetArchi
this.ruleForm.let4 = row.evolutionContent
},
release_dialog() {
//发布
this.$refs.form.validate((valid) => {
if (valid) {
const params = {
evolutionItem: this.ruleForm.let1,
nowArchi: this.ruleForm.let2,
targetArchi: this.ruleForm.let3,
evolutionContent: this.ruleForm.let4,
evolutionType: this.activeTabs == '演进策略' ? 1 : 2,
state: 1,
}
const requestParams =
this.is_add_edit == 'add'
? params
: { ...params, evolutionId: this.editId }
if (this.is_add_edit == 'add') {
evoluteFunAndLineAdd(requestParams).then((res) => {
if (res.code == 200) {
this.add_dialog = false
this.get_table()
Message({
type: 'success',
message: '发布成功!',
})
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
} else {
evoluteFunAndLineDeleteMore(requestParams).then((res) => {
if (res.code == 200) {
this.add_dialog = false
this.get_table()
Message({
type: 'success',
message: '发布成功!',
})
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
}
} else {
return false
}
})
},
save_dialog() {
//保存
this.$refs.form.validate((valid) => {
if (valid) {
const params = {
evolutionItem: this.ruleForm.let1,
nowArchi: this.ruleForm.let2,
targetArchi: this.ruleForm.let3,
evolutionContent: this.ruleForm.let4,
evolutionType: this.activeTabs == '演进策略' ? 1 : 2,
state: 2,
}
const requestParams =
this.is_add_edit == 'add'
? params
: { ...params, evolutionId: this.editId }
if (this.is_add_edit == 'add') {
evoluteFunAndLineAdd(requestParams).then((res) => {
if (res.code == 200) {
this.add_dialog = false
this.get_table()
Message({
type: 'success',
message: '保存成功!',
})
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
} else {
evoluteFunAndLineDeleteMore(requestParams).then((res) => {
if (res.code == 200) {
this.add_dialog = false
this.get_table()
Message({
type: 'success',
message: '保存成功!',
})
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
}
} else {
return false
}
})
},
releaseItem(row) {
//表格发布
MessageBox.confirm('确定发布?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning',
})
.then(() => {
const params = {
evolutionId: row.evolutionId,
state: 1,
}
evoluteFunAndLineDeleteMore(params).then((res) => {
if (res.code == 200) {
this.get_table()
Message({
type: 'success',
message: '发布成功!',
})
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
})
.catch(() => {
Message({
type: 'info',
message: '已取消',
})
})
},
cancelReleaseItem(row) {
//表格取消发布
MessageBox.confirm('确定取消发布?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning',
})
.then(() => {
const params = {
evolutionId: row.evolutionId,
state: 0,
}
evoluteFunAndLineDeleteMore(params).then((res) => {
if (res.code == 200) {
this.get_table()
Message({
type: 'success',
message: '取消发布成功!',
})
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
})
.catch(() => {
Message({
type: 'info',
message: '已取消',
})
})
},
deleteItem(row) {
//表格删除
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning',
})
.then(() => {
const params = {
evolutionId: row.evolutionId,
delFlag: 1,
}
evoluteFunAndLineDeleteMore(params).then((res) => {
if (res.code == 200) {
this.get_table()
Message({
type: 'success',
message: '删除成功!',
})
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
})
.catch(() => {
Message({
type: 'info',
message: '已取消',
})
})
},
deleteMore() {
//批量删除
if (this.activeTabs == '演进策略') {
if (this.selectRow1.length == 0) {
Message({
type: 'error',
message: '请选择至少一条数据!',
})
} else {
let evolutionId = []
this.selectRow1.forEach((item) => {
evolutionId.push(item.evolutionId)
})
const params = {
evolutionId: evolutionId,
batchConstant: 'del',
}
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning',
})
.then(() => {
evoluteFunAndLineDeleteReleaseCancel(params).then((res) => {
if (res.code == 200) {
this.get_table()
Message({
type: 'success',
message: '删除成功!',
})
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
})
.catch(() => {
Message({
type: 'info',
message: '已取消',
})
})
}
} else {
if (this.selectRow2.length == 0) {
Message({
type: 'error',
message: '请选择至少一条数据!',
})
} else {
let evolutionId = []
this.selectRow2.forEach((item) => {
evolutionId.push(item.evolutionId)
})
const params = {
evolutionId: evolutionId,
batchConstant: 'del',
}
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning',
})
.then(() => {
evoluteFunAndLineDeleteReleaseCancel(params).then((res) => {
if (res.code == 200) {
this.get_table()
Message({
type: 'success',
message: '删除成功!',
})
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
})
.catch(() => {
Message({
type: 'info',
message: '已取消',
})
})
}
}
},
// releaseMore() {//批量发布
// if(this.activeTabs == '演进策略') {
// if(this.selectRow1.length == 0) {
// Message({
// type: 'error',
// message: '请选择至少一条数据!'
// });
// }else {
// let evolutionId = [];
// this.selectRow1.forEach(item => {
// evolutionId.push(item.evolutionId);
// });
// const params = {
// evolutionId: evolutionId,
// batchConstant: 'rel'
// }
// MessageBox.confirm('确定发布?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// customClass: 'messageClass',
// confirmButtonClass: 'confirmClass',
// type: 'warning'
// }).then(() => {
// evoluteFunAndLineDeleteReleaseCancel(params).then(res => {
// if(res.code == 200) {
// this.get_table();
// Message({
// type: 'success',
// message: '发布成功!'
// });
// }else {
// Message({
// type: 'error',
// message: res.msg
// });
// }
// })
// }).catch(() => {
// Message({
// type: 'info',
// message: '已取消'
// });
// });
// }
// }else {
// if(this.selectRow2.length == 0) {
// Message({
// type: 'error',
// message: '请选择至少一条数据!'
// });
// }else {
// let evolutionId = [];
// this.selectRow2.forEach(item => {
// evolutionId.push(item.evolutionId);
// });
// const params = {
// evolutionId: evolutionId,
// batchConstant: 'rel'
// }
// MessageBox.confirm('确定发布?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// customClass: 'messageClass',
// confirmButtonClass: 'confirmClass',
// type: 'warning'
// }).then(() => {
// evoluteFunAndLineDeleteReleaseCancel(params).then(res => {
// if(res.code == 200) {
// this.get_table();
// Message({
// type: 'success',
// message: '发布成功!'
// });
// }else {
// Message({
// type: 'error',
// message: res.msg
// });
// }
// })
// }).catch(() => {
// Message({
// type: 'info',
// message: '已取消'
// });
// });
// }
// }
// },
// cancelReleaseMore() {//批量取消发布
// if(this.activeTabs == '演进策略') {
// if(this.selectRow1.length == 0) {
// Message({
// type: 'error',
// message: '请选择至少一条数据!'
// });
// }else {
// let evolutionId = [];
// this.selectRow1.forEach(item => {
// evolutionId.push(item.evolutionId);
// });
// const params = {
// evolutionId: evolutionId,
// batchConstant: 'off'
// }
// MessageBox.confirm('确定取消发布?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// customClass: 'messageClass',
// confirmButtonClass: 'confirmClass',
// type: 'warning'
// }).then(() => {
// evoluteFunAndLineDeleteReleaseCancel(params).then(res => {
// if(res.code == 200) {
// this.get_table();
// Message({
// type: 'success',
// message: '发布成功!'
// });
// }else {
// Message({
// type: 'error',
// message: res.msg
// });
// }
// })
// }).catch(() => {
// Message({
// type: 'info',
// message: '已取消'
// });
// });
// }
// }else {
// if(this.selectRow2.length == 0) {
// Message({
// type: 'error',
// message: '请选择至少一条数据!'
// });
// }else {
// let evolutionId = [];
// this.selectRow2.forEach(item => {
// evolutionId.push(item.evolutionId);
// });
// const params = {
// evolutionId: evolutionId,
// batchConstant: 'off'
// }
// MessageBox.confirm('确定取消发布?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// customClass: 'messageClass',
// confirmButtonClass: 'confirmClass',
// type: 'warning'
// }).then(() => {
// evoluteFunAndLineDeleteReleaseCancel(params).then(res => {
// if(res.code == 200) {
// this.get_table();
// Message({
// type: 'success',
// message: '发布成功!'
// });
// }else {
// Message({
// type: 'error',
// message: res.msg
// });
// }
// })
// }).catch(() => {
// Message({
// type: 'info',
// message: '已取消'
// });
// });
// }
// }
// },
get_yan_jing_xiang_select() {
//演进项下拉
const params = {
key: 'evolution_item',
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
}
})
})
},
set_table_height() {
//动态设置表格高度
const table_container_height = $('.table_container').height()
const search_menu_height = $('.search_menu').height()
const search_btn_height = $('.search_btn').outerHeight(true)
this.tableHeight =
table_container_height -
search_menu_height -
search_btn_height -
120 +
'px'
},
search_table() {
//搜索
this.pager.current = 1
this.get_table()
},
reset() {
//重置
this.searchParams.evolutionItem = null
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1
this.pager.size = val
this.get_table()
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val
this.get_table()
},
handleClick(tab) {
this.get_table()
},
get_table() {
//查询表格数据
if (this.activeTabs == '演进策略') {
this.loading1 = true
} else {
this.loading2 = true
}
const params = {
evolutionItem: this.searchParams.evolutionItem,
evolutionType: this.activeTabs == '演进策略' ? 1 : 2,
current: this.pager.current,
pageSize: this.pager.size,
}
queryEvoluteFunAndLine(params).then((res) => {
if (res.code == 200) {
this.get_yan_jing_xiang_select().then((res2) => {
res.data.records.map((item3) => {
let result1 = res2.find(
(item2) => item2.value == item3.evolutionItem,
)
item3['evolutionItem_'] = result1 ? result1.label : ''
})
if (this.activeTabs == '演进策略') {
this.loading1 = false
this.tableData1 = res.data.records
} else {
this.loading2 = false
this.tableData2 = res.data.records
}
this.pager.current = res.data.current
this.pager.total = res.data.total
this.pager.size = res.data.size
})
}
})
},
},
}
</script>
<style>
.confirmClass {
background-color: #0d867f !important;
}
.el-message-box__content {
padding: 60px 15px 60px 15px;
}
</style>
<style lang="scss" scoped>
/deep/ .el-dialog__title {
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
/deep/ .el-dialog__header {
background-color: #0d867f;
text-align: left;
}
/deep/ .cross1 .el-form-item__content {
width: 89.5% !important;
}
.el-form-item {
display: flex;
}
.greenButton {
background-color: #0d867f;
color: #fff;
}
.version_btn {
display: flex;
align-items: center;
justify-content: center;
width: 84px;
height: 32px;
background: rgba(13, 134, 127, 0.1);
border-radius: 6px 6px 6px 6px;
/* border: 1px solid #0D867F; */
font-size: 14px;
color: #0d867f;
cursor: pointer;
margin-left: 15px;
}
.cancel_version_btn {
display: flex;
align-items: center;
justify-content: center;
width: 104px;
height: 32px;
background: rgba(13, 134, 127, 0.1);
border-radius: 6px 6px 6px 6px;
/* border: 1px solid #0D867F; */
font-size: 14px;
color: #0d867f;
cursor: pointer;
margin-left: 15px;
}
.archiEvoluteLine {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.el-button--primary {
background: rgba(13, 134, 127, 0.1);
color: #0d867f;
border: 0;
}
/deep/ .el-input-group__append {
background-color: #0d867f;
color: #fff;
cursor: pointer;
}
/deep/.el-tabs__item.is-active {
color: #0d867f;
}
/deep/ .el-tabs__item:hover {
color: #0d867f;
}
.search_btn {
width: 100%;
display: flex;
margin-top: 14px;
margin-bottom: 14px;
}
.search_menu {
display: flex;
justify-content: space-between;
}
.search_menu_item_container {
display: flex;
align-items: center;
}
.search_menu_btn_container {
display: flex;
align-items: center;
}
.search_menu_item {
display: flex;
align-items: center;
width: 344px;
}
.search_title {
/* width: 20%; */
flex-shrink: 0;
margin-right: 15px;
}
.search_item {
width: 60%;
}
.query_btn {
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13, 134, 127, 1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0d867f;
font-size: 14px;
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.shanChu_btn {
color: #dd6a15;
background-color: #f8ebe2;
}
.reset_btn {
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(244, 244, 244, 1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #ccc;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon {
margin-right: 10px;
}
.table_container {
width: 97%;
height: calc(100% - 40px);
margin-top: 20px;
}
.el-pagination {
margin-top: 30px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #0d867f;
}
</style>
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!