gdy_qywx_pc/src/views/dashboard/index.vue

<template>
  <div>
    <el-row :style="noticeRole && pastdueDate ? '' : 'margin-top: 20px'">
      <el-col :span="24">
        <div class="" style="border:1px #e1e4e7 solid;margin-bottom:20px;" v-if="experience_data">
          <el-carousel trigger="click" :interval="6000" height="125px">
            <el-carousel-item v-for="(item, index) in banner" :key="index">
              <img :src="item.image" alt="" style="cursor:pointer;" @click="bannerImagePush(item.key)" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>

      <el-col :span="24" v-if="noticeRole && pastdueDate">
        <div class="" style="margin:10px 0;z-index:1;width:100%;">
          <div style="width: 100%;overflow: hidden;">
            <marquee scrollamount="5" onmouseover="this.stop()" onmouseout="this.start()">
              <div style="color:#ff880e;font-size:16px;">
                {{ pastdueDate }}&nbsp;&nbsp;&nbsp;
                <a class="vtRenew" @click="innerVisible = true">立即续费>></a>
              </div>
            </marquee>
          </div>
        </div>
      </el-col>

      <el-col :span="18">
        <el-row :gutter="40" class="top_user_info" style="margin:0;padding:0;">
          <el-col :span="7" class="userinfo_box" v-loading="send_site_info_loading">
            <el-row :gutter="40" style="margin:0;padding:0;">
              <el-col :span="24" class="user_info">
                <div class="headimg fl" style=" margin-right: 10px;">
                  <userImage :id="user_info.id" :img_url="user_info.img_url" :user_name="user_info.name" width="50px" height="50px"></userImage>
                </div>
                <div class="greetings">
                  <div><WWOpenData type="userName" :openid="user_info.name"></WWOpenData></div>
                  &nbsp;&nbsp;
                  <span v-show="time <= 4">夜深了</span>
                  <span v-show="time > 4 && time <= 11">早上好</span>
                  <span v-show="time > 11 && time <= 14">中午好</span>
                  <span v-show="time > 14 && time <= 19">下午好</span>
                  <span v-show="time > 19 && time <= 24">晚上好</span>
                </div>
                <p style="margin: 0; color: #666;">
                  <span v-show="time <= 4">烦恼尽退散</span>
                  <span v-show="time > 4 && time <= 11">又是美好的一天</span>
                  <span v-show="time > 11 && time <= 14">吃饱睡好更有动力</span>
                  <span v-show="time > 14 && time <= 19">致敬奋斗中的自己</span>
                  <span v-show="time > 19 && time <= 24">该养精蓄锐了</span>
                </p>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="17" style="margin:0;padding:0;" v-if="creatorJurisdiction">
            <el-col :gutter="50" style="margin:0;padding:34px 0 0 0;" class="quick_button_box">
              <div style="display:flex;justify-content: space-around;">
                <div v-for="(item, index) in fits" :key="index" @click="openGzd(item.url)" style="display:flex;cursor:pointer;padding:0 15px 0 15px">
                  <img :src="item.img" @click="openGzd(item.url)" style="width:46px;height:46px;margin:10px 5px 0 0" />
                  <p style="display: inline-block;width:100%;">
                    <b style="color:#303133;font-size:16px;">{{ item.name }}</b>
                    <br />
                    <span style="color:#606266;font-size:12px;display: inline-block;margin-top:8px;">{{ item.value }}</span>
                  </p>
                </div>
              </div>
            </el-col>
          </el-col>
          <div v-else>
            <el-col :span="16" style="margin-top:34px;padding:0;height:58px;" v-loading="authorityManagerHeaderLoad">
              <el-col :gutter="50" style="margin:0;padding:0;" class="quick_button_box">
                <div style="display:flex;justify-content: space-around;">
                  <p style="text-align:center;cursor:pointer;margin: 0;" @click="$router.push({ path: '/individual_statistics' })">
                    <b style="color:#26A2FF;font-size:27px;">{{ authorityManagerHeaders.b ? authorityManagerHeaders.b : '0' }}</b>
                    <br />
                    <span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">本月B分</span>
                  </p>
                  <p style="text-align:center;cursor:pointer;margin: 0;" @click="$router.push({ path: '/individual_statistics' })">
                    <b style="color:#26A2FF;font-size:27px;">{{ authorityManagerHeaders.a ? authorityManagerHeaders.a : '0' }}</b>
                    <br />
                    <span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">本月A分</span>
                  </p>
                </div>
              </el-col>
            </el-col>
          </div>
        </el-row>

        <el-row class="raiders_box">
          <el-row>
            <el-col :span="22"><b class="title">排行榜</b></el-col>
            <el-col :span="2"><span class="noremind" @click="$router.push({ path: RankingPush })">查看详情</span></el-col>
          </el-row>
          <div v-loading="tabPositionLoad">
            <div style="width:100%;height:30px;margin-top:20px;">
              <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;display:flex">
                <div v-for="(item, index) in rankingList" :key="index">
                  <el-radio-button :label="item.val" @click.native="tabPositions($event, item)">
                    <span style="width:84px;coloe:#606266;display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">{{ item.group_name }}</span>
                  </el-radio-button>
                </div>
              </el-radio-group>
            </div>
            <div style="display:flex;padding-top:30px;height:100%;" v-loading="addUpRankingLoad">
              <div class="nopoint_box" style="" v-if="rankingListDetails.length == 0">
                <div class="noimg" style="margin:0;"></div>
                <span class="title1" style="margin:0;">暂无积分数据</span>
              </div>
              <div v-else v-for="(item, index) in rankingListDetails" :key="index" style="text-align:center;width:80px;cursor:pointer;margin:0 20px;">
                <div class="" style="cursor:pointer;position: relative;">
                  <svg-icon
                    v-if="item.rank <= 3"
                    :icon-class="item.rank == 1 ? 'first' : item.rank == 2 ? 'secondPlace' : item.rank == 3 ? 'third' : ''"
                    style="z-index:1;position: absolute;left: 26px;top: -18px;font-size:28px;"
                  />
                  <div
                    v-if="item.rank == 4 || item.rank == 5"
                    style="z-index:1;position: absolute;left: 28px;top: -14px;width:24px;height:24px;border:1px solid #C0C4CC;border-radius:50%;background-color:#fff;font-size:12px;text-align-center;line-height:24px;color:#303133;"
                  >
                    <b style="">{{ item.rank }}</b>
                  </div>
                  <div
                    v-if="item.employee_id == user_infos.id && index == 0 && item.rank > 3"
                    style="z-index:1;position: absolute;left: 28px;top: -14px;width:24px;height:24px;border:1px solid #C0C4CC;border-radius:50%;background-color:#fff;font-size:12px;text-align-center;line-height:24px;color:#303133;"
                  >
                    <b>{{ item.rank }}</b>
                  </div>
                  <div style="position: absolute;left: 10px;top: -16px;z-index:2;">
                    <div
                      v-if="index == 5 || index == 6"
                      style="width:60px;height:24px;border:1px solid #C0C4CC;background-color:#fff;border-radius:20px;font-size:12px;color:#303133;text-align:center;line-height:24px"
                    >
                      <b>{{ index == 5 ? '倒数第2' : index == 6 ? '倒数第1' : '' }}</b>
                    </div>
                  </div>
                  <userImage :id="item.employee_id" :img_url="item.employee_img_url" fontSize="16" :user_name="item.employee_name" width="60px" height="60px"></userImage>
                </div>
                <span
                  style="color:#303133;font-size:14px;text-align:center;margin-top:10px;display: inline-block;width:100%;display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"
                >
                  <WWOpenData type="userName" :openid="item.employee_name"></WWOpenData>
                  <span v-if="item.employee_id == user_infos.id">(我)</span>
                </span>
              </div>
            </div>
          </div>
        </el-row>

        <el-row class="raiders_box">
          <el-row style="position: relative;">
            <el-col :span="24"><b class="title" style="margin-bottom:15px;display:block">积分构成</b></el-col>
            <el-col :span="5" style="position: absolute;top:40px;left:10px;z-index: 1;" v-if="!employeeRout">
                <ShowDeptName @confirm="deptConfirm1"></ShowDeptName>
            </el-col>
            <div v-loading="IntegralFormChartLoad">
              <div class="nopoint_box" style="height:340px;" v-show="IntegralFormnone">
                <div class="noimg" style="width: 150px;height: 150px;margin-top:80px;"></div>
                <span class="title1">
                  暂无积分数据，
                  <span @click="$router.push({ path: '/award_punish' })" style="color:#409EFF;cursor:pointer;">去奖扣积分></span>
                </span>
              </div>
              <div v-show="!IntegralFormnone"><div ref="IntegralFormChart" :style="{ width: '858px', height: '400px' }"></div></div>
            </div>
          </el-row>
        </el-row>

        <el-row class="raiders_box">
          <el-row style="position: relative;">
            <el-col :span="24" style="display:flex">
              <b class="title" style="margin:0 20px 15px 0;display:block">本月积分情况</b>
              <el-checkbox v-model="exclusiveMonthChecked">不包含自动积分加分项</el-checkbox>
            </el-col>
            <div v-loading="monthlyIntegralloading">
              <el-col :span="5" style="position: absolute;top:40px;left:10px;z-index: 1;" v-if="!employeeRout">
                <ShowDeptName @confirm="deptConfirm2"></ShowDeptName>
              </el-col>

              <div class="nopoint_box" style="height:400px;" v-if="monthlyIntegralnone">
                <div class="noimg" style="width: 150px;height: 150px;margin-top:90px;"></div>
                <span class="title1">暂无积分数据</span>
              </div>

              <div v-show="!monthlyIntegralnone">
                <div ref="monthlyIntegralChart" :style="{ width: '858px', height: '350px' }"></div>
                <div style="width:100%;display:flex;justify-content: space-around;margin-top:30px;padding-left:40px">
                  <p v-for="(item, index) in monthlyIntegralList" :key="index" style="text-align:center">
                    <b style="display:block;color:#303133;font-size:18px;" v-if="index < 3">
                      {{ index == 0 ? item.total_point : index == 1 ? item.reward_point : index == 2 ? item.deduction_point : '' }}
                    </b>
                    <b style="display:block;color:#303133;font-size:18px;" v-else-if="index == 3">{{ item.ratio == -1 ? '—' : item.ratio + ':1' }}</b>
                    <b style="display:block;color:#303133;font-size:18px;" v-else>
                      {{ item.toRatio.ratio + '%' }}
                      <svg-icon :icon-class="item.toRatio.type == 1 ? 'litrearrows' : item.toRatio.type == 2 ? 'droparrows' : ''" style="font-size:10px;margin-bottom:2px" />
                    </b>
                    <span style="color:rgb(48, 49, 51);font-size:14px;margin-top:5px;display:block;">{{ item.name }}</span>
                  </p>
                </div>
              </div>
            </div>
          </el-row>
        </el-row>

        <el-row class="raiders_box" style="margin-bottom:20px;" v-if="!employeeRout">
          <el-row style="position: relative;">
            <el-col :span="24"><b class="title" style="margin-bottom:15px;display:block">当月管理者奖扣任务执行情况</b></el-col>
            <div v-loading="ManagerSAwardloading">
              <el-col :span="5" style="position: absolute;top:40px;left:10px;z-index: 1;">
                <ShowDeptName @confirm="deptConfirm3"></ShowDeptName>
              </el-col>
              <div class="nopoint_box" style="height:400px;" v-if="ManagerSAwardnone">
                <div class="noimg" style="width: 150px;height: 170px;margin-top:90px;"></div>
                <span class="title1">暂无积分数据</span>
              </div>
              <div v-show="!ManagerSAwardnone">
                <div ref="ManagerSAwardChart" :style="{ width: '858px', height: '400px' }"></div>
                <div style="width:100%;display:flex;justify-content: space-around;padding-left:40px">
                  <p v-for="(item, index) in ManagerSAwardlList" :key="index" style="z-index:1;" class="ManagerSAwardlStyle" @click="$router.push({ path: '/manager_statistics' })">
                    <b class="ManagerSAwardlStyleB" v-if="index != 2">{{ item.val }}</b>
                    <b class="ManagerSAwardlStyleB" v-else-if="index == 2">{{ item.val == -1 ? '—' : item.val + ':1' }}</b>
                    <span class="ManagerSAwardlStyleSpan">{{ item.name }}</span>
                  </p>
                </div>
              </div>
            </div>
          </el-row>
        </el-row>
      </el-col>

      <el-col :span="6">
        <el-row v-if="!creatorJurisdiction" class="readyapprove_box" style="background-color:#fff;text-align:left;margin-bottom: 20px;">
          <div class="grid-content bg-purple" style="background-color:#fff;padding:20px;">
            <span class="title">常用</span>
            <div>
              <span v-for="(item, index) in inCommonUse" :key="index" @click="$router.push({ path: item.push })" class="inCommonUseStyle">
                <img :src="item.image" alt="" style="width:31px;height:31px;margin:11px 9px 0 12px;" />
                <b>{{ item.name }}</b>
              </span>
            </div>
          </div>
        </el-row>

        <el-row class="readyapprove_box" style="background-color:#fff;" v-loading="examineAndApproveloading" v-if="!employeeRout">
          <div class="grid-content bg-purple" style="background-color:#fff;padding:20px;">
            <span class="title">
              待我审批的
              <span v-if="examineAndApproveList.length > 0">({{ examineAndApproveindex > 0 ? examineAndApproveindex : '' }})</span>
            </span>
            <div v-show="false">
              <div id="secancode"></div>
              <span class="secantitle">为了更方便操作，请使用 APP 处理</span>
            </div>
            <div class="nopoint_box" v-if="examineAndApproveList.length == 0">
              <div class="noimg"></div>
              <span class="title1">还没有待我审批</span>
            </div>
            <div
              v-for="(item, index) in examineAndApproveList"
              class="List_border"
              :key="index"
              style="cursor:pointer;display:flex;padding-top:10px;"
              v-else
              @click="openDetail(item)"
            >
              <userImage width="45px" height="45px" :id="item.employee_id" :user_name="item.employee_name" style="margin-right:8px"></userImage>
              <div class="rightexamineAndApproveList">
                <p style="width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#303133;font-size:16px">
                  <b>
                    <WWOpenData type="userName" :openid="item.employee_name"></WWOpenData>
                    {{
                      item.source_type == 1 ? '的积分任务' : item.source_type == 2 ? '的积分申请' : item.source_type == 3 ? '的积分录入' : item.source_type == 4 ? '的绩效工作' : ''
                    }}
                  </b>
                </p>
                <p
                  style="font-size:13px;line-height:20px;color:rgb(48, 49, 51);overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; "
                >
                  {{ item.remark.rule || item.remark.customize }}
                </p>
                <div style="display:flex;padding-bottom:16px;justify-content: space-between;">
                  <span style="color:#909399">{{ item.event_time }}</span>
                  <div><span style="color:#26A2FF;cursor:pointer">去审批</span></div>
                </div>
              </div>
            </div>
            <div
              class="more"
              v-show="examineAndApproveList.length > 0 && examineAndApproveindex > 3"
              style="border-top:1px solid #EFEFEF;color: rgb(144, 147, 153);font-size: 14px; padding: 20px 0 0 20px; cursor: pointer;"
              @click="$router.push({ path: '/approval_list' })"
            >
              查看更多
            </div>
          </div>
        </el-row>

        <el-row class="pointsevent_box">
          <div class="grid-content bg-purple" v-loading="highestPrizeBuckleloading" style="background:#fff;padding: 20px 20px 0;">
            <span class="title">本周奖分最高</span>
            <div class="nopoint_box" v-if="!prize.id">
              <div class="noimg"></div>
              <span class="title1" style="padding-bottom:20px;">暂无积分数据</span>
            </div>
            <div v-else style="display:flex;padding-bottom:20px;">
              <userImage width="45px" height="45px" :id="prize.id" :user_name="prize.name" :img_url="prize.img_url" fontSize="16" style="margin-right:8px"></userImage>
              <div class="rightexamineAndApproveList" style="border:0px">
                <p style="font-size:16px;width: 200px;" class="font-flex-word">
                  <b><WWOpenData type="userName" :openid="prize.name"></WWOpenData></b>
                  <span class="blue"><span v-if="prize.point > 0">+</span>{{ prize.point }} B分</span>
                </p>
                <p
                  style="font-size:13px;line-height:20px;color:rgb(48, 49, 51);overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:3; "
                >
                  {{ prize.remark ? prize.remark.customize : '' }}
                </p>
              </div>
            </div>
          </div>
        </el-row>

        <el-row class="pointsevent_box">
          <div class="grid-content bg-purple" v-loading="highestPrizeBuckleloading" style="background:#fff;padding: 20px 20px 0;">
            <span class="title">本周扣分最多</span>
            <div class="nopoint_box" v-if="!buckle.id">
              <div class="noimg"></div>
              <span class="title1" style="padding-bottom:10px;">暂无积分数据</span>
            </div>
            <div v-else style="display:flex">
              <userImage width="45px" height="45px" :id="buckle.id" :user_name="buckle.name" :img_url="buckle.img_url" style="margin-right:8px"></userImage>
              <div class="rightexamineAndApproveList">
                <p style="font-size:16px;width: 200px;" class="font-flex-word" >
                  <b ><WWOpenData type="userName" :openid="buckle.name"></WWOpenData></b>
                  <span class="red">{{ buckle.point }} B分</span>
                </p>
                <p style="
                  font-size:13px;
                  line-height:20px;color:rgb(48, 49, 51);
                  overflow:hidden;
                  text-overflow:ellipsis;
                  display:-webkit-box;
                  -webkit-box-orient:vertical;
                  -webkit-line-clamp:3;">
                  {{ buckle.remark ? buckle.remark.customize : '' }}
                </p>
              </div>
            </div>
          </div>
        </el-row>

        <el-row v-if="advertisingImage != ''" class="pointsevent_box" style="width:280px;height:200px;background:#fff;">
          <img :src="advertisingImage" style="width:100%;height:100%;" alt="" />
        </el-row>
      </el-col>
    </el-row>

    <examinePopup :title="'审核详情'" :id="detail_id" :show.sync="detailShow"></examinePopup>
    <el-dialog :modal-append-to-body="false" :visible.sync="innerVisible" width="400px" append-to-body class="innerVisible">
      <p style="font-size:21px;">续费/升级</p>
      <p style="margin:0;">请在功道云积分服务群中联系客服顾问或微信扫码添加功道云客服进行续费</p>
      <img src="static/images/vtRemewService.png" style="width:100%" />
      <p style="font-size:20px;">电话咨询：400-6877-880</p>
    </el-dialog>
  </div>
</template>

<script>
import { setToken } from '@/utils/auth';
import announcement from '@/views/common/announcement';
import examinePopup from '@/views/common/examinePopup';
import tubiao from './components/tubiao';
import tubiaoEmployee from './components/tubiaoEmployee';
import tubiaoAdmin from './components/tubiaoAdmin';
import anniu from './components/anniu';
import daiyu from './components/daiyu';
import jclb from './components/jclb';
import dashboarde from './components/dashboarde';
import jfnr from './components/jfnr';
import EmployeeProfile from '@/views/integral/EmployeeProfile';
import EmployeePwd from '@/views/integral/EmployeePwd';
import avatarUpload from '@/views/integral/avatarUpload';
import QRCode from 'qrcodejs2';
import { mapGetters, mapState } from 'vuex';
import axios from 'axios';
import ECharts from 'echarts';
import qs from 'qs';
export default {
  components: {
    examinePopup,
    tubiao,
    tubiaoEmployee,
    tubiaoAdmin,
    anniu,
    daiyu,
    jclb,
    dashboarde,
    jfnr,
    EmployeeProfile,
    EmployeePwd,
    avatarUpload,
    QRCode,
    announcement
  },
  data() {
    return {
      dept_namedata: [],
      noticeRole: this.$authoritys('creator') || this.$authoritys('admin') || this.$authoritys('point_manager'),
      innerVisible: false,
      experience_data: false, //是否体验账号
      banner: [
        //首页轮播
        { image: 'static/images/banner1.jpg', key: 1 },
        { image: 'static/images/banner2.jpg', key: 2 }
      ],
      exclusiveMonthBranch: 0, //本月积分情况--部门
      exclusiveMonthChecked: true, //本月积分情况--不包含自动积分加分项
      rollOne: true,
      advertisingImage: '', //广告位图片
      inCommonUse: [
        { name: '奖扣积分', image: 'static/images/entry_list.png', push: '/award_punish' },
        { name: '发布任务', image: 'static/images/my_publish.png', push: '/my_issue' },
        { name: '申请积分', image: 'static/images/a_apply.png', push: '/apply_list' },
        { name: '领任务', image: 'static/images/task_hall.png', push: '/get_task' }
      ],
      authorityManagerHeaderLoad: false, //除了管理员 的头部  -- loading
      authorityManagerHeaders: {}, //除了管理员 的头部  --数据
      highestPrizeBuckleloading: false, //奖扣最高loading
      prize: {}, //奖分最高
      buckle: {}, //扣分最高

      //本周考勤
      weekChecking_inloading: false, //本周考勤loading
      weekChecking_ins: [
        //本周考勤
        { val: 0, name: '迟到人数' },
        { val: 0, name: '早退人数' },
        { val: 0, name: '缺卡人数' },
        { val: 0, name: '旷工人数' },
        { val: 0, name: '外勤人数' },
        { val: 0, name: '加班人数' }
      ],
      //隐藏的积分构成
      IntegralFormnone: false, //积分构成为空或报错，展示的开关
      dept_name1: [], //积分构成--部门
      IntegralFormChartLoad: false, //积分构成loading

      ManagerSAwardloading: false, //管理者统计 loading
      ManagerSAwardlList: [
        //管理者统计数据
        { val: '0', name: '总奖分' },
        { val: '0', name: '总扣分' },
        { val: '0', name: '奖扣分比例' },
        { val: '0', name: '奖扣人次' },
        { val: '0', name: '奖扣执行人数' },
        { val: '0', name: '达标人数' },
        { val: '0', name: '未达标人数' }
      ],
      monthlyIntegralList: [
        //本月积分情况数据
        { total_point: '0', name: '本月总积分' },
        { reward_point: '0', name: '本月总奖分' },
        { deduction_point: '0', name: '本月总扣分' },
        { ratio: '0', name: '奖扣分比例' },
        { toRatio: { ratio: '0', type: 0 }, name: '对比上月总分' },
        { toRatio: { ratio: '0', type: 0 }, name: '对比上月奖分' },
        { toRatio: { ratio: '0', type: 0 }, name: '对比上月扣分' }
      ],
      monthlyIntegralloading: false, //本月积分情况loading

      monthlyIntegralnone: false, //本月积分情况为空或报错，展示的开关
      ManagerSAwardnone: false, //管理者奖扣执行情况为空或报错，展示的开关
      dept_name2: [], //本月积分情况--部门
      dept_name3: [], //管理者统计数据--部门
      dept_tree: [], //部门
      RankingPush: '',
      tabPositionLoad: false, //排名分类loading
      addUpRankingLoad: false, //排名人员loading
      tabPosition: '0',
      rankingList: [], //排行榜数据
      rankingListDetails: [], //排行榜人员列表
      detail_id: null, //审批组件传入的ID
      detailShow: false, //审批组件显示隐藏
      examineAndApproveloading: false, //审批loading
      examineAndApproveList: [], //审批列表
      examineAndApproveindex: 0, //审批列表数量
      deptManagerRouters: !this.$authoritys('dept_manager'), //是否部门管理者权限
      creatorJurisdiction: this.$authoritys('creator'), //是否创始人权限
      employeeRout: this.$authoritys('employee'), //员工权限
      user_infos: this.$store.getters.user_info, //拿到当前登录人员信息，隐藏部门管理者等
      dialogProfileVisibleinit: false,
      compnayInfoForm: {
        name: '',
        contacts: ''
      },
      fits: [
        {
          name: '奖扣A/B分',
          value: '表现好坏，有奖有罚',
          img: 'static/images/prizeBuckle.png',
          url: '/award_punish'
        },
        {
          name: '任务',
          value: '认可积极完成任务的人',
          img: 'static/images/task.png',
          url: '/my_issue'
        }
      ],
      pointsevent: 0,
      send_site_info_loading: false,
      enabled_close: false,
      ProfileActiveName: 'first',
      dialogProfileVisible: false,
      currentTubiao: 'tubiao',
      activeName2: 'first',
      click_close: false,

      rules: {
        name: [
          {
            required: true,
            message: this.$t('dashboard.rulescompnayname'),
            trigger: 'blur'
          },
          {
            min: 2,
            max: 30,
            message: this.$t('dashboard.rulescompnaynamelength'),
            trigger: 'blur'
          }
        ],
        contacts: [
          {
            required: true,
            message: this.$t('dashboard.rulescontacts'),
            trigger: 'blur'
          },
          {
            min: 2,
            max: 7,
            message: this.$t('dashboard.rulescontactslength'),
            trigger: 'blur'
          }
        ]
      },

      // 7.0
      employee_map: {},
      point_types: {},
      time: this.$moment().format('HH'),
      site_info: {},
      pastdueDate: null,

      toPdept1: 0, //选择部门的遮到
      toPdept2: 0, //选择部门的遮到
      toPdept3: 0 //选择部门的遮到
    };
  },
  watch: {
    exclusiveMonthChecked() {
      this.monthlyIntegral();
    }
  },
  computed: {
    ...mapState({
      user_info: state => state.user.user_info
    })
  },
  methods: {
    //点击轮播图
    bannerImagePush(item) {
      if (item == 1) {
        window.open('http://gdyapp.oss-cn-shenzhen.aliyuncs.com/pdf/%E7%A7%AF%E5%88%86%E8%BD%AF%E4%BB%B6%E4%BB%8B%E7%BB%8D-APP%E7%89%88.pdf');
      } else {
        window.open('https://www.g107.com/GouShuZhuanXian');
      }
    },
    handleScrolls(e) {
      if (document.getElementsByClassName('main-content')[0].scrollTop) {
        let H = document.getElementsByClassName('main-content')[0].scrollTop;
        if (this.rollOne && H >= 100) {
          this.rollOne = false;
          this.monthlyIntegral(); //月度积分
          if (!this.employeeRout) {
            //员工不请求管理者奖扣任务执行情况
            this.ManagerSAward(); //管理者奖扣任务执行情况
          }
        }
      }
    },
    //广告位
    advertising() {
      this.$http('get', '/api/pc_admin')
        .then(res => {
          if (res.data.code == 1) {
            this.advertisingImage = res.data.data.advertising_img;
          }
        })
        .finally(() => {});
    },
    //管理员头部
    authorityManagerHeader() {
      this.authorityManagerHeaderLoad = true;
      let params = {
        employee_id: this.user_infos.id,
        month: this.$moment().format('YYYY-MM')
      };
      this.$http('get', '/api/integral/statistics/', params, 'v2')
        .then(res => {
          if (res.data.code == 1) {
            this.authorityManagerHeaders = res.data.data;
          }
        })
        .finally(() => {
          this.authorityManagerHeaderLoad = false;
        });
    },

    //奖扣分最高积分事件
    highestPrizeBuckle() {
      this.highestPrizeBuckleloading = true;
      let params = {
        time_type: '1',
        pt_id: '3',
        page: '1',
        page_size: '1'
      };
      let roat=this.$supremeAuthority();
      if(roat=='dept_manager'||roat=='employee'){
      	params.employee_id=this.$userInfo().id
      }
      console.log(this.$userInfo())
      this.$http('get', '/api/integral/statistics/prize/buckle/ranking', params)
        .then(res => {
          if (res.data.code == 1) {
            if (res.data.data.prize.length != 0) {
              this.prize = res.data.data.prize[0];
            } else {
              this.prize = [];
            }
            if (res.data.data.buckle.length != 0) {
              this.buckle = res.data.data.buckle[0];
            } else {
              this.buckle = [];
            }
          }
        })
        .finally(() => {
          this.highestPrizeBuckleloading = false;
        });
    },

    //本周考勤
    //格式化日期：yyyy-MM-dd
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();

      if (mymonth < 10) {
        mymonth = '0' + mymonth;
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday;
      }
      return myyear + '-' + mymonth + '-' + myweekday;
    },
    weekChecking_in() {
      this.weekChecking_inloading = true;
      var now = new Date();
      var nowTime = now.getTime();
      var day = now.getDay() || 7;
      var oneDayTime = 24 * 60 * 60 * 1000;
      var MondayTime = nowTime - (day - 1) * oneDayTime; //显示周一
      var SundayTime = nowTime + (7 - day) * oneDayTime; //显示周日
      var params = {
        start_date: this.formatDate(new Date(MondayTime)),
        end_date: this.formatDate(new Date(SundayTime))
      };
      this.$jtoken
        .get(this.serveAd + '/ad/statistics/department/weekly', {
          params: params
        })
        .then(res => {
          let datas = res.data.data;
          this.weekChecking_ins[0].val = datas.late_count;
          this.weekChecking_ins[1].val = datas.leave_early_count;
          this.weekChecking_ins[2].val = datas.sign_absent_count;
          this.weekChecking_ins[3].val = datas.absent_count;
          this.weekChecking_ins[4].val = datas.range_count;
          this.weekChecking_ins[5].val = datas.ot_count;
        })
        .finally(() => {
          this.weekChecking_inloading = false;
        });
    },
    //管理者奖扣统计
    ManagerSAwardCharts(Name, Award, Deduct) {
      //管理着奖扣统计表
      const chart = this.$refs.ManagerSAwardChart;
      console.log(Name);
      if (chart) {
        const myChart = ECharts.init(chart);
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter: params => {
              var htmlStr = '<div>';
              for (let i in params) {
                htmlStr += '<span style="display:inline-block;background-color:' + params[i].color + ';width:8px;height:8px;border-radius:50%;margin:0 5px;"></span>';
                htmlStr += '<span>' + params[i].seriesName + ':</span>';
                htmlStr += '<span style="margin:0 5px 0 3px;">' + params[i].value + '</span><br>';
              }
              htmlStr += '</div>';
              return htmlStr;
            }
          },
          grid: {
            left: '5%',
            right: '0%'
          },
          toolbox: {
            feature: {}
          },
          color: ['#26A2FF', '#FFC100'],
          legend: {
            right: '0%', //设置位置
            data: ['奖分', '扣分']
          },
          xAxis: [
            {
              type: 'category',
              data: Name,
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                interval: 0 //横轴信息全部显示
              },
              axisLine: {
                //去掉X轴线
                show: false
              },
              axisTick: {
                //去掉X轴刻度
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value}'
              },
              axisLine: {
                //去掉Y轴线
                show: false
              },
              axisTick: {
                //去掉Y轴刻度
                show: false
              }
            }
          ],
          series: [
            {
              name: '奖分',
              type: 'bar',
              barWidth: 14, //柱图宽度
              barGap: '0%', //柱图间距
              data: Award
            },
            {
              name: '扣分',
              type: 'bar',
              barWidth: 14, //柱图宽度
              barGap: '0%', //柱图间距
              data: Deduct
            }
          ]
        };
        myChart.setOption(option);
      }
    },
    deptConfirm3(val) {
      this.ManagerSAward(val);
    },
    ManagerSAward(item) {
      //管理者奖扣请求
      this.ManagerSAwardloading = true;
      let params = {};
      let listslength = [];
      if (item) {
        (params.dept_id = item), (params.month = this.$moment().format('YYYY-MM'));
      } else {
        (params.dept_id = 0), (params.month = this.$moment().format('YYYY-MM'));
      }
      this.$http('get', '/api/integral/statistics/task/pie', params, 'v2')
        .then(res => {
          let datas = res.data.data;
          listslength = datas.list;
          let items = [];
          let histogramAward = [];
          let histogramDeduct = [];
          for (let i in datas.list) {
            let arr = {}; //转结构
            (arr.type = 'userName'), (arr.id = datas.list[i].name);
            items.push(arr);
            histogramAward.push(datas.list[i].reward_point);
            histogramDeduct.push(datas.list[i].deduction_point);
          }
          this.ManagerSAwardlList[0].val = datas.reward_point;
          this.ManagerSAwardlList[1].val = datas.deduction_point;
          this.ManagerSAwardlList[2].val = datas.ratio;
          this.ManagerSAwardlList[3].val = datas.exec_count;
          this.ManagerSAwardlList[4].val = datas.manager_count;
          this.ManagerSAwardlList[5].val = datas.pass_count;
          this.ManagerSAwardlList[6].val = datas.fail_count;

          WWOpenData.prefetch({ items }, (err, data) => {
            if (err) {
              console.log(err);
            }
            var Name = data.items.map($0 => $0.data); // 这个就是转好的，直接丢到 echarts
            if (WWOpenData.initCanvas) {
              WWOpenData.initCanvas();
            }
            this.ManagerSAwardCharts(Name, histogramAward, histogramDeduct);
          });
        })
        .finally(() => {
          if (listslength.length == 0) {
            this.ManagerSAwardnone = true;
          } else {
            this.ManagerSAwardnone = false;
          }
          this.ManagerSAwardloading = false;
        });
    },
    //月度积分
    monthlyIntegralRanking(date, total, reward, deduction) {
      const chart = this.$refs.monthlyIntegralChart;
      if (chart) {
        const myChart = ECharts.init(chart);
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          color: ['#F56C6C', '#26A2FF', '#FFC100'],
          legend: {
            right: '0%',
            data: ['总积分', '奖分', '扣分']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {}
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: '总积分',
              type: 'line',
              data: total
            },
            {
              name: '奖分',
              type: 'line',
              data: reward
            },
            {
              name: '扣分',
              type: 'line',
              data: deduction
            }
          ]
        };
        myChart.setOption(option);
      }
    },
    //月度积分
    deptConfirm2(val) {
      this.exclusiveMonthBranch = val;
      this.monthlyIntegral()
    },
    monthlyIntegral() {
      this.monthlyIntegralloading = true;
      let params = {};
      let listslength = [];
      if (this.employeeRout) {
        params.employee_id = this.$store.getters.user_info.id;
      } else {
        params.dept_id = this.exclusiveMonthBranch;
      }
      params.month = this.$moment().format('YYYY-MM');
      if (this.exclusiveMonthChecked) {
        params.include_fixed = 1;
      } else {
        params.include_fixed = 0;
      }
      this.$http('get', '/api/integral/statistics/curve', params)
        .then(res => {
          if (res.data.code == 1) {
            let lists = res.data.data;
            listslength = lists;
            this.monthlyIntegralList[0].total_point = lists.total_point;
            this.monthlyIntegralList[1].reward_point = lists.reward_point;
            this.monthlyIntegralList[2].deduction_point = lists.deduction_point;
            this.monthlyIntegralList[3].ratio = lists.ratio;
            this.monthlyIntegralList[4].toRatio = lists.contrast_total;
            this.monthlyIntegralList[5].toRatio = lists.contrast_reward;
            this.monthlyIntegralList[6].toRatio = lists.contrast_deduction;
            let dates = []; //日期
            let totals = []; //总积分
            let rewards = []; //奖分
            let deductions = []; //扣分
            for (let i in lists.total) {
              dates.push(lists.total[i].date);
              totals.push(lists.total[i].point);
            }
            for (let i in lists.reward) {
              rewards.push(lists.reward[i].point);
            }
            for (let i in lists.deduction) {
              deductions.push(lists.deduction[i].point);
            }
            this.monthlyIntegralRanking(dates, totals, rewards, deductions);
          }
        })
        .finally(() => {
          if (listslength.total.length == 0) {
            this.monthlyIntegralnone = true;
          } else {
            this.monthlyIntegralnone = false;
          }
          this.monthlyIntegralloading = false;
        });
    },
    //积分构成
    deptConfirm1(val) {
      this.integralForm(val);
    },
    //分为两列展示，多传legendDataTwo
    drawLine(legendDataOne, legendDataTwo, dadalist) {
      const chart = this.$refs.IntegralFormChart;
      //此处可给固定颜色，不给就所有颜色随机
      let colors = ['rgb(38, 162, 255)', '#f36f2a', '#fecb09', '#00b6bd', '#e85d53', '#fecb09', '#725197', '#fcb814', '#41a08d', '#425a95', '#ea8b84', '#9d1d62', '#fcb814'];
      let legendDataLeng = legendDataOne.length + legendDataTwo.length;
      if (legendDataLeng > colors.length) {
        //当列表大于固定颜色时，给随机颜色
        let colorsLeng = colors.length;
        for (let i = 0; i <= legendDataLeng - colorsLeng; i++) {
          // colors.push('#' + Math.random().toString(16).substr(2, 6).toUpperCase());//也是随机色
          colors.push('rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')');
        }
      }
      //只显示 N 条标题，多余隐藏，但是饼图不会隐藏
      let DataLengths = [];
      for (let i in legendDataTwo) {
        if (i < 8) {
          DataLengths.push(legendDataTwo[i]);
        }
      }
      let left1 = '45%';
      let left2 = '45%';
      let leftBT = '25%';
      if (legendDataTwo.length != 0) {
        left1 = '33%';
        leftBT = '19%';
      }

      if (chart) {
        const myChart = ECharts.init(chart);
        var legendData1 = legendDataOne;
        var legendData2 = DataLengths;
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}'
          },
          legend: [
            {
              type: 'scroll',
              orient: 'vertical',
              icon: 'square',
              left: left1,
              align: 'left',
              top: '23%',
              itemGap: 20,
              // bottom:'50%',
              textStyle: {
                fontSize: 14,
                color: 'rgb(48, 49, 51)'
              },
              data: legendData1
            },
            //分为两列展示
            {
              type: 'scroll',
              orient: 'vertical',
              icon: 'square',
              left: '68%',
              align: 'left',
              top: '23%',
              itemGap: 20,
              // bottom:'50%',
              textStyle: {
                fontSize: 14,
                color: 'rgb(48, 49, 51)'
              },
              data: legendData2
            }
          ],
          color: colors,
          grid: {
            x: 25,
            y: 45,
            x2: 5,
            y2: 20,
            borderWidth: 1
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              magicType: {
                show: true,
                type: ['pie', 'funnel']
              }
            }
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: [20, 110],
              center: [leftBT, '50%'],
              roseType: 'radius',
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: false
                }
              },
              data: dadalist
            }
          ]
        };
        myChart.setOption(option);
      }
    },
    integralForm(item) {
      this.IntegralFormChartLoad = true;
      let listslength = [];
      let params = {};
      if (item) {
        (params.dept_id = item), (params.month = this.$moment().format('YYYY-MM'));
      } else {
        (params.dept_id = 0), (params.month = this.$moment().format('YYYY-MM'));
      }
      if (this.employeeRout) {
        params.employee_id = this.$store.getters.user_info.id;
      }
      this.$http('get', '/api/integral/statistics/pie/b', params, 'v2')
        .then(res => {
          let lists = res.data.data.list;
          listslength = lists;
          let legendData1 = [];
          let legendData2 = [];
          let dadalist = [];
          //分为两列展示
          // let listLeng = Math.ceil((lists.length)/2)

          for (let i in lists) {
            if (lists[i].name.length > 10) {
              lists[i].name = lists[i].name.slice(0, 10) + '...';
            }
            //分为两列展示
            // if(i<listLeng){
            //   legendData1.push(lists[i].name+' '+'奖'+lists[i].reward+' '+'扣'+lists[i].deduction+' '+lists[i].ratio+'%')
            // }else{
            //   legendData2.push(lists[i].name+' '+'奖'+lists[i].reward+' '+'扣'+lists[i].deduction+' '+lists[i].ratio+'%')
            // }
            if (i < 8) {
              legendData1.push(lists[i].name + ' ' + '奖' + lists[i].reward + ' ' + '扣' + lists[i].deduction + ' ' + lists[i].ratio + '%');
            } else {
              legendData2.push(lists[i].name + ' ' + '奖' + lists[i].reward + ' ' + '扣' + lists[i].deduction + ' ' + lists[i].ratio + '%');
            }
            // console.log(lists.length/2)

            let dataListDx = {};
            if (lists[i].ratio < 0) {
              dataListDx.value = 0;
            } else {
              dataListDx.value = lists[i].ratio;
            }
            dataListDx.name = lists[i].name + ' ' + '奖' + lists[i].reward + ' ' + '扣' + lists[i].deduction + ' ' + lists[i].ratio + '%';
            // dataListDx.name = lists[i].name
            dadalist.push(dataListDx);
          }
          //分为两列展示，多传legendData2
          this.drawLine(legendData1, legendData2, dadalist); //图表
          // this.drawLine(legendData1,dadalist)//图表
        })
        .finally(() => {
          if (listslength.length == 0) {
            this.IntegralFormnone = true;
          } else {
            this.IntegralFormnone = false;
          }
          this.IntegralFormChartLoad = false;
        });
    },
    customRanking(target_id, date_interval) {
      //自定义排名   date_interval=时间
      let data = {
        group_id: target_id,
        pt_id: 3,
        index_ranking: 1
      };
      data.date =
        date_interval == 1 ? this.$moment().format('YYYYMM') : date_interval == 2 ? this.$moment().format('YYYYQ') : date_interval == 3 ? this.$moment().format('YYYY') : '0';
      // request.get("/api/integral/statistics/ranking", { params: params })
      this.$http('get', '/api/integral/statistics/groups/rank', data)
        .then(res => {
          let lists = res.data.data.list;
          let rankingList = [];
          let arr = false;
          for (let i in lists) {
            let rankingJson = {};
            if (lists[i].employee_name) {
              arr = true;
            } else {
              arr = false;
              rankingJson.employee_id = lists[i].employee_id;
              rankingJson.employee_img_url = lists[i].img_url;
              rankingJson.employee_name = lists[i].name;
              rankingJson.point = lists[i].point;
              rankingJson.rank = lists[i].rank;
              rankingJson.status_remark = '';
              rankingList.push(rankingJson);
            }
          }
          if (arr) {
            this.rankingListDetails = lists;
          } else {
            this.rankingListDetails = rankingList;
          }
        })
        .finally(() => {
          this.addUpRankingLoad = false;
        });
    },
    addUpRanking() {
      //累计B分排名
      let params = {
        dept_id: 0,
        sort: 'DESC',
        page: 1,
        page_size: 10,
        pt_id: 3,
        type: 'all',
        index_ranking: 1
      };
      this.$http('get', '/api/integral/statistics/ranking', params, 'v2')
        .then(res => {
          this.rankingListDetails = res.data.data.list;
        })
        .finally(() => {
          this.addUpRankingLoad = false;
        });
    },
    departmentOfRanking() {
      //部门B分排名
      this.RankingPush = '/dept_rank';
      let params = {
        dept_id: 0,
        sort: 'DESC',
        pt_id: 3,
        time_type: 1,
        page: 1,
        page_size: 10,
        position: 'all',
        month: this.$moment().format('YYYY-MM'),
        index_ranking: 1
      };
      this.$http('get', '/api/integral/statistics/ranking', params, 'v2')
        .then(res => {
          this.rankingListDetails = res.data.data.list;
        })
        .finally(() => {
          this.addUpRankingLoad = false;
        });
    },
    rankingListname() {
      //获取排名列表
      this.tabPositionLoad = true;
      let params = {
        page: 1,
        page_size: 7
      };
      this.$http('get', '/api/integral/statistics/ranking/list', params)
        .then(res => {
          if (res.data.code == 1) {
            let lists = res.data.data.list;
            for (let i in lists) {
              lists[i].val = i;
              if (lists[i].type == 'normal') {
                lists[i].group_name = '阶段排名(月)';
              }
              if (lists[i].type == 'all') {
                lists[i].group_name = '累计B分排名';
              }
              this.rankingList.push(lists[i]);
            }

            this.addUpRankingLoad = true;
            this.departmentOfRanking(); //进入获取部门B分排名数据
          } else {
            self.$message.error(res.data.data.msg);
          }
        })
        .catch(e => {
          self.$message.error(e.data.data.msg);
        })
        .finally(() => {
          this.tabPositionLoad = false;
          // self.item_loading = false;
        });
    },
    tabPositions(e, item) {
      if (e.target.tagName === 'INPUT') return;
      if (item) {
        this.addUpRankingLoad = true;
      }
      if (item.type == 'normal') {
        this.RankingPush = '/dept_rank';
        this.departmentOfRanking();
      } else if (item.type == 'all') {
        this.RankingPush = '/total_rank';
        this.addUpRanking();
      } else if (item.type == 'custom') {
        this.RankingPush = '/custom_rank';
        this.customRanking(item.target_id, item.date_interval);
      }
    },
    //审批
    openDetail(item) {
      this.detail_id = item.id;
      this.detailShow = true;
    },
    get_list() {
      this.examineAndApproveloading = true;
      let params = {
        type: 'waiting',
        source_type: 0,
        pt_id: 0,
        page_size: 3,
        page: 1
      };
      this.$http('get', '/api/integral/review/list', params)
        .then(res => {
          if (res.data.code == 1) {
            this.examineAndApproveList = res.data.data.list;
            this.examineAndApproveindex = res.data.data.total;
          } else {
            this.$message.error(res.data.data.msg);
          }
          this.examineAndApproveloading = false;
        })
        .catch(e => {
          this.examineAndApproveloading = false;
        });
    },
    renew() {
      window.open('http://p.qiao.baidu.com/cps/chat?siteId=10793815&userId=3040844', '_blank');
    },
    //  生成二维码
    qrcode() {
      let self = this;
      let code = window.location.href.substring(0, window.location.href.length - 5) + 'android';
      let qrcode = new QRCode('secancode', {
        width: 110,
        height: 110, // 高度
        text: code // 二维码内容
      });
    },
    openGzd(val) {
      val ? this.$router.push({ path: val }) : '';
    },
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    site_infoTIme(site_info) {
      let moment = this.$moment;
      let create_time = site_info;
      let pastdueTime = moment(create_time.toString().length == 10 ? create_time * 1000 : create_time).format('YYYY-MM-DD');
      let atpresentDate = moment().format('YYYY-MM-DD');
      let date = moment(pastdueTime).diff(moment(atpresentDate), 'days');
      // date = 25
      if (date >= 0 && date <= 30) {
        this.pastdueDate = '您的积分软件即将到期，有效期至' + pastdueTime + '，请及时续费以免影响使用';
      } else if (date < 0) {
        this.pastdueDate = '您的积分软件已到期，有效期:' + pastdueTime + '，请及时续费以免影响使用';
      } else {
        this.pastdueDate = null;
      }
    },
    overdueToken() {
      let moment = this.$moment;
      let atpresentTime = moment().format('YYYY-MM-DD');
      if (localStorage.getItem('overdueToken')) {
        let overdue_Token = localStorage.getItem('overdueToken');
        let overdueNum = moment(atpresentTime).diff(moment(overdue_Token), 'days');
        if (overdueNum >= 7 && overdueNum <= 15) {
          this.refreshToken();
        }
      } else {
        localStorage.setItem('overdueToken', atpresentTime);
      }
    },
    refreshToken() {
      this.$http('get', '/api/fresh_token').then(res => {
        let employee_token = res.data.data.employee_token;
        let account_token = res.data.data.account_token;
        setToken(employee_token);
        localStorage.setItem('user_token_temp', account_token);
        localStorage.removeItem('overdueToken');
        this.overdueToken();
      });
    }
  },
  created() {
    this.$store.dispatch('get_point_types').then((res) => {})
    this.$store.dispatch('get_site_info').then((res) => {})
    this.$store.dispatch('get_employee_map').then((res) => {}) // 取得员工列表的地图
    this.$store.dispatch('get_dept_tree').then((res) => {}) // 获取部门树型结构列表



    if (this.$store.getters.user_info.manager_type == 4) {
      this.currentTubiao = 'tubiaoAdmin';
    } else if (this.$store.getters.user_info.manager_type == 0) {
      this.currentTubiao = 'tubiaoEmployee';
    }
    if (localStorage.getItem('dept_tree')) {
      this.dept_tree = this.getTreeData(JSON.parse(localStorage.getItem('dept_tree')));
    } else {
      this.$store.dispatch('get_dept_tree').then(res => {
        this.$nextTick(() => {
          this.dept_tree = this.getTreeData(JSON.parse(localStorage.getItem('dept_tree')));
        });
      });
    }
    localStorage.removeItem('site_info');
    this.$store.dispatch('get_site_info').then(res => {
      if (JSON.parse(localStorage.getItem('site_info'))) {
        this.site_infoTIme(JSON.parse(localStorage.getItem('site_info')).expire_time);
      } else {
        this.site_infoTIme(res.expire_time);
      }
    });
  },
  mounted() {
    if (this.employeeRout) {
      this.inCommonUse = [];
      this.inCommonUse.push(
        { name: '申请积分', image: 'static/images/a_apply.png', push: '/apply_list' },
        { name: '领任务', image: 'static/images/task_hall.png', push: '/get_task' }
      );
    }
    console.log(WWOpenData);
    if (JSON.parse(localStorage.getItem('Experience_data'))) {
      this.experience_data = JSON.parse(localStorage.getItem('Experience_data')).if; //是否体验账号
    }
    window.addEventListener('scroll', this.handleScrolls, true);
    // 修改请求接口顺序
    //判断是创始人还是管理员
    if (this.creatorJurisdiction) {
      //创始人
      this.highestPrizeBuckle(); //奖扣分最高积分事件
    } else {
      //管理员
      this.authorityManagerHeader(); //管理员header
    }
    if (this.employeeRout) {
      this.highestPrizeBuckle(); //奖扣分最高积分事件
    }
    this.rankingListname(); //获取自定义排行榜名
    // this.monthlyIntegral()//月度积分
    this.integralForm(); //积分构成
    this.get_list(); //待我审批的

    if (!this.creatorJurisdiction && !this.employeeRout) {
      //创始人不请求奖扣分最高积分事件
      this.highestPrizeBuckle(); //奖扣分最高积分事件
    }
    // this.weekChecking_in()//本周考勤
    this.advertising(); //广告位

    this.$nextTick(() => {
      this.$router.afterEach(() => {
        //切换到此路由时让滚动条回到顶部
        document.getElementsByClassName('main-content')[0].scrollTop = 0;
        document.documentElement.scrollTop = 0;
      });
    });
  },
  beforeDestroy() {
    //销毁滚动条事件
    window.removeEventListener('scroll', this.handleScrolls, true);
  },
  destroyed() {
    if (this.notify_close) {
      this.notify_close.close();
    }
  }
};
</script>

<style scoped>
/deep/ .el-carousel__button {
  background-color: #dadada;
}
.time-box .past {
  color: #999;
}

.mask-falsh {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.flash .closeBtn {
  width: 35px;
  z-index: 100;
  height: 35px;
  position: absolute;
  right: 0;
  padding: 5px;
  cursor: pointer;
}

.flash {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}

@media screen and (max-width: 1366px) {
  .index-admin-right {
    width: 100%;
  }

  .index-admin-left {
    width: 100%;
  }

  .index-admin-right .el-col-lg-8 {
    width: 16.66667%;
  }
}

@media screen and (max-width: 960px) {
  .card-panel-right {
    width: 100%;
  }

  .card-panel-left {
    width: 100%;
  }
}

.index-admin .el-tabs {
  background-color: #fff;
}

.el-tabs__item {
  height: 50px;
  line-height: 50px;
}

.el-tabs__item {
  font-size: 16px;
}

.el-row {
  padding: 0;

  & :last-child {
    margin-bottom: 0;
  }
}

.index-admin .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 15px !important;
}
.top_user_info {
  position: relative;
  padding-top: 0;
  background: #fff;
  border: 1px #e1e4e7 solid;
  box-shadow: 0 2px 4px rgba(140, 140, 140, 0.1);
}

.top_user_info .userinfo_box {
  border-right: 1px #cecccc solid;
  margin: 34px 0;
}

.top_user_info .user_box {
  padding-left: 0 !important;
  border-right: 1px #333 solid;
}

.top_user_info .headimg_box {
  padding-left: 0 !important;
}

.top_user_info .headimg_box .headimg {
  width: 50px;
  height: 50px;
  background: #909399;
  border-radius: 50px;
}

.top_user_info .user_info {
  padding: 0 !important;
  line-height: 25px;
}
.top_user_info .user_info .greetings {
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
}
.top_user_info .user_info .greetings div {
  max-width: 95px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
}
.top_user_info .user_info .greetings span {
  font-size: 14px;
  color: #666;
  display: inline-block;
  vertical-align: top;
}

.top_user_info .user_info span:nth-child(1) {
  display: block;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top_user_info .person {
  display: block;
  font-size: 14px;
  padding: 32px 0 18px 0;
  color: #606266;
}
/*
padding: 18px 0 16px 0;
color: #606266;
height: 32px;
box-sizing: content-box;
*/

.top_user_info .time {
  font-size: 14px;
  padding-right: 10px;
  position: relative;
}
.hong {
  position: relative;
}
.hong:before {
  position: absolute;
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 25px;
  background-color: #f56c6c;
  left: -0.8rem;
  animation: theanimation 1s infinite alternate;
}
@keyframes theanimation {
  0% {
    width: 0.4rem;
    height: 0.4rem;
    opacity: 0.1;
  }
  100% {
    width: 0.6rem;
    height: 0.6rem;
    opacity: 1;
  }
}
.top_user_info .el-button--info {
  margin-left: 40px;
}

.quick_button_box .title {
  font-family: Microsoft Yahei;
  font-size: 16px;
  font-weight: normal;
  padding-left: 20px;
}

/* .quick_button_box .quickbutton {
    margin-top: 26px;
    display: flex;
  } */

/* .quick_button_box .quickbutton .imgbox {
    display: block;
    text-align: center;
    width: calc(100%/5);
    flex: 1;
    opacity:0.76;
    transition:0.35s ease-in-out;
  }
  .quick_button_box .quickbutton .imgbox img:hover{
    cursor: pointer;
    opacity:1;
    transform:scale(1.1);
    transition:0.35s ease-in-out;
  }
  .quick_button_box .quickbutton .imgbox:hover .buttontitle{
    color:#409EFF;
  }
  .quick_button_box .quickbutton .imgbox img {
    display: inline-block;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    transition:0.35s ease-in-out;
  }

  .quick_button_box .quickbutton .imgbox .buttontitle {
    display: block;
    text-align: center;
    font-size: 14px;
    margin-top: 18px;
  } */

.readyapprove_box {
  /* display: block; */
  text-align: center;
  margin-left: 20px;
  /* padding-right: 0 !important; */
  border: 1px #e1e4e7 solid;
  box-shadow: 0 2px 4px rgba(140, 140, 140, 0.1);
}

.readyapprove_box .title {
  font-family: Microsoft Yahei;
  display: block;
  font-size: 16px;
  font-weight: normal;
  text-align: left;
  margin: 0px 20px 11px 0;
  padding: 2px 0 0 10px;
  border-left: 2px solid #409eff;
}

.readyapprove_box #secancode {
  display: inline-block;
  margin: 8px auto 10px;
}

.readyapprove_box .secantitle {
  display: block;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  color: #909399;
}

.raiders_box {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border: 1px #e1e4e7 solid;
  box-shadow: 0 2px 4px rgba(140, 140, 140, 0.1);
}

.raiders_box .title {
  font-family: Microsoft Yahei;
  padding-left: 10px;
  font-size: 16px;
  font-weight: normal;
  border-left: 2px solid #409eff;
}

.raiders_box .titledes {
  display: block;
  padding-top: 10px;
  font-size: 14px;
  color: #909399;
}

.raiders_box .noremind {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #909399;
  cursor: pointer;
}
.raiders_box .noremind:hover {
  color: #409eff;
}
.raiders_box .noremind:active {
  color: #409eff;
}
.pointsevent_box {
  display: block;
  text-align: center;
  margin: 20px 0 0 20px;
  padding-right: 0 !important;
  border: 1px #e1e4e7 solid;
  box-shadow: 0 2px 4px rgba(140, 140, 140, 0.1);
}

.pointsevent_box .title {
  font-family: Microsoft Yahei;
  display: block;
  text-align: left;
  margin-bottom: 20px;
  padding: 0 0 0 10px;
  font-size: 16px;
  font-weight: normal;
  border-left: 2px solid #409eff;
}

.pointsevent_box .more:hover {
  color: #26a2ff !important;
}

.nopoint_box {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}

.nopoint_box .noimg {
  display: inline-block;
  width: 110px;
  height: 110px;
  margin: 22px auto 16px;
  background: url(/images/nodata_default.png) no-repeat center;
  background-size: 99%;
}

.nopoint_box .noperson {
  display: inline-block;
  width: 110px;
  height: 110px;
  margin: 22px auto 16px;
  background: url(/images/noperson_default.png) no-repeat center;
  background-size: 99%;
}

.nopoint_box .title1 {
  display: block;
  text-align: center;
  font-size: 12px !important;
  color: #909399 !important;
  padding: 0;
}

.nopoint_box a {
  color: #26a2ff;
}

.pointsevent_box /deep/ .el-timeline {
  padding-left: 0;
}
.pointsevent_box /deep/ .el-timeline .el-timeline-item:hover .el-timeline-item__node {
  background: #409eff;
}
.pointsevent_box /deep/ .el-timeline .el-timeline-item__wrapper {
  text-align: left;
  font-size: 14px;
  color: #303133;
  padding-left: 24px;
}

.pointsevent_box /deep/ .el-timeline .el-timeline-item__wrapper span {
  display: block;
  font-size: 14px;
  color: #303133;
  margin-bottom: 8px;
}
.pointsevent_box /deep/ .el-timeline .el-timeline-item__wrapper:hover span {
  color: #409eff;
  cursor: pointer;
}
.pointsevent_box /deep/ .el-timeline .el-timeline-item__wrapper span:nth-child(2) {
  font-size: 12px;
  color: #909399;
}

.prizebuckle_box {
  margin: 20px auto 20px !important;
  padding: 0;
}

.prizebuckle_box .manager_box {
  width: 49%;
  margin-left: 1%;
  height: 570px;
  padding: 20px;
  background: #fff;
  border: 1px #e1e4e7 solid;
  box-shadow: 0 2px 4px rgba(140, 140, 140, 0.1);
}

.prizebuckle_box .manager_box .title {
  font-family: Microsoft Yahei;
  font-size: 16px;
  color: #303133;
  font-weight: normal;
  padding-left: 10px;
  border-left: 2px solid #409eff;
}

.prizebuckle_box .manager_box .list {
  position: relative;
  margin-top: 25px;
  padding-bottom: 22px;
}
.prizebuckle_box .manager_box .list:hover .point:before {
  box-shadow: 0 2px 4px rgba(140, 140, 140, 0.1);
  cursor: pointer;
}
.prizebuckle_box .manager_box .list:hover .point {
  cursor: pointer;
}
.prizebuckle_box .manager_box .list:hover:before {
  background: #409eff;
  border-bottom: 1px #409eff solid;
  box-shadow: 0 2px 4px rgba(140, 140, 140, 0.25);
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
.prizebuckle_box .manager_box .list .headimg_box {
  display: block;
}

.prizebuckle_box .manager_box .list:before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 20px;
  width: 350px;
  border-bottom: 1px #efefef solid;
  content: ' ';
  z-index: 1;
}

.prizebuckle_box .manager_box .list .headimg_box .headimg {
  display: inline-block;
  text-align: center;
  width: 40px;
  height: 40px;
  font-size: 12px;
  color: #fff;
  line-height: 40px;
  background: #606266;
  border-radius: 40px;
}

.prizebuckle_box .manager_box .list .headimg_box span {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  padding-left: 6px;
}

.prizebuckle_box .manager_box .list .item {
  position: relative;
  text-align: center;
  margin-top: 15px;
}

.prizebuckle_box .manager_box .list .item:before {
  display: none;
  position: absolute;
  content: ' ';
  top: 0;
  left: 0;
  width: 90%;
  height: 100%;
  background: #f8f8f8;
  border-radius: 8px;
  z-index: 1;
  transition: 0.5s ease-in-out;
}

.prizebuckle_box .manager_box .list .item .point {
  font-size: 20px;
  color: #606266;
}

.prizebuckle_box .manager_box .list .item .describe {
  font-size: 12px;
  color: #606266;
  padding: 10px 0;
}

.prizebuckle_box .manager_box .list .more a {
  display: block;
  text-align: center;
  font-size: 14px;
  color: #909399;
  margin-top: 42px;
}

.prizebuckle_box .remeber_box {
  width: 49%;
  height: 570px;
  margin-right: 1%;
  padding: 20px;
  background: #fff;
  border: 1px #e1e4e7 solid;
  box-shadow: 0 2px 4px rgba(140, 140, 140, 0.1);
}
.prizebuckle_box .remeber_box .team_data_item {
  position: relative;
}
.prizebuckle_box .remeber_box .team_data_item:before {
  display: block;
  position: absolute;
  top: 52px;
  left: 0px;
  width: 390px;
  border-bottom: 1px #efefef solid;
  content: ' ';
  z-index: 1;
}
.prizebuckle_box .remeber_box .team_data_item:hover {
  cursor: pointer;
}
.prizebuckle_box .remeber_box .title {
  font-family: Microsoft Yahei;
  font-size: 16px;
  color: #303133;
  font-weight: normal;
  padding-left: 10px;
  border-left: 2px solid #409eff;
}

.prizebuckle_box .remeber_box .name {
  text-align: center;
  font-size: 14px;
  color: #606266;
  padding: 28px 0 20px;
}

.prizebuckle_box .remeber_box .name:nth-child(1) {
  text-align: left;
}

.prizebuckle_box .remeber_box .name:last-nth-child(1) {
  text-align: right;
}

.prizebuckle_box .remeber_box .list {
  position: relative;
  margin-bottom: 20px;
  border-bottom: none;
}

.prizebuckle_box .remeber_box .list:before {
  display: none;
  position: absolute;
  top: -6px;
  left: 20px;
  right: 20px;
  width: 400px;
  height: 50px;
  background: #f8f8f8;
  border-radius: 40px 0 0 40px;
  box-shadow: none;
  transition: 0.35s ease-in-out;
  z-index: 1;
}

.prizebuckle_box .remeber_box .list:hover:before {
  background: #409eff;
  box-shadow: 1px 2px 4px rgba(51, 51, 51, 0.2);
  transition: 0.35s ease-in-out;
}
.prizebuckle_box .remeber_box .list:hover .point {
  color: #1c1c1c;
}
.prizebuckle_box .remeber_box .team_data_item:hover:before {
  border-bottom: 1px #409eff solid;
}
.prizebuckle_box .remeber_box .list .headimg_box {
  position: relative;
  display: block;
  padding-right: 0 !important;
  z-index: 2;
}

.prizebuckle_box .remeber_box .list .headimg_box .headimg {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  font-size: 12px;
  color: #fff;
  line-height: 40px;
  background: #909399;
  border-radius: 40px;
}

.prizebuckle_box .remeber_box .list .headimg_box span.headname {
  width: 98px;
  float: right;
  display: block;
  font-size: 16px;
  margin-left: 4px;
  line-height: 40px;
  vertical-align: bottom;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.prizebuckle_box .remeber_box .list .point {
  position: relative;
  text-align: center;
  padding-top: 10px;
  font-size: 16px;
  z-index: 2;
}

.prizebuckle_box .remeber_box .list .point .record {
  display: block;
  font-size: 14px;
  padding-bottom: 10px;
}

.prizebuckle_box .remeber_box .list .point .name {
  display: block;
  font-size: 12px;
  padding-bottom: 6px;
}

.prizebuckle_box .remeber_box .list .point .object {
  display: block;
  font-size: 12px;
}

.prizebuckle_box .remeber_box .more span {
  display: block;
  text-align: center;
  font-size: 14px;
  color: #909399;
  margin-top: 0px;
}

.prizebuckle_box .more:hover span {
  color: #26a2ff !important;
  cursor: pointer;
}

.joinin_box {
  display: block;
  text-align: left;
  margin: 20px 0 0 20px !important;
  padding-right: 0 !important;
}

.joinin_box .title {
  display: block;
  font-size: 16px;
  color: #303133;
  padding: 18px 20px 0px;
}

.joinin_box .join_name {
  display: block;
  font-size: 12px;
  color: #909399;
  padding: 10px 20px 18px;
}

.statistics_box {
  margin: 0 auto 20px !important;
  padding: 20px;
  background: #fff;
  border: 1px #e1e4e7 solid;
  box-shadow: 0 2px 4px rgba(140, 140, 140, 0.1);
}

.statistics_box .title {
  font-family: Microsoft Yahei;
  font-size: 16px;
  margin: 0 0 20px 0;
  padding: 0 0 0px 10px !important;
  font-weight: normal;
  border-left: 2px solid #409eff;
}

.statistics_box .num {
  font-size: 20px;
  color: #409eff;
}

.statistics_box .num span {
  font-size: 12px;
  color: #606266;
  padding-right: 10px;
}

.case_box {
  margin: 20px auto 0 !important;
  padding: 20px 20px 30px 20px;
  background: #fff;
}

.case_box .title {
  font-size: 16px;
  padding: 0 0 20px 0 !important;
}

.case_box .noremind {
  display: block;
  text-align: right;
  font-size: 12px;
  padding-right: 20px;
  color: #909399;
}

.case_box .newslist {
  padding: 0 !important;
}

.case_box .newslist .imgbox {
  width: 196px;
  height: 110px;
  background: #909399;
}

.case_box .newslist .listtitle {
  display: block;
  font-size: 14px;
  color: #606266;
  padding: 6px 0 0 0;
}

.case_box .newslist .des {
  display: block;
  font-size: 12px;
  color: #606266;
  padding: 10px 0 0 0;
}

.more_manager {
  cursor: pointer;
  padding: 20px 0;
  color: rgb(144, 147, 153);
  font-size: 14px;
  text-align: center;
}
/* .team_data_item:hover{
    color: #26A2FF;
  } */
.update_button:hover {
  background: #fc7676;
  border: 1px #fc7676 solid;
}
.update_button:active {
  background: #fc7676;
  border: 1px #fc7676 solid;
}

.examineAndApproveTable /deep/ td {
  border: 0px solid #fff;
}

.readyapprove_box .more:hover {
  color: #26a2ff !important;
}
.rightexamineAndApproveList {
  text-align: left;
  width: 100%;
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
}
.List_border:nth-child(5) .rightexamineAndApproveList {
  border-bottom: 0px solid #fff;
}
/* .List_border:hover{
    background-color: rgb(252, 252, 252);
  } */

/deep/ .el-radio-button__inner {
  border: 0px solid #dcdfe6;
  border-radius: 5px;
  padding-right: 15px;
}
/deep/ .el-radio-button--medium .el-radio-button__inner {
  padding: 7px 13px;
}
.el-radio-button:first-child /deep/ .el-radio-button__inner {
  border: 0px solid #dcdfe6;
  border-radius: 5px;
}
.el-radio-button:last-child /deep/ .el-radio-button__inner {
  border-radius: 5px;
}

.ManagerSAwardlStyle {
  text-align: center;
  display: block;
  cursor: pointer;
}
.ManagerSAwardlStyleB {
  color: #303133;
  font-size: 18px;
  transition: all 0.5s;
}
.ManagerSAwardlStyleSpan {
  color: rgb(48, 49, 51);
  font-size: 14px;
  margin-top: 5px;
  display: block;
}
.ManagerSAwardlStyle:hover .ManagerSAwardlStyleB {
  color: #4eb2ff;
}

.weekChecking_inStyle {
  color: #606266;
  font-size: 14px;
  display: block;
}
.weekChecking_inStyle b {
  color: rgb(38, 162, 255);
  transition: all 0.5s;
}
.weekChecking_inStyle:hover b {
  color: rgb(0 145 255);
}

.inCommonUseStyle {
  width: 215px;
  height: 54px;
  border: 1px solid #c0c4cc;
  display: block;
  margin: 16px 0 0 10px;
  display: flex;
  line-height: 54px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s;
}
.inCommonUseStyle b {
  transition: all 0.5s;
  color: #303133;
  font-size: 14px;
}
.inCommonUseStyle:hover {
  background-color: #fcfcfc;
  border: 1px solid #409eff;
}
.inCommonUseStyle:hover b {
  color: #409eff;
}

.vtRenew {
  color: #53b3f7;
}

.innerVisible p {
  text-align: center;
}
/deep/ .el-dialog__body {
  padding: 0 80px 15px;
}
</style>