Skip to content

liangzhen / framework-tools-web

Go to a project
Commit f7450639 by 史敦盼
Options

echarts本地public中去除

1 parent df2a3185
Inline Side-by-side
Showing with 1128 additions and 994 deletions
package.json
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"@wangeditor/editor-for-vue": "^1.0.2", "@wangeditor/editor-for-vue": "^1.0.2",
"axios": "^1.6.2", "axios": "^1.6.2",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"echarts": "^5.5.0",
"element-ui": "^2.15.14", "element-ui": "^2.15.14",
"jquery": "^3.7.1", "jquery": "^3.7.1",
"scss": "^0.2.4", "scss": "^0.2.4",
......
public/echarts.min.js deleted 100644 → 0
This diff could not be displayed because it is too large.
public/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link type="text/css" rel="stylesheet" href="./jsmind/jsmind.css" /> <link type="text/css" rel="stylesheet" href="./jsmind/jsmind.css" />
<script type="text/javascript" src="./jsmind/jsmind.js"></script> <script type="text/javascript" src="./jsmind/jsmind.js"></script>
<script type="text/javascript" src="./jsmind/jsmind.draggable-node.js"></script> <script
type="text/javascript"
src="./jsmind/jsmind.draggable-node.js"
></script>
<script type="text/javascript" src="./jsmind/dom-to-image.js"></script> <script type="text/javascript" src="./jsmind/dom-to-image.js"></script>
<script type="text/javascript" src="./jsmind/jsmind.screenshot.js"></script> <script type="text/javascript" src="./jsmind/jsmind.screenshot.js"></script>
<script type="text/javascript" src="./echarts.min.js"></script> <!-- <script type="text/javascript" src="./echarts.min.js"></script> -->
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- <script type="text/javascript" src="http://192.168.0.186:9001/web-apps/apps/api/documents/api.js"></script> --> <!-- <script type="text/javascript" src="http://192.168.0.186:9001/web-apps/apps/api/documents/api.js"></script> -->
<!-- <script type="text/javascript" src="http://192.168.0.189:9999/web-apps/apps/api/documents/api.js"></script> --> <!-- <script type="text/javascript" src="http://192.168.0.189:9999/web-apps/apps/api/documents/api.js"></script> -->
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
<style> <style>
html,body{ html,
body {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
::-webkit-scrollbar{ ::-webkit-scrollbar {
width: 8px; width: 8px;
} }
::-webkit-scrollbar-track{ ::-webkit-scrollbar-track {
background-color: #fff; background-color: #fff;
} }
::-webkit-scrollbar-thumb{ ::-webkit-scrollbar-thumb {
border-radius: 8px; border-radius: 8px;
background-color: #ccc; background-color: #ccc;
} }
......
src/main.js
...@@ -2,12 +2,14 @@ import Vue from 'vue' ...@@ -2,12 +2,14 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import * as echarts from 'echarts'
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
import './styles/element-variables.scss' import './styles/element-variables.scss'
import initDirective from './directive' import initDirective from './directive'
initDirective(Vue) initDirective(Vue)
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false Vue.config.productionTip = false
......
src/views/archi-intelligence-search/index.vue
<template> <template>
<div class="archiIntelligenceSearch"> <div class="archiIntelligenceSearch">
<div class="left_container"> <div class="left_container">
<div class="search_menu_item" style="margin-top: 15px;"> <div class="search_menu_item" style="margin-top: 15px">
<span class="search_title">架构内容:</span> <span class="search_title">架构内容:</span>
<!-- <el-input v-no-backslash v-model="query_item1" placeholder="请输入" style="width: 300px;" maxlength="100"></el-input> --> <!-- <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;"> <el-input
<template slot="append"> placeholder="请输入内容"
<div style="cursor: pointer;width: 50px;height: 35px;display: flex;justify-content: center;align-items: center;" @click="select1"> v-no-backslash
<i class="el-icon-search"></i> v-model="query_item1"
</div> clearable
</template> style="width: 300px"
</el-input> >
</div> <template slot="append">
<div class="search_menu_item"> <div
<span class="search_title">架构版本:</span> style="
<el-select v-model="query_item2" clearable placeholder="请选择" style="width: 300px;" @change="select2"> cursor: pointer;
<el-option v-for="item in archiList" :key="item.versionId" :label="item.versionName" :value="item.versionId"></el-option> width: 50px;
</el-select> height: 35px;
</div> display: flex;
<el-tree justify-content: center;
class="filter-tree" align-items: center;
:data="treeData" "
:highlight-current="true" @click="select1"
:props="{ children: 'children', label: 'assetName', assetId: 'id' }" >
default-expand-all <i class="el-icon-search"></i>
show-checkbox </div>
node-key="id" </template>
:check-strictly="true" </el-input>
@check="treeCheckChange" </div>
ref="tree"> <div class="search_menu_item">
</el-tree> <span class="search_title">架构版本:</span>
</div> <el-select
<div class="right_container"> v-model="query_item2"
<div id="echartsContainer" style="width: 100%;height: 100%;"></div> clearable
</div> placeholder="请选择"
</div> 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> </template>
<script> <script>
import { import {
archiIntelligenceSearchTree, archiIntelligenceSearchTree,
archiIntelligenceSearchVersionList archiIntelligenceSearchVersionList,
} from '@/api/index.js'; } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'; import { MessageBox, Message } from 'element-ui'
import $ from 'jquery'; import $ from 'jquery'
export default { export default {
name: 'ArchiIntelligenceSearch', name: 'ArchiIntelligenceSearch',
data() { data() {
return { return {
treeData: [], treeData: [],
myChart: null, myChart: null,
query_item1: null, query_item1: null,
query_item2: null, query_item2: null,
archiList: [] archiList: [],
}; }
}, },
mounted(){ mounted() {
this.getTreeData(); this.getTreeData()
this.getVisionList(); this.getVisionList()
}, },
methods: { methods: {
select1() { select1() {
this.getTreeData(); 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 = {
select2(data) { tooltip: {
if(this.myChart) { formatter: function (x) {
this.myChart.dispose(); return x.data.name
} },
this.getTreeData(); },
}, series: [
echarts1(seriesData, linkData) { {
this.myChart = echarts.init(document.getElementById('echartsContainer')); type: 'graph',
layout: 'force',
var option = { roam: true,
tooltip: { symbolSize: [120, 60],
formatter: function (x) { label: {
return x.data.name; normal: {
} show: true,
}, width: 80,
series: [ overflow: 'truncate',
{ textStyle: {
type: 'graph', fontSize: 12,
layout: 'force', },
roam: true, },
symbolSize: [ 120, 60 ], },
label: { lineStyle: {
normal: { normal: {
show: true, opacity: 0.9,
width: 80, width: 5,
overflow: 'truncate', curveness: 0,
textStyle: { },
fontSize: 12 },
}, force: {
} // repulsion: 500,
}, repulsion: 1000, //节点之间的斥力因子。
lineStyle: { edgeLength: 100, //边的两个节点之间的距离，这个距离也会受 repulsion。
normal: { },
opacity: 0.9, // edgeSymbol: ['circle', 'arrow'],
width: 5, data: seriesData,
curveness: 0 links: linkData,
} },
}, ],
force: { }
// repulsion: 500,
repulsion: 1000, //节点之间的斥力因子。
edgeLength: 100 //边的两个节点之间的距离，这个距离也会受 repulsion。
},
// edgeSymbol: ['circle', 'arrow'],
data: seriesData,
links: linkData
}
]
};
this.myChart.setOption(option); this.myChart.setOption(option)
}, },
getVisionList() {//查询架构版本 getVisionList() {
archiIntelligenceSearchVersionList({}).then(res => { //查询架构版本
if(res.code == 200) { archiIntelligenceSearchVersionList({}).then((res) => {
this.archiList = res.data; if (res.code == 200) {
} this.archiList = res.data
}); }
}, })
getTreeData() {//查询左侧树 },
const params = { getTreeData() {
"assetName": this.query_item1, //查询左侧树
"versionId": this.query_item2, const params = {
} assetName: this.query_item1,
archiIntelligenceSearchTree(params).then(res => { versionId: this.query_item2,
if(res.code == 200) { }
this.treeData = res.data; archiIntelligenceSearchTree(params).then((res) => {
} if (res.code == 200) {
}); this.treeData = res.data
}, }
treeCheckChange(data, tree) {//左侧树勾选 })
let seriesData = [], linkData = []; },
treeCheckChange(data, tree) {
//左侧树勾选
let seriesData = [],
linkData = []
if(tree.checkedNodes.length > 0) { 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,
})
})
}
})
tree.checkedNodes.forEach(item => { var new_arr2 = []
if(!item.targetList){ for (var i = 0; i < seriesData.length; i++) {
return; var flag = true
} for (var j = 0; j < new_arr2.length; j++) {
seriesData.push({ if (new_arr2[j].id == seriesData[i].id) {
name: item.assetName, flag = false
id: item.assetCode, }
symbol: item.icon, }
draggable: true, if (flag) {
itemStyle: { new_arr2.push(seriesData[i])
normal: { }
color: item.color }
}, seriesData = new_arr2
}
});
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); this.echarts1(seriesData, linkData)
} else {
}else { this.myChart.dispose()
this.myChart.dispose(); }
} },
}, },
}
} }
</script> </script>
<style> <style></style>
</style>
<style scoped> <style scoped>
.filter-tree{ .filter-tree {
width: 300px; width: 300px;
height: calc(100% - 120px); height: calc(100% - 120px);
overflow-y: auto; overflow-y: auto;
display: inline-block; display: inline-block;
} }
/deep/ .is-leaf { /deep/ .is-leaf {
background-color: #fff !important; background-color: #fff !important;
} }
.search_menu_item{ .search_menu_item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.search_title{ .search_title {
font-size: 14px; font-size: 14px;
color: #606291; color: #606291;
flex-shrink: 0; flex-shrink: 0;
margin-right: 10px; margin-right: 10px;
} }
.archiIntelligenceSearch{ .archiIntelligenceSearch {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
} }
.left_container{ .left_container {
width: 25%; width: 25%;
margin-right: 20px; margin-right: 20px;
height: 100%; height: 100%;
border: 1px solid #ccc; border: 1px solid #ccc;
text-align: center; text-align: center;
} }
.right_container{ .right_container {
width: 75%; width: 75%;
height: 100%; height: 100%;
pornhub: hidden; pornhub: hidden;
} }
/deep/ .el-input-group__append{ /deep/ .el-input-group__append {
padding: 0; padding: 0;
} }
</style> </style>
\ No newline at end of file
src/views/archiAssetVisualShow/index(旧).vue
<template> <template>
<template> <template>
<div class="archiAssetVisualShow"> <div class="archiAssetVisualShow">
<el-tree <el-tree
class="filter-tree" class="filter-tree"
:data="treeData" :data="treeData"
:highlight-current="true" :highlight-current="true"
:props="{ children: 'children', label: 'name', id: 'id' }" :props="{ children: 'children', label: 'name', id: 'id' }"
default-expand-all default-expand-all
node-key="assetId" node-key="assetId"
@node-click="treeClick" @node-click="treeClick"
ref="tree"> ref="tree"
</el-tree> >
<div class="right_container"> </el-tree>
<div id="echartsContainer" style="width: 800px;height: 500px;"></div> <div class="right_container">
</div> <div id="echartsContainer" style="width: 800px; height: 500px"></div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { import { archiAssetShowTree } from '@/api/index.js'
archiAssetShowTree, import { MessageBox, Message } from 'element-ui'
} from '@/api/index.js'; import $ from 'jquery'
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default { export default {
name: 'ArchiAssetVisualShow', name: 'ArchiAssetVisualShow',
components: { 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 = {
data() { tooltip: {
return { trigger: 'axis',
treeData: [ axisPointer: {
{ id: 'BUSI', name: '业务架构', children: [] }, type: 'shadow',
{ id: 'APP', name: '应用架构', children: [] }, },
{ id: 'DATA', name: '数据架构', children: [] }, },
{ id: 'TECH', name: '技术架构', children: [] }, xAxis: {
{ id: 'SAFE', name: '安全架构', children: [] } type: 'category',
], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
myChart: null },
}; yAxis: {
}, type: 'value',
mounted(){ },
this.getTreeData('BUSI'); series: [
this.echarts1(); {
}, data: [120, 200, 150, 80, 70, 110, 130],
methods: { type: 'bar',
echarts1(seriesData, linkData) { },
this.myChart = echarts.init(document.getElementById('echartsContainer')); ],
}
var option = { this.myChart.setOption(option)
tooltip: { },
trigger: 'axis', getTreeData(type) {
axisPointer: { //查询左侧树
type: 'shadow' const params = {
} assetEnum: type,
}, }
xAxis: { archiAssetShowTree(params).then((res) => {
type: 'category', if (res.code == 200) {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] this.treeData.forEach((item) => {
}, if (item.id == type) {
yAxis: { item.children = res.data
type: 'value' }
}, })
series: [ }
{ })
data: [120, 200, 150, 80, 70, 110, 130], },
type: 'bar' treeClick(data, node, e) {
} //树点击的时候
] // console.log(data.assetId);
}; const type = ['BUSI', 'APP', 'DATA', 'TECH', 'SAFE']
if (type.includes(data.id)) {
this.myChart.setOption(option); this.getTreeData(data.id)
}, }
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> </script>
<style scoped> <style scoped>
.archiAssetVisualShow{ .archiAssetVisualShow {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.filter-tree{ .filter-tree {
width: 300px; width: 300px;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
} }
.right_container{ .right_container {
width: calc(100% - 300px); width: calc(100% - 300px);
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
/deep/ .is-leaf { /deep/ .is-leaf {
background-color: #fff !important; background-color: #fff !important;
} }
</style> </style>
\ No newline at end of file
src/views/archiAssetVisualShow/tab1.vue
<template> <template>
<div class="tab1"> <div class="tab1">
<div class="containerLeft"> <div class="containerLeft">
<p style="text-align: left;margin-left: 20px;">业务域</p> <p style="text-align: left; margin-left: 20px">业务域</p>
<el-divider></el-divider> <el-divider></el-divider>
<div class="buttonContainer"> <div class="buttonContainer">
<span v-for="item in leftData" :key="item.assetId"> <span v-for="item in leftData" :key="item.assetId">
<el-button style="margin: 10px 20px;" @click="showCurrent(item)">{{ item.assetName }}</el-button> <el-button style="margin: 10px 20px" @click="showCurrent(item)">{{
</span> 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> </div>
</div> </template>
<div class="containerCenter"> <span v-for="item2 in item.children" :key="item2.assetId">
<el-collapse accordion v-for="item in centerData" :key="item.assetId" style="margin-bottom: 20px;"> <el-button style="margin: 10px 20px">{{
<el-collapse-item> item2.assetName
<template slot="title"> }}</el-button>
<div style="width: 100%;display: flex;align-items: center;padding-left: 20px;"> </span>
<el-button size="medium">{{ item.assetName }}</el-button> </el-collapse-item>
<p style="width: 76%;margin-left: 20px;border-top: 1px dotted #000;"></p> </el-collapse>
</div> </div>
</template> <div class="containerRight">
<span v-for="item2 in item.children" :key="item2.assetId"> <div id="echartsContainer" style="width: 800px; height: 500px"></div>
<el-button style="margin: 10px 20px;">{{ item2.assetName }}</el-button> </div>
</span> </div>
</el-collapse-item>
</el-collapse>
</div>
<div class="containerRight">
<div id="echartsContainer" style="width: 800px;height: 500px;"></div>
</div>
</div>
</template> </template>
<script> <script>
import { import { archiAssetShowTree } from '@/api/index.js'
archiAssetShowTree import { MessageBox, Message } from 'element-ui'
} from '@/api/index.js'; export default {
import { MessageBox, Message } from 'element-ui'; name: 'tab1',
export default { components: {},
name: 'tab1', data() {
components: { return {
leftData: [],
centerData: [],
}
},
mounted() {
this.echarts1()
this.getLeftData()
},
methods: {
showCurrent(data) {
this.centerData = data.children
},
getLeftData() {
const params = {
assertType: 'ARCHI_BUSINESS',
}
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',
},
}, },
data() { xAxis: {
return { type: 'category',
leftData: [], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
centerData: []
};
}, },
mounted(){ yAxis: {
this.echarts1(); type: 'value',
this.getLeftData();
}, },
methods: { series: [
showCurrent(data) { {
this.centerData = data.children; data: [120, 200, 150, 80, 70, 110, 130],
}, type: 'bar',
getLeftData() { },
const params = { ],
"assertType": "ARCHI_BUSINESS" }
}
archiAssetShowTree(params).then(res => {
if(res.code == 200) {
this.leftData = res.data;
}else {
Message({
type: 'error',
message: res.msg
});
}
})
},
echarts1() {
this.myChart = 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); this.myChart.setOption(option)
}, },
} },
} }
</script> </script>
<style> <style>
.el-tabs__nav{ .el-tabs__nav {
margin-left: 20px; margin-left: 20px;
} }
</style> </style>
<style scoped> <style scoped>
.tab1{ .tab1 {
height: calc(100% - 20px); height: calc(100% - 20px);
display: flex; display: flex;
} }
.buttonContainer{ .buttonContainer {
height: calc(100% - 90px); height: calc(100% - 90px);
overflow-y: auto; overflow-y: auto;
text-align: left; text-align: left;
} }
/deep/ .el-collapse-item__content{ /deep/ .el-collapse-item__content {
text-align: left; text-align: left;
} }
.containerLeft{ .containerLeft {
width: 20%; width: 20%;
height: 100%; height: 100%;
border-right: 2px solid #ccc; border-right: 2px solid #ccc;
} }
.containerCenter{ .containerCenter {
width: 35%; width: 35%;
height: 100%; height: 100%;
border-right: 2px solid #ccc; border-right: 2px solid #ccc;
overflow-y: auto; overflow-y: auto;
} }
.containerRight{ .containerRight {
width: 45%; width: 45%;
height: 100%; height: 100%;
} }
.el-button--primary{ .el-button--primary {
background: rgba(13,134,127,1); background: rgba(13, 134, 127, 1);
color: #fff; color: #fff;
border: 0; border: 0;
} }
</style> </style>
\ No newline at end of file
src/views/archiAssetVisualShow/tab2.vue
<template> <template>
<div class="tab2"> <div class="tab2">
<div class="containerLeft"> <div class="containerLeft">
<p style="text-align: left;margin-left: 20px;">业务域</p> <p style="text-align: left; margin-left: 20px">业务域</p>
<el-divider></el-divider> <el-divider></el-divider>
<div class="buttonContainer"> <div class="buttonContainer">
<span v-for="item in leftData" :key="item.assetId"> <span v-for="item in leftData" :key="item.assetId">
<el-button style="margin: 10px 20px;" @click="showCurrent(item)">{{ item.assetName }}</el-button> <el-button style="margin: 10px 20px" @click="showCurrent(item)">{{
</span> 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> </div>
</div> </template>
<div class="containerCenter"> <span v-for="item2 in item.children" :key="item2.assetId">
<el-collapse accordion v-for="item in centerData" :key="item.assetId" style="margin-bottom: 20px;"> <el-button style="margin: 10px 20px">{{
<el-collapse-item> item2.assetName
<template slot="title"> }}</el-button>
<div style="width: 100%;display: flex;align-items: center;padding-left: 20px;"> </span>
<el-button size="medium">{{ item.assetName }}</el-button> </el-collapse-item>
<p style="width: 76%;margin-left: 20px;border-top: 1px dotted #000;"></p> </el-collapse>
</div> </div>
</template> <div class="containerRight">
<span v-for="item2 in item.children" :key="item2.assetId"> <div id="echartsContainer2" style="width: 800px; height: 500px"></div>
<el-button style="margin: 10px 20px;">{{ item2.assetName }}</el-button> </div>
</span> </div>
</el-collapse-item>
</el-collapse>
</div>
<div class="containerRight">
<div id="echartsContainer2" style="width: 800px;height: 500px;"></div>
</div>
</div>
</template> </template>
<script> <script>
import { import { archiAssetShowTree } from '@/api/index.js'
archiAssetShowTree import { MessageBox, Message } from 'element-ui'
} from '@/api/index.js'; export default {
import { MessageBox, Message } from 'element-ui'; name: 'tab2',
export default { components: {},
name: 'tab2', data() {
components: { return {
leftData: [],
centerData: [],
}
},
mounted() {
this.echarts1()
this.getLeftData()
},
methods: {
showCurrent(data) {
this.centerData = data.children
},
getLeftData() {
const params = {
assertType: 'ARCHI_APPLICATION',
}
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',
},
}, },
data() { xAxis: {
return { type: 'category',
leftData: [], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
centerData: []
};
}, },
mounted(){ yAxis: {
this.echarts1(); type: 'value',
this.getLeftData();
}, },
methods: { series: [
showCurrent(data) { {
this.centerData = data.children; data: [120, 200, 150, 80, 70, 110, 130],
}, type: 'bar',
getLeftData() { },
const params = { ],
"assertType": "ARCHI_APPLICATION" }
}
archiAssetShowTree(params).then(res => {
if(res.code == 200) {
this.leftData = res.data;
}else {
Message({
type: 'error',
message: res.msg
});
}
})
},
echarts1() {
this.myChart = 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); this.myChart.setOption(option)
}, },
} },
} }
</script> </script>
<style> <style>
.el-tabs__nav{ .el-tabs__nav {
margin-left: 20px; margin-left: 20px;
} }
</style> </style>
<style scoped> <style scoped>
.tab2{ .tab2 {
height: calc(100% - 20px); height: calc(100% - 20px);
display: flex; display: flex;
} }
/deep/ .el-collapse-item__content{ /deep/ .el-collapse-item__content {
text-align: left; text-align: left;
} }
.buttonContainer{ .buttonContainer {
height: calc(100% - 90px); height: calc(100% - 90px);
overflow-y: auto; overflow-y: auto;
text-align: left; text-align: left;
} }
.containerLeft{ .containerLeft {
width: 20%; width: 20%;
height: 100%; height: 100%;
border-right: 2px solid #ccc; border-right: 2px solid #ccc;
} }
.containerCenter{ .containerCenter {
width: 35%; width: 35%;
height: 100%; height: 100%;
border-right: 2px solid #ccc; border-right: 2px solid #ccc;
overflow-y: auto; overflow-y: auto;
} }
.containerRight{ .containerRight {
width: 45%; width: 45%;
height: 100%; height: 100%;
} }
.el-button--primary{ .el-button--primary {
background: rgba(13,134,127,1); background: rgba(13, 134, 127, 1);
color: #fff; color: #fff;
border: 0; border: 0;
} }
</style> </style>
\ No newline at end of file
src/views/archiAssetVisualShow/tab3.vue
<template> <template>
<div class="tab3"> <div class="tab3">
<div class="containerLeft"> <div class="containerLeft">
<p style="text-align: left;margin-left: 20px;">业务域</p> <p style="text-align: left; margin-left: 20px">业务域</p>
<el-divider></el-divider> <el-divider></el-divider>
<div class="buttonContainer"> <div class="buttonContainer">
<span v-for="item in leftData" :key="item.assetId"> <span v-for="item in leftData" :key="item.assetId">
<el-button style="margin: 10px 20px;" @click="showCurrent(item)">{{ item.assetName }}</el-button> <el-button style="margin: 10px 20px" @click="showCurrent(item)">{{
</span> 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> </div>
</div> </template>
<div class="containerCenter"> <span v-for="item2 in item.children" :key="item2.assetId">
<el-collapse accordion v-for="item in centerData" :key="item.assetId" style="margin-bottom: 20px;"> <el-button style="margin: 10px 20px">{{
<el-collapse-item> item2.assetName
<template slot="title"> }}</el-button>
<div style="width: 100%;display: flex;align-items: center;padding-left: 20px;"> </span>
<el-button size="medium">{{ item.assetName }}</el-button> </el-collapse-item>
<p style="width: 76%;margin-left: 20px;border-top: 1px dotted #000;"></p> </el-collapse>
</div> </div>
</template> <div class="containerRight">
<span v-for="item2 in item.children" :key="item2.assetId"> <div id="echartsContainer3" style="width: 800px; height: 500px"></div>
<el-button style="margin: 10px 20px;">{{ item2.assetName }}</el-button> </div>
</span> </div>
</el-collapse-item>
</el-collapse>
</div>
<div class="containerRight">
<div id="echartsContainer3" style="width: 800px;height: 500px;"></div>
</div>
</div>
</template> </template>
<script> <script>
import { import { archiAssetShowTree } from '@/api/index.js'
archiAssetShowTree import { MessageBox, Message } from 'element-ui'
} from '@/api/index.js'; export default {
import { MessageBox, Message } from 'element-ui'; name: 'tab3',
export default { components: {},
name: 'tab3', data() {
components: { return {
leftData: [],
centerData: [],
}
},
mounted() {
this.echarts1()
this.getLeftData()
},
methods: {
showCurrent(data) {
this.centerData = data.children
},
getLeftData() {
const params = {
assertType: 'ARCHI_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',
},
}, },
data() { xAxis: {
return { type: 'category',
leftData: [], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
centerData: []
};
}, },
mounted(){ yAxis: {
this.echarts1(); type: 'value',
this.getLeftData();
}, },
methods: { series: [
showCurrent(data) { {
this.centerData = data.children; data: [120, 200, 150, 80, 70, 110, 130],
}, type: 'bar',
getLeftData() { },
const params = { ],
"assertType": "ARCHI_DATA" }
}
archiAssetShowTree(params).then(res => {
if(res.code == 200) {
this.leftData = res.data;
}else {
Message({
type: 'error',
message: res.msg
});
}
})
},
echarts1() {
this.myChart = 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); this.myChart.setOption(option)
}, },
} },
} }
</script> </script>
<style> <style>
.el-tabs__nav{ .el-tabs__nav {
margin-left: 20px; margin-left: 20px;
} }
</style> </style>
<style scoped> <style scoped>
.tab3{ .tab3 {
height: calc(100% - 20px); height: calc(100% - 20px);
display: flex; display: flex;
} }
/deep/ .el-collapse-item__content{ /deep/ .el-collapse-item__content {
text-align: left; text-align: left;
} }
.buttonContainer{ .buttonContainer {
height: calc(100% - 90px); height: calc(100% - 90px);
overflow-y: auto; overflow-y: auto;
text-align: left; text-align: left;
} }
.containerLeft{ .containerLeft {
width: 20%; width: 20%;
height: 100%; height: 100%;
border-right: 2px solid #ccc; border-right: 2px solid #ccc;
} }
.containerCenter{ .containerCenter {
width: 35%; width: 35%;
height: 100%; height: 100%;
border-right: 2px solid #ccc; border-right: 2px solid #ccc;
overflow-y: auto; overflow-y: auto;
} }
.containerRight{ .containerRight {
width: 45%; width: 45%;
height: 100%; height: 100%;
} }
.el-button--primary{ .el-button--primary {
background: rgba(13,134,127,1); background: rgba(13, 134, 127, 1);
color: #fff; color: #fff;
border: 0; border: 0;
} }
</style> </style>
\ No newline at end of file
src/views/archiAssetVisualShow/tab4.vue
<template> <template>
<div class="tab4"> <div class="tab4">
<div class="containerLeft"> <div class="containerLeft">
<p style="text-align: left;margin-left: 20px;">业务域</p> <p style="text-align: left; margin-left: 20px">业务域</p>
<el-divider></el-divider> <el-divider></el-divider>
<div class="buttonContainer"> <div class="buttonContainer">
<span v-for="item in leftData" :key="item.assetId"> <span v-for="item in leftData" :key="item.assetId">
<el-button style="margin: 10px 20px;" @click="showCurrent(item)">{{ item.assetName }}</el-button> <el-button style="margin: 10px 20px" @click="showCurrent(item)">{{
</span> 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> </div>
</div> </template>
<div class="containerCenter"> <span v-for="item2 in item.children" :key="item2.assetId">
<el-collapse accordion v-for="item in centerData" :key="item.assetId" style="margin-bottom: 20px;"> <el-button style="margin: 10px 20px">{{
<el-collapse-item> item2.assetName
<template slot="title"> }}</el-button>
<div style="width: 100%;display: flex;align-items: center;padding-left: 20px;"> </span>
<el-button size="medium">{{ item.assetName }}</el-button> </el-collapse-item>
<p style="width: 76%;margin-left: 20px;border-top: 1px dotted #000;"></p> </el-collapse>
</div> </div>
</template> <div class="containerRight">
<span v-for="item2 in item.children" :key="item2.assetId"> <div id="echartsContainer4" style="width: 800px; height: 500px"></div>
<el-button style="margin: 10px 20px;">{{ item2.assetName }}</el-button> </div>
</span> </div>
</el-collapse-item>
</el-collapse>
</div>
<div class="containerRight">
<div id="echartsContainer4" style="width: 800px;height: 500px;"></div>
</div>
</div>
</template> </template>
<script> <script>
import { import { archiAssetShowTree } from '@/api/index.js'
archiAssetShowTree import { MessageBox, Message } from 'element-ui'
} from '@/api/index.js'; export default {
import { MessageBox, Message } from 'element-ui'; name: 'tab4',
export default { components: {},
name: 'tab4', data() {
components: { return {
leftData: [],
centerData: [],
}
},
mounted() {
this.echarts1()
this.getLeftData()
},
methods: {
showCurrent(data) {
this.centerData = data.children
},
getLeftData() {
const params = {
assertType: 'ARCHI_TECHNOLOGY',
}
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',
},
}, },
data() { xAxis: {
return { type: 'category',
leftData: [], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
centerData: []
};
}, },
mounted(){ yAxis: {
this.echarts1(); type: 'value',
this.getLeftData();
}, },
methods: { series: [
showCurrent(data) { {
this.centerData = data.children; data: [120, 200, 150, 80, 70, 110, 130],
}, type: 'bar',
getLeftData() { },
const params = { ],
"assertType": "ARCHI_TECHNOLOGY" }
}
archiAssetShowTree(params).then(res => {
if(res.code == 200) {
this.leftData = res.data;
}else {
Message({
type: 'error',
message: res.msg
});
}
})
},
echarts1() {
this.myChart = 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); this.myChart.setOption(option)
}, },
} },
} }
</script> </script>
<style> <style>
.el-tabs__nav{ .el-tabs__nav {
margin-left: 20px; margin-left: 20px;
} }
</style> </style>
<style scoped> <style scoped>
.tab4{ .tab4 {
height: calc(100% - 20px); height: calc(100% - 20px);
display: flex; display: flex;
} }
/deep/ .el-collapse-item__content{ /deep/ .el-collapse-item__content {
text-align: left; text-align: left;
} }
.buttonContainer{ .buttonContainer {
height: calc(100% - 90px); height: calc(100% - 90px);
overflow-y: auto; overflow-y: auto;
text-align: left; text-align: left;
} }
.containerLeft{ .containerLeft {
width: 20%; width: 20%;
height: 100%; height: 100%;
border-right: 2px solid #ccc; border-right: 2px solid #ccc;
} }
.containerCenter{ .containerCenter {
width: 35%; width: 35%;
height: 100%; height: 100%;
border-right: 2px solid #ccc; border-right: 2px solid #ccc;
overflow-y: auto; overflow-y: auto;
} }
.containerRight{ .containerRight {
width: 45%; width: 45%;
height: 100%; height: 100%;
} }
.el-button--primary{ .el-button--primary {
background: rgba(13,134,127,1); background: rgba(13, 134, 127, 1);
color: #fff; color: #fff;
border: 0; border: 0;
} }
</style> </style>
\ No newline at end of file
src/views/archiAssetVisualShow/tab5.vue
<template> <template>
<div class="tab5"> <div class="tab5">
<div class="containerLeft"> <div class="containerLeft">
<p style="text-align: left;margin-left: 20px;">业务域</p> <p style="text-align: left; margin-left: 20px">业务域</p>
<el-divider></el-divider> <el-divider></el-divider>
<div class="buttonContainer"> <div class="buttonContainer">
<span v-for="item in leftData" :key="item.assetId"> <span v-for="item in leftData" :key="item.assetId">
<el-button style="margin: 10px 20px;" @click="showCurrent(item)">{{ item.assetName }}</el-button> <el-button style="margin: 10px 20px" @click="showCurrent(item)">{{
</span> 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> </div>
</div> </template>
<div class="containerCenter"> <span v-for="item2 in item.children" :key="item2.assetId">
<el-collapse accordion v-for="item in centerData" :key="item.assetId" style="margin-bottom: 20px;"> <el-button style="margin: 10px 20px">{{
<el-collapse-item> item2.assetName
<template slot="title"> }}</el-button>
<div style="width: 100%;display: flex;align-items: center;padding-left: 20px;"> </span>
<el-button size="medium">{{ item.assetName }}</el-button> </el-collapse-item>
<p style="width: 76%;margin-left: 20px;border-top: 1px dotted #000;"></p> </el-collapse>
</div> </div>
</template> <div class="containerRight">
<span v-for="item2 in item.children" :key="item2.assetId"> <div id="echartsContainer5" style="width: 800px; height: 500px"></div>
<el-button style="margin: 10px 20px;">{{ item2.assetName }}</el-button> </div>
</span> </div>
</el-collapse-item>
</el-collapse>
</div>
<div class="containerRight">
<div id="echartsContainer5" style="width: 800px;height: 500px;"></div>
</div>
</div>
</template> </template>
<script> <script>
import { import { archiAssetShowTree } from '@/api/index.js'
archiAssetShowTree import { MessageBox, Message } from 'element-ui'
} from '@/api/index.js'; export default {
import { MessageBox, Message } from 'element-ui'; name: 'tab5',
export default { components: {},
name: 'tab5', data() {
components: { return {
leftData: [],
centerData: [],
}
},
mounted() {
this.echarts1()
this.getLeftData()
},
methods: {
showCurrent(data) {
this.centerData = data.children
},
getLeftData() {
const params = {
assertType: 'ARCHI_SAFE',
}
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',
},
}, },
data() { xAxis: {
return { type: 'category',
leftData: [], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
centerData: []
};
}, },
mounted(){ yAxis: {
this.echarts1(); type: 'value',
this.getLeftData();
}, },
methods: { series: [
showCurrent(data) { {
this.centerData = data.children; data: [120, 200, 150, 80, 70, 110, 130],
}, type: 'bar',
getLeftData() { },
const params = { ],
"assertType": "ARCHI_SAFE" }
}
archiAssetShowTree(params).then(res => {
if(res.code == 200) {
this.leftData = res.data;
}else {
Message({
type: 'error',
message: res.msg
});
}
})
},
echarts1() {
this.myChart = 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); this.myChart.setOption(option)
}, },
} },
} }
</script> </script>
<style> <style>
.el-tabs__nav{ .el-tabs__nav {
margin-left: 20px; margin-left: 20px;
} }
</style> </style>
<style scoped> <style scoped>
.tab5{ .tab5 {
height: calc(100% - 20px); height: calc(100% - 20px);
display: flex; display: flex;
} }
.buttonContainer{ .buttonContainer {
height: calc(100% - 90px); height: calc(100% - 90px);
overflow-y: auto; overflow-y: auto;
text-align: left; text-align: left;
} }
/deep/ .el-collapse-item__content{ /deep/ .el-collapse-item__content {
text-align: left; text-align: left;
} }
.containerLeft{ .containerLeft {
width: 20%; width: 20%;
height: 100%; height: 100%;
border-right: 2px solid #ccc; border-right: 2px solid #ccc;
} }
.containerCenter{ .containerCenter {
width: 35%; width: 35%;
height: 100%; height: 100%;
border-right: 2px solid #ccc; border-right: 2px solid #ccc;
overflow-y: auto; overflow-y: auto;
} }
.containerRight{ .containerRight {
width: 45%; width: 45%;
height: 100%; height: 100%;
} }
.el-button--primary{ .el-button--primary {
background: rgba(13,134,127,1); background: rgba(13, 134, 127, 1);
color: #fff; color: #fff;
border: 0; border: 0;
} }
</style> </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!