eta_front/src/views/intervalAnalysis/list.vue

<template>
  <div class="fittingEquation-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 type="primary" @click="goAddChart" v-permission="permissionBtn.statisticPermission.rangeAnalysis_addChart">{{
            $t("StatisticAnalysis.ChartRelevance.chart_add_btn")
          }}</el-button>
        </div>

        <div class="search-cont">
          <!-- <el-checkbox
            v-permission="permissionBtn.statisticPermission.rangeAnalysis_onlyMine"
            v-model="isShowMe"
            @change="
              () => {
                getTreeData();
                getPublicList();
              }
            "
            >{{
              $t("StatisticAnalysis.ChartRelevance.only_see_mine")
            }}</el-checkbox
          > -->
          <el-select
            v-model="search_txt"
            v-loadMore="searchLoad"
            :filterable="!search_txt"
            remote
            clearable
            :placeholder="$t('Chart.search_chart_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="
                currentLang === 'en'
                  ? item.ChartNameEn || item.ChartName
                  : item.ChartName
              "
              :value="item.ChartInfoId"
            >
            </el-option>
          </el-select>
        </div>
        <div class="tree-cont">
          <el-tree
            class="target_tree"
            ref="menuTree"
            :data="treeData"
            node-key="UniqueCode"
            :props="defaultProp"
            :allow-drag="canDragHandle"
            :allow-drop="canDropHandle"
            :current-node-key="select_node"
            :default-expanded-keys="defaultShowNodes"
            :draggable="isEdbBtnShow('moveCatalog')"
            :expand-on-click-node="false"
            check-strictly
            empty-text="暂无目录"
            lazy
            :load="getLazyTreeData"
            @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 && isEdbBtnShow('editCatalog')"
                @blur="changeValue(node, data)"
              />
              <span
                @dblclick.stop="editNodeLabel(node, data)"
                v-else
                class="text_oneLine node_label"
                :style="`width:${
                  (select_node === data.UniqueCode && node.Nodewidth) || ''
                }`"
                :id="`node${data.UniqueCode}`"
              >
                <img
                  :src="$icons.lock_ico2"
                  width="18"
                  height="18"
                  style="vertical-align: middle"
                  v-if="!data.HaveOperaAuth && data.EdbInfoId"
                />
                <span>{{
                  currentLang === "en"
                    ? data.ChartClassifyNameEn || data.ChartClassifyName
                    : data.ChartClassifyName
                }}</span>
              </span>
              <span
                style="display: flex; align-items: center"
                v-if="select_node === data.UniqueCode && data.HaveOperaAuth"
              >
                <!-- 添加子项 -->
                <img
                  src="~@/assets/img/set_m/add.png"
                  alt=""
                  style="width: 14px; height: 14px; margin-right: 8px"
                  @click.stop="addNode(node, data)"
                  v-if="
                    !data.ChartInfoId &&
                    isEdbBtnShow('editCatalog') &&
                    node.level < 6
                  "
                />
                <!-- 编辑节点 如果是分类，判断data.Button.OpButton不变；如果是指标，不显示(ETA1.0.3) -->
                <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 &&
                    isEdbBtnShow('editCatalog')
                  "
                />
                <!-- 删除节点 如果是分类，判断data.Button.DeleteButton不变；如果是指标，不显示(ETA1.0.3) -->
                <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 &&
                    isEdbBtnShow('deleteCatalog')
                  "
                />
              </span>
            </span>
          </el-tree>
          <div class="noDepart" @click="addLevelOneHandle" v-if="isEdbBtnShow('editCatalog')">
            <img
              src="~@/assets/img/set_m/add_ico.png"
              alt=""
              style="width: 16px; height: 16px; margin-right: 10px"
            />
            <span>{{ $t("EtaBasePage.add_first_menu_btn") }}</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">
          <div class="cont-top">
            <div class="top-left">
              <template>
                <el-button
                  type="primary"
                  v-for="item in yearSelector"
                  :key="item.value"
                  size="medium"
                  :plain="item.value !== year_select"
                  class="year-btn"
                  @click.native="changeYear(item)"
                  >{{ item.name }}</el-button
                >
                <el-button type="text" class="btn-sty" @click="openDateDia">{{
                  dateTip
                }}</el-button>
              </template>
            </div>
          </div>
          <el-row class="bottom-min">
            <el-col :span="21" style="padding: 20px 0">
              <div class="chart-show-cont" v-if="!chartInfo.WarnMsg">
                <div class="chartWrapper" id="chartWrapper">
                  <h2 class="chart-title">
                    {{
                      currentLang === "en"
                        ? chartInfo.ChartNameEn || chartInfo.ChartName
                        : chartInfo.ChartName
                    }}
                  </h2>
                  <Chart
                    :options="options"
                    :chartInfo="chartInfo"
                    minHeight="440px"
                    height="500px"
                    ref="chartRef"
                  />
                  <template>
                    <div class="range-cont left" v-if="leftIndex !== -1">
                      <el-input
                        style="width: 60px; display: block"
                        size="mini"
                        type="number"
                        :placeholder="$t('Chart.up_limit')"
                        v-model="chartLimit.max"
                        @change="changeLimit"
                      />
                      <el-input
                        class="min-data-input"
                        size="mini"
                        type="number"
                        :placeholder="$t('Chart.low_limit')"
                        v-model="chartLimit.min"
                        @change="changeLimit"
                      />
                    </div>
                    <div class="range-cont right" v-if="rightIndex !== -1">
                      <el-input
                        style="width: 60px; display: block"
                        size="mini"
                        type="number"
                        :placeholder="$t('Chart.up_limit')"
                        v-model="chartLimit.rightMax"
                        @change="changeLimit"
                      />
                      <el-input
                        class="min-data-input"
                        size="mini"
                        type="number"
                        :placeholder="$t('Chart.low_limit')"
                        v-model="chartLimit.rightMin"
                        @change="changeLimit"
                      />
                    </div>
                    <!-- 右2上下限设置 -->
                    <div
                      class="range-cont rightTwo"
                      v-if="rightTwoIndex !== -1"
                    >
                      <el-input
                        style="width: 60px; display: block"
                        size="mini"
                        type="number"
                        :placeholder="$t('Chart.up_limit')"
                        v-model="chartLimit.rightTwoMax"
                        @change="changeLimit"
                      />
                      <el-input
                        class="min-data-input"
                        size="mini"
                        type="number"
                        :placeholder="$t('Chart.low_limit')"
                        v-model="chartLimit.rightTwoMin"
                        @change="changeLimit"
                      />
                    </div>
                  </template>
                </div>
                <div class="chart-bottom-insruction-info">
                  <div class="chart-source">
                    <span
                      v-if="chartInfo.SourcesFrom"
                      :style="`
                        color: ${
                          JSON.parse(chartInfo.SourcesFrom).isShow
                            ? JSON.parse(chartInfo.SourcesFrom).color
                            : '#999'
                        };
                        fontSize: ${
                          JSON.parse(chartInfo.SourcesFrom).fontSize
                        }px;
                      `"
                      ><!-- 来源 -->{{ $t("Chart.Detail.source") }}:{{
                        JSON.parse(chartInfo.SourcesFrom).text
                      }}
                    </span>
                  </div>

                  <!-- 图表说明 -->
                  <div
                    class="chart-instruction"
                    v-if="
                      chartInfo.Instructions &&
                      JSON.parse(chartInfo.Instructions).isShow
                    "
                    v-text="JSON.parse(chartInfo.Instructions).text"
                    :style="`
									color: ${JSON.parse(chartInfo.Instructions).color};
									fontSize: ${JSON.parse(chartInfo.Instructions).fontSize}px
								`"
                  ></div>
                </div>
                <span class="chart-author"
                  >{{ $t("MsgPrompt.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="handleChartRefresh('detail')"
                @saveChartOtherHandle="handleSaveOther(chartInfo)"
                @editChartHandle="editChartHandle(chartInfo)"
                @delChartHandle="handleDeleteChart(chartInfo)"
                @saveChartHandle="handleChartSave(chartInfo)"
              />
            </el-col>
          </el-row>
          <!-- 指标列表 -->
          <edbTableSection :tableData="tableData" :showCopyDataBtn="false"/>
        </div>
        <!-- 列表 -->
        <chartListTableWrap
          v-else
          :total="chart_total"
          :list="chartList"
          @refresh="handleChartRefresh"
          @saveOther="handleSaveOther"
          @deleteChart="handleDeleteChart"
          @loadMoreHandle="loadMoreHandle"
          @detailShowHandle="detailShowHandle"
          @addMychartHandle="addMychartHandle"
          @edit="editChartHandle"
        />
      </div>
    </div>

    <!-- 目录弹窗 -->
    <openDialog
      :isOpenDialog="isOpenDialog"
      :title="dialog_title"
      :formData="dialogForm"
      @closeDia="isOpenDialog = false"
      @sucessCallback="classifyCallback"
    />

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

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

    <!-- 日期端选择弹窗 -->
    <DateChooseDia
      :isDateDia="isDateDia"
      :dateForm="dateForm"
      :earliestDate="earliestDate"
      @cancel="isDateDia = false"
      @dateBack="dataChangeBack"
    />
  </div>
</template>

<script>
import apiIntervalAnalysis from '@/api/modules/intervalAnalysis'
import leftMixin from './mixin/leftMixin';
import Chart from '@/views/dataEntry_manage/components/chart';
import openDialog from '@/views/dataEntry_manage/databaseComponents/openDialog';
import addMyClassifyDia from '@/views/dataEntry_manage/components/addMyClassifyDia';
import SaveChartOther from '@/views/dataEntry_manage/components/SaveChartOther';
import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic';
import addOrEditMixn from '@/views/dataEntry_manage/mixins/addOreditMixin';
import { copyOtherOptions } from '@/utils/defaultOptions';
import DateChooseDia from '@/views/dataEntry_manage/components/DateChooseDia';
import edbTableSection from '@/views/chartRelevance_manage/crossVarietyAnalysis/components/edbTableSection.vue';
export default {
  components: {
    openDialog,
    Chart,
    addMyClassifyDia,
    SaveChartOther,
    edbTableSection,
    DateChooseDia
  },
  mixins: [leftMixin, chartSetMixin,addOrEditMixn],
  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: true,
      search_txt: '',
      searchOptions: [],
      isSlideLeft: false,//左侧分类收起

      select_node: '',//节点唯一标识code
      select_classify: '',

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

      /* 图表列表 */
      listLoading: false,
      listFinished: true,//是否还有列表数据
      chartList: [],
      chart_total: 0,
      chart_page: 1,
      chart_pages_size: 30,

      search_page: 1,
      search_have_more: false,
      current_search: '',

      isShowSaveOther: false,//另存为
      saveOtherChartInfo: {},

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

    };
  },
  methods: {

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

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

    searchApi(query, page = 1) {
      /* 查找列表 */
      apiIntervalAnalysis
        .chartSearch({
          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);
    },

    /* 获取图表列表 */
    getPublicList() {
      this.listLoading = true
      apiIntervalAnalysis.getChartList({
        CurrentIndex: this.chart_page,
        PageSize: this.chart_pages_size,
        ChartClassifyId: this.select_classify || 0,
        IsShowMe: this.isShowMe
      }).then(res => {
        this.listLoading = false
        if (res.Ret !== 200) return
        
        if(res.Data) {
          this.listFinished = res.Data.Paging.IsEnd
          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;
        }else {
          this.chartList = []
          this.chart_total = 0;
        }
      }).catch(() => {
        this.listLoading = false
      })
    },

    loadMoreHandle() {
      if (this.listLoading || this.listFinished) return
      this.chart_page++
      this.getPublicList()
    },

    detailShowHandle(e) {
      this.select_id = e.ChartInfoId
    },

    handleInitList() {
      this.listFinished = false
      this.chart_page = 1
      this.chartList = []
      this.chart_total = 0
      this.getPublicList()
    },

    /* 年份改变 重新刷新图表接口  保存当前的图表配置和上下限 只改变图表 */
    changeYear(item) {
      this.year_select = item.value;
      this.select_date = '';
      this.dateTip =/* '请选择时间段' */ this.$t('Chart.choose_time');

      this.getChartInfo()
    },

    /* 打开时间段弹窗 */
    openDateDia() {
      // 自定义时间段回显
      let selectDateStart = this.chartInfo.ChartType === 2 ? this.season_year[0] : this.select_date[0]
      let selectDateEnd = this.chartInfo.ChartType === 2 ? this.season_year[1] : this.select_date[1]

      this.dateForm = {
        date_type: this.year_select,
        start_date:
          this.year_select === 5 || this.year_select === 6
            ? selectDateStart
            : '',
        end_date: this.year_select === 5 ? selectDateEnd : '',
        count_year: this.year_select === 20 ? this.count_year : ''
      };
      this.isDateDia = true;
    },
    /* 保存完自定义日期 刷新数据  保存当前的图表配置和上下限 只改变图表*/
    dataChangeBack(data) {
      this.year_select = data.dateType;
      this.isDateDia = false;
      this.count_year = data.count_year

      let dateStart = data.start_date
      let dateEnd = data.end_date
      let latestYear = parseInt(this.latestDate.substring(0, 4))
      if (data.dateType == 20) {
        dateStart = `${latestYear - data.count_year + 1}-01-01`
        dateEnd = `${latestYear}-12-31`
      }


      // 因为原本季节性图不支持 DateType为5和6的 所以季节性也将StartDate和EndDate传过去
      this.select_date = [dateStart, dateEnd];

      if (data.dateType == 20) {
        this.dateTip = /* `最近${data.count_year}年` */ this.$t('Chart.date_tip_count', { year: data.count_year })
      } else if (data.dateType === 5) {
        this.dateTip = `${data.start_date}~${data.end_date}`;
      } else {
        this.dateTip = /* `${data.start_date}~至今` */ this.$t('Chart.data_tip_since', { date: data.start_date });
      }

      this.getChartInfo()
    },

    /* 设置默认时间选中项 */
    setDefaultDateSelect() {
      this.year_select = this.chartInfo.DateType;
      this.select_date = [this.chartInfo.StartDate, this.chartInfo.EndDate];
      this.count_year = this.chartInfo.StartYear;

      this.dateTip =
        this.chartInfo.DateType === 5
          ? `${this.chartInfo.StartDate}~${this.chartInfo.EndDate}`
          : this.chartInfo.DateType === 6
          ? /* `${this.chartInfo.StartDate}~至今` */ this.$t('Chart.data_tip_since',{date:this.chartInfo.StartDate})
          : this.chartInfo.DateType === 20
          ?/* `最近${this.chartInfo.StartYear}年` */ this.$t('Chart.date_tip_count',{year:this.chartInfo.StartYear})
          :/* '请选择时间段' */this.$t('Chart.choose_time');

    },

    /* 获取图表详情 */
    getChartInfo(type) {
      let params={
        ChartInfoId: this.select_id,
      }
      if(type!=='init'){
        params={
          ...params,
          DateType: this.year_select,
          StartDate: [5 , 6].includes(this.year_select)
            ? this.select_date[0]
            : '',
          EndDate: this.year_select === 5 ? this.select_date[1] : '',
          StartYear:this.count_year || 0,
        }
      }
      apiIntervalAnalysis.chartInfo(params).then(res => {
        if (res.Ret !== 200) return

        this.tableData=res.Data.EdbInfoList
        this.chartInfo=res.Data.ChartInfo
        if(type==='init'){
          this.setDefaultDateSelect()
        }
        

        this.initIntervalAnalysisChartData(res.Data)
        // 展开左侧目录树
        this.defaultShowNodes = res.Data.ClassifyLevels || []
        //设置tree高亮
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.menuTree.setCurrentKey(res.Data.ChartInfo.UniqueCode);
          }, 1000);
        })

      })
    },

    /* 删除图表 */
    handleDeleteChart(e) {
      const { ChartClassifyId, ChartInfoId } = e;
      this.$confirm(this.$t('Chart.OptMsg.chart_del_confirm'), this.$t('Confirm.prompt'), {
        type: 'warning',
      }).then(() => {
        this.delClassify(ChartClassifyId, ChartInfoId, 'del_chart');
      })
        .catch(() => { });
    },

    /* 刷新图表 */
    handleChartRefresh(e) {
      this.refreshLoading = this.$loading({
        lock: true,
        target: '.main-right',
        text: /* '刷新图表中...' */this.$t('Chart.OptMsg.refresh_ing_msg'),
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)',
      });
      const params = {
        ChartInfoId: e === 'detail' ? this.chartInfo.ChartInfoId : e.ChartInfoId
      }
      apiIntervalAnalysis.chartRefresh(params).then((res) => {
        this.refreshLoading.close();
        if (res.Ret === 200) {
          if (e === 'detail') {
            this.getChartInfo()
          }
          this.$message.success(res.Msg);
        }
      });
    },

    //保存图表
    handleChartSave(e){
      const {
        min, max, rightMin, rightMax, rightTwoMin, rightTwoMax
      } = this.chartLimit
      const params={
        ChartInfoId:e.ChartInfoId,
        DateType: this.year_select,
        StartDate: [5, 6].includes(this.year_select)
          ? this.select_date[0]
          : '',
        EndDate: this.year_select === 5 ? this.select_date[1] : '',
        StartYear: this.count_year || 0,
        LeftMin: min + '',
        LeftMax: max + '',
        RightMin: rightMin + '',
        RightMax: rightMax + '',
        Right2Min: rightTwoMin + '',
        Right2Max: rightTwoMax + '',
        MinMaxSave: Number(!this.getLimitInfo()),
      }
      console.log(params);
      apiIntervalAnalysis.chartSave(params).then(res=>{
        if(res.Ret===200){
          this.$message.success(this.$t('MsgPrompt.saved_msg'));
        }
      })
    },

    // 显示另存为
    handleSaveOther(e) {
      this.saveOtherChartInfo = e
      this.isShowSaveOther = true
    },

    /* 编辑图表 */
    editChartHandle(e) {
      this.$router.push({
        path: '/rangeAnalysisChartEditor',
        query: {
          code: e.UniqueCode,
          id: e.ChartInfoId
        }
      })
    },

    /* 加入我的图库 */
    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.select_id) {
        this.chartInfo.IsAdd = true;
        this.chartInfo.MyChartId = params.MyChartInfoId;
        this.chartInfo.MyChartClassifyId = params.MyChartClassifyId;
      }
    },

    copyChartHandle: _.debounce(function (type) {
      let chartsName = this.currentLang == 'zh' ? this.chartInfo.ChartName : this.chartInfo.ChartNameEn
      let { heightNum, widthNum, newTitle, dynamic_copyOptions } = this.dynamicWidthAndHeight(type, this.chartInfo.ChartType, chartsName, 1)
      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),

    copyChartConfirm(type) {
      type !== "url" && this.copyChartHandle(type);

      type == "url" && this.shareUrl();
    },

    /* 分享图表 */
    shareUrl() {
      var clipboard = new this.Clipboard(".shareLink");
      clipboard.on("success", (e) => {
        console.log(e);
        this.$message.success(/* "复制链接成功" */this.$t('Chart.OptMsg.copy_link_success'));
        e.clearSelection(); // 释放内存
        clipboard.destroy();
      });
      // // 浏览器不支持
      clipboard.on("error", (e) => {
        this.$message.warning(/* "浏览器暂不支持" */this.$t('MsgPrompt.browser_not_support'));
        // 释放内存
        clipboard.destroy();
      });
    },
  },
  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";
.pub-chart-box .data-sheet-main .main-left {
  width: 400px;
}
.main-right {
  .chart-detail-wrapper {
    .cont-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
      .top-left {
        .year-btn {
          margin-right: 5px;
          margin-bottom: 5px;
        }
        .btn-sty {
          border: 1px solid #409eff;
        }
        .date-setting {
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          cursor: pointer;
          color: #333333;
          line-height: 16px;
        }
      }
      .top-right {
        font-size: 16px;
        .join_txt {
          color: #409eff;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
        .collected {
          color: #f00;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
        .span-item {
          color: #409eff;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
          .el-icon-collection,
          .el-icon-document-copy {
            color: #409eff;
          }
        }
      }
    }
    @media screen and (min-width: 1711px) {
      .min-data-input {
        margin-top: 310px;
      }
      .btn-sty {
        padding: 10px;
      }
      .year-btn,
      .btn-sty {
        font-size: 14px;
      }
    }
    @media screen and (max-width: 1710px) {
      .min-data-input {
        margin-top: 230px;
      }
      .year-btn {
        font-size: 12px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 6px 12px;
      }
      .btn-sty {
        font-size: 12px;
        margin-left: 5px;
        padding: 6px;
        border: 1px solid #409eff;
      }
      .date-setting {
        width: 180px;
        height: 36px;
        padding: 10px;
        font-size: 12px;
      }
    }
  }
}
</style>

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