eta_front/src/views/futures_manage/commodityChartBase.vue

<template>
	<div class="comodity-chart-container pub-chart-box" v-if="showData">
		<span
			class="slide-icon slide-right"
			@click="isSlideLeft = !isSlideLeft"
			v-show="isSlideLeft"
		>
			<i class="el-icon-d-arrow-right"></i>
		</span>

		<div class="data-sheet-main" id="box">
      <div class="main-left left" id="left" v-show="!isSlideLeft">
				<div class="datasheet_top">
						<el-button v-permission="permissionBtn.productPricePermission.goodsPrice_priceLine"
							type="primary" @click="goAddChart('price')">添加价格曲线</el-button>
						<el-button v-permission="permissionBtn.productPricePermission.goodsPrice_incomeLine"
							type="primary" @click="goAddChart('profit')">添加利润曲线</el-button>
				</div>

				<div class="search-cont">
					<el-checkbox v-model="isShowMe"  
						v-if="permissionBtn.isShowBtn('productPricePermission','goodsPrice_onlyMine')"
						@change="() => { getTreeData();getPublicList() }">只看我的</el-checkbox>
					<el-select
						v-model="search_txt"
						v-loadMore="searchLoad"
						:filterable="!search_txt"
						remote
						clearable
						placeholder="请输入图表名称"
						style="width: 100%; margin-top: 20px"
						:remote-method="searchHandle"
						@click.native="inputFocusHandle"
					>
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
						<el-option
							v-for="item in searchOptions"
							:key="item.ChartInfoId"
							:label="item.ChartName"
							:value="item.ChartInfoId"
						>
						</el-option>
					</el-select>
				</div>
				<div class="tree-cont">
					<el-tree
						ref="treeRef"
						class="target_tree"
						:data="treeData"
						node-key="UniqueCode"
						:props="defaultProp"
						:allow-drag="canDragHandle"
						:allow-drop="canDropHandle"
						:current-node-key="select_node"
						:default-expanded-keys="defaultShowNodes"
						draggable
						:expand-on-click-node="false"
						check-strictly
						empty-text="暂无分类"
						@node-expand="handleNodeExpand"
						@node-collapse="handleNodeCollapse"
						@current-change="nodeChange"
						@node-drop="dropOverHandle"
						@node-drag-end="dropMouseLeave"
						@node-drag-leave="dropMouseLeave"
						@node-drag-enter="dropMouseOver"
					>
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<el-input
								ref="editVal"
								style="width: 90px"
								placeholder="请输入值"
								class="label-input"
								v-model="new_label"
								v-if="data.isEdit&&permissionBtn.isShowBtn('productPricePermission','goodsPrice_classifyOpt_edit')"
								@blur="changeValue(data)"
							/>
							<span
								@dblclick.stop="handleDblClick(data)"
								v-else
								class="text_oneLine node_label"
								:style="`width:${
									(select_node === data.UniqueCode && node.Nodewidth) || ''
								}`"
							>
								<span>{{ data.ChartClassifyName }}</span>
							</span>
							<span
								style="display: flex; align-items: center"
								v-if="select_node === data.UniqueCode"
							>
								<img
									src="~@/assets/img/data_m/move_ico.png"
									alt=""
									style="width: 14px; height: 14px; margin-right: 8px"
								/>
								<img
									src="~@/assets/img/set_m/edit.png"
									alt=""
									style="width: 15px; height: 14px; margin-right: 8px"
									@click.stop="editNode(node, data)"
									v-if="!data.ChartInfoId&&permissionBtn.isShowBtn('productPricePermission','goodsPrice_classifyOpt_edit')"
								/>
								<img
									slot="reference"
									src="~@/assets/img/set_m/del.png"
									alt=""
									style="width: 14px; height: 14px"
									@click.stop="removeNode(node, data)"
									v-if="!data.ChartInfoId&&permissionBtn.isShowBtn('productPricePermission','goodsPrice_classifyOpt_delete')"
								/>
							</span>
						</span>
					</el-tree>
					<div
						class="noDepart"
						@click="addLevelOneHandle"
						v-if="permissionBtn.isShowBtn('productPricePermission','goodsPrice_classifyOpt_edit')"
					>
						<img
							src="~@/assets/img/set_m/add_ico.png"
							alt=""
							style="width: 16px; height: 16px; margin-right: 10px"
						/>
						<span>添加图表分类</span>
					</div>
				</div>
				<span
					class="move-btn resize"
					v-drag
					id="resize"
					@mousemove="dynamicNode && resetNodeStyle(dynamicNode)"
				></span>
				<span class="slide-icon slide-left" @click="isSlideLeft = !isSlideLeft">
					<i class="el-icon-d-arrow-left"></i>
				</span>
      </div>

			<div class="main-right" id="right" :style="isSlideLeft ? 'width:100%' : 'width:80%'">

				<!-- 图表详情 -->
				<div class="chart-detail-wrapper" v-if="chartInfo.ChartInfoId">
					<el-row class="bottom-min">
              <el-col
                :span="21"
                style="padding: 20px 0;"
              >
                <div class="chartEn-mark" v-show="chartInfo.IsEnChart" style="top: 0;left: 0;">En</div>
                <div class="chart-show-cont"  v-if="!chartInfo.WarnMsg">
                  <div class="chartWrapper" id="chartWrapper">
                    <h2 class="chart-title">{{ chartInfo.ChartName }}</h2>
                    <Chart 
											:options="options"
											minHeight="440px" 
											height="500px"
											ref="chartRef"
										/>

                    <!-- 上下限 -->
                    <div class="range-cont left">
                      <el-input
                        style="width: 60px; display: block"
                        size="mini"
                        type="number"
                        placeholder="上限"
                        :disabled="!permissionBtn.isShowBtn('productPricePermission','goodsPrice_editLimit')"
                        v-model="chartLimit.max"
                        @change="setCommodityChart"
                      />
                      <el-input
                        class="min-data-input"
                        size="mini"
                        type="number"
                        placeholder="下限"
                        :disabled="!permissionBtn.isShowBtn('productPricePermission','goodsPrice_editLimit')"
                        v-model="chartLimit.min"
                        @change="setCommodityChart"
                      />
                    </div>
                  </div>
                  <span class="chart-author">作者:{{ chartInfo.SysUserRealName}}</span>
                </div>

                <!-- 异常显示 -->
                <p class="error-tip" style="min-height: 400px;" v-if="chartInfo.WarnMsg">{{chartInfo.WarnMsg}}</p>
              </el-col>
              <el-col :span="3" style="position: absolute;height: 100%;right: 0;">
								<!-- 操作 -->
								<chartHandlesWrap
									:chartInfo="chartInfo"
									:linkUrl="linkUrl"
									@copyChartConfirm="copyChartConfirm"
									@addMychartHandle="addMychartHandle"
									@refreshHandle="refreshHandle"
									@saveChartHandle="saveChartHandle"
									@saveChartOtherHandle="saveChartOtherHandle"
									@editChartHandle="editChartHandle"
									@openEnNameDia="openEnNameDia"
									@delChartHandle="delChartHandle"
								/>
              </el-col>
          </el-row>
				</div>

				<!-- 列表 -->
				<chartListWrap
					v-else
          :total="chart_total" 
          :list="chartList" 
          @loadMoreHandle="loadMoreHandle"
          @detailShowHandle="detailShowHandle"
          @addMychartHandle="addMychartHandle"
          ref="chartListWrap"
        />
			</div>
		</div>


		<!-- 分类弹窗 -->
		<classify-dia
			:isOpenDialog.sync="classifyDia"
			:title="dialog_title"
			:form="classifyForm"
			@successCallback="getTreeData"
		/>

		 <!-- 加入我的图库弹窗 -->
    <addMyClassifyDia
      :isAddMyDialog="isAddMyChart"
      :add_id="add_chart_id"
      :add_ids="add_ids"
      @cancel="isAddMyChart = false"
      @addSuccess="addMySuccess"
    />

		 <!-- 图表另存 -->
    <SaveChartOther 
      :show.sync="isShowSaveOther" 
      fromType="chartsetting"
			source="good_price"
      :data="chartInfo"
      @ensure="getTreeData"
    />

		<!-- 输入英文指标弹窗 -->
		<set-en-name-dia 
			:isOpenDialog="setEnName" 
		  :formData="formItemArray"
			@cancel="setEnName=false"
   	  @updateEnName="updateEnName"
		/>

	</div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import futuresInterface from '@/api/modules/futuresBaseApi';
import leftMixin from './mixins/classifyMixin';
import Chart from '@/views/dataEntry_manage/components/chart';
import changeLang from "@/views/dataEntry_manage/components/changeLang.vue"
import classifyDia from '@/views/datasheet_manage/components/sheetClassifyDia.vue';
import addMyClassifyDia from '@/views/dataEntry_manage/components/addMyClassifyDia';
import SaveChartOther from '@/views/dataEntry_manage/components/SaveChartOther';
import setEnNameDia from '@/views/dataEntry_manage/components/setEnNameDia.vue'
import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic';
import { copyOtherOptions } from '@/utils/defaultOptions';
export default {
	components: { 
		changeLang,
		classifyDia,
		Chart,
		addMyClassifyDia,
		SaveChartOther,
		setEnNameDia
	},
	mixins:[ leftMixin,chartSetMixin ],
	computed: {
		/* 分享地址 */
    linkUrl() {
      const LINK_CHART_URL = this.$setting.dynamicOutLinks.ChartViewUrl+'/chartshow';
      return `${LINK_CHART_URL}?code=${this.chartInfo.UniqueCode}&fromType=share?&lang=${this.currentLang}`
    }
	},
	data () {
		return {
			showData: false,
			refreshLoading: false,
			isShowMe: false,
			search_txt: '',
			searchOptions:[],
			isSlideLeft: false,//左侧分类收起

			select_node: '',//节点唯一标识code
			select_classify: '',
			new_label:'',//双击修改的value
			treeData: [], //分类数据
      defaultShowNodes: [], //展开节点
      defaultProp: {
        label: 'ChartClassifyName',
        children: 'Children',
      }, //树结构配置项
			dynamicNode: null,

			/* 分类弹窗 */
			dialog_title:'',
			classifyDia: false, //
			classifyForm: {},

			select_id: '',//选中的图表id
			chartInfo: {},
			chart_title:'',//图表标题 双击标题修改时来存储最新值

			isAddMyChart: false, //加入图库弹窗
      add_chart_id: 0, //要加入的图表
			add_ids:[],//加入时已有的分类

			/* 图表列表 */
			publicHaveMove: true,//是否还有列表数据
			chartList: [],
			chart_total: 0,
			chart_page: 1,
			chart_pages_size: 16,

			search_page: 1,
			search_have_more: false,
			current_search:'',
		};
	},
	watch: {
		/* 设置动态右侧区域宽度 */
    isSlideLeft(newval) {
			this.$nextTick(() => {
				this.reloadRightWid();
			});
    },
		/* 图表id */
		select_id(newval) {
			if(newval) {
				this.currentLang = 'ch';
				this.getDetailHandle();
			}else {
				this.chartInfo = {};
			}
		},

		select_classify(newval) {
			if(this.$refs.chartListWrap) this.$refs.chartListWrap.$refs.listRef.scrollTop = 0;
			if(newval) {
				this.chart_page = 1;
				this.getPublicList()
			}
		},

		/* 搜索关键词 */
		search_txt(newval) {
			if(newval) {
				let search_obj = this.searchOptions.find(_ => _.ChartInfoId === newval);
				let deep_arr = _.cloneDeep(this.treeData);
				// 查找图表的分类父级id

				let arr = this.findParentNodeHandle(deep_arr, search_obj.UniqueCode).slice(1).reverse(); // 父的父的父-父的父-父
				this.defaultShowNodes = arr;
				this.select_node = search_obj.UniqueCode;
				this.$refs.treeRef.setCurrentKey(this.select_node);
				// 重置筛选状态
				this.select_id = newval;
			}
		}
	},
	methods: {

		/* 添加图表 */
		goAddChart(scence) {
			if(!this.treeData.length) return this.$message.warning('请先添加分类');
			this.$router.push({ path: '/addCommodityChart',query: { scence } });
		},

		/* 获取分类 */
		getTreeData(params=null) {
			futuresInterface.classifyList({IsShowMe:this.isShowMe}).then(res => {
				const { Ret,Data } = res;
				if(Ret !== 200) return

				this.showData = true;
				this.treeData = Data.AllNodes || [];
				this.$nextTick(() => {
					/* 新增完成后 处理树展开和选中 */
					params && this.selectCurrentNode(params);
				});

			})
		},

		/* 搜索 */
		searchHandle(query) {
			this.search_page = 1;
			this.current_search = query;
			this.searchApi(this.current_search)
		},

		searchApi(query,page=1) {
      /* 查找列表 */
      futuresInterface
        .searchChart({
          Keyword: query,
          IsShowMe:this.isShowMe,
          CurrentIndex: page
        })
        .then((res) => {
          if (res.Ret !== 200) return
          const { List,Paging } = res.Data;
          this.search_have_more = page < Paging.Pages;
          this.searchOptions = page === 1 ? List : [...this.searchOptions,...List];
        });
		},

		/* 聚焦获取当前检索 */
		inputFocusHandle(e) {
			this.search_page = 1;
			this.current_search = e.target.value;
      if(this.current_search) {
        this.searchApi(this.current_search)
      }else {
        this.searchOptions = [];
      }
		},

		searchLoad() {
			if(!this.search_have_more) return;
			this.searchApi(this.current_search,++this.search_page);
		},

		/* 选中分类变化时 */
		nodeChange({ UniqueCode,ChartInfoId,ChartClassifyId },node) {
			this.search_txt = '';
			this.select_node = UniqueCode;
			this.select_classify = !ChartInfoId ? ChartClassifyId : 0;
			// if(this.select_id !== ChartInfoId) {
				this.select_id = ChartInfoId || 0;
			// }
			this.resetNodeStyle(node);
			this.dynamicNode = node;
		},

		/* 添加一级目录 */
		addLevelOneHandle() {
			this.dialog_title = '添加';
			this.classifyForm = {
				classify_name: '',
			}
			this.classifyDia = true;
		},

    /* 编辑节点 */
    editNode(node, { ChartClassifyName,ChartClassifyId }) {

      this.dialog_title = '编辑';
      /* 编辑目录 */
      this.classifyForm = {
        classify_name: ChartClassifyName,
        classify_id: ChartClassifyId,
      };
      this.classifyDia = true;
    },

		 /* 删除节点校验 */
    async removeNode(node, { ChartClassifyId,ChartInfoId }) {

			const { Data } = await futuresInterface.classifyDelCheck({ ChartClassifyId })

			const { DeleteStatus } = Data;

			DeleteStatus === 1 
			? this.$confirm('该分类下关联表图表不可删除', '删除失败', {
				confirmButtonText: '知道了',
				showCancelButton: false,
				type: 'error',
			}) : DeleteStatus === 0
			?  this.$confirm('确定删除当前分类吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				this.delApi(ChartClassifyId,ChartInfoId)
			}): null;

    },

		 /* 删除方法 */
    delApi(ChartClassifyId,ChartInfoId,type='') {
      futuresInterface
        .classifyDel({
          ChartClassifyId,
					ChartInfoId
        })
        .then((res) => {
          if (res.Ret !== 200) return
					this.$message.success(res.Msg);

					if (!res.Data.ChartInfoId) this.select_id = '';

					//删除自动显示下一张
					type=='del_chart' && res.Data.ChartInfoId
						? this.getTreeData({
								code: res.Data.UniqueCode,
								id: res.Data.ChartInfoId
							})
						: this.getTreeData();
        });
    },

		/* 分类成功回调 */
		classifyCallback(type) {
			this.getTreeData();

			if (type === 'add') {
        //新增分类完成之后，展开父节点显示刚新增的分类，若已展开节点则不做处理
        let code = this.add_parent_id;
        let flag = this.defaultShowNodes.some(item => item === code);
        // console.log(flag)
        !flag && this.defaultShowNodes.push(code);
        this.add_parent_id = '';

      }
		},

		/* 展开对应菜单 显示详情 */
		detailShowHandle({ UniqueCode, ChartInfoId }) {
        let params = {
          code: UniqueCode,
          id: ChartInfoId
        };
        this.selectCurrentNode(params);
				this.select_classify = 0;
		},

		/* 保存图表 */
		saveChartHandle: _.debounce(async function() {
			const { Ret } = await futuresInterface.chartSave({
				ChartInfoId: this.chartInfo.ChartInfoId,
				LeftMin: String(this.chartLimit.min),
				LeftMax: String(this.chartLimit.max),
			})

			if(Ret!==200) return
			this.$message.success('保存成功');
			this.getTreeData();
			//关联图表和图片
			this.setChartImage();
		},300),

		/* 点击保存时关联图表和截取的图片 */
    setChartImage() {
      let svg = this.$refs.chartRef.chart.getSVG({
				chart:{
				width: 340,
				height: 230,
				}
			});
			let form = new FormData();
			form.append('Img', svg);
			this.setImageHandle(form);
    },

    async setImageHandle(form) {
      let { Data } = await dataBaseInterface.uploadImgSvg(form);

      await dataBaseInterface.setChartImage({
        ChartInfoId: this.selected_chartid,
        ImageUrl: Data.ResourceUrl,
      });
    },

		copyChartConfirm(type) {
			type !== 'url' && this.copyChartHandle(type)
			if(this.currentLang=='en'){
				// 是否所有数据都填写完
				let flag=true
				// 是否有英文表格名称
				if(!this.chartInfo.ChartNameEn || !this.chartInfo.UnitEn) flag = false;
				if(!flag){
					this.$confirm('英文名称未输入完整，分享图表上可能出现空名称的情况，确定继续分享吗？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
					})
					.then(() => {
						if(type==='url'){
							const input = document.createElement('input')
							input.setAttribute('readonly','readonly')
							input.value = this.linkUrl
							document.body.appendChild(input)
							input.select();
							document.execCommand('copy');
							document.body.removeChild(input);
							this.$message.success('复制链接成功')
						}
					})
					.catch(() => {});
				}else{
					type=='url' && this.shareUrl()
				}
			}else{
				type=='url' && this.shareUrl()
			}
		},

		 /* 点击复制先用canvas画出 转成图片在放到粘贴板中 */
    copyChartHandle:_.debounce(function(type){{
      let chartsName = this.currentLang=='ch'?this.chartInfo.ChartName:this.chartInfo.ChartNameEn
      let { heightNum, widthNum , newTitle , dynamic_copyOptions} = this.dynamicWidthAndHeight(type,this.chartInfo.ChartType,chartsName,this.commodityChartData.length)
      const chartType = 'seasonLegend';
      // 英文转SVG设置变动
      if(this.currentLang == 'en'){
        // 如果竖轴坐标单位为'英文单位'，表示客户没填，转成svg时置为空
        this.$refs.chartRef.chart.options.yAxis.forEach(it => {
          if(it.title.text == '英文单位') it.title.text='' 
        });
      }
      let svg = this.$refs.chartRef.chart.getSVG({
        chart:{
          width:widthNum,
          height:heightNum,
          backgroundColor:"rgba(255, 255, 255, 0)",
        },
        title: {
          text: newTitle,
          margin: 10,
          style: {
            fontSize: '18px'
          }
        },
        legend:{
          ...copyOtherOptions[chartType],
          ...dynamic_copyOptions[chartType]
          }
      });
      this.copyBlobItem(widthNum,heightNum,svg,type);
    }
    },500),

		/* 分享图表 */
    shareUrl() {
      var clipboard = new this.Clipboard('.shareLink')
      clipboard.on('success', e => {
        console.log(e);
        this.$message.success('复制链接成功')
        e.clearSelection() // 释放内存
        clipboard.destroy()
      })
      // // 浏览器不支持
      clipboard.on('error', e => {
        this.$message.warning('浏览器暂不支持')
        // 释放内存
        clipboard.destroy()
      })
    },

		/* 获取图表列表 */
		getPublicList() {
			futuresInterface.getChartList({
				CurrentIndex: this.chart_page,
				PageSize: this.chart_pages_size,
        ChartClassifyId: this.select_classify || 0,
				IsShowMe: this.isShowMe
			}).then(res => {
				if(res.Ret !== 200) return

				this.publicHaveMove = res.Data
            ? this.chart_page < res.Data.Paging.Pages
            : false;
          this.chartList = res.Data
            ? this.chart_page === 1
              ? res.Data.List
              : [...this.chartList, ...res.Data.List]
            : [];
        this.chart_total = res.Data ? res.Data.Paging.Totals : 0;
			})
		},

			/* 加载更多 */
		loadMoreHandle: _.throttle(function() {
			let scrollTop = this.$refs.chartListWrap.$refs.listRef.scrollTop;
      let clientHeight = this.$refs.chartListWrap.$refs.listRef.clientHeight;
      let scrollHeight = this.$refs.chartListWrap.$refs.listRef.scrollHeight;
			if(scrollTop + clientHeight >= scrollHeight-10 && this.publicHaveMove){
				this.chart_page++;
				this.getPublicList();
			}
		},300),

		getChartInfo() {
			this.getDetailHandle();
		},

		/* 获取图表详情 */
		getDetailHandle() {
			futuresInterface.chartDetail({
				ChartInfoId: this.select_id
			}).then(res => {
				if(res.Ret !== 200) return

				this.chartInfo = res.Data.ChartInfo.Source===5 ? {
					...res.Data.ChartInfo,
					ProfitNameEn: res.Data.DataResp.ProfitNameEn,
					ProfitName: res.Data.DataResp.ProfitName,
				} : res.Data.ChartInfo;
				this.tableData = [res.Data.EdbInfoList[0]]
				this.initCommodityData(res.Data)
			})
		},

		/* 删除图表 */
		delChartHandle() {
			const { ChartClassifyId,ChartInfoId } = this.chartInfo;
			this.$confirm('删除后该图表将不能再引用，确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delApi(ChartClassifyId,ChartInfoId,'del_chart');
        })
        .catch(() => {});
		},

		/* 刷新图表 */
		refreshHandle() {
			this.refreshLoading = this.$loading({
        lock: true,
        target: '.main-right',
        text: '刷新图表中...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)',
      });
      futuresInterface
        .refreshChart({
          ChartInfoId: this.chartInfo.ChartInfoId,
        })
        .then((res) => {
          this.refreshLoading.close();
          if (res.Ret === 200) {
            this.getDetailHandle();
            this.$message.success(res.Msg);
          }
        });
		},

		/* 编辑图表 */
		editChartHandle() {
			this.$router.push({
        path: '/addCommodityChart',
        query: {
          code: this.chartInfo.UniqueCode,
		  scence:this.chartInfo.Source==2?'price':'profit'
        }
      })
		},

		 /* 加入我的图库 */
    addMychartHandle(item) {
      this.add_chart_id = item.ChartInfoId;
      //已有的分类ids
      this.add_ids = item.MyChartClassifyId ? item.MyChartClassifyId.split(',').map(item => Number(item)) : [];
      this.isAddMyChart = true;
    },

    /* 加入我的图库成功 */
    addMySuccess(params) {
      this.isAddMyChart = false;

			/* 判断是详情还是图库列表 */
      if (this.selected_chartid) {
        this.chartInfo.IsAdd = true;
        this.chartInfo.MyChartId = params.MyChartInfoId;
        this.chartInfo.MyChartClassifyId = params.MyChartClassifyId;
      } else {
        this.chartList.forEach((item) => {
          if (item.ChartInfoId === this.add_chart_id) {
            item.IsAdd = true;
            item.MyChartId = params.MyChartInfoId;
            item.MyChartClassifyId = params.MyChartClassifyId
          }
        });
      }
    },

		/* 重绘右侧区域宽度 */
    reloadRightWid() {
      let total_wid = $('.data-sheet-main')[0].offsetWidth;
      let left = $('#left')[0].offsetWidth;
      let rigtWid = total_wid - left - 20 + 'px';
      $('#right')[0].style.width = rigtWid;

    },
	handleDblClick(data){
		if(!this.permissionBtn.isShowBtn('productPricePermission','goodsPrice_classifyOpt_edit')) return
		this.editNodeLabel(data)
	}
	},
	mounted() {

		if(this.$route.query.code) {
      this.getTreeData({code: this.$route.query.code,id: Number(this.$route.query.id)})
    } else {
      this.getTreeData();
      this.getPublicList();
    }

		window.addEventListener('resize', this.reloadRightWid);
	},
	destroyed() {
		window.removeEventListener('resize', this.reloadRightWid);
	}
}
</script>
<style lang='scss' scoped>
@import '~@/views/chartRelevance_manage/css/index.scss';
</style>

<style lang="scss">
@import '~@/views/chartRelevance_manage/css/pub.scss';
</style>