eta_front/src/views/dataEntry_manage/chartSetting.vue

<template>
  <div class="chartSetting_container">
    <div class="chartSetting_main box" id="box" v-if="showData">
      <span
        class="slide-icon slide-right"
        @click="slideHandle"
        v-show="isSlideLeft"
      >
        <i class="el-icon-d-arrow-right"></i>
      </span>
      <div class="chartSetting-label-list">
          <edb-label-list 
            :currentLang="currentLang"
            :labelList="labelList"
            :activeLabelId="select_node"
            @clickLabel="changeCurrentLabel"
            @deleteLabel="deleteLabel"
            @moveLabel="({oldIndex,newIndex})=>{labelList[oldIndex] = labelList.splice(newIndex, 1, labelList[oldIndex])[0];}"
          />
      </div>
      <div class="chartSetting-main">
      <div class="main-left left" id="left" v-show="!isSlideLeft">
        
        <div class="add-chart-cont">
          <el-button v-permission="permissionBtn.chartLibPermission.chartLib_add"
            @click="$router.push({path: '/addchart'})" type="primary">添加图表</el-button>
          <change-lang v-permission="permissionBtn.chartLibPermission.chartLib_switchEn"
            :lang="currentLang" @changeLang="changeLanguage" style="margin-left: 10px;"/>

        </div>
        
        <ul class="left-tab">
          <li :class="['tab',{'act': leftShowLabel===tab}]" v-for="tab in ['目录','坐标轴']" :key="tab" @click="leftShowLabel=tab">{{tab}}</li>
          <li >
            <el-checkbox v-model="isOnlyMe"  @change="onlyMeHandler">只看我的</el-checkbox>
          </li>
        </ul>

        <!-- 目录 -->
        <template v-if="leftShowLabel === '目录'">
          <div class="chartSetting_main_top">
            <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="currentLang==='en'?(item.ChartNameEn||item.ChartName):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="暂无分类"
              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"
                  @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}`"
                >
                  <span>{{ currentLang==='en' ? (data.ChartClassifyNameEn||data.ChartClassifyName) : 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"
                    v-if="data.Button.MoveButton"
                  />
                  <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.Button.AddButton"
                  />
                  <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.Button.OpButton"
                  />
                  <img
                    slot="reference"
                    src="~@/assets/img/set_m/del.png"
                    alt=""
                    style="width: 14px; height: 14px"
                    @click.stop="removeNode(node, data)"
                    v-if="data.Button.DeleteButton"
                  />
                </span>
              </span>
            </el-tree>
            <div
              class="noDepart"
              @click="addLevelOneHandle"
              v-if="CanOpClassify"
            >
              <img
                src="~@/assets/img/set_m/add_ico.png"
                alt=""
                style="width: 16px; height: 16px; margin-right: 10px"
              />
              <span>添加图表分类</span>
            </div>
          </div>
        </template>
        <!-- 坐标轴 -->
        <div class="targetset-cont" v-else>
          <!-- 仅用于散点图配置提出 -->
					<div class="scatter-setting" v-if="chartInfo.ChartType === 5 && tableData.length">
						<div style="display: flex;margin-right: 15px;">
							<span style="margin-right: 3px">线条颜色：</span>
							<el-color-picker
								v-model="tableData[0].ChartColor"
								size="mini"
								show-alpha
								:predefine="predefineColors"
							></el-color-picker>
						</div>
						<el-checkbox v-model="tableData[0].IsOrder">逆序</el-checkbox>
					</div>

          <el-collapse v-model="activeNames" class="target-list" v-if="tableData.length">
            <el-collapse-item v-for="(item,index) in tableData" :key="item.EdbInfoId" :disabled="[2,5,7,10].includes(chartInfo.ChartType)">
              <template slot="title">
                <span class="text_oneLine">{{item.EdbName}}</span>
              </template>
              <ul class="setting-cont">
                <!-- 堆叠图 或组合图中的堆叠类型 非第一项隐藏配置 -->
								<template v-if="showYOptionsHandle(item,index)">
                  <li>
                    <el-checkbox v-model="item.IsOrder">逆序</el-checkbox>
                  </li>
                  <li>
                    <el-radio-group v-model="item.IsAxis" size="mini">
                      <el-radio-button :label="1">左轴</el-radio-button>
                      <el-radio-button :label="0">右轴</el-radio-button>
                      <!-- 指标有右轴时才可以选右2轴 不然没有右2这个概念的意义 -->
											<el-radio-button 
                        v-if="[1,6].includes(chartInfo.ChartType)"
												:label="2" 
												:disabled="(tableData.findIndex(_ => _.IsAxis===0) === -1) 
												|| (tableData.findIndex(_ => _.IsAxis===0) === index 
														&& tableData.filter(_ => _.IsAxis===0).length === 1)"
											>右2轴</el-radio-button>
                    </el-radio-group>
                  </li>
                </template>
                <li style="min-width: 250px">
                  <el-radio
                    v-model="item.EdbInfoType"
                    :label="1"
                    @change="getPreviewChartInfo"
                    >标准指标</el-radio
                  >
                  <div style="margin-top: 15px">
                    <el-radio
                      v-model="item.EdbInfoType"
                      :label="0"
                      style="margin-right: 10px"
                      @change="getPreviewChartInfo"
                      >领先指标</el-radio
                    >
                    <template v-if="item.EdbInfoType === 0">
                      领先
                      <el-input
                        style="width: 60px"
                        size="mini"
                        type="number"
                        min="0"
                        v-model="item.LeadValue"
                        @change="getPreviewChartInfo"
                        @keyup.native="filterCode(item)"
                      ></el-input>
                      <el-select
                        v-model="item.LeadUnit"
                        placeholder=""
                        style="width: 60px"
                        size="mini"
                        @change="getPreviewChartInfo"
                      >
                        <el-option
                          v-for="item in fre_options"
                          :key="item"
                          :label="item"
                          :value="item"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </div>
                </li>
                <li>
                  <div style="display: flex">
                    <span style="margin-right: 3px">线条颜色：</span>
                    <el-color-picker
                      v-model="item.ChartColor"
                      size="mini"
                      show-alpha
                      :predefine="predefineColors"
                    ></el-color-picker>
                  </div>
                  <div style="display: flex;margin-top: 12px" v-if="item.EdbInfoCategoryType === 1">
                    <span style="margin-right: 3px">预测值颜色：</span>
                    <el-color-picker
                      v-model="item.PredictChartColor"
                      size="mini"
											show-alpha
                      :predefine="predefineColors"
                    ></el-color-picker>
                  </div>

                  <div 
                    style="margin-top: 12px"
                    v-if="chartInfo.ChartType === 1 
										|| (chartInfo.ChartType === 6 && item.ChartStyle==='spline')"
                  >
                    线条粗细：
                    <el-input
                      style="width: 60px"
                      size="mini"
                      type="number"
                      :min="1"
                      v-model="item.ChartWidth"
											@keyup.native="filterWidth(item)"
                    />
                  </div>
                </li>
                <li v-if="chartInfo.ChartType === 6">
                  <div style="display: flex">
                    <span style="margin-right: 3px">生成样式：</span>
                    <el-select
											v-model="item.ChartStyle"
											placeholder="请选择生成样式"
											style="width: 50%"
                      class="edb-item-style"
										>
											<el-option
												v-for="item in chartItemStyleArr"
												:key="item.key"
												:label="item.label"
												:value="item.value"
											>
											</el-option>
										</el-select>
                  </div>
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
          <div v-else class="nodata">
            <tableNoData text="暂无信息"/>
          </div>
        </div>
        
        <span
          class="move-btn resize"
          v-drag
          id="resize"
          @mousemove="dynamicNode && resetNodeStyle(dynamicNode)"
        ></span>
        <span class="slide-icon slide-left" @click="slideHandle">
          <i class="el-icon-d-arrow-left"></i>
        </span>
      </div>
      <div
        class="main-right right"
        id="right"
        :style="isSlideLeft ? 'width:100%' : `width:${dynamicWidth}`"
      >
        <!-- =============具体图表区域============== -->
        <div class="chart-min-cont" v-if="tableData.length">
          <div class="cont-top">
            <div class="top-left">
              <!-- 默认曲线图 -->
              <template v-if="sameOptionType.includes(chartInfo.ChartType)">
                <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>
              <!-- 季节性图选择年份区间 -->
              <!-- <date-picker
                v-else-if="chartInfo.ChartType === 2"
                v-model="season_year"
                type="month"
                value-type="format"
                range
                placeholder="年份日期选择"
                @change="seasonYearChange"
              /> -->
              <div v-else-if="chartInfo.ChartType === 2" @click="openDateDia" class="date-setting">
                {{ season_year && season_year.length>0 ? season_year[0]+'~'+season_year[1]:"年份日期选择" }}
              </div>
            </div>
          </div>
          <div class="cont-bottom">
            <el-row class="bottom-min">
              <el-col
                :span="21"
                style="padding-bottom: 30px;"
              >
               
                <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">{{ currentLang==='en'?(chartInfo.ChartNameEn||chartInfo.ChartName):chartInfo.ChartName }}</h2>
                    <Chart :options="options" ref="chartRef" />

                    <div class="range-cont left" v-if="leftIndex != -1">
                      <el-input
                        style="width: 60px; display: block"
                        size="mini"
                        type="number"
                        placeholder="上限"
                        v-model="tableData[leftIndex].MaxData"
                      />
                      <el-input
                        class="min-data-input"
                        size="mini"
                        type="number"
                        placeholder="下限"
                        v-model="tableData[leftIndex].MinData"
                      />
                    </div>
                    <div 
                      class="range-cont right" 
                      v-if="rightIndex != -1"
                    >
                      <el-input
                        style="width: 60px; display: block"
                        size="mini"
                        type="number"
                        placeholder="上限"
                        v-model="tableData[rightIndex].MaxData"
                      />
                      <el-input
                        class="min-data-input"
                        size="mini"
                        type="number"
                        placeholder="下限"
                        v-model="tableData[rightIndex].MinData"
                      />
                    </div>

                    <!-- 右2上下限设置 -->
                    <div class="range-cont rightTwo" v-if="rightTwoIndex != -1">
                      <el-input
                        style="width: 60px; display: block"
                        size="mini"
                        type="number"
                        placeholder="上限"
                        v-model="tableData[rightTwoIndex].MaxData"
                      />
                      <el-input
                        class="min-data-input"
                        size="mini"
                        type="number"
                        placeholder="下限"
                        v-model="tableData[rightTwoIndex].MinData"
                      />
                    </div>

                    <!-- 后续新图专用上下限 和其他数据依赖不公用 柱形图 截面散点-->
                    <template v-if="[7,10].includes(chartInfo.ChartType)">	
                      <div class="range-cont left">
                        <el-input
                          style="width: 60px; display: block"
                          size="mini"
                          type="number"
                          placeholder="上限"
                          v-model="chartLimit.max"
                          @change="changeLimit"
                        />
                        <el-input
                          class="min-data-input"
                          size="mini"
                          type="number"
                          placeholder="下限"
                          v-model="chartLimit.min"
                          @change="changeLimit"
                        />
                      </div>
                      <!-- x轴上下限 -->
                      <div class="range-cont bottom" v-if="chartLimit.x_min||chartLimit.x_max">
                        <el-input
                          class="left"
                          size="mini"
                          type="number"
                          placeholder="下限"
                          v-model="chartLimit.x_min"
                          @change="changeLimit"
                        />
                        <el-input
                          class="left"
                          size="mini"
                          type="number"
                          placeholder="上限"
                          v-model="chartLimit.x_max"
                          @change="changeLimit"
                        />
                      </div>
                    </template>
                  </div>
                  <span class="chart-author"
                    >作者:{{ chartInfo.SysUserRealName || '' }}</span
                  >

                  <!-- 公历农历切换 只用于季节性图 -->
                  <el-radio-group
                    v-model="calendar_type"
                    class="calendar-cont"
                    v-if="chartInfo.ChartType === 2"
                    @change="getPreviewChartInfo"
                  >
                    <el-radio-button label="公历" />
                    <el-radio-button label="农历" />
                  </el-radio-group>
                </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;">
                <ul class="right-actions">
                    <li>操作</li>
                    <li
                      v-permission="permissionBtn.chartLibPermission.chartLib_share"
                      class="span-item shareLink"
                      @click="copyChartConfirm('url')"
                      :data-clipboard-text="linkUrl"
                      v-if="!chartInfo.Disabled"
                    >
                      <i class="el-icon-share"/>&nbsp;分享
                    </li>
                    <li
                      v-permission="permissionBtn.chartLibPermission.chartLib_addMy"
                      class="span-item"
                      @click="addMychartHandle(chartInfo)"
                    >
                      <img
                        :src="$icons.chart_join_ico"
                        alt=""
                        style="width: 13px; height: 12px; vertical-align: middle"
                      />加入我的图库
                    </li>
                    <li v-permission="permissionBtn.chartLibPermission.chartLib_refresh"
                        class="span-item" @click="refreshHandle">
                      <span><i class="el-icon-refresh" style="margin-left:0"/>&nbsp;刷新 </span>
                    </li>
                    <li v-permission="permissionBtn.chartLibPermission.chartLib_save"
                      class="span-item"
                    >
                      <span @click="saveChartHandle('')">
                        <i class="el-icon-collection" />&nbsp;保存
                      </span>
                    </li>
                    <li v-permission="permissionBtn.chartLibPermission.chartLib_otherSave"
                      class="span-item"
                    >
                      <span @click="saveChartOtherHandle">
                        <i class="el-icon-document-add" />&nbsp;另存为
                      </span>
                    </li>
                    <li v-permission="permissionBtn.chartLibPermission.chartLib_edit"
                      class="span-item"
                      v-if="chartInfo.IsEdit"
                      @click="editChartHandle"
                    >
                      <img
                        src="~@/assets/img/set_m/edit.png"
                        alt=""
                        style="width: 13px; height: 12px;"
                      />&nbsp;编辑
                    </li>
                    <li v-permission="permissionBtn.chartLibPermission.chartLib_copyOffice"
                      class="span-item copy"
                      @click="copyChartConfirm('office')"
                      v-if="!chartInfo.Disabled"
                    >
                      <i class="el-icon-document-copy" />&nbsp;复制至office
                    </li>
                    <li v-permission="permissionBtn.chartLibPermission.chartLib_copyWechat"
                      class="span-item copy"
                      @click="copyChartConfirm('微信')"
                      v-if="!chartInfo.Disabled"
                    >
                      <img style="width: 13px; height: 12px;vertical-align: middle" src="~@/assets/img/chart_m/WeChat.jpg" />&nbsp;复制至微信
                    </li>
                    <li v-permission="permissionBtn.chartLibPermission.chartLib_enNameSetting"
                      class="span-item copy"
                      @click="openEnNameDia"
                    >
                      <img style="width: 16px;vertical-align: middle" :src="$icons.to_en" />&nbsp;设置英文名称
                    </li>
                    <li v-permission="permissionBtn.chartLibPermission.chartLib_del"
                      class="span-item"
                      style="color: #ff4040"
                      @click="delChartHandle"
                      v-if="chartInfo.IsEdit"
                    >
                      <i class="el-icon-delete" style="color: #ff4040" />&nbsp;删除
                    </li>
                </ul>
              </el-col>
            </el-row>
            <el-table
              :data="tableData"
              ref="tableRef"
              highlight-current-row
              border
            >
              <el-table-column
                v-for="item in tableColums"
                :key="item.label"
                :label="item.label"
                :width="item.widthsty"
                :min-width="item.minwidthsty"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="item.key==='SourceName'">
                    {{scope.row[item.key]}}
                    <i 
                      class="el-icon-tickets" 
                      style="color:#409EFF;font-size:18px" 
                      @click="isLookHistory=true;lookEdbId=scope.row.EdbInfoId"
                      v-if="scope.row.EdbType===2"
                    />
                  </span>
                  <span v-else>{{ currentLang==='en' ? (scope.row[item.enKey]||scope.row[item.key]) : scope.row[item.key] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                key="Copy"
                align="center"
                width="110"
              >
                <template slot-scope="scope">
                  <span v-permission="permissionBtn.chartLibPermission.chartLib_copyData"
                    class="editsty" @click="copyCode(scope.row)">
                    <i class="el-icon-document-copy" />&nbsp;复制数据</span
                  >
                  <span v-permission="permissionBtn.chartLibPermission.chartLib_viewData"
                    class="editsty"
                    @click="viewTarget(scope.row)"
                  >查看数据</span>
                </template>
              </el-table-column>
              <div slot="empty">
                <tableNoData text="暂无指标" size="mini"/>
              </div>
            </el-table>
          </div>
        </div>
        <!-- ==============图表列表展示============= -->
        <div class="chart-public-cont" v-else>
          <span>共{{ public_total }}张图表</span>
          <div
            class="chart-public-list"
            ref="listChartPage"
            @scroll="loadMorePublicChart"
          >
            <el-col
              :span="6"
              style="margin-bottom: 20px; padding-right: 20px"
              v-for="chart in chartPublicList"
              :key="chart.ChartInfoId"
            >
              <el-card class="public-chart-item">
                <div slot="header" class="item-top" style="position: relative;">
                  <div class="chartEn-mark" v-show="chart.IsEnChart" style="top: -10px;left:-10px;">En</div>
                  <span class="text_oneLine" :style="{'padding-left':chart.IsEnChart?'24px':''}">{{ currentLang === 'en' ? (chart.ChartNameEn||chart.ChartName) : chart.ChartName }}</span>
                </div>
                <img
                  :src="chart.ChartImage"
                  alt=""
                  class="chart-img"
                  @click="detailShowHandle(chart)"
                />
                <div class="item-bottom">
                  <span>创建时间: {{ chart.CreateTime.slice(0,10) }}</span>
                  <span v-permission="permissionBtn.chartLibPermission.chartLib_addMy"
                    class="join_txt"
                    @click="addMychartHandle(chart)"
                  >
                    <img
                      :src="$icons.chart_join_ico"
                      alt=""
                      style="width: 13px; height: 12px; vertical-align: middle"
                    />
                    加入我的图库
                  </span>
                </div>
              </el-card>
            </el-col>
          </div>
          <div v-if="!public_total" class="nodata">
            <tableNoData text="暂无图表"/>
          </div>
        </div>
      </div>
      <img :src="drawImg" alt="" class="drawImg" />
      </div>
      </div>
    <!-- 目录弹窗 -->
    <chartDialog
      :isOpenDialog="isOpenDialog"
      :title="dialog_title"
      :formData="dialogForm"
      @closeDia="isOpenDialog = false"
      @sucessCallback="sucessCallback"
    />
    <!-- 日期端选择弹窗 -->
    <DateChooseDia
      :isDateDia="isDateDia"
      :dateForm="dateForm"
      :earliestDate="earliestDate"
      @cancel="isDateDia = false"
      @dateBack="dataChangeBack"
    />
    <!-- 加入我的图库弹窗 -->
    <addMyClassifyDia
      :isAddMyDialog="isAddMyChart"
      :add_id="add_chart_id"
      :add_ids="add_ids"
      @cancel="isAddMyChart = false"
      @addSuccess="addMySuccess"
    />

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

    <!-- 输入英文指标弹窗 -->
		<set-en-name-dia 
      :isOpenDialog="setEnName" 
      @cancel="setEnName=false" 
      @updateEnName="updateEnName" 
      :formData="formItemArray"
      :chartType="chartInfo.ChartType"
      :datainfo="chartInfo.ChartType===10?JSON.parse(chartInfo.ExtraConfig):null"
      :edblist="chartInfo.ChartType===10?tableData:[]"
    />

    <!-- 指标历史记录 -->
    <edbHistoryDialog
      :isOpenDialog.sync="isLookHistory"
      :edbId="lookEdbId"
    />
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import { dataBaseInterface, mychartInterface } from '@/api/api.js';
import {
  copyOtherOptions
} from '@/utils/defaultOptions';
import { chartSetMixin } from './mixins/chartPublic'

import mPage from '@/components/mPage';
import Chart from './components/chart';
import chartDialog from './components/chartDialog';
import DateChooseDia from './components/DateChooseDia';
import addMyClassifyDia from './components/addMyClassifyDia';
import SaveChartOther from './components/SaveChartOther';
import changeLang from "./components/changeLang.vue"
import setEnNameDia from "./components/setEnNameDia.vue"
import EdbLabelList from '../../components/edbLabelList.vue';
export default {
  name: '',
  components: {
    mPage,
    chartDialog,
    Chart,
    DateChooseDia,
    addMyClassifyDia,
    SaveChartOther,
    changeLang,
    setEnNameDia,
    EdbLabelList
  },
  directives: {
    drag(el, bindings) {
      el.onmousedown = function (e) {
        var init = e.clientX;
        // console.log(init);
        var box = $('#box')[0];
        // console.log(box.clientWidth)
        let total_wid = box.offsetWidth;
        var left = $('#left')[0];
        var right = $('#right')[0];
        var initWidth = left.offsetWidth;
        document.onmousemove = function (e) {
          var end = e.clientX;
          var newWidth = end - init + initWidth;
          left.style.width = newWidth + 'px';
          right.style.width = newWidth > 300 ? total_wid - newWidth + 'px' : total_wid - 320 + 'px';
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
          e.releaseCapture && e.releaseCapture();
        };
        e.setCapture && e.setCapture();
        return false;
      };
    },
  },
  mixins: [chartSetMixin],
  data() {
    return {
      showData: false,
      treeData: [], //树数据
      defaultShowNodes: [], //展开节点
      defaultProp: {
        label: 'ChartClassifyName',
        children: 'Children',
        isLeaf:'isLeaf'
      }, //树结构配置项
      loading: null,
      selected_chartid: '', //当前选中的图表id
      selected_chartClassify: '', //当前选中的图表所属分类
      new_label: '', //新的节点label值
      select_node: '', //当前选中的节点
      /* 右侧 */
      chartInfo: {}, //图表信息
      search_txt: '', //搜索词
      searchOptions: [], //搜索到的图表列表
      
      expandKey: [], //展开数组
      /* 新增编辑目录弹窗 */
      isOpenDialog: false,
      dialog_title: '',
      dialogForm: {
        level: '',
      },
      drawImg: '',
      dynamicWidth: '',

      /* 季节性图 */
      season_year: '', //显示的年份
      selected_chartType: '', //选择的图表类型 获取图表信息时用
      calendar_type: '公历',
      isSlideLeft: false,
      dynamicNode: null, //当前选中的node对象 用于拖动宽度时动态改变label宽度
      /* 公共图库列表展示 */
      isShowPublicChart: false,
      publicHaveMove: true, // 是否还有下一页
      default_classify: '',
      public_page_no: 1,
      public_page_size: 12,
      public_total: 0,
      chartPublicList: [],
      isAddMyChart: false, //加入图库弹窗
      add_chart_id: 0, //要加入的图表

      /* 左侧更改目录和坐标轴切换 */
      leftShowLabel: '目录',

      add_ids:[],//加入时已有的分类
      // 只看我的？
      isOnlyMe:false,

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

      /* 查看历史弹窗 */
			isLookHistory: false,
			lookEdbId: 0,
      labelList:[],//标签列表

      CanOpClassify: false,//添加分类按钮控制
    };
  },
  watch: {
    /* 设置动态右侧区域宽度 */
    isSlideLeft(newval) {
      if (!newval) {
        this.$nextTick(() => {
          this.reloadRightWid();
        });
      }
    },
    // 公用图库关联分类
    default_classify(newval) {
      //重置滚动高度 防止触底加载
      if(this.$refs.listChartPage) this.$refs.listChartPage.scrollTop = 0;
      if (newval) {
        this.public_page_no = 1;
        this.getPublicChartList();
      }
    },
    selected_chartid(newval) {
      if (!newval) {

        this.year_select = this.yearSelector[0].value;
        this.calendar_type = '公历';
        this.season_year = '';
        this.tableData = [];
        this.chartInfo = {};
      } else {
        sessionStorage.removeItem('beforeOptions');
        
        newval && this.getChartDetail();
        this.formItemArray=[]
      }
    },
    /* 选中搜索图表 展开目录 选中图表 展示图表 */
    search_txt(newval) {
      if (newval) {
        let [search_obj] = this.searchOptions.filter(
          (item) => item.ChartInfoId === newval
        );
        // 查找图表的父级id
        let arr = this.findParentNodeHandle(this.treeData,search_obj.ChartClassifyId);
        this.defaultShowNodes = arr;
        this.select_node = search_obj.UniqueCode;
      
        this.selected_chartClassify = search_obj.ChartClassifyId; //图表所属分类
        this.year_select = search_obj.DateType; //年份选择
        this.calendar_type = search_obj.Calendar || '公历'; //公历/农历
        this.season_year = [
          search_obj.SeasonStartDate,
          search_obj.SeasonEndDate,
        ]; //季节年份区间
        this.select_date = [search_obj.StartDate, search_obj.EndDate];
        this.selected_chartType = search_obj.ChartType; //图表类型
        this.selected_chartid = newval;

         //滚动到高亮节点位置
        setTimeout(() => {
          this.$refs.treeRef.setCurrentKey(this.select_node);
          let node = document.getElementById(`node${this.select_node}`);
          let parent = document.getElementsByClassName('tree-cont')[0];

          if(node.offsetTop > parent.offsetHeight) {
            parent.scrollTop =  node.offsetTop - parent.offsetHeight/2
          }
        },400)
      }
    },

		tableData: {
      handler(newval, oldval) {
        newval.length && !this.chartInfo.WarnMsg && this.setChartOptionHandle(newval);
      },
      deep: true,
    },
  },
  computed: {
    role() {
      let role = localStorage.getItem('Role') || '';
      if (['rai_researcher', 'ficc_researcher', 'researcher','ficc_seller','rai_seller','seller'].includes(role)) {
        return 'researcher';
      } else if (['rai_admin', 'ficc_admin'].includes(role)) {
        return 'admin';
      } else {
        return role;
      }
    },
    /* 登录角色id */
    roleId() {
      let id = parseInt(localStorage.getItem('AdminId'));
      return id;
    },
    //登录角色姓名
    roleName() {
      let name = localStorage.getItem('userName') || '';
      return name;
    },
    //禁用条件
    isDisabled() {
      if (
        this.selected_chartid &&
        this.role !== 'admin' &&
        this.chartInfo.SysUserId !== this.roleId
      ) {
        return true;
      } else {
        return false;
      }
    },
    /* 分享地址 */
    linkUrl() {
      const LINK_CHART_URL = this.$setting.dynamicOutLinks.ChartViewUrl+'/chartshow';
      return `${LINK_CHART_URL}?code=${this.chartInfo.UniqueCode}&fromType=share&lang=${this.currentLang}`
    }
  },
  methods: {
    getTreeData(params) {
      // dataBaseInterface.chartTree({IsShowMe:this.isOnlyMe}).then((res) => {
      dataBaseInterface.chartClassify({IsShowMe:this.isOnlyMe}).then((res) => {
        if (res.Ret === 200) {
          this.showData = true;
          this.currentLang = res.Data.Language === 'EN' ? 'en' : 'ch';
					this.setLangIntoStore();

          const arr=res.Data.AllNodes || [];
          this.treeData = arr.map(item=>{
						return {
							...item,
							isLeaf:item.Children.length?false:true
						}
					})

          this.CanOpClassify = res.Data.CanOpClassify;

          this.$nextTick(() => {
            /* 新增完成后 处理树展开和选中图表 */
            params && this.selectCurrentNode(params);
          });
        }
      });
    },
    /* 节点变化时 */
    nodeChange(data, node) {
      this.search_txt = '';
      this.dynamicNode = node;
      sessionStorage.removeItem('beforeOptions');
      //详情时判断是否是本人添加图表 若不是不用做保存校验 新增时要进入保存校验逻辑
      if (
        (this.selected_chartid &&
          (this.role === 'admin' ||
            this.chartInfo.SysUserId === this.roleId)) ||
        !this.chartInfo.SysUserId
      ) {
        let arr = sessionStorage.getItem('defaultArr');
        if (
          arr &&
          this.selected_chartid &&
          arr !== JSON.stringify(this.tableData)
        ) {
          this.$confirm('您还未保存此图表，是否确认保存？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            showClose: false,
            closeOnClickModal: false,
          })
            .then(() => {
              this.saveChartHandle('');
            })
            .catch(() => {
              this.select_node = data.UniqueCode;
              this.selected_chartid = data.ChartInfoId;
              this.selected_chartType = data.ChartType;
              this.selected_chartClassify = data.ChartInfoId
                ? data.ChartClassifyId
                : '';
              this.calendar_type = data.ChartInfoId ? data.Calendar : '公历'; //公历/农历
              this.season_year = data.ChartInfoId
                ? [data.SeasonStartDate, data.SeasonEndDate]
                : ''; //季节年份区间
              this.year_select = data.ChartInfoId ? data.DateType : this.yearSelector[0].value; //图表年份选择
              this.select_date =
                this.year_select === 5 || this.year_select === 6
                  ? [data.StartDate, data.EndDate]
                  : '';
              this.resetNodeStyle(node);
              this.tableData =
                !this.selected_chartClassify && this.tableData.length
                  ? []
                  : this.tableData;
            });
          return;
        }
      }
      this.select_node = data.UniqueCode;
      this.selected_chartid = data.ChartInfoId;
      this.selected_chartType = data.ChartType;
      this.selected_chartClassify = data.ChartInfoId
        ? data.ChartClassifyId
        : '';
      this.calendar_type = data.ChartInfoId ? data.Calendar : '公历'; //公历/农历
      this.season_year = data.ChartInfoId
        ? [data.SeasonStartDate, data.SeasonEndDate]
        : ''; //季节年份区间
      this.year_select = data.ChartInfoId ? data.DateType : this.yearSelector[0].value; //图表年份选择
      this.select_date =
        this.year_select === 5 || this.year_select === 6
          ? [data.StartDate, data.EndDate]
          : '';
      this.resetNodeStyle(node);
      this.tableData =
        !this.selected_chartClassify && this.tableData.length
          ? []
          : this.tableData;

      //公用图库关联分类
      this.default_classify = !data.ChartInfoId ? data.ChartClassifyId : '';
    },
    resetNodeStyle: _.debounce(function (node) {
      const tree = $('.target_tree')[0];
      let width = tree.offsetWidth;
      let label_wid = width > 500 ? 'auto' : width <= 250 ? 80 : 0.4 * width;
      this.$set(node, 'Nodewidth', label_wid + 'px');
    }, 300),
    /* 双击label出现input修改框 */
    editNodeLabel(node, data) {
      //目录名称可以双击修改 指标不能
      if (!data.ChartInfoId && data.Button.OpButton) {
        this.$set(data, 'isEdit', true);
        this.new_label = data.ChartClassifyName;
        this.$nextTick(() => {
          this.$refs.editVal.focus();
        });
      }
    },
    /* input失去焦点恢复node 修改最新的值*/
    changeValue(node, data) {
      if (this.new_label) {
        this.$set(data, 'isEdit', false);
        this.new_label !== data.ChartClassifyName &&
          dataBaseInterface
            .editChartClassify({
              ChartClassifyId: data.ChartClassifyId,
              ChartClassifyName: this.new_label,
            })
            .then((res) => {
              if (res.Ret === 200) {
                this.getTreeData();
              }
            });
      } else {
        this.$message.warning('名称不能为空');
      }
    },
    // 只看我的 复选框改变事件
    onlyMeHandler(){
      this.getTreeData();
      this.getPublicChartList()
    },
    /* 添加一级目录 */
    addLevelOneHandle() {
      this.dialog_title = '添加';
      this.dialogForm = {
        level_1: '',
        parent_id: '',
        level: 0,
      };
      this.isOpenDialog = true;
    },
    /* 添加节点 */
    addNode(node, data) {
      this.dialog_title = '添加';
      /* 添加目录 */
      this.dialogForm = {
        level_1:
          node.level === 1
            ? data.ChartClassifyName
            : node.level === 2
            ? node.parent.data.ChartClassifyName
            : node.parent.parent.data.ChartClassifyName,
        level_2:
          node.level === 1
            ? ''
            : node.level === 2
            ? data.ChartClassifyName
            : node.parent.data.ChartClassifyName,
        // level_3: node.level === 3 ? data.ChartClassifyName : '',
        parent_id: data.ChartClassifyId,
        level: node.level,
      };
      this.isOpenDialog = true;
      //存储当前要新增子级的目录code
      sessionStorage.setItem('expandCode', data.UniqueCode);
    },
    /* 编辑节点 */
    editNode(node, data) {

      this.dialog_title = '编辑';
      /* 编辑目录 */
      this.dialogForm = {
        level_1:
          node.level === 1
            ? data.ChartClassifyName
            : node.level === 2
            ? node.parent.data.ChartClassifyName
            : node.parent.parent.data.ChartClassifyName,
        level_2:
          node.level === 1
            ? ''
            : node.level === 2
            ? data.ChartClassifyName
            : node.parent.data.ChartClassifyName,
        level_3: node.level === 3 ? data.ChartClassifyName : '',
        classify_id: data.ChartClassifyId,
        level: node.level,
      };
      this.isOpenDialog = true;
    },
    /* 删除节点校验 */
    removeNode(node, data) {
      dataBaseInterface
        .delChartCheck({
          ChartClassifyId: data.ChartClassifyId,
          ChartInfoId: data.ChartInfoId,
        })
        .then((res) => {
          if (res.Ret === 200) {
            /**
             * 0 可删除
             * 1 关联图表一
             * 2 有子目录无图表
             */
            const deleteLabelMap = {
              1: '该分类下关联图表不可删除',
              2: '确认删除当前分类及包含的子分类吗？',
              4: res.Data.TipsMsg
            }

            if([1,4].includes(res.Data.DeleteStatus)) this.$confirm(
                deleteLabelMap[res.Data.DeleteStatus],
                '删除失败',
                {
                confirmButtonText: '知道了',
                showCancelButton:false,
                type: 'error'
              })
            else if([0,2].includes(res.Data.DeleteStatus)) this.$confirm(
                res.Data.DeleteStatus === 2 
                ? deleteLabelMap[res.Data.DeleteStatus]
                : data.ChartInfoId?'删除后该图表将不能再引用，确认删除吗？':'确定删除当前分类吗?', 
                '提示',
                {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                res.Data.DeleteStatus === 0 && data.ChartInfoId 
                ? this.delHandle(data.ChartClassifyId, data.ChartInfoId, 1)
                : this.delHandle(data.ChartClassifyId, data.ChartInfoId);
              }).catch(() => {         
              });
          }
        });
    },
    /* 删除方法 */
    delHandle(ChartClassifyId, ChartInfoId, type) {
      dataBaseInterface
        .delChartClassify({
          ChartClassifyId,
          ChartInfoId,
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.$message.success(res.Msg);
            const label = this.labelList.find(i=>i.id===ChartInfoId)
            if (!res.Data.ChartInfoId) this.selected_chartid = '';
            if(type && res.Data.ChartInfoId){
                this.getTreeData({
                  code: res.Data.UniqueCode,
                  id: res.Data.ChartInfoId,
                  type: res.Data.ChartType,
                })
                label&&this.deleteLabel(label,'chart')
            }else{
                this.getTreeData();
                label&&this.deleteLabel(label)
            }
            //如果router.query里的图表被删除,则清掉参数
            if(Number(this.$route.query.id)===ChartInfoId){
                this.$router.replace({path: '/chartsetting'})
            }
          }
        });
    },
    /* 新增/编辑分类成功 */
    sucessCallback(type) {
      this.isOpenDialog = false;
      this.getTreeData();

      if (type === 'add') {
        //新增分类完成之后，展开父节点显示刚新增的分类，若已展开节点则不做处理
        let code = sessionStorage.getItem('expandCode');
        let flag = this.defaultShowNodes.some((item) => {
          return item === code;
        });
        // console.log(flag)
        !flag && code && this.defaultShowNodes.push(code);
        sessionStorage.removeItem('expandCode');
      }
    },
    /* 判断节点是否能被拖拽 */
    canDragHandle(node) {
      let canMove = false;
      if (node.data.Button.MoveButton) {
        canMove = true;
      }
      return canMove;
    },

    /* 判断节点是否能被拖入 4*/
    canDropHandle(draggingNode, dropNode, type) {
      let canDrop = false;
      // 移动的是一级目录
			if(draggingNode.level===1&&dropNode.level===1&&type!=='inner') {
				canDrop=true
			} 

			// 二级目录
			if(draggingNode.level===2){
				if((dropNode.level===1&&type==='inner')||(dropNode.level===2&&type!=='inner')){
					canDrop=true
				}
			}

			//三级目录
			if(draggingNode.level===3){
				if((dropNode.level===2&&type==='inner')||(dropNode.level===3&&type!=='inner')){
					canDrop=true
				}
			}
			//四级指标层
			if(draggingNode.level===4){
				if((dropNode.level===3&&type==='inner')||(dropNode.level===4&&type!=='inner')){
					canDrop=true
				}
			}

      return canDrop;
    },
    /* 拖拽完成 */
    dropOverHandle(b, a, i, e) {
      // console.log(i, a);
      // 被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置
      // 一/二级目录
      if (b.level === 1 || b.level === 2||b.level===3) {
        this.handleMoveCatalogue(b, a, i, e)
      }

      // 指标层
      if (b.level === 4) {
        this.handleMoveChart(b, a, i, e)
      }
    },

    // 移动的为一、二、三级目录
		handleMoveCatalogue(b,a,i,e){
			let list=a.parent.childNodes,targetIndex=0,PrevClassifyId=0,NextClassifyId=0,ParentClassifyId=0;

			list.forEach((item,index)=>{
				if(item.data.ChartClassifyId===b.data.ChartClassifyId){
					targetIndex=index
					return
				}
			})

			if(targetIndex===0){
				PrevClassifyId=0
				NextClassifyId=list[targetIndex+1].data.ChartClassifyId
			}else if(targetIndex===list.length-1){
				PrevClassifyId=list[targetIndex-1].data.ChartClassifyId
				NextClassifyId=0
			}else{
				PrevClassifyId=list[targetIndex-1].data.ChartClassifyId
				NextClassifyId=list[targetIndex+1].data.ChartClassifyId
			}

			if(b.level===2){
				if(i==='inner'){
					ParentClassifyId=a.data.ChartClassifyId
					PrevClassifyId=0
					NextClassifyId=a.data.Children.length>1?a.data.Children[1].ChartClassifyId:0
				}else{
					ParentClassifyId=a.data.ParentId
				}
			}
			if(b.level===3){
				if(i==='inner'){
					ParentClassifyId=a.data.ChartClassifyId
					PrevClassifyId=0
					NextClassifyId=a.data.Children.length>1?a.data.Children[1].ChartClassifyId:0
				}else{
					ParentClassifyId=a.data.ParentId
				}
			}

      dataBaseInterface.chartClassifyMove({
        ClassifyId: b.data.ChartClassifyId,
        ParentClassifyId: ParentClassifyId,
        PrevClassifyId: PrevClassifyId,
        NextClassifyId:NextClassifyId
      }).then((res) => {
        if (res.Ret === 200) {
          this.$message.success('移动成功!');
          this.getTreeData();
        }
      });
		},

		// 移动的为指标层 四级
		handleMoveChart(b,a,i,e){
			let PrevChartInfoId=0,NextChartInfoId=0,targetIndex=0, list=a.parent.childNodes.map(_ => _.data)
			if(i==='inner'){
				PrevChartInfoId=0
				NextChartInfoId=a.data.Children.length>1?a.data.Children[1].ChartInfoId:0
			}else{
				list.forEach((item,index)=>{
					if(item.ChartInfoId===b.data.ChartInfoId){
						targetIndex=index
						return
					}
				})

				if(targetIndex===0){
					PrevChartInfoId=0
					NextChartInfoId=list[targetIndex+1].ChartInfoId
				}else if(targetIndex===list.length-1){
					PrevChartInfoId=list[targetIndex-1].ChartInfoId
					NextChartInfoId=0
				}else{
					PrevChartInfoId=list[targetIndex-1].ChartInfoId
					NextChartInfoId=list[targetIndex+1].ChartInfoId
				}
			}	
			
      dataBaseInterface.chartMove({
        ChartClassifyId: a.data.ChartClassifyId,
        ChartInfoId: b.data.ChartInfoId,
        PrevChartInfoId: PrevChartInfoId,
        NextChartInfoId:NextChartInfoId
      }).then((res) => {
        if (res.Ret === 200) {
          this.$message.success('移动成功!');
        }
        this.getTreeData();
      });
		},

    /* 拖拽覆盖添加背景色 */
    dropMouseOver(node1, node2, e) {
      if (
        ((node1.level === 2 && node2.level === 1) ||
          (node1.level === 3 && node2.level === 2)) &&
        (e.target.childNodes[0].className.includes('el-tree-node__content') ||
          e.target.className.includes('el-tree-node__content'))
      ) {
        // console.log(e.target.childNodes[0])
        e.target.childNodes[0].className.includes('el-tree-node__content')
          ? (e.target.childNodes[0].style.backgroundColor = '#409eff')
          : (e.target.style.backgroundColor = '#409eff');
      }
      // if (
      // 	node2.level === 2 &&
      // 	(e.target.childNodes[0].className.includes(
      // 		'el-tree-node__content'
      // 	) ||
      // 		e.target.className.includes('el-tree-node__content'))
      // ) {
      // 	e.target.childNodes[0].className.includes('el-tree-node__content')
      // 		? (e.target.childNodes[0].style.backgroundColor = '#409eff')
      // 		: (e.target.style.backgroundColor = '#409eff');
      // }
    },
    /* 拖拽离开/拖拽完成重置背景色 */
    dropMouseLeave(node1, node2, e) {
      let arrs = $('.el-tree-node__content');
      for (let a of arrs) {
        a.style.backgroundColor = 'transparent';
      }
    },
    // 树节点展开
    handleNodeExpand(data) {
      // 保存当前展开的节点
      let flag = false;
      this.defaultShowNodes.some((item) => {
        if (item === data.UniqueCode) {
          // 判断当前节点是否存在， 存在不做处理
          flag = true;
          return true;
        }
      });
      if (!flag) {
        // 不存在则存到数组里
        this.defaultShowNodes.push(data.UniqueCode);
      }
    },
    // 树节点关闭
    handleNodeCollapse(data) {
      this.defaultShowNodes.some((item, index) => {
        if (item === data.UniqueCode) {
          // 删除关闭节点
          this.defaultShowNodes.length = index;
        }
      });
      // console.log(this.defaultShowNodes)
    },

    // 懒加载tree
		handleTreeLoad(node,resolve){
			if(node.level===0){
				resolve(this.treeData)
			}
			if(node.level===1){
				let arr=[]
				this.treeData.forEach(item=>{
					if(item.UniqueCode===node.data.UniqueCode){
						arr=item.Children
					}
				})
				resolve(arr)
			}
			if(node.level===2){
				dataBaseInterface.getChartListForClassify({
          ChartClassifyId:node.data.ChartClassifyId,
          IsShowMe:this.isOnlyMe
        }).then(res=>{
					if(res.Ret===200){
						let arr=res.Data.AllNodes||[]
						arr=arr.map(item=>{
							return {
								...item,
								isLeaf:true
							}
						})
						resolve(arr)
					}else{
						resolve([])
					}
                    this.changeTreeNode()
				})
			}
			if(node.level>2){
				resolve([])
			}
		},
		//绑定el-tree的load属性
		getLazyTreeData (node,resolve,maxLevel=3){
			if(node.level===0){
				resolve(this.treeData)
			}
			if(node.level>0&&node.level<=maxLevel){
				//获取对应层级的Child
				resolve(node.data.Children||[])
			}
			if(node.level===maxLevel){
				//调接口获取该分类下图表的数据
				dataBaseInterface.getChartListForClassify({
					ChartClassifyId:node.data.ChartClassifyId,
					IsShowMe:this.isOnlyMe
				}).then(res=>{
					if(res.Ret===200){
						let arr=res.Data.AllNodes||[]
						arr=arr.map(item=>{
							return {
								...item,
								isLeaf:true
							}
						})
						resolve(arr)
					}else{
						resolve([])
					}
					this.changeTreeNode()
				})
			}
			if(node.level>maxLevel){
				resolve([])
			}
		},

    /* 获取图表详情 回显参数 */
    async getChartDetail() {
      const res = await dataBaseInterface.getChartInfoById({
          ChartInfoId: this.selected_chartid
        })
        
      if (res.Ret !== 200) return;
      this.chartInfo = res.Data.ChartInfo;
  
      this.tableData = res.Data.EdbInfoList;
      // 设置起始日期和最新日期
      this.setExtremumDate()

      this.setDefaultDateSelect(); //设置默认的日期选中

      sessionStorage.setItem('defaultArr',JSON.stringify(res.Data.EdbInfoList));

      const chartTypeMap = {
        7: this.initBarData, //柱形图
        10: this.initSectionScatterData //截面散点
      }
      chartTypeMap[this.chartInfo.ChartType] && chartTypeMap[this.chartInfo.ChartType](res.Data);

      //将指标添加进标签列表中
      const {ChartNameEn,ChartName,ChartInfoId,UniqueCode,ChartClassifyId}=res.Data.ChartInfo
      this.addLabel({code:UniqueCode,id:ChartInfoId,classifyId:ChartClassifyId,EdbName:ChartName,EdbNameEn:ChartNameEn,chartData:res.Data.ChartInfo})
      this.defaultShowNodes=this.findParentNodeHandle(this.treeData,ChartClassifyId)
      this.changeTreeNode()
    },

    /* 设置默认时间选中项 */
    setDefaultDateSelect() {
      this.year_select = this.chartInfo.DateType;
      this.select_date = [this.chartInfo.StartDate, this.chartInfo.EndDate];
      this.calendar_type = this.chartInfo.Calendar; //日历类型
      this.season_year = [
        this.chartInfo.SeasonStartDate,
        this.chartInfo.SeasonEndDate,
      ];
      this.dateTip =
        this.chartInfo.DateType === 5
          ? `${this.chartInfo.StartDate}~${this.chartInfo.EndDate}`
          : this.chartInfo.DateType === 6
          ? `${this.chartInfo.StartDate}~至今`
          : '请选择时间段';
    },

    /* 获取图表详情信息  type为refresh刷新指标不存储时间 */
    async getPreviewChartInfo(type) {
      let params = {
        ChartType: this.chartInfo.ChartType,
        DateType: this.year_select,
        StartDate: [5, 6].includes(this.year_select)
          ? this.select_date[0]
          : '',
        EndDate: this.year_select === 5 ? this.select_date[1] : '',
        Calendar: this.calendar_type,
        SeasonStartDate: this.season_year ? this.season_year[0] : '',
        SeasonEndDate: this.season_year ? this.season_year[1] : '',
        ChartEdbInfoList: this.tableData.map(_ => ({
          EdbInfoId: _.EdbInfoId,
          EdbInfoType: _.EdbInfoType,
          LeadValue: _.EdbInfoType ? 0 : Number(_.LeadValue),
          LeadUnit: _.EdbInfoType ? '' : _.LeadUnit,
        }))
      }

      const res = await dataBaseInterface.getSplinePreviewData(params)

      if(res.Ret !== 200) return

      const { EdbInfoList } = res.Data;

      this.tableData.forEach((item) => {
        let edbData = EdbInfoList.find(_ => _.EdbInfoId===item.EdbInfoId);
        item.DataList = edbData.DataList;
        if(edbData.EdbInfoCategoryType===1) item.MoveLatestDate = edbData.MoveLatestDate;
      });



      // // 判断图标类型 设置参数
      // let params =
      //   this.sameOptionType.includes(this.selected_chartType)
      //     ? {
      //         ChartInfoId: this.selected_chartid,
      //         DateType: this.year_select,
      //         StartDate:
      //           this.year_select === 5 || this.year_select === 6
      //             ? this.select_date[0]
      //             : '',
      //         EndDate: this.year_select === 5 ? this.select_date[1] : '',
      //       }
      //     : {
      //         ChartInfoId: this.selected_chartid,
      //         Calendar: this.calendar_type,
      //         SeasonStartDate: this.season_year ? this.season_year[0] : '',
      //         SeasonEndDate: this.season_year ? this.season_year[1] : '',
      //       };
      // dataBaseInterface.chartInfo(params).then((res) => {
      //   if (res.Ret === 200) {
      //     this.chartInfo = res.Data.ChartInfo;
      //     let beforeOptions = sessionStorage.getItem('beforeOptions')
      //       ? JSON.parse(sessionStorage.getItem('beforeOptions'))
      //       : '';
      //     //合并缓存配置和新的数据
      //     let newarr = res.Data.EdbInfoList.map((item, index) => {
      //       if (beforeOptions && type === 'refresh') {
      //         const DataList = item.DataList;
      //         return {
      //           ...beforeOptions[index],
      //           DataList,
      //         };
      //       } else {
      //         return item;
      //       }
      //     });
      //     this.tableData = newarr;
      //     //  刷新最新的指标数据 防止领先配置已保存 指标数据确实原数据的情况 针对正常图
      //     if (
      //       type === 'refresh' &&
      //       beforeOptions &&
      //       (this.sameOptionType.includes(this.chartInfo.ChartType) && this.chartInfo.ChartType!==5)
      //     )
      //       this.refreshTarget();
      //     sessionStorage.setItem(
      //       'defaultArr',
      //       JSON.stringify(res.Data.EdbInfoList)
      //     );
      //     if (!type) {
      //       this.year_select = this.chartInfo.DateType;
      //       this.select_date = [
      //         this.chartInfo.StartDate,
      //         this.chartInfo.EndDate,
      //       ];
      //       this.calendar_type = this.chartInfo.Calendar; //日历类型
      //       // this.season_year = [ this.chartInfo.SeasonStartDate, this.chartInfo.SeasonEndDate ];
      //       this.dateTip =
      //         this.chartInfo.DateType === 5
      //           ? `${this.chartInfo.StartDate}~${this.chartInfo.EndDate}`
      //           : this.chartInfo.DateType === 6
      //           ? `${this.chartInfo.StartDate}~至今`
      //           : '请选择时间段';

      //       //新图表类型 依赖数据不同单独init 数据
      //       const typeInitMap = {
      //         7: this.initBarData,
      //         10: this.initSectionScatterData
      //       }
      //       typeInitMap[this.chartInfo.ChartType] && typeInitMap[this.chartInfo.ChartType](res.Data);
            
      //     }
      //     //将指标添加进标签列表中
      //       const {ChartNameEn,ChartName,ChartInfoId,UniqueCode,ChartClassifyId}=res.Data.ChartInfo
      //       this.addLabel({code:UniqueCode,id:ChartInfoId,classifyId:ChartClassifyId,EdbName:ChartName,EdbNameEn:ChartNameEn,chartData:res.Data.ChartInfo})
      //       this.defaultShowNodes=this.findParentNodeHandle(this.treeData,ChartClassifyId)
      //       this.changeTreeNode()
      //   }
        
      // });
    },

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

		searchApi(query,page=1) {
      /* 查找列表 */
      dataBaseInterface
        .chartSearchByEs({
          Keyword: query,
          IsShowMe:this.isOnlyMe,
          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);
		},

    /* 保存当前图表配置 */
    saveChartHandle: _.debounce(function () {
      if (this.selected_chartid) {
        //遍历每条线的指标配置
        let arr = this.tableData.map((item) => {
          return {
            ChartColor: item.ChartColor,
            PredictChartColor: item.PredictChartColor,
            ChartStyle: item.ChartStyle,
            ChartWidth: Number(item.ChartWidth),
            EdbInfoId: item.EdbInfoId,
            EdbInfoType: item.EdbInfoType,
            IsAxis: item.IsAxis,
            IsOrder: item.IsOrder,
            LeadUnit: item.EdbInfoType ? '' : item.LeadUnit,
            LeadValue: item.EdbInfoType ? 0 : Number(item.LeadValue),
            MaxData: Number(item.MaxData),
            MinData: Number(item.MinData),
          };
        });

        let public_param = {
          ChartClassifyId: this.selected_chartClassify,
          ChartInfoId: this.selected_chartid || 0,
          ChartEdbInfoList: arr,
        }

        let typeChartParam = {};
        switch(this.chartInfo.ChartType) {
          case 2:
            typeChartParam = {
              ...public_param,
              Calendar: this.calendar_type,
              SeasonStartDate: this.season_year ? this.season_year[0] : '',
              SeasonEndDate: this.season_year ? this.season_year[1] : '',
            }
            break
          case 7:
            typeChartParam = {
               ...public_param,
              DateType: 6,
              LeftMin: String(this.chartLimit.min),
              LeftMax: String(this.chartLimit.max),
            }
          case 10: 
            typeChartParam = {
              ...public_param,
              DateType: 6,
              Calendar: "公历",
              ExtraConfig: JSON.stringify({
                ...JSON.parse(this.chartInfo.ExtraConfig),
                XMinValue: String(this.chartLimit.x_min),
                XMaxValue: String(this.chartLimit.x_max),
                YMinValue: String(this.chartLimit.min),
                YMaxValue: String(this.chartLimit.max),
              })
            } 
        }

        let params = this.sameOptionType.includes(this.selected_chartType)
          ? {
              ...public_param,
              DateType: this.year_select,
              StartDate:
                this.year_select === 5 || this.year_select === 6
                  ? this.select_date[0]
                  : '',
              EndDate: this.year_select === 5 ? this.select_date[1] : '',
            }
          : typeChartParam;

        dataBaseInterface.chartSave(params).then((res) => {
          if (res.Ret === 200) {
            this.$message.success('保存成功');
            sessionStorage.removeItem('beforeOptions');
            sessionStorage.setItem(
              'defaultArr',
              JSON.stringify(this.tableData)
            );
            this.getTreeData();
            //关联图表和图片
            this.setChartImage();
          }
        });
      }
    }, 500),
    // 英文面板时候的判断
    copyChartConfirm(type){
        if(this.currentLang=='en'){
          // 是否所有数据都填写完
          let flag=true
          // 是否有英文表格名称
          if(!this.chartInfo.ChartNameEn) flag = false
          if(flag){
            for (const data of this.tableData) {
              // 单位中文名为空时 英文名不做判断
              if(data.EdbNameEn=="" || (data.UnitEn=="" && data.Unit!="")){
                flag = false
                break
              }
            }
          }
          if(!flag){
            this.$confirm('英文名称未输入完整，分享图表上可能出现空名称的情况，确定继续分享吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
            .then(() => {
              if(type==='url'){
                // this.shareUrl()
                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('复制链接成功')
              }else{
                this.copyChartHandle(type)
              }
            })
            .catch(() => {});
          }else{
            if(type=='url'){
              this.shareUrl()
            }else{
              this.copyChartHandle(type)
            }
          }
        }else{
          if(type=='url'){
            this.shareUrl()
          }else{
            this.copyChartHandle(type)
          }
        }
    },
    /* 点击复制先用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.chartInfo.Source === 1?this.tableData.length:this.commodityChartData.length)
      const chartType = this.sameOptionType.includes(this.chartInfo.ChartType)?'legend':'seasonLegend'
      // 英文转SVG设置变动
      if(this.currentLang == 'en'){
        // 散点图 如果横轴单位为'英文单位'，表示客户没填，转成svg时置为空
        if(this.chartInfo.ChartType == 5){
          this.$refs.chartRef.chart.options.xAxis.forEach(it => {
            if(it.title.text == '英文单位') it.title.text='' 
          });
        }
        // 如果竖轴坐标单位为'英文单位'，表示客户没填，转成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) ,
    // 选择
    getSelect(targetNode) {
      if (window.getSelection) {
        //chrome等主流浏览器
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNode(targetNode);
        selection.removeAllRanges();
        selection.addRange(range);
      } else if (document.body.createTextRange) {
        //ie
        var range = document.body.createTextRange();
        range.moveToElementText(targetNode);
        range.select();
      }
    },
    /* 点击删除图表 */
    delChartHandle() {
      this.$confirm('删除后该图表将不能再引用，确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delHandle(
            this.selected_chartClassify || 0,
            this.selected_chartid,
            1
          );
        })
        .catch(() => {});
    },
    /* 图表未保存时更新图表数据 */
    refreshTarget() {
      for (let i in this.tableData) {
        let params = {
          EdbInfoId: this.tableData[i].EdbInfoId,
          DateType: this.year_select,
          StartDate:
            this.year_select === 5 || this.year_select === 6
              ? this.select_date[0]
              : '',
          EndDate: this.year_select === 5 ? this.select_date[1] : '',
          EdbInfoType: this.tableData[i].EdbInfoType,
          LeadValue: this.tableData[i].EdbInfoType
            ? 0
            : this.tableData[i].LeadValue,
          LeadUnit: this.tableData[i].EdbInfoType
            ? ''
            : this.tableData[i].LeadUnit,
        };
        dataBaseInterface.edbinfoDetail(params).then((res) => {
          if (res.Ret === 200) {
            let newData = res.Data.EdbInfo;
            this.tableData[i].DataList = newData.DataList;
            if(newData.EdbInfoCategoryType===1) this.tableData[i].MoveLatestDate = newData.MoveLatestDate;
          }
        });
      }
    },
    /* 年份改变 重新刷新图表接口  保存当前的图表配置和上下限 只改变图表 */
    changeYear(item) {
      this.year_select = item.value;
      this.select_date = '';
      this.dateTip = '请选择时间段';
      //保存表格配置和上下限 曲线图需要保存表格配置 季节图就不用了
      this.saveNowOptions();
      // 图表已存在
      this.selected_chartid && this.getPreviewChartInfo();
    },
    /* 打开时间段弹窗 */
    openDateDia() {
      // 自定义时间段回显
      this.dateForm = {
        date_type: this.year_select,
        start_date:
          this.year_select === 5 || this.year_select === 6
            ? this.select_date[0]
            : '',
        end_date: this.year_select === 5 ? this.select_date[1] : '',
        count_year: this.year_select === 100 ? this.count_year : ''
      };
      this.isDateDia = true;
    },
    /* 保存完自定义日期 刷新数据  保存当前的图表配置和上下限 只改变图表*/
    dataChangeBack(data) {
      // console.log(data,'timeData');
      this.year_select = data.dateType;
      this.isDateDia = false;
      this.select_date = [data.start_date, data.end_date];
      this.count_year = data.count_year
      if(chartInfo.ChartType === 2){
        // 季节性图
        this.season_year[0]
      }else{
        if(data.dateType==100){
          this.dateTip = `最近${data.count_year}年`
        }else if (data.dateType === 5) {
          this.dateTip = `${data.start_date}~${data.end_date}`;
        } else {
          this.dateTip = `${data.start_date}~至今`;
        }
      }

      // this.saveNowOptions();
      // this.getPreviewChartInfo();
    },

    /* 编辑图表 跳转 */
    editChartHandle() {
      this.$router.push({
        path: '/editchart',
        query: {
          code: this.chartInfo.UniqueCode
        }
      })
    },
    
    /* 根据unicode展开树结构并选中当前图表 重置图表配置 日期区间 */
    // 如果有chartData则说明是从图列表点击来的，如果没有 则说明是路由中带的参数此时要获取一下详情
    async selectCurrentNode({ code, id, type,chartData }) {
      let deep_arr = _.cloneDeep(this.treeData);
      // 查找选中的节点信息
      let select_obj = chartData?chartData:await this.findNode(deep_arr, id);
      // 查找图表的分类父级id
      let arr = this.findParentNodeHandle(this.treeData,select_obj.ChartClassifyId); // 父的父的父-父的父-父
      this.defaultShowNodes = arr;
      this.select_node = code;
      
      // 重置筛选状态
      this.selected_chartClassify = select_obj.ChartClassifyId; //图表所属分类
      this.year_select = select_obj.DateType; //年份选择
      this.calendar_type = select_obj.Calendar || '公历'; //公历/农历
      this.season_year = [select_obj.SeasonStartDate, select_obj.SeasonEndDate]; //季节年份区间
      this.select_date = [select_obj.StartDate, select_obj.EndDate]; //曲线日期选择
      this.selected_chartType = select_obj.ChartType;
      this.selected_chartid = id;

      //滚动到高亮节点位置
			setTimeout(() => {
        this.$refs.treeRef.setCurrentKey(this.select_node);
        let node = document.getElementById(`node${this.select_node}`);
        let parent = document.getElementsByClassName('tree-cont')[0];

        if(node.offsetTop > parent.offsetHeight) {
          parent.scrollTop =  node.offsetTop - parent.offsetHeight/2
        }
      },400)
    },
    
    /* 根据图表id 查找对象 */
    findNode(arr, id) {
      // 由于目录第三级图表改为懒加载 故从新增图跳转回来情况只能获取一下图详情了 不能直接去分类数据里面查了
      return new Promise((resolve,reject)=>{
        dataBaseInterface.chartInfo({
          ChartInfoId: id,
        }).then(res=>{
          if(res.Ret==200){
            resolve(res.Data.ChartInfo)
          }
        })
      })
      // 遍历取父级code push数组
      // for (let i of arr) {
      //   if (i.ChartInfoId === id) {
      //     return i;
      //   }
      //   if (i.Children) {
      //     let node = this.findNode(i.Children, id);
      //     if (node) {
      //       return node;
      //     }
      //   }
      // }
    },
    /* 点击表格行展开配置项 */
    rowClickHandle(row) {
      this.expandKey =
        this.expandKey.length && this.expandKey[0] === row.EdbCode
          ? []
          : [row.EdbCode];
      //曲线图点击行 自动置底
      // if (this.selected_chartType === 1) {
      //   this.$nextTick(() => {
      //     $('.chart-min-cont')[0].scrollTop = 10000;
      //   });
      // }
    },
    
    /* 设置row-key */
    getRowKey(row) {
      return row.EdbCode;
    },
    /* 控制展开一行收起其他行并高亮 */
    expandChangeHandle(row, expandedRows) {
      this.expandKey =
        this.expandKey.length && this.expandKey[0] === row.EdbCode
          ? []
          : [row.EdbCode];
      //曲线图点击行 自动置底
      // if (this.selected_chartType === 1) {
      //   this.$nextTick(() => {
      //     $('.chart-min-cont')[0].scrollTop = 10000;
      //   });
      // }
      this.$refs.tableRef.setCurrentRow(row);
    },
    // 查找树节点所有父节点
    findParentNodeHandle(arr, id) {
      // 遍历取父级code push数组
      for (let i of arr) {
        if (i.ChartClassifyId === id) {
          return [i.UniqueCode];
        }
        if (i.Children) {
          let node = this.findParentNodeHandle(i.Children, id);
          if (node) {
            return node.concat(i.UniqueCode);
          }
        }
      }
    },
    // 通过分类id找到指标所属的分类
    findParentNodeForClassifyId(id,code){
      let arr=[]
			this.treeData.forEach(item=>{
				if(item.Children){
					item.Children.forEach(_item=>{
						if(_item.ChartClassifyId==id){
							arr=[item.UniqueCode,_item.UniqueCode]
						}
					})
				}
			})
			return [...arr]
    },

    /* 向左收起 展开 */
    slideHandle() {
      this.isSlideLeft = !this.isSlideLeft;
    },
    /* 保存图表当前配置项 上下限 */
    saveNowOptions() {
      // const dataArr = _.cloneDeep(this.tableData);
      // dataArr.forEach((item) => {
      //   item.MaxData = Number(item.MaxData);
      //   item.MinData = Number(item.MinData);
      //   delete item.DataList;
      // });
      // sessionStorage.setItem('beforeOptions', JSON.stringify(dataArr));
    },
    /* 季节图切换年份  保持当前配置 */
    seasonYearChange() {
      this.saveNowOptions();
      this.getPreviewChartInfo();
    },
    /* 一键刷新 超长等待..*/
    refreshHandle() {
      this.refreshLoading = this.$loading({
        lock: true,
        target: '.main-right',
        text: '刷新图表中...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)',
      });
      dataBaseInterface
        .chartRefresh({
          ChartInfoId: this.selected_chartid,
        })
        .then((res) => {
          this.refreshLoading.close();
          if (res.Ret === 200) {
            this.getPreviewChartInfo();
            this.$message.success(res.Msg);
          }
        });
    },
    /* 重绘右侧区域宽度 */
    reloadRightWid() {
      let total_wid = $('#box')[0].offsetWidth;
      let left = $('#left')[0].offsetWidth;
      let rigtWid = total_wid - left - 20 + 'px';
      $('#right')[0].style.width = rigtWid;
    },

    /* 转base64 */
    svgToBase64(svg) {
      const base64img = `data:image/svg+xml;base64,${window.btoa(
        unescape(encodeURI(svg))
      )}`;
      // console.log(base64img)
      return base64img;
    },

    /* 点击保存时关联图表和截取的图片 */
    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);

      // let { Data } = await dataBaseInterface.uploadImg(form);
      await dataBaseInterface.setChartImage({
        ChartInfoId: this.selected_chartid,
        ImageUrl: Data.ResourceUrl,
      });
    },

    /* 分享图表 */
    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()
      })
    },

    /* ----------------公用图库part-------------------- */
    getPublicChartList() {
      mychartInterface
        .publicList({
          PageSize: this.public_page_size,
          CurrentIndex: this.public_page_no,
          ChartClassifyId: this.default_classify || 0,
          IsShowMe:this.isOnlyMe || false
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          // this.isShowPublicChart = res.Data ? true : false;
          this.publicHaveMove = res.Data
            ? this.public_page_no < res.Data.Paging.Pages
            : false;
          this.chartPublicList = res.Data
            ? this.public_page_no === 1
              ? res.Data.List
              : [...this.chartPublicList, ...res.Data.List]
            : [];
          this.public_total = res.Data ? res.Data.Paging.Totals : 0;
        });
    },

    /* 加载更多 */
    loadMorePublicChart:_.throttle(function(e) {
      let scrollTop = this.$refs.listChartPage.scrollTop;
      let clientHeight = this.$refs.listChartPage.clientHeight;
      let scrollHeight = this.$refs.listChartPage.scrollHeight;
      console.log('scrollTop:',scrollTop)
      console.log('clientHeight:',clientHeight)
      console.log('scrollHeight:',scrollHeight)
			if(scrollTop + clientHeight >= scrollHeight-10 && this.publicHaveMove){
				this.public_page_no++;
				this.getPublicChartList();
			}
    },300),

    /* 点击图表区域跳转详情 选中左侧图表菜单 */
    detailShowHandle(item) {

      this.leftShowLabel = '目录';
      this.$nextTick(() => {
        let params = {
          code: item.UniqueCode,
          id: item.ChartInfoId,
          type: item.ChartType,
          chartData:item
        };
        this.selectCurrentNode(params);
        this.default_classify = '';
        this.reloadRightWid();
      })
    },

    /* 加入我的图库 */
    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.chartPublicList.forEach((item) => {
          if (item.ChartInfoId === this.add_chart_id) {
            item.IsAdd = true;
            item.MyChartId = params.MyChartInfoId;
            item.MyChartClassifyId = params.MyChartClassifyId
          }
        });
      }
    },

    /* 存储中英文状态 */
		setLangIntoStore() {
			this.$store.commit('edb/SET_CAHRT_LANG',this.currentLang)
		},
    /* 获取标签列表 */
    getlabelList(){
        const List = JSON.parse(sessionStorage.getItem('etachart'))||[]
        this.labelList = List
    },
    /* 添加标签  params 基本属性{code,id,classifyId,EdbName,EdbNameEn}*/
    addLabel(params){
        const index = this.labelList.findIndex(i=>i.code===params.code)
        //标签已存在列表中,更新标签的值
        if(index!==-1){
            this.labelList.splice(index,1,params)
            return
        }
        //根据页面宽度 判断标签数量是否达到上限
        const listWidth = document.querySelector('.chartSetting-label-list').offsetWidth
        const minWidth=170+20
        const maxNum = Math.floor(listWidth/minWidth)
        if(this.labelList.length>=maxNum){
            //达到上限则挤出第一个,再添加
            this.labelList.shift()
        }
        this.labelList.push(params)
    },
    //改变选中标签,
    changeCurrentLabel(params){
        if(params.code!==this.select_node){
            this.selectCurrentNode(params)
        }
    },
    //删除标签
    deleteLabel(params,type="label"){
        const index = this.labelList.findIndex(i=>i.code===params.code)
        //如果删除的标签是选中状态
        if(this.select_node===params.code){
            //删除的是唯一一个标签
            if(this.labelList.length===1){
                this.selected_chartid=''
                this.select_node = ''
                this.$refs.treeRef.setCurrentKey(null)
                this.getPublicChartList()
            //不是唯一的标签,则默认选中上一个/下一个
            }else{
                type==='label'&&index===0&&this.changeCurrentLabel(this.labelList[1])
                type==='label'&&index!==0&&index!==-1&&this.changeCurrentLabel(this.labelList[index-1])
            }
        }
        index!==-1&&this.labelList.splice(index,1)
    },
    changeTreeNode(){
        this.$refs.treeRef.setCurrentKey(this.select_node);
        this.$nextTick(()=>{
            const _node = this.$refs.treeRef.getNode(this.select_node)
            this.dynamicNode = _node;
            this.dynamicNode&&this.resetNodeStyle(this.dynamicNode)
        })
    }

  },
    //离开页面时保存标签
    beforeRouteLeave(to,from,next){
        sessionStorage.setItem('etachart',JSON.stringify(this.labelList))
        next()
    },
  mounted() {
    this.getlabelList()

    if(this.$route.query.code) {
      this.getTreeData({code: this.$route.query.code,id: Number(this.$route.query.id)})
    } else {
      this.getTreeData();
      this.getPublicChartList();
    }
    window.addEventListener('resize', this.reloadRightWid);

    //离开页面时保存标签
    window.onbeforeunload = ()=>{
        sessionStorage.setItem('etachart',JSON.stringify(this.labelList))
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.reloadRightWid);
    window.onbeforeunload = null
  },
};
</script>
<style lang="scss">
@import './css/chartfit.scss';
.chartSetting_container {
  * {box-sizing: border-box;}
  .flip-list-move {
    transition: transform 0.4s;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #409eff !important;
    border-color: #409eff;
  }
  .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner {
    background-color: #409eff !important;
    border-color: #409eff;
  }
  .el-card .el-card__header {
    padding: 14px 20px;
  }

  .main-left {
    .add-chart-cont {
      padding: 15px 20px;
      border: 1px solid #ECECEC;
      display: flex;
      box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
    }
    .left-tab {
      display: flex;
      align-items: center;
      padding: 20px 20px 0;
      .tab {
        cursor: pointer;
        font-size: 16px;
        border-bottom: 2px solid transparent;
        margin-right: 40px;
        padding-bottom: 5px;
        &.act{
          color: #409eff;
          border-color: #409eff;
        }
        &:hover {
          color: #409eff;
        }
      }
    }
    .targetset-cont {
      padding: 30px 20px 20px;
      height: calc(100vh - 290px);
      overflow-y: auto;
      .target-list {
        border: 1px solid #DCDFE6;
        .setting-cont {
          padding: 20px 20px 0;
          li {
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #DCDFE6;
            &:last-child {
              padding-bottom: 0;
              margin-bottom: 0;
              border-bottom: none;
            }
          }
        }
      }
      .scatter-setting {
        display: flex;
        margin-bottom: 20px;
      }
      .el-input__inner {
        height: 27px;
        line-height: 27px;
        padding: 0 4px;
      }
      .el-input-number .el-input__inner {
        padding: 0 34px 0 4px;
      }
      .el-color-picker--mini .el-color-picker__trigger {
        width: 60px;
        height: 25px;
        padding: 0;
      }
      .el-color-picker--mini .el-color-picker__mask {
        width: 60px;
        height: 25px;
      }
      .el-collapse-item__header {
        background-color: #F0F2F5;
        margin-bottom: 0;
        border-bottom: 1px solid #DCDFE6;
        padding: 0 20px 0 30px;
        .el-collapse-item__arrow {
          position: absolute;
          left: 8px;
        }
      }
    }
  }
  .cont-bottom {
    .error-tip{ color: #D03F28; font-size: 16px;padding: 25px 0 0 25px; }
    .bottom-min {
      border: 1px solid #DCDFE6;
      margin-bottom: 20px;
      .right-actions {
        /* max-width: 160px; */
        height: 100%;
        padding: 20px 10px;
        border-left: 1px solid #DCDFE6;
        li {
          margin-bottom: 15px;
        }
        @media screen and (max-width: 1710px) {
          font-size: 12px;
        }
        .span-item {
          color: #409eff;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
          .el-icon-collection,
          .el-icon-document-copy {
            color: #409eff;
          }
        }
      }
      .calendar-cont {
        .el-radio-button__inner {
          padding: 8px 16px;
        }
      }
    }
  }

   /* ===================== */
  .chart-public-cont {
    color: #333;
    .el-card .el-card__header,
    .el-card__body {
      padding: 10px;
    }

    .chart-public-list {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      max-height: calc(100vh - 143px);
      overflow: hidden;
      overflow-y: auto;
      .drag-cont {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
      .dragShdow {
        box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
        opacity: 0.5;
      }
      .public-chart-item {
        .item-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          font-weight: 600;
        }
        .chart-img {
          width: 100%;
          height: 230px;
          object-fit: fill !important;
          cursor: pointer;
        }
        .item-bottom {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #666;
          .collected {
            color: #f00;
            cursor: pointer;
          }
          .join_txt {
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }
  }
  .nodata {
    /* height: calc(100vh - 240px); */
    text-align: center;
    font-size: 16px;
    color: #666;
  }
  .copy-excel {
    color: #409eff;
    font-size: 14px;
    padding-left: 50px;
    padding-right: 10px;
  }
  @media screen and (min-width: 1711px) {
    .el-icon-refresh {
      font-size: 17px;
      margin-left: 5px;
      cursor: pointer;
    }
    .chartSetting_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding: 20px 30px;
      background: #fff;
      border: 1px solid #ececec;
      border-radius: 4px;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
      .el-select__input {
        margin-left: 30px;
      }
    }
    .chartSetting_main {
      /* display: flex; */
      div::-webkit-scrollbar {
        width: 5px !important;
      }
      .slide-icon {
        padding: 20px 0;
        /* display: block; */
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        &:hover {
          background-color: rgba(0, 0, 0, 0.05);
        }
        &.slide-left {
          right: 0;
        }
        &.slide-right {
          left: 0;
        }
      }
      .main-left {
        width: 400px;
        min-width: 350px;
        background: #fff;
        margin-right: 20px;
        border: 1px solid #ececec;
        border-radius: 4px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
        height: calc(100vh - 113px);
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        .chartSetting_main_top {
          padding: 10px 20px 15px;
          .add-cont {
            cursor: pointer;
            font-size: 15px;
            color: #409eff;
          }
        }
        .tree-cont {
          padding: 15px 20px 30px;
          overflow: auto;
          max-height: calc(100vh - 330px);
        }
        .target_tree {
          font-size: 14px;
          color: #333;
          .label-input .el-input__inner {
            height: 25px;
            line-height: 25px;
          }
          .custom-tree-node {
            display: flex !important;
            justify-content: space-between;
            align-items: center;
            display: block;
            flex: 1;
            .node_label {
              margin-right: 2px;
            }
          }
          .el-tree__drop-indicator {
            /* position:absolute; */
            /* left:0;
						right:0; */
            height: 3px;
            // margin-top: 8px;
            background-color: #409eff;
          }
          .el-tree-node__content {
            margin-bottom: 14px !important;
          }
          .el-tree-node__children {
            .el-tree-node {
              /* margin-bottom: 8px !important; */
              margin-bottom: 0px !important;
              padding-left: 18px;
            }
            .el-tree-node__content {
              margin-bottom: 5px !important;
              padding-left: 0 !important;
            }
          }
          .expanded.el-icon-caret-right:before {
            content: url('../../assets/img/set_m/down.png') !important;
          }
          .el-icon-caret-right:before {
            content: url('../../assets/img/set_m/slide.png') !important;
          }
          .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
            content: '' !important;
          }
          .el-tree-node__expand-icon.expanded {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          .el-tree-node.is-current > .el-tree-node__content {
            background-color: #f0f4ff !important;
          }
          .el-tree-node__content {
            padding-right: 10px !important;
          }
        }
        .noDepart {
          margin: 60px 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #409eff;
          font-size: 16px;
          cursor: pointer;
        }
        .move-btn {
          height: 100%;
          width: 4px;
          /* opacity: 0; */
          position: absolute;
          right: 0px;
          top: 0;
          &:hover {
            cursor: col-resize;
            /* background-color: orange */
          }
        }
      }
      .main-right {
        width: 80%;
        .mx-datepicker {
          width: 220px !important;
        }
        /* =================== */
        .chart-min-cont {
          background: #fff;
          border: 1px solid #ececec;
          height: calc(100vh - 114px);
          overflow: auto;
          /* overflow: hidden; */
          border-radius: 4px;
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
          .cont-top {
            padding: 12px 30px;
            border-bottom: 1px solid #ececec;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
            .top-left {
              .year-btn {
                font-size: 14px;
                margin-right: 5px;
                margin-bottom: 5px;
              }
              .btn-sty {
                font-size: 16px;
                padding: 10px;
                border: 1px solid #409eff;
              }
              .date-setting{
                width: 210px;
                height: 40px;
                padding: 12px;
                border: 1px solid #DCDFE6;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
                color: #333333;
              }
            }
            .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;
                }
              }
            }
          }
          .cont-bottom {
            padding: 20px 30px;
            /* height: calc(100vh - 250px);
						overflow: auto; */
            .el-input__inner {
              height: 27px;
              line-height: 27px;
              padding: 0 4px;
            }
            .el-input-number .el-input__inner {
              padding: 0 34px 0 4px;
            }
            .el-color-picker--mini .el-color-picker__trigger {
              width: 60px;
              height: 25px;
              padding: 0;
            }
            .el-color-picker--mini .el-color-picker__mask {
              width: 60px;
              height: 25px;
            }
            .el-table__expanded-cell {
              padding: 20px 26px;
            }
            .highcharts-range-selector-group {
              display: none;
              .highcharts-input-group {
                display: none;
              }
            }
            .highcharts-axis-title {
              display: block;
            }
            .calendar-cont {
              display: block;
              margin: 10px auto 0;
              text-align: center;
            }
            /* =================== */
            .chart-show-cont {
              padding: 0 160px 0 120px;
              position: relative;
              .chart-title {
                font-size: 16px;
                font-weight: normal;
                text-align: center;
                margin-bottom: 10px;
              }
              .chart-author {
                font-size: 14px;
                color: #333;
                position: absolute;
                bottom: -20px;
                right: 50px;
              }
              .chartWrapper {
                position: relative;
                .range-cont {
                  position: absolute;
                  top: 13%;
                  .min-data-input {
                    width: 60px;
                    display: block;
                    margin-top: 320px;
                  }
                  &.left {
                    left: -80px;
                  }
                  &.right {
                    right: -65px;
                  }
                  &.rightTwo {
                    right: -130px;
                  }
                  &.bottom {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    top: auto;
                    right: 0;
                    bottom: -3%;
                    .left {
                      width: 60px;
                      display: block;
                      flex-shrink: 0;
                    }
                  }
                }
              }
            }
            .options-cont {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
            }
          }
        }
      }
      .chartSetting-main{
          display: flex;
      }
      .chartSetting-label-list{
          margin-bottom: 22px;
      }
    }

    .drawImg {
      position: absolute;
      top: -999px;
      z-index: -100;
    }
  }

}
</style>
<style lang="scss">
.edb-item-style .el-input__icon {
	line-height: 27px;
}
</style>