gdy_pc_8/src/point/views/pointHome.vue

<template>
  <div>
    <div style="width: 100%;">
      <div v-if="noticeRole&&pastdueDate&&user_infos.try_user==0">
        <div style="z-index:1;width:100%;margin-bottom: 10px;">
          <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>
      </div>
      <div style="margin: 0 auto;width: 100%;margin-bottom: 10px;" v-if="experience_data">
          <el-carousel trigger="click" :interval="6000" height="125px">
            <el-carousel-item v-for="(item, index) in banner" :key="index">
              <div  class="bacimg" :style="{backgroundImage: returnImgIndex(item.image)}" style="no-repeat: center;" @click="bannerImagePush(item.key)"></div>
            </el-carousel-item>
          </el-carousel>
      </div>

      <el-row  style="width: 100%;">
        <el-col :span="18">
          <div class="flex-box-ce br-5" style="background-color: #fff;padding:20px;">
            <div class="flex-box-ce flex-1" v-loading="send_site_info_loading">
                <div style="margin-right: 10px;cursor:pointer;" v-if="noticeRole" @click="$router.push({ path: '/company_info', params: { activeName: 'second' } })">
                  <userImage :id="user_info.id" :img_url="user_info.img_url" :user_name="user_info.name" width="50px" height="50px"></userImage>
                </div>
                <div style="margin-right: 10px;" v-else>
                  <userImage :id="user_info.id" :img_url="user_info.img_url" :user_name="user_info.name" width="50px" height="50px"></userImage>
                </div>
                <div>
                  <div class="flex-box-ce" style="margin-bottom: 6px;font-size: 14px;color: #666;font-weight: 700;">
                    <div style="font-size: 16px;font-weight: 700;padding-right:15px;" class="black">{{ user_info.name }}</div>
<!--                    <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>
<!--                  <div class="fontColorC">
                    <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> -->
                </div>

              </div>


            <div class="flex-box-ce flex-3" v-if="supAuthority=='creator'">
              <div class="bsItem flex-box-ce flex-1" v-for="(item, index) in fits" :key="index" @click="openGzd(item.url)">
                <img :src="item.img" @click="openGzd(item.url)" style="width:46px;height:46px;margin-right:5px;" />
                <div>
                  <b style="color:#303133;font-size:16px;">{{ item.name }} <span v-if="item.num" class="el-badge__content">{{item.num}}</span></b>
                  <br />
                  <span style="color:#606266;font-size:12px;display: inline-block;margin-top:8px;">{{ item.value }}</span>
                </div>
              </div>
            </div>
            <div class="flex-box-ce flex-3 cursor" v-else v-loading="authorityManagerHeaderLoad" style="text-align: center;">
              <div class="flex-2 flex-box-ce" style="border-right: 1px #cecccc solid;" @click="openUrl">
                  <div class="flex-1">
                    <div class="blue-num">{{ authorityManagerHeaders.b_today}}</div>
                    <div class="blue-text">今日B分</div>
                  </div>
                  <div class="flex-1">
                    <div class="blue-num">{{ authorityManagerHeaders.b_week}}</div>
                    <div class="blue-text">本周B分</div>
                  </div>
                  <div class="flex-1">
                    <div class="blue-num">{{ authorityManagerHeaders.b}}</div>
                    <div class="blue-text">本月B分</div>
                  </div>
                  <div class="flex-1">
                    <div class="blue-num">{{ authorityManagerHeaders.a}}</div>
                    <div class="blue-text">本月A分</div>
                  </div>
              </div>
              <div class="flex-1" @click="$router.push({ path: '/total_rank' })">
                  <div class="blue-num">{{ authorityManagerHeaders.b_total}}</div>
                  <div class="blue-text">累计B分</div>
              </div>

            </div>
          </div>

          <div class="raiders_box">
            <div class="flex-box-ce">
              <div class="flex-1"><b class="title">排行榜</b></div>
              <div><span class="noremind" @click="$router.push({ path: RankingPush })">查看详情</span></div>
            </div>
            <div v-loading="tabPositionLoad">
              <div style="width:100%;height:30px;margin:20px 0;" class="flex-box-ce">
                <div class="group-name clamp2" :class="tabPosition==index?'activeGroup':''" v-for="(item, index) in rankingList" :key="index" @click="tabPosition=index;tabPositions(item)">{{item.group_name}}</div>
              </div>

              <div style="padding-top:30px;height:100%;" class="flex-box-ce" v-loading="addUpRankingLoad">
                <div style="text-align: center;" class="flex-1" v-if="rankingListDetails.length == 0">
                   <NoData  content="暂无积分数据"></NoData>
                </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;">

                    <img
                      v-if="item.rank <= 3"
                      :src="item.rank == 1 ? 'static/images/statistics_NO1.png' : item.rank == 2 ? 'static/images/statistics_NO2.png' : item.rank == 3 ? 'static/images/statistics_NO3.png' : ''"
                      style="z-index:1;position: absolute;right: 50%;top: -18px;font-size:28px;margin-right:-16px"
                    />

                    <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; line-height:24px;color:#303133;text-align:center;"
                    >
                      <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;"
                  >
                    {{ item.employee_name }}
                    <span v-if="item.employee_id == user_infos.id">(我)</span>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="raiders_box" v-if="pkList.length > 0" v-loading="pkLoading">
            <div class="flex-box-ce">
              <div class="flex-1">
                <b class="title">团队PK</b>
                <el-tooltip placement="top" content="只针对B分">
                  <i class="el-icon-question fontColorC"></i>
                </el-tooltip>
              </div>
            </div>
            <div>
              <div class="flex-1 scroll-bar" style="margin: 20px 0; overflow-x: auto; ">
                <div style="margin-bottom: 10px;">
                  <el-date-picker
                    v-model="pkTimeScope"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    editable
                  ></el-date-picker>
                </div>
                <el-tabs v-model="activeDoc" type="card" :stretch="true" >
                  <el-tab-pane  v-for="(doc,index) in pkList" :key="index" :name="index.toString()" :label="doc.name" >
                    <el-row :gutter="20" v-if="pkTeamList.length > 0" v-loading="pkTeamLoading">
                      <el-col :span="4" v-for="(team,index) in pkTeamList" :key="index" style="margin-bottom: 30px;">
                        <el-statistic
                          group-separator=","
                          :value="team.point"
                          :title="team.name"
                        ></el-statistic>
                      </el-col>
                    </el-row>
                    <div v-if="pkTeamList.length === 0"><NoData></NoData></div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>

          <div class="raiders_box" >
            <div class="flex-box-ce">
              <div class="flex-1">
                <b class="title">
                  部门对比
                  <el-tooltip placement="top">
                    <div slot="content">统计同级部门积分数据</div>
                    <i class="el-icon-question fontColorC"></i>
                  </el-tooltip>
                </b>
              </div>
            </div>
            <el-form :inline="true" v-if="this.supAuthority !== 'employee'" style="margin-top: 10px">
              <el-form-item label="时间区间">
                <el-date-picker
                  v-model="deptRankForm.timeRange"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  editable
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="部门">
                <el-cascader
                  v-model="dept_name4"
                  :options="dept_tree"
                  @change="deptRankChange"
                  ref="dept4"
                  filterable
                  change-on-select
                  placeholder="公司顶级部门"
                  clearable
                />
              </el-form-item>
              <el-form-item label="子部门">
                <el-checkbox v-model="deptRankForm.deptIncludeSub">包含</el-checkbox>
              </el-form-item>
              <br/>
              <el-form-item label="规则分类">
                <el-cascader
                  ref="deptRankRule"
                  v-model="rule"
                  @change="deptRankRuleChange"
                  :options="ruleTrees"
                  :props="{value:'id',label:'name',children:'child'}"
                  clearable
                  filterable
                  change-on-select
                  placeholder="规则分类"
                />
              </el-form-item>
              <el-form-item label="子规则分类">
                <el-checkbox v-model="deptRankForm.ruleIncludeSub">包含</el-checkbox>
              </el-form-item>
              <el-form-item label="积分类型">
                <el-select v-model="deptRankForm.ptId" placeholder="请选择积分类型">
                  <el-option v-for="item in $getTyps()" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>

            </el-form>
            <div v-loading="deptRankLoading">
              <NoData v-if="deptRankList.length === 0" :isSolt="true">
                <span class="title1">
                  暂无积分数据
                  <span v-if="supAuthority !== 'employee'" @click="$router.push({path:'/award_punish'})" style="color:#409EFF;cursor:pointer;">,去奖扣积分</span>
                </span>
              </NoData>
              <div>
<!--                <div ref="deptFormChart" :style="{ width: '100%', mimHeight: '400px' }"></div>-->
                <div ref="deptFormChart" style="width: 100%; min-height: 400px;"></div>
              </div>
            </div>
          </div>

          <div class="raiders_box">
            <div style="position: relative;">
              <div><b class="title" style="margin-bottom:15px;display:block">积分构成
                <el-tooltip placement="top">
                  <div slot="content">饼图仅统计B分占比较多的前8种规则分类</div>
                  <i class="el-icon-question fontColorC"></i>
                </el-tooltip>
              </b></div>
              <div v-if="this.supAuthority!='employee'">
                <el-cascader v-model="dept_name1" :options="dept_tree" @change="dept1_null" ref="dept1" filterable change-on-select placeholder="请选择部门" clearable></el-cascader>
              </div>
              <div v-loading="IntegralFormChartLoad">
                <NoData v-show="IntegralFormnone" :isSolt="true">
                  <span class="title1">
                    暂无积分数据
                    <span v-if="supAuthority!='employee'" @click="$router.push({ path: '/award_punish' })" style="color:#409EFF;cursor:pointer;">,去奖扣积分></span>
                  </span>
                </NoData>
                <div v-show="!IntegralFormnone"><div ref="IntegralFormChart" :style="{ width: '100%', height: '400px' }"></div></div>
              </div>
            </div>
          </div>

          <div class="raiders_box">
            <div style="position: relative;">
              <div style="display:flex">
                <b class="title" style="margin:0 20px 15px 0;display:block">本月积分情况</b>
                <el-checkbox v-model="exclusiveMonthChecked">不包含自动积分加分项</el-checkbox>
              </div>
              <div v-loading="monthlyIntegralloading">
                <div v-if="this.supAuthority!='employee'">
                  <el-cascader
                    v-model="dept_name2"
                    :options="dept_tree"
                    @change="monthlyIntegralchange"
                    ref="dept2"
                    filterable
                    change-on-select
                    placeholder="请选择部门"
                    clearable
                  ></el-cascader>
                </div>
                <NoData v-if="monthlyIntegralnone" content="暂无积分数据"></NoData>
                <div v-show="!monthlyIntegralnone">
                 <div ref="monthlyIntegralChart" :style="{ width: '100%', height: '350px' }"></div>
                 <div class="flex-box-ce flex-dv-center" style="margin-top: 30px;">
                    <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 + '%' }}
                        <i class="el-icon-top green" v-if="item.toRatio.type == 1"></i>
                        <i class="el-icon-bottom orange"  v-if="item.toRatio.type == 2"></i>
                      </b>
                      <span style="color:rgb(48, 49, 51);font-size:14px;margin-top:5px;display:block;">{{ item.name }}</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="raiders_box"  v-if="false">
            <div style="position: relative;">
              <div><b class="title" style="margin-bottom:15px;display:block">管理者奖扣任务执行情况</b></div>
              <div v-loading="ManagerSAwardloading">
                <div>
                  <el-cascader
                    v-model="dept_name3"
                    :options="dept_tree"
                    @change="ManagerSAwardlchange"
                    ref="dept3"
                    filterable
                    change-on-select
                    placeholder="请选择部门"
                    clearable
                  ></el-cascader>
                </div>
                <NoData content="暂无积分数据" v-if="ManagerSAwardnone"></NoData>
                <div v-show="!ManagerSAwardnone">
                  <div ref="ManagerSAwardChart" :style="{ width: '100%', 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>
            </div>
          </div>

        </el-col>

        <el-col :span="6">
          <div v-if="supAuthority!='employee'&&supAuthority!='dept_manager'" class="readyapprove_box" style="background-color:#fff;text-align:left;margin-bottom: 10px;">
            <div>
              <span class="title">数据大屏</span>
              <div class="cursor" @click="$router.push({path:'screenSet'})"><img src="static/images/321.jpg" style="width: 100%;"/></div>
            </div>
          </div>
          <div v-if="supAuthority!='creator'" class="readyapprove_box" style="background-color:#fff;text-align:left;margin-bottom: 10px;">
            <div>
              <span class="title">常用</span>
              <div>
                <span v-show="item.isShow" v-for="(item, index) in inCommonUse" :key="index" @click="$router.push({ path: item.push })" class="inCommonUseStyle flex-box-ce">
                  <img :src="item.image"  style="width:31px;height:31px;margin-right: 10px;" />
                  <div class="flex-box-ce flex-1">
                    <b class="flex-1">{{ item.name }}</b><span v-if="item.num" class="el-badge__content">{{item.num}}</span>
                  </div>
                </span>
              </div>
            </div>
          </div>

          <div class="pointsevent_box">
            <div class="grid-content bg-purple" v-loading="highestPrizeBuckleloading" style="padding: 20px 20px 0;">
              <span class="title">本周奖分最高</span>
              <NoData style="padding-bottom: 20px;" content="暂无积分数据" v-if="!prize.id"></NoData>
              <div v-else style="display:flex;padding-bottom:20px;">
                <userImage width="45px" height="45px" :id="prize.id" :user_name="prize.name" fontSize="16" style="margin-right:8px"></userImage>
                <div class="rightexamineAndApproveList" style="border:0px">
                  <p style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#73767c;font-size:16px;display:flex;justify-content: space-between;">
                    <b style="color:#303133;font-size:16px;">{{ prize.name }}</b>
                    <span style="color:#409EFF;font-size:16px;">
                      <span v-if="prize.point > 0">+</span>
                      {{ prize.point }} B分
                    </span>
                  </p>
                  <p class="task-remark">{{ prize.remark ? prize.remark.customize : '' }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="pointsevent_box">
            <div class="grid-content bg-purple" v-loading="highestPrizeBuckleloading" style="padding: 20px 20px 0;">
              <span class="title">本周扣分最多</span>
              <NoData style="padding-bottom: 20px;" content="暂无积分数据" v-if="!buckle.id"></NoData>
              <div v-else style="display:flex;padding-bottom:20px;">
                <userImage width="45px" height="45px" :id="buckle.id" :user_name="buckle.name" style="margin-right:8px"></userImage>
                <div class="rightexamineAndApproveList">
                  <p style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#73767c;font-size:16px;display:flex;justify-content: space-between;">
                    <b style="color:#303133;font-size:16px;">{{ buckle.name }}</b>
                    <span style="color:#FF9600;font-size:16px;">{{ buckle.point }} B分</span>
                  </p>
                  <p class="task-remark">
                    {{ buckle.remark ? buckle.remark.customize : '' }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- 本周考勤模块 -->
<!--          <div class="pointsevent_box" v-if="supAuthority!='employee'">
            <div class="grid-content bg-purple" v-loading="weekChecking_inloading" style="padding: 20px 20px 0;">
              <span class="title">本周考勤</span>
              <div style="display:flex;flex-wrap:wrap;justify-content: space-around;padding-bottom:20px">
                <div v-for="(item, index) in weekChecking_ins" :key="index" style="width:45%;">
                  <p class="weekChecking_inStyle">
                    <b style="font-size:20px;">{{ item.val }}</b>
                    <br />
                    {{ item.name }}
                  </p>
                </div>
              </div>
            </div>
          </div> -->

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

    <el-dialog :visible.sync="innerVisible" width="400px" append-to-body class="innerVisible" :close-on-click-modal="false">
      <p style="font-size:21px;">续费/升级</p>
      <p style="margin:0;">请在功道云积分服务群中联系客服顾问或微信扫码添加功道云客服进行续费</p>
      <img src="static/images/lADPDhmOve9UdT3NAa7NAa4_430_430.jpg" style="width:100%" />
      <p style="font-size:20px;">电话咨询：400-6877-880</p>
    </el-dialog>

  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import { mapGetters, mapState } from 'vuex';
import axios from 'axios';
import ECharts from 'echarts';
export default {
  components: {
    QRCode
  },
  data() {
    let deptRankStartDate = new Date();
    deptRankStartDate.setTime(deptRankStartDate.getTime() - 3600 * 1000 * 24 * 7);
    deptRankStartDate = this.$moment(deptRankStartDate).format('YYYY-MM-DD');
    let deptRankEndDate = this.$moment().format('YYYY-MM-DD');
    return {
      ruleTrees:[],
      rule:[],
      noticeRole: !this.$supremeAuthority('dept_manager')&&!this.$supremeAuthority('employee'),
      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/att_review.png', push: '/approval_list',num:0,isShow:false},
        { name: '任务', image: 'static/images/indexPTTask.png', push: '/my_task',num:0,isShow:false },
        { name: '奖分&扣分', image: 'static/images/entry_list.png', push: '/award_punish',isShow:false },
        { name: '任务下达', image: 'static/images/my_publish.png', push: '/my_issue',isShow:false },
        { name: '申请积分', image: 'static/images/a_apply.png', push: '/apply_list',isShow:false },
        { name: '领任务', image: 'static/images/task_hall.png', push: '/get_task',isShow:false }
      ],
      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_name4:[], //部门排名
      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, //审批列表数量

      supAuthority:this.$supremeAuthority(),//当前员工最高权限
      user_infos: this.$store.getters.user_info, //拿到当前登录人员信息，隐藏部门管理者等

      fits: [
        {
          name: '奖扣A/B分',
          value: '表现好坏，有奖有罚',
          img: 'static/images/prizeBuckle.png',
          url: '/award_punish',
          num:0,
        },
        {
          name: '任务下达',
          value: '认可积极完成任务的人',
          img: 'static/images/task.png',
          url: '/my_issue',
          num:0,
        },
        {
          name: '审批',
          value: '工作目标与价值的体现',
          img: 'static/images/performance.png',
          url: '/approval_list',
          num:0,
        },
      ],
      pointsevent: 0,
      send_site_info_loading: false,

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

      spTotal:0,//审批数量
      rwTotal:0,//任务数量
      pkLoading: false,
      pkPosition: 0,
      pkList: [],
      activeDoc:0,
      pkTeamLoading:false,
      pkTeamList:[],
      pkTimeScope: [],
      pkPickerOptions: {
        shortcuts:[
          {
            text:'最近一周',
            onClick(picker){
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text:'最近一个月',
            onClick(picker){
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },

      deptRankLoading: false,
      deptRankChart:null,
      deptRankForm:{
        ptId:this.$getTyps().filter(item => item.code === 'BF')[0].id,
        // startDate:this.$moment().startOf('week').format('YYYY-MM-DD'),
        // endDate:this.$moment().format('YYYY-MM-DD'),
        timeRange:[
          deptRankStartDate,
          deptRankEndDate
        ],
        ruleId:0,
        ruleIncludeSub:false,
        deptId:0,
        deptIncludeSub:false,
        itemId:0
      },
      deptRankTimeScope:[],
      deptRankList: [
        // {name:'',point:0}   //echart必须要有初始化数据后面才可以正常渲染图形,不知道为什么
      ],
    };
  },
  watch: {
    spTotal(val){
      this.fits[2].num=val
      this.inCommonUse[0].num=val
    },
    rwTotal(val){
      this.inCommonUse[1].num=val
    },
    exclusiveMonthChecked() {
      this.monthlyIntegral();
    },
    activeDoc(val,old){
      if (this.pkList.length <= val || val == old) return;
      this.getPkRankList(this.pkList[val].id)
    },
    pkTimeScope(val){
      if (this.pkList.length > this.activeDoc) this.getPkRankList(this.pkList[this.activeDoc].id);
    },
    deptRankTimeScope(val){
      this.deptRankForm.startDate = val[0];
      this.deptRankForm.endDate = val[1];
    },
    deptRankList(value){
      if (value.length === 0) {
        this.$refs.deptFormChart.style.display = 'none';
      }else {
        this.$refs.deptFormChart.style.display = 'block';
      }
      this.drawDeptRank();
    },
    'deptRankForm.ptId'(val,oVal){
      if (val === oVal) return;
      this.getDeptRank();
    },
    'deptRankForm.deptId'(val,oVal){
      if (val === oVal) return;
      this.getDeptRank();
    },
    'deptRankForm.timeRange'(val,oVal){
      this.getDeptRank();
    },
    'deptRankForm.deptIncludeSub'(val,oVal){
      this.getDeptRank();
    },
    'deptRankForm.ruleId'(val,oVal){
      this.getDeptRank();
    },
    'deptRankForm.ruleIncludeSub'(val,oVal){
      this.getDeptRank();
    }
  },
  computed: {
    ...mapState({
      user_info: state => state.user.user_info
    })
  },
  methods: {
    openUrl(){
      if(this.supAuthority!='employee'){
          this.$router.push({ path: '/integral_statistics' })
      }
    },
    returnImgIndex(url) {
      return 'url('+url+')';
    },
    //echarts自适应
    selfAdaption() {
    	var myChart1 =ECharts.init(this.$refs.monthlyIntegralChart);
    	var myChart2 =ECharts.init(this.$refs.IntegralFormChart);
      // var myChart3 = ECharts.init(this.$refs.deptFormChart);
    	myChart1.resize();
    	myChart2.resize();
      this.deptRankChart.resize();
      // myChart3.resize();
    },
    //点击轮播图
    bannerImagePush(item) {
      if (item == 1) {
         window.open('https://www.g107.net/integral.html');
      } else {
        window.open('https://www.g107.net/book.html');
      }
    },
    handleScrolls(e) {
      this.monthlyIntegral(); //月度积分
      this.highestPrizeBuckle()//奖扣分最高积分事件
    },
    //广告位
    advertising() {
      this.$axiosUser('get', '/api/pro/pc_admin')
        .then(res => {
          if (res.data.code == 1) {
            this.advertisingImage = res.data.data.advertising_img;
          }
        })
    },
    //管理员头部
    authorityManagerHeader() {
      this.authorityManagerHeaderLoad = true;
      let params = {
        employee_id: this.user_infos.id,
        month: this.$moment().format('YYYY-MM')
      };
      this.$axiosUser('get', '/api/pro/integral/statistics/', params, 'v3').then(res => {
          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'
      };
      this.$axiosUser('get', '/api/pro/integral/statistics/prize/buckle/ranking', params).then(res => {
            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.$axiosKq('get','/ad/statistics/department/weekly',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;
      if (chart) {
        const myChart = ECharts.init(chart);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          grid: {
            //表格偏移量
            // top: '5% '
            left: '5%',
            right: '0%'
          },
          toolbox: {
            feature: {
              // dataView: {show: false, readOnly: true},
              // magicType: {show: false, type: ['line', 'bar']},
              // restore: {show: false},
              // saveAsImage: {show: false}
            }
          },
          color: ['#409EFF', '#FFC100'],
          legend: {
            right: '0%', //设置位置
            data: ['奖分', '扣分']
          },
          xAxis: [
            {
              type: 'category',
              data: Name,
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                interval: 0 //横轴信息全部显示
                // rotate:-30,//-30度角倾斜显示
              },
              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);
      }
    },
    ManagerSAwardlchange(val) {
      //选中规则
      let valItem = 0;
      for (let i in val) {
        valItem = val[i];
      }
      // this.ManagerSAward(valItem);
      this.$nextTick(() => {
        this.$refs.dept3.dropDownVisible = false;
      });
    },
    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.$axiosUser('get', '/api/pro/integral/statistics/task/pie', params, 'v2')
        .then(res => {
          let datas = res.data.data;
          listslength = datas.list;
          let histogramName = [];
          let histogramAward = [];
          let histogramDeduct = [];
          for (let i in datas.list) {
            histogramName.push(datas.list[i].name);
            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;
          this.ManagerSAwardCharts(histogramName, 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', '#409EFF', '#FFC100'],
          legend: {
            // selectedMode: 'single',
            right: '4%',
            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);
      }
    },
    //月度积分
    monthlyIntegralchange(val) {
      if (val.length == 0) {
        this.exclusiveMonthBranch = 0;
      } else {
        let valItem = 0;
        for (let i in val) {
          valItem = val[i];
        }
        this.exclusiveMonthBranch = valItem;
      }
      this.monthlyIntegral();
      this.$nextTick(() => {
        this.$refs.dept2.dropDownVisible = false;
      });
    },
    monthlyIntegral() {
      this.monthlyIntegralloading = true;
      let params = {};
      let listslength = [];
      if(this.supAuthority=='employee'){
        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.$axiosUser('get', '/api/pro/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;
        });
    },
    //积分构成
    dept1_null(val) {
      let valItem = 0;
      for (let i in val) {
        valItem = val[i];
      }
      this.integralForm(valItem);
      this.$nextTick(() => {
        this.$refs.dept1.dropDownVisible = false;
      });
    },
    //分为两列展示，多传legendDataTwo
    drawLine(legendDataOne, legendDataTwo, dadalist) {
      // drawLine(legendDataOne,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 colors = [];
      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.supAuthority=='employee'){
        params.employee_id = this.$store.getters.user_info.id;
      }
      this.$axiosUser('get', '/api/pro/integral/statistics/pie/b', params, 'v2')
        .then(res => {
          let lists = res.data.data.list;
          listslength = lists;
          let legendData1 = [];
          let legendData2 = [];
          let dadalist = [];
          //分为两列展示
          for (let i in lists) {
            if (lists[i].name.length > 10) {
              lists[i].name = lists[i].name.slice(0, 10) + '...';
            }


            let str=`${lists[i].name}  ${lists[i].ratio}% ${lists[i].reward-Math.abs(lists[i].deduction)}分  (奖${lists[i].reward}分 扣${lists[i].deduction}分)`
            // let str=`${lists[i].name}  奖${lists[i].reward}分 扣${lists[i].deduction}分 合计得${lists[i].reward-Math.abs(lists[i].deduction)}分 占比${lists[i].ratio}%`
            //分为两列展示
            if (i < 8) {
              legendData1.push(str);
            } else {
              legendData2.push(str);
            }
            let dataListDx = {};
            if (lists[i].ratio < 0) {
              dataListDx.value = 0;
            } else {
              dataListDx.value = lists[i].ratio;
            }
            dataListDx.name =str ;
            // dataListDx.name = lists[i].name + ' ' + '奖' + lists[i].reward + ' ' + '扣' + lists[i].deduction + ' ' + lists[i].ratio + '%';
            dadalist.push(dataListDx);
          }
          //分为两列展示，多传legendData2

          if(dadalist.length>8){
            dadalist = dadalist.slice(0,8);
            legendData2=[];
          }
          this.drawLine(legendData1, legendData2, dadalist); //图表
        })
        .finally(() => {
          if (listslength.length == 0) {
            this.IntegralFormnone = true;
          } else {
            this.IntegralFormnone = false;
          }
          this.IntegralFormChartLoad = false;
        });
    },
    customRanking(item) {
      let data = {
        group_id: item.target_id,
        start_date:'',
        end_date:'',
        page_size:7,
        page:1,
      };
      if(item.date_interval==1){//本月
        data.start_date=this.$moment().startOf('month').format('YYYY-MM-DD');
        data.end_date=this.$moment().endOf('month').format('YYYY-MM-DD');
      }else if(item.date_interval==2){ //季
        data.start_date=this.$moment().startOf('quarters').format('YYYY-MM-DD');
        data.end_date=this.$moment().endOf('quarters').format('YYYY-MM-DD');
      }else if(item.date_interval==3){ //年
        data.start_date=this.$moment().startOf('year').format('YYYY-MM-DD');
        data.end_date=this.$moment().endOf('year').format('YYYY-MM-DD');
      }else if(item.date_interval==0){ //自定义
        data.start_date=item.start_date;
        data.end_date=item.end_date;
      }else if(item.date_interval==4){ //周
        data.start_date=this.$moment().week(this.$moment().week()).startOf('isoweek').format('YYYY-MM-DD');
        data.end_date=this.$moment().week(this.$moment().week()).endOf('isoweek').format('YYYY-MM-DD');
      }

      this.$axiosUser('get', '/api/pro/integral/statistics/ranking', data,'v3').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.$axiosUser('get', '/api/pro/integral/statistics/ranking', params, 'v3')
        .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.$axiosUser('get', '/api/pro/integral/statistics/ranking', params, 'v3')
        .then(res => {
          this.rankingListDetails = res.data.data.list;
        })
        .finally(() => {
          this.addUpRankingLoad = false;
        });
    },
    rankingListname() {
      //获取排名列表
      this.tabPositionLoad = true;
      let params = {
        page: 1,
        page_size: 7
      };
      this.$axiosUser('get', '/api/pro/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);
          }
        })
        .finally(() => {
          this.tabPositionLoad = false;
        });
    },
    getPkDocList(){
      this.pkLoading = true;
      //获取可见范围的PK档案列表
      this.$axiosUser('GET','/api/pro/pk/doc/list/visible')
        .then(res => {
          this.pkList = res.data.data.list;
          if (this.pkList.length > 0) this.getPkRankList(this.pkList[0].id)
        })
        .finally(() =>{
          this.pkLoading = false;
        })
    },
    getPkRankList(docId){
      if (!this.pkTimeScope || this.pkTimeScope.length !== 2) {
        this.pkTeamList = [];
        return;
      }

      let type = "team_pk";
      let params = {
        type:type,
        doc_id:docId,
        start_date:this.pkTimeScope[0],
        end_date:this.pkTimeScope[1]
      };
      this.pkTeamLoading = true;
      this.$socketApiTow.sendData(params,(res) => {
        if (res.type != type || res.code != 1) return;
        this.pkTeamList = res.result.teams;
        this.pkTeamLoading = false;
      })
    },
    tabPositions(item) {
      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);
      }
    },
    //审批
    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.$axiosUser('get', '/api/pro/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;
        });
    },
    get_new_employee() {
      let self = this;
      this.$axiosUser('get', '/api/pro/join/index').then(res => {
            const list = res.data.data.list;
            let item = list.find(item => item.status == 0);
            if (item !== undefined) {
              this.notify_close = this.$notify({
                showClose: false,
                dangerouslyUseHTMLString: true,
                offset: 64,
                onClick: function() {
                  this.close();
                  self.$router.push({
                    path: '/employee_table',
                    query: { is: true }
                  });
                },
                message: "<div style='height: 50px;display: block;'><div>" + item.account_name + '申请加入企业</div><p><a>点击处理</a></p></div>',
                duration: 0
              });
            }
      })
    },
    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 // 二维码内容
      });
    },
    openPage(index) {
      switch (index) {
        case 1:
          this.$router.push({
            path: '/company_info'
          });
          break;
        case 2:
          this.$router.push({
            path: '/set_basics'
          });
          break;
        case 3:
          this.$router.push({
            path: '/employee_table'
          });
          break;
        case 4:
          this.$router.push({
            path: '/rule_manage'
          });
          break;
        case 5:
          this.$router.push({
            path: '/attendance_classnew'
          });
          break;
      }
    },
    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');
      if (date >= 0 && date <= 30) {
        this.pastdueDate = '您的积分软件即将到期，有效期至' + pastdueTime + '，请及时续费以免影响使用';
      } else if (date < 0) {
        this.pastdueDate = '您的积分软件已到期，有效期:' + pastdueTime + '，请及时续费以免影响使用';
      } else {
        this.pastdueDate = null;
      }
    },
    // 获取审批和任务数量
    getNum(){
       let axios=this.$axiosUser('get', '/api/pro/integral/review/list', {type: 'waiting',page: 1,pt_id: 0,source_type: 0});
       let axios2=this.$axiosUser('get', '/api/pro/integral/work/list', {status: 'running',page: 1,pt_id: 0});
       Promise.all([axios,axios2]).then(res => {
            this.spTotal=res[0].data.data.total;//审批数量
            this.rwTotal=res[1].data.data.total;//任务数量
       })
    },
    deptRankChange(val){
      if (val.length === 0){
        this.deptRankForm.deptId = 0;
      }else {
        this.deptRankForm.deptId = val[val.length - 1];
      }
      this.$nextTick(() => {
        this.$refs.dept4.dropDownVisible = false;
      })
    },
    getDeptRank(){
      if (!this.deptRankForm.timeRange || this.deptRankForm.timeRange.length !== 2 || this.deptRankForm.ptId <= 0) return;

      this.deptRankLoading = true;
      let msg = {
        type: 'dr',
        start_date:this.deptRankForm.timeRange[0],
        end_date:this.deptRankForm.timeRange[1],
        pt_id:this.deptRankForm.ptId,
        dept_id:this.deptRankForm.deptId,
        dept_include_sub:this.deptRankForm.deptIncludeSub ? 1 : 0,
        rule_id:this.deptRankForm.ruleId,
        rule_include_sub:this.deptRankForm.ruleIncludeSub ? 1 : 0,
        item_id:this.deptRankForm.itemId
      };
      this.$socketApiTow.sendData(msg,(res) => {
        if (res.type !== msg.type || res.code !== 1) return;
        this.deptRankList = res.result.list;
        this.deptRankList.reverse()
        this.deptRankLoading = false;
      })
    },
    drawDeptRank() {
      if (!this.deptRankChart) return;
      //正负条形图
      let itemStyle = {color:'#91CC75',shadowColor: '#91cc75',borderType: 'dashed'};

      let option = {
        tooltip:{
          trigger:'axis',
          axisPointer: {
            type:'shadow'
          }
        },
        grid: {
          left: '1%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis:{
          type:'value'
        },
        yAxis:{
          type: 'category',
          axisTick: {
            show: false
          },
          data:[]
        },
        series:{
          name:'积分',
          type:'bar',
          label:{
            show:true,
            position:'inside'
          },
          data:[
          ]
        }
      };
      option.yAxis.data = [];
      option.series.data = [];
      let colorOk = '#409EFF';
      let colorBad = '#F36F2A';
      let colorNone = '#FECB09';
      this.deptRankList.forEach(item => {
        option.yAxis.data.push(item.name);

        let value = {
          value: item.point,
          itemStyle:{color:item.point > 0 ? colorOk : (item.point === 0 ? colorNone : colorBad)}
        }
        option.series.data.push(value)
      })

      //生成图像,动态计算容器高度
      this.deptRankChart.getDom().style.height = this.deptRankList.length * 30 + 'px';
      this.deptRankChart.setOption(option);
      //图像重新适应容器高度
      this.deptRankChart.resize();
    },
    deptRankRuleChange(val){
      if (val.length === 0){
        this.deptRankForm.ruleId = 0;
      }else {
        this.deptRankForm.ruleId = val[val.length - 1];
      }
      this.$nextTick(() => {
        this.$refs.deptRankRule.dropDownVisible = false;
      })
    },
    getRuleTreeData(data){
      for (var i = 0; i < data.length; i++) {
        if (data[i].child.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].child = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getRuleTreeData(data[i].child);
        }
      }
      return data;
    },
    getRuleTrees(){
      let self = this;
      self.$axiosUser('get', '/api/pro/integral/rule/trees',{ cycle_type: '1' }).then(res => {
        if (res.data.code == 1) {
          let arr = res.data.data.rule_tree;
          self.ruleTrees = self.getRuleTreeData(arr);
        } else {
          self.$message.error(res.data.data.msg);
        }
      });
    },

  },
  created() {

    this.$store.dispatch('get_dept_tree',true).then(res => {
      this.$nextTick(() => {
        this.dept_tree = this.getTreeData(this.$getCache('dept_tree'));
      });
    });
    // this.$removeCache('site_info');
    // this.$store.dispatch('get_site_info').then(res => {
    //   if (this.$getCache('site_info')) {
    //     this.site_infoTIme(this.$getCache('site_info').expire_time);
    //   } else {
    //     this.site_infoTIme(res.expire_time);
    //   }
    // });
    this.handleScrolls();

    const pkStartData = new Date();
    const pkEndData = new Date();
    pkStartData.setTime(pkEndData.getTime() - 3600 * 1000 * 24 * 30);
    this.pkTimeScope[0] = this.$moment(pkStartData).format("YYYY-MM-DD");
    this.pkTimeScope[1] = this.$moment(pkEndData).format("YYYY-MM-DD");

    this.getRuleTrees();
  },
  mounted() {
    this.deptRankChart = ECharts.init(this.$refs.deptFormChart);    //初始化部门排名图形对象

    this.inCommonUse.forEach((item,index)=>{
        if(this.supAuthority=='employee'&&(index==1||index==4||index==5)){
          item.isShow=true;
        }else if(this.supAuthority!='employee'&&(index==0||index==2||index==3||index==4||index==1)){
          item.isShow=true;
        }
    })
    if (this.$getCache('Experience_data')) {
      this.experience_data =this.$getCache('Experience_data').if; //是否体验账号
    }
    window.addEventListener('resize', this.selfAdaption);   //浏览器窗口大小变化触发图形对象重新自适应计算大小
    // 修改请求接口顺序

    this.getNum();// 获取审批和任务数量
    this.authorityManagerHeader(); //管理员header
    this.rankingListname(); //获取自定义排行榜名

    //websocket数据统一处理
    this.$socketApiTow.authWebSocket(() => {
      this.getPkDocList(); //pk档案列表
      this.getDeptRank(); //获取部门排名数据
    });

    this.integralForm(); //积分构成

    this.weekChecking_in(); //本周考勤
    this.advertising(); //广告位

    // this.get_site_info()//获取公司详情----当前页面没有用到，先别删
    // this.qrcode(); //生成二维码，可能无用
    // this.get_list(); //待我审批的
    this.$nextTick(() => {
      this.$router.afterEach(() => {
        //切换到此路由时让滚动条回到顶部
        document.getElementsByClassName('main-content')[0].scrollTop = 0;
        document.documentElement.scrollTop = 0;
      });
    });
    // if (!this.$supremeAuthority('dept_manager')&&!this.$supremeAuthority('employee')) {
    //   this.get_new_employee(); //申请加入弹窗
    // }
  },
  beforeDestroy() {
    //销毁滚动条事件
    window.removeEventListener('resize', this.selfAdaption); //取消echarts自适应
  },
  destroyed() {
    if (this.notify_close) {
      this.notify_close.close();
    }
  }
};
</script>

<style scoped>
  .task-remark{
    max-height: 40px;
    word-break: break-all;
    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;
  }
  .group-name{
    width:120px;
    color:#606266;
    margin-right: 16px;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    padding: 5px 10px;
    height: 49px;
    cursor: pointer;
  }
  .activeGroup{
    background-color: #409EFF;
    color: #fff;
    border: 1px solid #409EFF;
  }
  .blue-num{
    color:#409EFF;
    font-size:27px;
    font-weight: 700;
  }
  .blue-text{
    color:#606266;
    font-size:14px;
    padding-top:8px;
  }
  .bacimg{
    background-repeat: no-repeat;
    height: 125px;
    background-position: center;
  }
.el-badge__content {
    background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
}
/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 .div-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;
}

.div {
  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;
}

.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;
}

.readyapprove_box {
  text-align: center;
  margin-left: 10px;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  /* border: 1px #e1e4e7  solid; */
}

.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: 10px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
}
.bsItem{
  background-color: #ecf5ff;
  border-radius: 5px;
  margin: 0px 5px;
  cursor: pointer;
  padding: 12px;
}
.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-bottom: 10px;
  margin-left: 10px;
  padding-right: 0 !important;
  background-color: #fff;
  border-radius: 5px;
}

.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: #409EFF !important;
}
.title1 {
  display: block;
  text-align: center;
  color: #909399 !important;
  padding: 0;
}
.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 .point .record {
    position: relative;
    display: block;
    width: 90px;
    font-size: 20px;
    color: #1c1c1c;
    padding-bottom: 10px;
    z-index: 2;
  }

  .prizebuckle_box .manager_box .list .point .name {
    position: relative;
    display: block;
    width: 90px;
    font-size: 12px;
    color: #606266;
    padding-bottom: 6px;
    z-index: 2;
  }

  .prizebuckle_box .manager_box .list .point .object {
    position: relative;
    display: block;
    width: 90px;
    font-size: 12px;
    color: #606266;
    z-index: 2;
  }
  */

.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: #409EFF !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: #409EFF;
  } */
.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: #409EFF !important;
}
.rightexamineAndApproveList {
  text-align: left;
  width: 100%;
  /* border-bottom: 1px solid #efefef; */
}
.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;
  margin: 16px 0 0 10px;
  line-height: 54px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s;
  box-sizing: border-box;
  padding: 0 10px;
}
.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;
}
  .tips {
    background: #409EFF;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
  }
</style>