接口数据结构
废话不多说,直接上代码
<template>
<el-card class="orgDataVisualization">
<el-card class="Container">
<div>
<el-input
v-model="filterOrganization"
size="mini"
style="width:245px;margin-left:20px"
suffix-icon="el-icon-search"
placeholder="筛选机构"
@input="changeSearch"
/>
<div class="manageContainer">
<el-tooltip content="节点鼠标右击,跳转安全组织管理" placement="bottom" effect="light">
<el-button class="manageBtn explain" icon="el-icon-question" />
</el-tooltip>
<el-button class="manageBtn" icon="el-icon-s-tools" @click="handlePush()">管理</el-button>
</div>
</div>
<div class="treeChartContainer">
<div id="chart" style="height:100%;width:100%" />
</div>
</el-card>
</el-card>
</template>
<script>
import { navigation } from '@/router' // 引入路由方法
import { _qrySecurityOrgTree } from '@/apis/safeOrgan/chSecurityOrgDataVisualization'// 接口
import * as echarts from 'echarts'
import resize from '../../hiddenDanger/hiddenDangerDataBoard/components/mixins/resize'
export default {
mixins: [resize],
data() {
return {
filterOrganization: '', // 筛选组织绑定字段
loading: false, // 加载
chartData: [], // 树状图数据
chart: {},
option: {},
items: {},
items1: {},
items2: {}
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
mounted() {
this.$nextTick(() => {
this.initChart() // 加载后执行初始化
})
// 阻止浏览器默认右击事件
document.getElementById('chart').oncontextmenu = function (e) {
return false
}
},
created() {
this.getList()// 加载树列表
},
methods: {
// 按钮-管理
handlePush() {
navigation.open(
{
title: '安全机构管理页面',
path: '/chSecurityOrg',
query: { isOK: 'no' }
}
)
},
// 树列表
getList() {
_qrySecurityOrgTree({})