<template>
  <div class="all boxMinHeight" v-loading="loading">
    <!-- 测试账号展示头部 -->
    <div class="flex-box flex-d-center experience_head" v-if="experience_data">
      <div v-for="(item, index) in experience_head_list" :key="index" @click="experience_cli(index)" class="experience_head_List flex-box flex-v-ce flex-v-zhu">
        <svg-icon :iconClass="item.icon"></svg-icon>
        <span>{{ item.name }}</span>
      </div>
    </div>
    <!-- 测试账号展示头部 -->

    <el-alert class="diy-tip" :class="{ 'elAlert-head': !experience_data }" @close="tips_close" v-show="tips_show" type="success">
      <p style="font-size: 14px;">
        数据中台用于呈现企业各项关键目标数据的达成情况，针对每月、每季度、以及近几年做对比分析，找到关键目标进行复盘，支持从绩效考核指标中获取实际完成数据。
      </p>
    </el-alert>
    <div class="head flex-box" :class="{ head_experience: experience_data }">
      <div class="left-box box-sizing-w" v-loading="item_loading">
        <div v-if="!experience_data">
          <div class="left-title" :class="{ 'left-title-mar': !getRole }">统计项</div>
          <div class="left-but" v-if="getRole"><el-button type="primary" @click="new_statisShow('新建统计项', 1)">新建统计项</el-button></div>
        </div>
        <div class="overauto_menu scroll-bar" v-if="!fikeData">
          <el-menu v-if="statistics_list.length > 0" :default-active="Active_default" class="el-menu-vertical-demo" @select="activeRouter">
            <el-menu-item v-for="(item, index) in statistics_list" :key="index" :index="index.toString()" @click="statisticsInfo(item, index)">
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </div>

        <!-- 静态数据界面 -->
        <div class="overauto_menu scroll-bar" v-else>
          <el-menu :default-active="fike_List.fike_activeDefault" class="el-menu-vertical-demo" @select="fike_active">
            <el-menu-item v-for="(item, index) in fike_List.static_fikeList" :key="index" :index="index.toString()" @click="fike_statisticsNowInfo(item)">
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </div>
        <!-- /静态数据界面 -->
      </div>

      <div class="right-box flex-1" v-if="!fikeData" v-loading="table_loading">
        <div v-if="settingShow">
          <div class="right-title">
            <h2>
              {{ statisticsData.name }}
              <span v-if="fikeData">(示例)</span>
            </h2>
            <el-dropdown placement="bottom-start" v-if="getRole">
              <el-button class="el-dropdown-link">设置</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><el-button type="text" @click.stop="setUp(0)">编辑统计项</el-button></el-dropdown-item>
                <el-dropdown-item><el-button type="text" @click.stop="setUp(1)">修改统计表</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="flex-box flex-v-ce right-box-header">
            <span class="right-box-title">时间筛选：</span>
            <span
              v-for="(item, index) in timesList"
              :key="index"
              @click="screenTime_cli(item.key)"
              class="righe-box-times"
              :class="{ 'righe-box-time1': right_time_active == item.key }"
            >
              {{ item.name }}
            </span>

            <el-date-picker
              v-show="right_time_active == '2' || right_time_active == '3'"
              v-model="export_from.year"
              class="date-picker-width"
              type="year"
              :clearable="false"
              value-format="yyyy"
              placeholder="选择年份排名"
            ></el-date-picker>

            <div class="flex-1"></div>
            <el-button type="primary" v-if="getRole" @click="excelImportShow = true">导入数据</el-button>
          </div>
          <div class="right-box-Chart"><div ref="rightBoxEChart" :style="{ width: '100%', height: '550px' }"></div></div>
        </div>
        <div class="settingFalse" v-else>
          <div class="setting-year">
            <span
              v-for="(item, index) in listYear"
              :key="index"
              @click="settingYear_cli(index)"
              class="settingYear_span1"
              :class="{ 'setting-year-active': index == settingYear_active }"
            >
              {{ item }}
            </span>

            <el-popover placement="bottom" trigger="manual" v-if="new_settingYear_show" v-model="visible_settingYear">
              <div>
                <el-date-picker
                  v-model="settingYear_from"
                  :picker-options="pickerBeginDateBefore"
                  class="date-picker-width"
                  type="year"
                  value-format="yyyy"
                  placeholder="选择新增年份"
                ></el-date-picker>
                <!-- <el-date-picker v-model="settingYear_from" :picker-options="pickerBeginDateBefore" type="date" placeholder="请选择时间" value-format="yyyy-MM-dd"></el-date-picker> -->
                <div slot="footer" style="margin: 15px 0 0 80px;">
                  <el-button size="small" @click="closeSetYear">取 消</el-button>
                  <el-button size="small" type="primary" @click="newsettingYear_save()">保存</el-button>
                </div>
              </div>
              <span slot="reference" style="padding: 0;" @click.prevent="new_settingYear_cli">新增+</span>
            </el-popover>
          </div>

          <el-table :data="compileTable" class="asides" stripe style="width: 100%">
            <el-table-column width="90px" type="index" :index="indexSetting"></el-table-column>
            <el-table-column v-for="(item, index) in compileTable[0].data" :key="index" :rules="[{ type: 'number', message: '请输入数字值' }]">
              <template slot="header" slot-scope="scope">
                {{ index + 1 }}月
              </template>

              <template slot-scope="scope">
                <!-- <div @click="">
                  {{scope.row.key[index]}}
                                    @input="priceFilter"
                </div> -->
                <div v-if="scope.row.right_hand" @contextmenu.prevent="contextmenu($event, scope.row.data[index])">
                  <el-input
                  v-if="scope.row.data[index].source_type == 1"
                  class="table-input" v-model="scope.row.data[index].result"
                  @input="[(scope.row.data[index].result =isFloor(scope.row.data[index].result))]"
                  maxlength="12"
                  size="mini" show-word-limit>
                  </el-input>
                  <span v-else class="table-span" @click="normCli(scope.row.data[index])">{{ scope.row.data[index].result == '' ? 0 : scope.row.data[index].result }}</span>
                </div>
                <el-input v-else class="table-input" maxlength="11" v-model.number="scope.row.data[index]" size="mini" show-word-limit></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="settingY_but">
            <el-button @click="settingTable_clost">返回</el-button>
            <el-button type="primary" @click="settingTable_Save('newStatistical')">保存</el-button>
            <span class="settingY_ts">
              <i class="el-icon-info"></i>
              实际结果值点击右键可设置与绩效指标关联数据
            </span>
          </div>
        </div>
      </div>

      <!-- 静态数据界面 -->
      <div class="right-box flex-1" v-else>
        <div>
          <div class="right-title">
            <h2>
              {{ fike_List.fike_now_Data.name }}
              <span v-if="fikeData">(示例)</span>
            </h2>
          </div>
          <div class="flex-box flex-v-ce right-box-header">
            <span class="right-box-title">时间筛选：</span>
            <span
              v-for="(item, index) in fike_List.fike_times"
              :key="index"
              @click="fike_Time_cli(item.key)"
              class="righe-box-times"
              :class="{
                'righe-box-time1': fike_List.fike_time_active == item.key
              }"
            >
              {{ item.name }}
            </span>

            <el-date-picker
              v-show="fike_List.fike_time_active == '2' || fike_List.fike_time_active == '3'"
              v-model="fike_List.fike_from.year"
              class="date-picker-width"
              type="year"
              :clearable="false"
              value-format="yyyy"
              placeholder="选择年份排名"
            ></el-date-picker>
          </div>
          <div class="right-box-Chart"><div ref="rightBoxEChart" :style="{ width: '100%', height: '550px' }"></div></div>
        </div>
      </div>
      <!-- /静态数据界面 -->
    </div>

    <el-dialog :title="newStatistName" :visible.sync="new_statisticalItem" class="new_statisticalDia" top="20vh" width="560px" :close-on-click-modal="false">
      <div v-loading="newStatist_loading">
        <el-form :inline="true" ref="newStatistical" :model="newStatistical" :rules="statisticalRules" label-width="120px">
          <el-form-item label="统计项名称" prop="name">
            <el-input type="text" placeholder="请输入名称，如销售额" v-model="newStatistical.name" autocomplete="off" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input type="text" placeholder="请输入单位" v-model="newStatistical.unit" autocomplete="off" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="分类标签" prop="tag_ids">
            <el-select v-model="newStatistical.tag_ids" multiple placeholder="请选择标签" style="width:300px;">
              <el-option v-for="item in tabs" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <span class="newStatistical_Tag" @click="dialogVisible = true">标签设置</span>
          </el-form-item>
          <el-form-item label="可见范围" prop="visual_range">
            <el-radio v-model="visual_range" label="0">全员可见</el-radio>
            <el-radio v-model="visual_range" label="1">部分人可见</el-radio>
            <div class="partOfPeople" v-show="visual_range == '1'">
              <el-input auto-complete="off" v-model="employeeName" placeholder="请选择人员"></el-input>
              <div @click="show_employee_selector = true" class="PeopleClick"></div>
            </div>
          </el-form-item>
          <el-form-item label="数据及图表类型" prop="type">
            <el-select v-model="newStatistical.type" :disabled="statisticsList_deit" placeholder="请选择类型" style="width: 140px;">
              <el-option v-for="item in patternDesign" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <span @click="giveVisible = true" class="patternFesign-col">预览数据及图表</span>
          </el-form-item>
          <el-form-item label="数据结算" prop="calc_type">
            <template slot="label">
              <div>
                数据结算
                <el-tooltip placement="top">
                  <div slot="content">
                    此选项决定了月度数据如何计算生成季度和年的数据，保存后不可修改
                    <br />
                    例1：【销售额】选择累计求和，则季度或年销售额=对应月份的累计相加求和
                    <br />
                    例2：【订单完成率】选择取平均值，则季度或年订单完成率=对应月份的数据取平均值
                  </div>
                  <span class="tips">?</span>
                </el-tooltip>
              </div>
            </template>

            <el-select v-model="newStatistical.calc_type" :disabled="statisticsList_deit" placeholder="请选择" style="width: 140px;">
              <el-option v-for="item in closeAn_account" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="flex-box" :class="{ 'flex-d-center': statisticsList_deit }">
          <el-button v-if="statisticsList_deit" @click="closeStatistic" type="danger">删 除</el-button>
          <div class="flex-box flex-box-end" style="width: 100%;">
            <el-button @click="new_statisticalItem = false">取 消</el-button>
            <el-button type="primary" @click="newStatisticalCli('newStatistical')">确认</el-button>
          </div>
        </span>
      </div>
    </el-dialog>

    <EmployeeSelector :title="'请选择人员'" :selected="employee_map" :visible.sync="show_employee_selector" @confirm="employee_confirm" />
    <ul v-show="visible_rightClick" :style="{ left: right_left + 'px', top: right_top + 'px' }" class="contextmenu">
      <li v-for="(item, index) in rightClickList" :key="index" @click="vis_rightClick(item)" :class="{ context_active1: right_list.source_type == item.id }">{{ item.name }}</li>
    </ul>

    <!-- 标签库 -->
    <el-dialog title="标签设置" :visible.sync="dialogVisible" class="dis_tag" width="500px" @close="diaTagClose" :close-on-click-modal="false">
      <el-tag :key="index" v-for="(tag, index) in tabs" closable :disable-transitions="false" @close="handleClose(tag)">
        <span v-if="tag.name">{{ tag.name }}</span>
        <span v-else>{{ tag }}</span>
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="mini"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
        maxlength="10"
        show-word-limit
      ></el-input>
      <el-button v-else class="button-new-tag" size="mini" @click="showInput">
        <i class="el-icon-plus"></i>
        添加
      </el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveTabs()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 从指标项中获取 -->
    <el-dialog title="从指标项中获取数据" :before-close="close_fromNorm" :visible.sync="fromNorm_gain" class="fromNormGain_sty" top="16vh" width="600px">
      <div class="fromNSty_mar">
        <div class="fromNSty_ts">
          <i class="el-icon-info"></i>
          设置前建议
          <span @click="indexSet_explain = true">查看说明</span>
          <!-- 数据仅支持从月度考核中获取指标数据，非月度考核的结果不会参与计算 -->
        </div>
        <div class="fromNSty_head">
          <span>最终数值 =</span>
          <el-select v-model="right_list.calc_type" placeholder="请选择" style="width: 250px;">
            <el-option v-for="item in fromNorm_filt" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="fromNSty_foo">
          <div class="fromNSFoo_head">
            <span>需要参与统计的指标</span>
            <el-button plain @click="visibleLog_show">请选择</el-button>
          </div>
          <div class="fromNSFooselected">
            已选择：
            <span v-if="right_list.index_list">{{ right_list.index_list.length }}项</span>
          </div>
          <div class="mainTag">
            <div v-for="(item, index) in right_list.index_list" :key="index" class="targetList_str">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="close_fromNorm">取 消</el-button>
        <el-button type="primary" @click="fromNormGain_cli()">确认</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="可选指标项"
      :visible.sync="visible_log"
      :close-on-click-modal="false"
      :before-close="close_before"
      @open="openDialog"
      append-to-body
      width="720px"
      class="selectAG"
    >
      <el-container>
        <el-aside style="width:438px;" class="asides">
          <div style="padding: 15px 5px 15px 0;"><JxSearch :screen="1" title="请输入关键字搜索" @confirm="groupSearch"></JxSearch></div>
          <el-table
			stripe
            ref="asideTabData"
            max-height="350"
            :data="asidetableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="asideSChange"
            @cell-click="asideSClick"
            :row-class-name="tableRowClassName"
            class="asideTable"
            :header-cell-class-name="'disabledCheck'"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <div class="flex-box flex-d-center asidetabDie">
                  <span>{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-aside>

        <el-main class="mainEl">
          <div class="mainHead flex-box flex-d-center" v-if="asideSChangeData.length > 0">
            <span>已选择{{ asideSChangeData.length }}个</span>
            <span @click="mainEmpty">清空</span>
          </div>
          <div class="mainTag">
            <el-tag v-for="(item, index) in asideSChangeData" :key="index" closable :disable-transitions="true" @close="mainTagClose(item, index)">{{ item.name }}</el-tag>
          </div>
        </el-main>
      </el-container>
      <el-footer class="flex-box flex-box-end">
        <el-button round @click="dialogno">取消</el-button>
        <el-button type="primary" round @click="dialogok">确定</el-button>
      </el-footer>
    </el-dialog>
    <!-- 导入数据 -->
    <el-dialog title="导入统计项" width="600px" :visible.sync="excelImportShow" :close-on-click-modal="false" :before-close="close_import">
      <div style="padding:0 50px;">
        <div class="align-center" style="margin-bottom:20px;">
          <p style="margin-bottom: 10px;">
            1、下载统计项模版，批量录入统计项
            <el-button type="primary" @click="downloadTemplate" plain size="mini">下载模板</el-button>
          </p>
          <el-upload
            :limit="1"
            :headers="ATOKEN"
            ref="upload1"
            :action="integralUpload"
            :on-success="handlePictureCardPreview"
            :before-upload="beforeFilesUpload"
            :on-remove="onFileRemove"
          >
            <p>
              2、上传统计项数据Excel表
              <el-button type="primary" plain size="mini">上传文件</el-button>
            </p>
          </el-upload>
          <!-- <p>3、选择文件后点击下方【上传】按钮</p> -->
        </div>
        <div class="align-center" style="margin-bottom:20px; float:left; margin-left:10px;"></div>
        <div style="clear:both;"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close_import">取 消</el-button>
        <!-- <el-button type="primary" @click="uploadFile(1)" :loading="update_btn" plain>上传</el-button> -->
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" width="600px" title="导入结果" :visible.sync="importErrorInfoShow">
      <div>
        <el-table :data="error_list" border stripe>
          <el-table-column prop="name" label="行">
            <template slot-scope="scope">
              <span>第{{ scope.row.line }}行</span>
            </template>
          </el-table-column>
          <el-table-column prop="err" label="错误信息">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.err" :key="index">{{ item }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer"><el-button type="primary" @click="importErrorInfoShow = false">确 定</el-button></span>
    </el-dialog>
    <el-dialog :visible.sync="giveVisible" width="700px" append-to-body class="innerVisible"><img src="@/assets/image/giveayypicaexample.png" style="width:100%" /></el-dialog>
    <el-dialog :visible.sync="indexSet_explain" width="700px" top="5vh" append-to-body class="indexSet_Visible">
      <div class="indexSet_zt">
        <div v-for="(item, index) in index_explain" :key="index" class="indexSet_i">
          <b v-html="item.title"></b>
          <div class="cont_col" v-if="item.cont && typeof item.cont == 'string'" v-html="item.cont"></div>
          <div v-if="item.cont && typeof item.cont == 'object'">
            <div v-for="(arr, add) in item.cont" :key="add">
              <b v-html="arr.title"></b>
              <div class="cont_col" v-if="arr.cont" v-html="arr.cont"></div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment';
import season from '@/components/public/season';
import ECharts from 'echarts';
import EmployeeSelector from '@/components/public/EmployeeSelector';
import JxSearch from '@/components/public/JxSearch';
import { fike_static, index_explain } from './static_data.js';
import { mapState } from 'vuex';
export default {
  data() {
    return {
      ATOKEN: { 'A-TOKEN': this.$getToken() },
      excelImportShow: false,
      update_btn: false,
      error_list: [],
      importErrorInfoShow: false,
      integralUpload: this.$serverdomain + '/api/per/file/import/ds',
      file: '',

      Active_default: '0',
      settingShow: true,

      tips_show: false, //顶部提示

      loading: false,
      item_loading: false,
      table_loading: false,

      statisticsData: {},
      montIndex: '0',
      //统计项列表
      statistics_list: [],
      right_time_active: 2,
      timesList: [{ key: 2, name: '月度' }, { key: 3, name: '季度' }, { key: 1, name: '年度' }],
      export_from: {
        year: moment().format('YYYY'),
        month: moment().format('YYYY-MM'),
        quarter: ''
      },

      //新增统计项
      new_statisticalItem: false,
      newStatist_loading: false,
      newStatistName: '新增统计项',
      visual_range: '0', //可见范围
      newStatistical: {
        name: '',
        unit: '',
        tag_ids: [],
        employee_ids: [],
        type: 1,
        calc_type: 1
      },
      //分类标签
      inputVisible: false,
      inputValue: '',

      pickerBeginDateBefore: this.disabledDate(),
      visible_settingYear: false,
      settingYear_from: '', //新增年度
      listYear: [],
      new_settingYear_show: true, //新增按钮隐藏
      settingYear_active: 0,
      //编辑的表格数据
      compileTable: [
        {
          name: '基础值',
          data: []
        },
        {
          name: '目标值',
          data: []
        },
        {
          name: '挑战值',
          data: []
        },
        {
          name: '实际结果值',
          right_hand: true,
          data: []
        }
      ],
      setData_backupS: {}, //备份表格数据
      visible_rightClick: false, //右键元素
      right_left: 0,
      right_top: 0,
      right_list: {}, //右键的数据

      copy_rightData: {},

      tabs: [],
      dialogVisible: false,
      patternDesign: [{ id: 1, name: '目标达成' }],
      closeAn_account: [{ id: 1, name: '累计求和' }, { id: 2, name: '取平均值' }],
      fromNorm_filt: [{ id: 1, name: '参与统计的指标项累加' }, { id: 2, name: '参与统计的指标项求平均值' }],
      statisticsList_deit: false,

      rightClickList: [{ id: 2, name: '从指标项中获取' }, { id: 1, name: '修改为手动输入' }, { id: 3, name: '复制此项数值的获取方式' }, { id: 4, name: '粘贴已复制项' }],

      statisticalRules: {
        name: [{ required: true, message: '请输入统计项名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }],
        unit: [{ max: 10, message: '长度在 10 个字符内', trigger: 'blur' }]
      },

      employeeName: '',
      show_employee_selector: false,
      employee_map: { dept: [], employee: [] },

      // 从指标项获取弹窗
      fromNorm_gain: false,

      visible_log: false,
      asideSChangeData: [], //已选指标
      asidetableData: [], //加入数据中台的指标列表
      keywords: '',

      experience_data: false, //是否体验账号
      experience_head_list: [
        { name: '制造业', icon: 'experience_1' },
        { name: '服务业', icon: 'experience_2' },
        { name: '教育行业', icon: 'experience_3' },
        { name: '贸易/批发', icon: 'experience_4' },
        { name: '互联网', icon: 'experience_5' }
      ],

      getRole: false, //是否主管理员

      giveVisible: false, //示例弹窗
      indexSet_explain: false, //指标说明弹窗
      index_explain: index_explain(), //指标说明数据

      fikeData: false, //是否用静态数据

      //所有静态数据及变量
      fike_List: {
        fike_time_active: 2, //时间-当前筛选下标
        fike_times: [
          //时间筛选列表
          { key: 2, name: '月度' },
          { key: 3, name: '季度' },
          { key: 1, name: '年度' }
        ],
        fike_from: {
          //选择的年份
          year: moment().format('YYYY')
        },
        fike_now_Data: {}, //当前选中的筛选项
        fike_activeDefault: '0',

        //静态数据
        static_fikeList: fike_static(0)
      }
    };
  },
  components: { season, EmployeeSelector, JxSearch },
  // computed: {
  //   ...mapState({
  //     site_info: state => state.user.site_info
  //   })
  // },
  watch: {
    //选择年
    'export_from.year'(val) {
      this.eCharts_data(); //Echarts数据
    },

    visible_rightClick(val) {
      this.documentBody(val, this.closeMenu);
    },
    visible_settingYear(val) {
		// console.log(val)
      // this.documentBody(val, this.closeSetYear);
    },

    //静态数据-watch
    'fike_List.fike_from.year'(val) {
      this.fike_eChartsData(); //Echarts数据
    }
  },
  created() {
    //是否开启了绩效
    // if (this.site_info.performance && this.site_info.performance.status == 1 && this.site_info.performance.global_status == 1) {
      //是否是主子管理员
      // this.$store.dispatch('getUserInfoJx').then(res => {
        // if (res.per_role == 'manager') {
          // if (res.main == 1) {
            //主管理员
            // this.$setCache('role', 'masterAdministrator');
          // } else {
          //   //子管理员
          //   this.$setCache('role', 'childAdministrator');
          // }
		  if(this.$getRole(1)){
			this.getRole = true;
		  }
        // }
      // });
    // }
  },
  mounted() {
    if (this.$getCache('Experience_data')) {
      this.experience_data = this.$getCache('Experience_data').if; //是否体验账号
      if (this.experience_data) {
        this.fikeData = true;
      }
      // this.experience_data = true; //是否体验账号
    }
    this.tips_show = this.$getCache('CNC_table_tips') ? false : true;
    this.statisticsList(); //统计项列表

    window.addEventListener('resize', this.selfAdaption);
  },
  methods: {
    isFloor(el){
      var obj=event.target;
      var t = el.charAt(0);
      el = el.replace(".", "$#$")//把第一个字符'.'替换成'$#$'
                                 .replace(/\./g, "")//把其余的字符'.'替换为空
                                 .replace("$#$", ".")//把字符'$#$'替换回原来的'.'
                                 .replace(/[^\d.]/g, "")//只能输入数字和'.'
                                 .replace(/^\./g, "")//不能以'.'开头
                                 .replace( /([0-9]+\.[0-9]{2})[0-9]*/,"$1")//只保留2位小数
      if (t == '-') {
        el = '-' + el;
      }
      return el||null
    },
    onFileRemove(file, fileList) {
       this.file='';
    },
    beforeFilesUpload(file) {
      const $ext_list = ['xlsx', 'xls'];
      let len = file.name.split('.').length - 1;
      const $ext_name = file.name.split('.')[len];
      if ($ext_list.indexOf($ext_name) != -1) {
      } else {
        this.$message.warning('文件格式上传错误,仅支持上传xlsx,xls）');
        return false;
      }
    },
    handlePictureCardPreview(res) {
		if(res.code==1){
			if (res.data.validation.length > 0) {
			    this.$message({ type: 'error', message: '导入错误' });
			    this.error_list = res.data.validation;
			    this.importErrorInfoShow = true;
			}else if(res.data.exception){
			    this.$message({ type: 'error', message: res.data.exception });
			}else{
			    this.$message({ type: 'success', message: '导入成功' });
			    this.excelImportShow = false;
			}
		}else{
			  this.$message.error({ message: res.msg });
		}
    },
    downloadTemplate() {
      window.open(this.$serverdomain + '/api/download/ds/template?cate_name=' + encodeURI(this.statisticsData.name));
    },
    uploadFile() {
      let params = {};
      params.file = this.file;
      if(!params.file){
         this.$message({ type: 'error', message: '请选择文件' });
         return false
      }
      this.update_btn = true;
      this.$axios('post', '/api/per/ds/cate/upload', params)
        .then(res => {
            if (res.data.data.validation.length > 0) {
                this.$message({ type: 'error', message: '导入错误' });
                this.error_list = res.data.data.validation;
                this.importErrorInfoShow = true;
            }else if(res.data.data.exception){
                this.$message({ type: 'error', message: res.data.data.exception });
            }else{
                this.$message({ type: 'success', message: '导入成功' });
                this.excelImportShow = false;
            }
        })
        .finally(() => {
          setTimeout(() => {
            this.update_btn = false;
          }, 3000);
        });
    },
    // 文件上传
    close_import() {
      this.excelImportShow = false;
    },

    tips_close() {
      this.$setCache('CNC_table_tips', 'true');
      this.tips_show = false;
    },
    activeRouter(index, indexPath) {
      this.$nextTick(_ => {
        this.Active_default = indexPath[0];
      });
    },
    new_statisShow(name, key) {
      this.newStatistName = name;
      this.new_statisticalItem = true;
      //置空
      this.newStatistical = {
        name: '',
        unit: '',
        tag_ids: [],
        employee_ids: [],
        type: 1,
        calc_type: 1
      };
      this.visual_range = '0';
      this.employee_map = { dept: [], employee: [] };
      this.employeeName = '';
      //标签列表
      this.newset_label();

      if (key == 1) {
        this.statisticsList_deit = false;
      } else if (key == 2) {
        this.newStatist_loading = true;
        this.statisticsList_deit = true;
        this.$axios('get', '/api/per/ds/cate/info', {
          id: this.statisticsData.id
        })
          .then(res => {
            if (res.data.code == 1) {
              let data = res.data.data;
              this.newStatistical = data;
              //可见范围
              if (data.employee_ids && data.employee_ids.length > 0) {
                this.visual_range = '1';
                let map = this.$getEmployeeList();
                let employee = [];
                data.employee_ids.forEach(item => {
                  employee.push({
                    id: map[item].id,
                    name: map[item].name,
                    img_url: map[item].img_url
                  });
                });
                this.employeeName = employee.length > 1 ? employee[0].name + ' 等' + employee.length + '人' : employee[0].name;
                this.employee_map.employee = employee;
              } else {
                this.visual_range = '0';
              }
            }
          })
          .finally(_ => {
            this.newStatist_loading = false;
          });
      }
      // statisticsData
    },
    disabledDate() {
      let that = this;
      return {
        disabledDate(time) {
          let year = Number(moment(time).format('YYYY'));
          let nowyear = Number(moment(that.statisticsData.create_time).format('YYYY')); //创建统计项时间
          return !(nowyear - 3 <= year && nowyear + 6 >= year && that.listYear.indexOf(String(year)) == -1);
        }
      };
    },
    //设置按钮
    setUp(key) {
      switch (key) {
        case 0:
          this.new_statisShow('编辑统计项', 2);
          break;
        case 1:
          this.settingShow = false;
          this.yearList(); //表格年数据
          // this.settingData()
          break;
      }
    },
    //点击新增
    new_settingYear_cli() {
      this.visible_settingYear = true;
    },
    //关闭新增弹框
    closeSetYear() {
      this.settingYear_from = '';
      this.visible_settingYear = false;
    },
    //新增保存
    newsettingYear_save() {
      if (!this.settingYear_from || this.settingYear_from == '') {
        this.$message.warning('请选择年份');
        return;
      }
      if (
        this.listYear.some(item => {
          return item == this.settingYear_from;
        })
      ) {
        this.$message.warning('已有年份');
        return;
      }
      this.listYear.push(this.settingYear_from);
      this.listYear = this.listYear.sort((a, b) => {
        return a - b;
      });
      // let year = moment().format("YYYY");
      let year = this.settingYear_from;
      this.settingYear_active = this.listYear.indexOf(year);
      this.$nextTick(() => {
        this.closeSetYear();
        this.setTableData();
        if (this.listYear.length >= 10) this.new_settingYear_show = false;
      });
    },
    // 表格筛选年份点击
    settingYear_cli(index) {
      this.settingYear_active = index;
      //切换年份时，  刷新表格数据并   提示是否需要保存？
      this.setTableData();
    },
    //获取年份列表
    yearList() {
      this.table_loading = true;
      this.$axios('get', '/api/per/ds/cate/year_list', {
        cate_id: this.statisticsData.id
      }).then(res => {
        if (res.data.code == 1) {
          let data = res.data.data;
          let arrat_data = [];
          for (let i in data) {
            arrat_data.push(data[i]);
          }
          //默认选中当前年
          let year = moment().format('YYYY');
          this.settingYear_active = arrat_data.indexOf(year) > -1 ? arrat_data.indexOf(year) : 0;
          this.listYear = arrat_data;
          this.$nextTick(() => {
            this.new_settingYear_show = this.listYear.length > 10 ? false : true;
            //获取表格数据
            this.setTableData();
          });
        }
      });
    },
    //表格数据
    setTableData() {
      this.table_loading = true;
      let params = {
        cate_id: this.statisticsData.id,
        year: this.listYear[this.settingYear_active]
      };
      this.$axios('get', '/api/per/ds/cate/year_config', params)
        .then(res => {
          if (res.data.code == 1) {
            let data = res.data.data;
            this.setData_backupS = data;
            let addName = ['base', 'target', 'challenges', 'result'];
            let comTable = {
              base: {
                name: '基础值',
                data: []
              },
              target: {
                name: '目标值',
                data: []
              },
              challenges: {
                name: '挑战值',
                data: []
              },
              result: {
                name: '实际结果值',
                right_hand: true,
                data: []
              }
            };
            for (let i in data) {
              addName.forEach((item, index) => {
                if (item == 'result') {
                  comTable[item].data.push({
                    result: Number(data[i].result) != 0 ? Number(data[i].result) : '',
                    source_type: data[i].source_type,
                    calc_type: data[i].calc_type,
                    manual: data[i].manual,
                    performance: data[i].performance,
                    index_list: data[i].index_list
                  });
                } else {
                  comTable[item].data.push(Number(data[i][item]) != 0 ? Number(data[i][item]) : '');
                }
              });
            }
            let arr = [];
            for (let i in comTable) {
              // arr[i] = arr[i]
              arr.push(comTable[i]);
            }
            this.compileTable = arr;
          }
        })
        .finally(_ => {
          this.table_loading = false;
        });
    },
    //点击菜单
    vis_rightClick(item) {
      // if (this.right_list.source_type == item.id) {
      //   return;
      // }
      switch (item.id) {
        case 1: //修改为手动输入
          this.right_list.source_type = 1;
          break;
        case 2: //从指标项中获取
          this.right_list.source_type = 2;
          this.fromNorm_gain = true;
          //指标列表
          this.indexList();
          break;
        case 3: //复制数据获取方式
          this.copy_rightData = this.right_list;
          break;
        case 4: //粘贴复制项
          if (this.copy_rightData.source_type) {
            for (let i in this.right_list) {
              this.right_list[i] = this.copy_rightData[i];
            }
          }
          break;
      }
    },
    indexList() {
      this.$axios('get', 'api/per/index/list', {
        page: 0,
        cate_id: 0,
        type: 0,
        keywords: '',
        tag_ids: [],
        enable_ds: 1
      }).then(res => {
        if (res.data.code == 1) {
          let list = [];
          res.data.data.list.forEach(item => {
            list.push({
              id: item.id,
              name: item.name
            });
          });
          list = list.concat(this.right_list.index_list);
          let obj = {};
          let peon = list.reduce((cur, next) => {
            obj[next.id] ? '' : (obj[next.id] = true && cur.push(next));
            return cur;
          }, []);
          this.asidetableData = peon;
        }
      });
    },

    visibleLog_show() {
      this.keywords = '';
      this.visible_log = true;
      //  this.indexList()
    },
    tableRowClassName({ row, rowIndex }) {
      //自定义列的类名--搜索
      return row.name.indexOf(this.keywords) < 0 ? 'display_none' : '';
    },
    groupSearch(data) {
      //搜索huidiao
      this.keywords = data;
    },
    //选指标确认
    dialogok() {
      if (this.asideSChangeData.length > 10) {
        this.$message.warning('最多选择10条');
        return;
      }
      this.right_list.index_list = this.asideSChangeData;
      this.dialogno();
    },
    openDialog() {
      this.mainEmpty(); //清空选中
      this.$nextTick(() => {
        let arrInter = [...this.asidetableData].filter(x => [...this.right_list.index_list].some(y => y.id === x.id));
        this.toggleSelection(arrInter);
      });
    },
    close_before() {
      this.dialogno();
    },
    //选指标取消
    dialogno() {
      this.visible_log = false;
      setTimeout(() => {
        //延迟清空
        this.mainEmpty(); //清空选中
      }, 150);
    },
    asideSChange(val) {
      this.asideSChangeData = val;
    },
    //表格点击行
    asideSClick(row, column, cell, event) {
      this.toggleSelection([row]);
    },
    //点击行选中
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.asideTabData.toggleRowSelection(row);
        });
      } else {
        this.$refs.asideTabData.clearSelection();
      }
    },
    mainEmpty() {
      //清空选中
      this.toggleSelection(this.asideSChangeData);
    },
    mainTagClose(item, index) {
      //清除右侧tag
      this.asideSChangeData.splice(index, 1);
      this.toggleSelection([item]);
    },

    //从指标项获取确认
    fromNormGain_cli() {
      if (this.right_list.index_list.length == 0) {
        this.$message.warning('统计指标不能为空');
        return;
      }
      if (this.right_list.index_list.length > 10) {
        this.$message.warning('最多选择10条');
        return;
      }
      this.close_fromNorm();
      this.right_list.result = '';
    },
    //指标项弹窗关闭回调
    close_fromNorm() {
      if (this.right_list.index_list.length == 0) {
        this.right_list.source_type = 1;
      }
      this.fromNorm_gain = false;
    },
    normCli(item) {
      this.right_list = item;
      this.fromNorm_gain = true;
      //指标列表
      this.indexList();
    },
    //鼠标右键菜单
    contextmenu(e, item) {
      this.right_list = item;
      this.right_top = e.pageY-50; // 屏幕可见宽
      let clientWidth = document.body.clientWidth; // 菜单宽
      let menuWidth = 172; // 点击右键时会返回对应的clientX，用这个值与(clientWidth+菜单宽度)对比，如果大于的话，就把菜单左偏移一个菜单宽
      let clickClientX = e.clientX + menuWidth;
      if (clickClientX > clientWidth) {
        this.right_left = e.pageX - menuWidth-170;
      } else {
        this.right_left = e.pageX-200;
      }
      this.visible_rightClick = true; //打开右键弹窗
    },
    //关闭右键弹窗
    closeMenu() {
      this.visible_rightClick = false;
    },
    //编辑-表格-保存
    settingTable_Save() {
      this.table_loading = true;
      let save = this.compileTable;
      let serBf_s = this.setData_backupS;
      let addName = ['base', 'target', 'challenges', 'result'];
      let base_key = [];
      for (let i in save) {
        base_key[addName[i]] = save[i];
      }
      for (let i = 0; i < 12; i++) {
        addName.forEach(arr => {
          let num = 'month_' + (i + 1 >= 10 ? i + 1 : '0' + (i + 1));
          if (arr == 'result') {
            serBf_s[num].calc_type = base_key[arr].data[i].calc_type;
            serBf_s[num].index_list = base_key[arr].data[i].index_list;
            serBf_s[num].performance = base_key[arr].data[i].performance;
            serBf_s[num].manual = Number(base_key[arr].data[i].result) == 0 ? '0.00' : String(base_key[arr].data[i].result);
            serBf_s[num].result = '0.00';
            serBf_s[num].source_type = base_key[arr].data[i].source_type;
          } else {
            serBf_s[num][arr] = Number(base_key[arr].data[i]) == 0 ? '0.00' : String(base_key[arr].data[i]);
          }
        });
      }
      let data = {
        cate_id: this.statisticsData.id,
        year: this.listYear[this.settingYear_active],
        year_config: JSON.stringify(serBf_s)
      };
      this.$axios('post', '/api/per/ds/cate/year_config', data)
        .then(res => {
          if (res.data.code == 1) {
            this.$message.success('保存成功');
          }
        })
        .finally(_ => {
          this.table_loading = false;
        });
    },
    //编辑表格返回
    settingTable_clost() {
      this.settingShow = true;
      this.eCharts_data(); //Echarts数据
    },

    indexSetting(index) {
      return this.compileTable[index].name;
    },

    //删除统计项
    closeStatistic() {
      this.$confirm('确定要删除统计项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.newStatist_loading = true;
        this.$axios('post', '/api/per/ds/cate/del', {
          id: this.statisticsData.id
        })
          .then(res => {
            if (res.data.code == 1) {
              this.new_statisticalItem = false;
              this.$message.success('删除成功');
              this.$nextTick(_ => {
                this.Active_default = '0';
                this.statisticsList();
              });
            }
          })
          .finally(_ => {
            this.newStatist_loading = false;
          });
      });
    },
    newStatisticalCli(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let newData = this.newStatistical;
          // if (newData.tag_ids.length == 0) {
          //   this.$message.warning("请添加分类标签");
          //   return;
          // }
          if (this.visual_range == '0') {
            newData.employee_ids = [];
          } else {
            if (!newData.employee_ids || newData.employee_ids.length == 0) {
              this.$message.warning('请选择部分可见人员');
              return;
            }
          }
          this.newStatist_loading = true;
		  newData.employee_ids_code=this.$returnCode(newData.employee_ids);
          let deit = this.statisticsList_deit;
          let ips = deit ? '/api/per/ds/cate/update' : '/api/per/ds/cate/add';
          let mess = deit ? '编辑成功' : '添加成功';
          this.$axios('post', ips, newData)
            .then(res => {
              if (res.data.code == 1) {
                this.new_statisticalItem = false;
                this.$message.success(mess);
                this.$nextTick(_ => {
                  this.statisticsList(true);
                });
              }
            })
            .finally(_ => {
              this.newStatist_loading = false;
            });
        }
      });
    },
    //时间筛选
    screenTime_cli(key) {
      this.right_time_active = key;
      this.eCharts_data(); //Echarts数据
    },
    statisticsInfo(item, index) {
      this.settingShow = true;
      this.statisticsData = item;
      this.montIndex = index;
      this.copy_rightData = {};
      this.eCharts_data(); //Echarts数据
      // if (this.settingShow == false) {
      //   this.$confirm("系统可能不会保存您所做的修改。", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning"
      //   })
      //     .then(() => {
      //       this.settingShow = true;
      //       this.statisticsData = item;
      //       this.copy_rightData = {};
      //       this.eCharts_data(); //Echarts数据
      //     })
      //     .catch(() => {
      //       this.$nextTick(_ => {
      //         this.Active_default = this.montIndex.toString();
      //       });
      //     });
      // } else {
      //   this.statisticsData = item;
      //   this.montIndex = index;
      //   this.copy_rightData = {};
      //   this.eCharts_data(); //Echarts数据
      // }
    },
    //echarts自适应
    selfAdaption() {
      if (this.$refs.rightBoxEChart) {
        var myChart1 = ECharts.init(this.$refs.rightBoxEChart);
        myChart1.resize();
      }
    },
    eCharts_data() {
      this.table_loading = true;
      let params = {
        id: this.statisticsData.id,
        time_type: this.right_time_active
      };
      if (this.right_time_active != 1 && this.export_from.year != '') {
        params.year = this.export_from.year;
      }
      this.$axios('get', '/api/per/ds/cate/statistical_data', params)
        .then(res => {
          if (res.data.code == 1) {
            let addName = ['base', 'target', 'challenges', 'result'];
            let data = res.data.data;
            let list = {
              base: [],
              target: [],
              challenges: [],
              result: []
            };
            let butTitle = [];
            for (let i in data) {
              addName.forEach((item, index) => {
                list[item].push(Number(data[i][item]));
              });
              switch (this.right_time_active) {
                case 1:
                  butTitle.push(i + '年');
                  break;
                case 2:
                  butTitle.push(i + '月');
                  break;
                case 3:
                  switch (i) {
                    case '1':
                      butTitle.push('第一季度');
                      break;
                    case '2':
                      butTitle.push('第二季度');
                      break;
                    case '3':
                      butTitle.push('第三季度');
                      break;
                    case '4':
                      butTitle.push('第四季度');
                      break;
                  }
                  break;
              }
            }
            this.rightBoxchartData(list, butTitle, this.statisticsData);
          }
        })
        .finally(() => {
          this.table_loading = false;
        });
    },
    rightBoxchartData(list, monList, dataUnit) {
		console.log(list, monList, dataUnit)
      let unit = dataUnit.unit;
      let titunit = '';
      if (unit && unit != '') {
        titunit = '(' + unit + ')';
      } else {
        unit = '';
      }
      // let titunit = unit == "" ? '' : '('+unit+')'
      let title = ['实际完成值' + titunit + '', '基础值' + titunit + '', '目标值' + titunit + '', '挑战值' + titunit + ''];
      let mgrid = {};
      const chart = this.$refs.rightBoxEChart;
      if (chart) {
        const myChart = ECharts.init(chart);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
            formatter: function(a) {
              let list = [];
              let listItem = '';
              for (var i = 0; i < a.length; i++) {
                list.push(
                  '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                    a[i].color +
                    ';margin-right: 5px;border-radius: 50%;}"></i><span style=" display:inline-block;">' +
                    a[i].seriesName +
                    '</span>&nbsp：' +
                    a[i].value +
                    ' ' +
                    unit +
                    '&nbsp'
                );
              }
              listItem = list.join('<br>');
              return '<div class="showBox"><div>' + a[0].name + '</div>' + listItem + '</div>';
            }
          },
          color: ['#5087EC', '#FF2525', '#5CCF77', '#4EB2D4'],
          grid: {
            //表格偏移量
            left: '0%',
            right: '0%',
            top: '15%',
            bottom: '5%',
            containLabel: true //Y轴不会超出边界
          },
          legend: [
            {
              type: 'scroll',
              left: 'center',
              top: '0%',
              textStyle: {
                fontSize: 14,
                color: 'rgb(48, 49, 51)'
              },
              data: title.slice(0, 1)
            },
            //分为两列展示
            {
              type: 'scroll',
              left: 'center',
              top: '6%',
              itemGap: 20,
              textStyle: {
                fontSize: 14,
                color: 'rgb(48, 49, 51)'
              },
              data: title.slice(1)
            }
          ],
          xAxis: [
            {
              type: 'category',
              data: monList,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              // min: 0,
              // minInterval: 1,
              axisLabel: {
                formatter: '{value}'
              },
              //去掉Y轴线
              axisLine: {
                show: false
              },
              //去掉Y轴刻度
              axisTick: {
                show: false
              }
            }
          ],
          series: [
            {
              name: title[0],
              type: 'bar',
              barWidth: 25, //柱图宽度
              data: list.result
              // data: [-10, 100, -30,-40,-50,90,50,30,-100,-60,-110]
            },
            {
              name: title[1],
              type: 'line',
              data: list.base
            },
            {
              name: title[2],
              type: 'line',
              data: list.target
            },
            {
              name: title[3],
              type: 'line',
              data: list.challenges
            }
          ]
        };
        myChart.setOption(option);
      }
    },

    employee_confirm(data) {
      this.employeeName = '';
      this.employee_map.employee = [];
      this.newStatistical.employee_ids = [];
      if (data.employee !== null && data.employee.length != 0) {
        this.employeeName = data.employee.length > 1 ? data.employee[0].name + ' 等' + data.employee.length + '人' : data.employee[0].name;
        this.employee_map.employee = data.employee;
        let employeeID = [];
        data.employee.forEach(item => {
          employeeID.push(item.id);
        });
        this.newStatistical.employee_ids = employeeID;
      }
    },

    //标签列表
    newset_label() {
      // this.newStatist_loading = true
      this.$axios('get', '/api/per/ds/tag', { page: 0 })
        .then(res => {
          if (res.data.code == 1) {
            this.tabs = res.data.data.list;
          }
        })
        .finally(_ => {
          // this.newStatist_loading = false
        });
    },
    diaTagClose() {
      let tabs = JSON.parse(JSON.stringify(this.tabs));
      this.tabs = tabs.filter(x => x.id)
    },
    //保持标签
    saveTabs() {
      let tabs = JSON.parse(JSON.stringify(this.tabs));
      let tag = tabs.map(item => {
        let obj = {};
        if (!item.name) {
          obj.id = '';
          obj.tag_name = item;
          return obj;
        } else {
          item.tag_name = item.name;
          return item;
        }
      });
      this.$axios('post', '/api/per/ds/tag', { tag: tag }).then(res => {
        this.newset_label();
        this.dialogVisible = false;
      });
    },
    handleClose(tag) {
      this.tabs.splice(this.tabs.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm(e) {
      let is = true;
      this.tabs.some(item => {
        if (item.name == this.inputValue) {
          this.$message.error('标签名称重复');
          this.inputValue = '';
          is = false;
          return true;
        }
      });
      if (!is) {
        return false;
      }
      let inputValue = this.inputValue;
      if (inputValue) {
        this.tabs.push(inputValue);
      }
      // this.inputVisible = false;
      this.inputValue = '';
      // this.newset_label();
    },

    statisticsList(key) {
      // this.fikeData = true
      // this.statistics_list = this.fike_List.static_fikeList
      // this.fike_List.fike_now_Data = this.statistics_list[0] || {}
      // this.fike_eChartsData()//Echarts数据
      // return

      this.item_loading = true;
      this.$axios('get', '/api/per/ds/cate/list', { page: 0 })
        .then(res => {
          // this.statistics_list = this.fike_List.static_fikeList
          if (res.data.code == 1) {
            let list = res.data.data.list;
            //统计项列表无数据---静态界面、数据
            if (list.length == 0) {
              this.fikeData = true;
              this.statistics_list = this.fike_List.static_fikeList;
              this.fike_List.fike_now_Data = this.fike_List.static_fikeList[0] || {};
              this.fike_eChartsData(); //Echarts数据
            } else {
              this.fikeData = false;
              this.statistics_list = list;
              if (!key || list.length == 1) {
                this.statisticsData = list[0] || {};
              }
              if (key) {
                this.statisticsData = list.filter(x => this.statisticsData.id == x.id)[0];
              }
              this.eCharts_data(); //统计图表数据
            }
          }
        })
        .finally(() => {
          this.item_loading = false;
        });
    },

    documentBody(val, Fun) {
      if (val) {
        document.body.addEventListener('click', Fun);
      } else {
        document.body.removeEventListener('click', Fun);
      }
    },

    //静态界面方法：
    //点击筛选项
    fike_statisticsNowInfo(item) {
      this.fike_List.fike_now_Data = item;
      this.fike_eChartsData(); //Echarts数据
    },
    //时间筛选
    fike_Time_cli(key) {
      this.fike_List.fike_time_active = key;
      this.fike_eChartsData(); //Echarts数据
    },
    fike_eChartsData() {
      let years = this.fike_List.fike_from.year;
      let Time;
	  var date = new Date();
	  let nian=date.getFullYear(); //获取当前完整的年份(4位)
      if (years == nian-1 || years == nian) {
        Time = this.fike_List.fike_now_Data.data;
      } else {
        Time = fike_static(-1)[0];
      }
      if (!Time) {
        Time = fike_static(-1)[0];
      }
      let list = {};
      switch (this.fike_List.fike_time_active) {
        case 1:
          list = Time.year;
          break;
        case 2:
          list = Time.month;
          break;
        case 3:
          list = Time.quarter;
          break;
      }
      let butTitle = [];
      if (this.fike_List.fike_time_active == 1) {
        butTitle = ['2020年', '2021年'];
      }
      if (this.fike_List.fike_time_active == 2) {
        for (let i in list.base) {
          butTitle.push(Number(i) + 1 + '月');
        }
      }
      if (this.fike_List.fike_time_active == 3) {
        butTitle = ['第一季度', '第二季度', '第三季度', '第四季度'];
      }
      this.$nextTick(_ => {
        this.rightBoxchartData(list, butTitle, this.fike_List.fike_now_Data);
      });
    },
    fike_active(index, indexPath) {
      this.$nextTick(_ => {
        this.fike_List.fike_activeDefault = indexPath[0];
      });
    },
    //体验数据方法
    experience_cli(k) {
      this.fike_List.fike_activeDefault = '0';
      this.fike_List.static_fikeList = fike_static(k);
      this.statistics_list = this.fike_List.static_fikeList;
      this.fike_List.fike_now_Data = this.fike_List.static_fikeList[0] || {};
      this.fike_eChartsData(); //Echarts数据
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.selfAdaption); //取消echarts自适应
  }
};
</script>
<style lang="scss" scoped>
 h2{
	 font-weight: 700;
	 font-size: 20px;
 }
.all {
  padding: 0 20px 20px;
  background: #fff;
  .head_experience {
    min-height: calc(100vh - 270px) !important;
  }
  .elAlert-head {
    margin-top: 20px;
    display: inline-block;
  }
  .head {
    min-height: calc(100vh - 130px);
    .left-box {
      padding: 20px 20px 20px 0;
      .left-title {
        font-size: 18px;
      }
      .left-title-mar {
        margin-bottom: 25px;
      }
      .left-but {
        text-align: center;
        margin: 15px 0;
      }
      .overauto_menu {
        max-height: calc(100vh - 270px) !important;
        overflow: auto;
        ::v-deep .el-menu-vertical-demo {
          border: 0;
          .el-menu-item {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        ::v-deep .is-active {
          transition: all 0.3s;
          background-color: #ecf5ff !important;
        }
        .el-menu-item:focus {
          background-color: #fff;
        }
        // .el-menu-item:hover{
        //   background-color: #ecf5ff;
        // }
      }
    }
    .right-box {
      position: relative;
      display: table-cell;
      margin: 0 !important;
      padding: 20px;
      min-width: 600px;
      &::after {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 1px;
        background: #ebeef5;
      }
      .right-title {
        margin: 0 0 10px 0;
        display: flex;
        align-items: center;
        h2 {
          padding-right: 12px;
        }
      }
      .right-box-header {
        height: 40px;
        .right-box-title {
          // line-height: 30px;
          color: #9c9c9c;
        }
        .righe-box-times {
          display: inline-block;
          width: 60px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          background-color: #f5f7fa;
          color: #606266;
          margin-right: 15px;
          border-radius: 3px;
          cursor: pointer;
          transition: all 0.3s;
        }
        .righe-box-time1 {
          background-color: #ecf5ff;
          color: #0089ff;
        }
        .date-picker-width {
          width: 250px !important;
        }
      }
      .right-box-Chart {
        margin-top: 30px;
      }
    }
  }

  .experience_head {
    padding: 20px 3px;
    .experience_head_List {
      cursor: pointer;
      width: 19%;
      // max-width: 260px;
      height: 100px;
      line-height: 100px;
      border: 1px solid #e1e4e7;
      border-radius: 2px;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
      background-color: #ffffff;
      text-align: center;
      svg {
        font-size: 40px;
        margin: 0 10px 0 0;
      }
      span {
        color: #616161;
        font-size: 14px;
      }
    }
  }
}
.new_statisticalDia {
  ::v-deep .el-form-item {
    display: block;
  }
  .partOfPeople {
    position: relative;
    display: inline-block;
    width: 140px;
    .PeopleClick {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 9;
    }
  }
  .newStatistical_Tag {
    color: #26a2ff;
    display: inline-block;
    margin-left: 15px;
    cursor: pointer;
  }
  .patternFesign-col {
    color: #26a2ff;
    margin-left: 15px;
    cursor: pointer;
  }
  .tips {
    cursor: pointer;
    background: #3f9eff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
  }
}
.box-sizing-w {
    width: 250px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.settingFalse {
  ::v-deep .el-table {
    .el-table__header {
      border-top: 1px solid #e0e0e0;
    }
    .el-table__row:hover > td {
      background-color: #ffffff !important;
    }
    .table-input {
      .el-input__inner {
        transition: all 0.3s;
        padding: 0;
        border: 0;
      }
      .el-input__suffix {
        display: none;
      }
    }
    .table-input:hover {
      .el-input__inner {
        cursor: pointer;
        background-color: rgb(241, 241, 241);
      }
    }
    .table-span {
      width: 100%;
      height: 28px;
      line-height: 28px;
      border: 0;
      border-radius: 3px;
      color: #26a2ff;
      font-size: 12px;
      display: inline-block;
      cursor: pointer;
      transition: all 0.3s;
    }
    .table-span:hover {
      cursor: pointer;
      background-color: rgb(241, 241, 241);
    }
  }
  .setting-year {
    .settingYear_span1 {
      display: inline-block;
      min-width: 60px;
      text-align: center;
      margin-right: 20px;
      padding: 5px 0 5px 0;
    }
    span {
      cursor: pointer;
    }
    .setting-year-active {
      color: #26a2ff;
      border-bottom: 1px solid #26a2ff;
    }
  }
  .settingY_but {
    margin: 10px;
    .settingY_ts {
      margin: 0 0 0 15px;
      color: #f56c6c;
    }
  }
}
.contextmenu {
  margin: 0;
  border: 1px solid #eaeaea;
  background-color: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    padding: 12px 20px;
    color: #424242;
    transition: all 0.5s;
  }
  li:hover {
    background-color: #eee;
  }
  ::v-deep .context_active {
    cursor: not-allowed;
    background-color: #f3f3f3;
    color: #cecece;
  }
  ::v-deep .context_active1 {
    color: #26a2ff;
  }
}
.dis_tag {
  .el-tag {
    margin-left: 10px;
    margin-top: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    margin-top: 10px;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
.fromNormGain_sty {
  ::v-deep .el-dialog__body {
    padding: 0 20px 30px 20px;
  }
  .fromNSty_mar {
    margin: 0 50px;
    .fromNSty_ts {
      margin: 5px 0 20px 0;
      white-space: nowrap;
      // color: #ff5151;
      i {
        font-size: 16px;
      }
      span {
        cursor: pointer;
        transition: all 0.3s;
        color: #0089ff;
      }
      span:hover {
        color: #26a2ff;
        text-decoration: underline;
      }
    }
    .fromNSty_head {
      span {
        font-weight: 600;
        margin-right: 10px;
        display: inline-block;
      }
    }
    .fromNSty_foo {
      .mainTag {
        max-height: 300px;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .fromNSFoo_head {
        margin: 20px 0 0 0;
        span {
          font-weight: 600;
        }
      }
      .fromNSFooselected {
        font-weight: 550;
        span {
          color: #ff9600;
        }
      }
      .targetList_str {
        margin: 10px 0 0 0;
        span {
          padding: 5px;
          background-color: #f9f9f9;
          border-radius: 2px;
          display: inline-block;
        }
      }
    }
  }
}

.selectAG {
  ::v-deep .el-dialog {
    border-radius: 5px;
  }
  ::v-deep .el-dialog__header {
    background-color: #efefef;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  ::v-deep .el-dialog__title {
    font-size: 16px;
  }
  ::v-deep .el-dialog__body {
    padding: 0;
  }
  ::v-deep aside {
    width: 440px;
    height: 500px;
    padding: 20px;
    border-right: 1px solid #e6e6e6;
  }
}
::v-deep .asideTable {
  .el-table__header-wrapper {
    display: none !important;
  }
  td,
  th,
  tr {
    border: 0;
  }
  .display_none {
    display: none;
  }
}
.asideTable::before {
  width: 0;
}
.asidetabDie {
  cursor: pointer;
}

/* 滚动条样式 */
.asides ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.asides ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  width: 6px;
  background-color: #fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条的设置*/
.asides ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #fff0;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条移上去的背景*/
.asides ::v-deep .el-table__body-wrapper:hover::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
}

.mainEl {
  .mainHead {
    margin-bottom: 10px;
    span:nth-child(2) {
      color: #409eff;
      cursor: pointer;
    }
  }
  .mainTag {
    height: 430px;
    overflow-x: hidden;
    overflow-y: auto;
    ::v-deep .el-tag--medium {
      background-color: #fff;
      border: 1px solid #e4e4e4;
      border-radius: 20px;
      color: #4c4c4c;
      margin: 5px 5px 5px 0;
      max-width: 240px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
      padding: 0 20px 0 10px;
    }
    .el-tag--medium ::v-deep i {
      color: #8f8f8f;
      position: absolute;
      right: 5px;
      top: 5px;
    }
    .el-tag--medium ::v-deep i:hover {
      background-color: #9b9b9b;
      color: #fff;
    }
  }
}

/* 滚动条样式 */
.mainTag::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.mainTag::-webkit-scrollbar-track {
  width: 6px;
  background-color: #fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条的设置*/
.mainTag::-webkit-scrollbar-thumb {
  background-color: #fff0;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条移上去的背景*/
.mainTag:hover::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
}

footer {
  border-top: 1px solid #e6e6e6;
}
footer button {
  height: 40px;
  width: 90px;
  margin-top: 9px;
}
.indexSet_Visible {
  .indexSet_zt {
    margin: 0 20px;
    .indexSet_i {
      b {
        margin: 5px 0;
        display: inline-block;
      }
      div {
        margin: 0 0 20px 0;
      }
      .cont_col {
        color: #868686;
      }
    }
  }
}
</style>
