|
|
|
<template>
|
|
|
|
<div :style="styleObj" class="treeContainer">
|
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="optionsSetup.isType">
|
|
|
|
<el-tab-pane label="业务" name="first"></el-tab-pane>
|
|
|
|
<el-tab-pane label="资源" name="second"></el-tab-pane>
|
|
|
|
</el-tabs>
|
|
|
|
<el-tree :style="textStyle" class="tree-div" ref="roleTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
|
|
|
|
node-key="id" :default-checked-keys="checkedKeys"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var per = 60;
|
|
|
|
export default {
|
|
|
|
name: "progressInformation",
|
|
|
|
components: {},
|
|
|
|
props: {
|
|
|
|
value: Object,
|
|
|
|
ispreview: Boolean
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
activeName:'first',
|
|
|
|
defaultProps : {
|
|
|
|
children: 'children',
|
|
|
|
label: 'label',
|
|
|
|
},
|
|
|
|
treeData: [], // 所有的树结点
|
|
|
|
checkedKeys: [], // 当前选中的keys
|
|
|
|
|
|
|
|
optionsStyle: {}, // 样式
|
|
|
|
optionsData: {}, // 数据
|
|
|
|
optionsCollapse: {}, // 图标属性
|
|
|
|
optionsSetup: {}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
styleObj() {
|
|
|
|
return {
|
|
|
|
position: this.ispreview ? "absolute" : "static",
|
|
|
|
width: this.optionsStyle.width + "px",
|
|
|
|
height: this.optionsStyle.height + "px",
|
|
|
|
left: this.optionsStyle.left + "px",
|
|
|
|
top: this.optionsStyle.top + "px",
|
|
|
|
background: this.optionsSetup.background,
|
|
|
|
'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none',
|
|
|
|
'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none'
|
|
|
|
};
|
|
|
|
},
|
|
|
|
//文字样式设置
|
|
|
|
textStyle(){
|
|
|
|
return{
|
|
|
|
'text-align':this.optionsSetup.textAlign,
|
|
|
|
'font-size':this.optionsSetup.titleFontSize+'px',
|
|
|
|
color: this.optionsSetup.titleColor,
|
|
|
|
'font-weight': this.optionsSetup.titleFontWeight
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
value: {
|
|
|
|
handler(val) {
|
|
|
|
this.optionsStyle = val.position;
|
|
|
|
this.optionsData = val.data;
|
|
|
|
this.optionsCollapse = val.collapse;
|
|
|
|
this.optionsSetup = val.setup;
|
|
|
|
this.editorOptions();
|
|
|
|
},
|
|
|
|
deep: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.optionsStyle = this.value.position;
|
|
|
|
this.optionsData = this.value.data;
|
|
|
|
this.optionsCollapse = this.value.collapse;
|
|
|
|
this.optionsSetup = this.value.setup;
|
|
|
|
this.editorOptions();
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleClick(tab,event){
|
|
|
|
this.handleTableData();
|
|
|
|
},
|
|
|
|
handleNodeClick(data){
|
|
|
|
console.log(data);
|
|
|
|
this.$store.commit('CHANGE_TREE',data)
|
|
|
|
},
|
|
|
|
editorOptions() {
|
|
|
|
this.setOptionsData();
|
|
|
|
},
|
|
|
|
//切换类型获取树结构数据
|
|
|
|
handleTableData() {
|
|
|
|
if (this.optionsData.dataType == "dynamicData" && this.optionsSetUp.isType) {
|
|
|
|
//改变参数值-类型
|
|
|
|
this.optionsData.dynamicData.contextData.type = this.activeName;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// 数据解析
|
|
|
|
setOptionsData() {
|
|
|
|
const optionsData = this.optionsData; // 数据类型 静态 or 动态
|
|
|
|
optionsData.dataType == "staticData"
|
|
|
|
? this.staticDataFn(optionsData.staticData)
|
|
|
|
: this.dynamicDataFn(
|
|
|
|
optionsData.dynamicData,
|
|
|
|
optionsData.refreshTime
|
|
|
|
);
|
|
|
|
},
|
|
|
|
staticDataFn(val) {
|
|
|
|
if(val && val.length>0) {
|
|
|
|
this.treeData=val;
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
dynamicDataFn(val, refreshTime) {
|
|
|
|
if (!val) return;
|
|
|
|
if (this.ispreview) {
|
|
|
|
this.getEchartData(val);
|
|
|
|
this.flagInter = setInterval(() => {
|
|
|
|
this.getEchartData(val);
|
|
|
|
}, refreshTime);
|
|
|
|
} else {
|
|
|
|
this.getEchartData(val);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
getEchartData(val) {
|
|
|
|
const data = this.queryEchartsData(val);
|
|
|
|
data.then(res => {
|
|
|
|
if(res && res.length>0){
|
|
|
|
this.treeData=res;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.treeContainer{
|
|
|
|
padding:10px;
|
|
|
|
}
|
|
|
|
.tree-div{
|
|
|
|
height:100%;
|
|
|
|
width:100%;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
