树结构右侧更改为iframe引入已配置好的容量分析页

@@ -32,6 +32,14 @@ export const monitorTreeShape = {
       },
       },
       {
       {
         type: 'el-switch',
         type: 'el-switch',
+        label: '右边内容',
+        name: 'isFrame',
+        required: false,
+        placeholder: '',
+        value: true
+      },
+      {
+        type: 'el-switch',
         label: '加边框',
         label: '加边框',
         name: 'isBorder',
         name: 'isBorder',
         required: false,
         required: false,

 <template>
 <template>
   <div :style="styleObj" class="treeContainer">
   <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 class="tree-left" :style="treeLeftStyle">
+      <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>
+    <div class="tree-content" v-if="optionsSetup.isFrame">
+        <iframe :src="iframeSrc" style="width:100%;height:100%;" frameborder="0"></iframe>
+    </div>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
-var per = 60;
 export default {
 export default {
   name: "progressInformation",
   name: "progressInformation",
   components: {},
   components: {},
@@ -21,6 +25,7 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
+      iframeSrc:'',
       activeName:'first',
       activeName:'first',
       defaultProps : {
       defaultProps : {
         children: 'children',
         children: 'children',
@@ -44,9 +49,14 @@ export default {
         left: this.optionsStyle.left + "px",
         left: this.optionsStyle.left + "px",
         top: this.optionsStyle.top + "px",
         top: this.optionsStyle.top + "px",
         background: this.optionsSetup.background,
         background: this.optionsSetup.background,
+
+      };
+    },
+    treeLeftStyle(){
+      return{
         'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none',
         'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none',
         'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none'
         'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none'
-      };
+      }
     },
     },
     //文字样式设置
     //文字样式设置
     textStyle(){
     textStyle(){
@@ -76,6 +86,7 @@ export default {
     this.optionsCollapse = this.value.collapse;
     this.optionsCollapse = this.value.collapse;
     this.optionsSetup = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
     this.editorOptions();
+    this.setSrc({id:1})
   },
   },
   mounted() {
   mounted() {
 
 
@@ -86,8 +97,19 @@ export default {
     },
     },
     handleNodeClick(data){
     handleNodeClick(data){
       console.log(data);
       console.log(data);
+      this.setSrc(data);
       this.$store.commit('CHANGE_TREE',data)
       this.$store.commit('CHANGE_TREE',data)
     },
     },
+    setSrc(data){
+      let origin=window.location.origin;//当前域名
+      let srcName=origin+'/#/bigscreen/viewer?reportCode=';
+      if(data.id==1){
+        srcName+='service_capacity_analysis';
+      }else{
+        srcName+='capacity_analysis_second';
+      }
+      this.iframeSrc=srcName;
+    },
     editorOptions() {
     editorOptions() {
       this.setOptionsData();
       this.setOptionsData();
     },
     },
@@ -140,6 +162,14 @@ export default {
 <style scoped lang="scss">
 <style scoped lang="scss">
 .treeContainer{
 .treeContainer{
   padding:10px;
   padding:10px;
+  display: flex;
+}
+.tree-left{
+  width:20%;
+  padding:10px;
+}
+.tree-content{
+  flex:1;
 }
 }
 .tree-div{
 .tree-div{
   height:100%;
   height:100%;

+<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>