Skip to content

liangzhen / framework-tools-web

Go to a project
Commit f7450639 by 史敦盼
Options

echarts本地public中去除

1 parent df2a3185
Expand all
Inline Side-by-side
Showing with 866 additions and 760 deletions
package.json
......@@ -11,6 +11,7 @@
"@wangeditor/editor-for-vue": "^1.0.2",
"axios": "^1.6.2",
"core-js": "^3.8.3",
"echarts": "^5.5.0",
"element-ui": "^2.15.14",
"jquery": "^3.7.1",
"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>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<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.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/jsmind.screenshot.js"></script>
<script type="text/javascript" src="./echarts.min.js"></script>
<!-- <script type="text/javascript" src="./echarts.min.js"></script> -->
</head>
<body>
<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>
<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.189:9999/web-apps/apps/api/documents/api.js"></script> -->
<!-- built files will be auto injected -->
</body>
<style>
html,body{
<style>
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
::-webkit-scrollbar{
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track{
::-webkit-scrollbar-track {
background-color: #fff;
}
::-webkit-scrollbar-thumb{
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #ccc;
}
......
src/main.js
......@@ -2,12 +2,14 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import * as echarts from 'echarts'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './styles/element-variables.scss'
import initDirective from './directive'
initDirective(Vue)
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
......
src/views/archiAssetVisualShow/index(旧).vue
<template>
<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>
<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';
import { archiAssetShowTree } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
import $ from 'jquery'
export default {
name: 'ArchiAssetVisualShow',
components: {
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'),
)
},
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 = 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',
},
],
}
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);
}
}
}
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>
\ No newline at end of file
.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/tab1.vue
<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 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>
</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>
<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
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'tab1',
components: {
import { archiAssetShowTree } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
export default {
name: 'tab1',
components: {},
data() {
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() {
return {
leftData: [],
centerData: []
};
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
mounted(){
this.echarts1();
this.getLeftData();
yAxis: {
type: 'value',
},
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 = 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'
}
]
};
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
this.myChart.setOption(option);
},
}
}
this.myChart.setOption(option)
},
},
}
</script>
<style>
.el-tabs__nav{
margin-left: 20px;
}
.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>
\ No newline at end of file
.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
<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 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>
</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>
<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
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'tab2',
components: {
import { archiAssetShowTree } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
export default {
name: 'tab2',
components: {},
data() {
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() {
return {
leftData: [],
centerData: []
};
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
mounted(){
this.echarts1();
this.getLeftData();
yAxis: {
type: 'value',
},
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 = 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'
}
]
};
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
this.myChart.setOption(option);
},
}
}
this.myChart.setOption(option)
},
},
}
</script>
<style>
.el-tabs__nav{
margin-left: 20px;
}
.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>
\ No newline at end of file
.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
<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 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>
</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>
<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
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'tab3',
components: {
import { archiAssetShowTree } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
export default {
name: 'tab3',
components: {},
data() {
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() {
return {
leftData: [],
centerData: []
};
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
mounted(){
this.echarts1();
this.getLeftData();
yAxis: {
type: 'value',
},
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 = 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'
}
]
};
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
this.myChart.setOption(option);
},
}
}
this.myChart.setOption(option)
},
},
}
</script>
<style>
.el-tabs__nav{
margin-left: 20px;
}
.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>
\ No newline at end of file
.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
<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 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>
</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>
<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
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'tab4',
components: {
import { archiAssetShowTree } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
export default {
name: 'tab4',
components: {},
data() {
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() {
return {
leftData: [],
centerData: []
};
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
mounted(){
this.echarts1();
this.getLeftData();
yAxis: {
type: 'value',
},
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 = 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'
}
]
};
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
this.myChart.setOption(option);
},
}
}
this.myChart.setOption(option)
},
},
}
</script>
<style>
.el-tabs__nav{
margin-left: 20px;
}
.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>
\ No newline at end of file
.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
<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 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>
</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>
<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
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default {
name: 'tab5',
components: {
import { archiAssetShowTree } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
export default {
name: 'tab5',
components: {},
data() {
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() {
return {
leftData: [],
centerData: []
};
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
mounted(){
this.echarts1();
this.getLeftData();
yAxis: {
type: 'value',
},
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 = 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'
}
]
};
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
this.myChart.setOption(option);
},
}
}
this.myChart.setOption(option)
},
},
}
</script>
<style>
.el-tabs__nav{
margin-left: 20px;
}
.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>
\ No newline at end of file
.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>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!