<template>
  <div style=" background-color: #fff; padding:15px; height:850px;">
    <div style="margin-top:2px; margin-bottom:15px;" class="inline-block-btn-list">
      <el-select
        v-show="(settings.data_permission.indexOf('dept') >= 0 && profile.manager_type == 0) || (profile.manager_type > 0) ||(settings.data_permission.indexOf('all') >= 0 && profile.manager_type == 0)"
        v-model="filter.target_id"
        filterable
        clearable
        placeholder="选择员工进行筛选"
        @change="loadData"
        class="gap-right-8 first-element-btn"
        style="width:290px;"
      >
        <el-option
          v-for="item in employeeOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-cascader
        v-show="false"
        clearable
        :options="categoryTree"
        change-on-select
        v-model="filter.category_id"
        @change="loadChartData"
        placeholder="选择积分分类进行筛选"
        class="gap-right-8"
      ></el-cascader>
      <el-select
        v-show="settings.point_set.indexOf('a') >= 0"
        v-model="filter.point_type"
        @change="loadData"
        class="gap-right-8"
        style="width:90px;"
      >
        <el-option
          v-for="item in pointTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-date-picker
        class="gap-right-8"
        v-model="filter.time_range"
        type="daterange"
        value-format="timestamp"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="instantPickerOptions"
        @change="loadData"
      ></el-date-picker>
    </div>
        <div
          v-show="rank_info.employee == null"
          style="
            position: absolute;
            width: 100%;
            top: 50%;
            margin-top: -115px;"
        >
          <img
            src="static/images/nodata.png"
            style="display: block; margin:0 auto;"
          >
          <p style="color:#ccc; text-align: center">暂无数据</p>
        </div>
    <!-- <div v-if="rank_info.employee == null">暂无数据</div> -->
    <el-card v-if="rank_info.employee != null" style="margin-bottom:10px;">
      <el-row>
        <el-col :lg="10" class="person-panel5">
          <div class="card-panel-left">
            <div class="card-panel grid-content bg-purple" style="height: 370px;">
              <div class="card-panel-icon-wrapper icon-people">
                <img
                  v-if="rank_info.employee.img_url != null"
                  :src="rank_info.employee.img_url"
                  width="50"
                  height="50"
                  style="border-radius: 30px;"
                >
                <img
                  v-if="rank_info.employee.img_url == null"
                  src="static/images/head_default.png"
                  width="50"
                  height="50"
                  style="border-radius: 30px;"
                >
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text" style="font-weight: normal;">
                  <span
                    style="font-weight: bold;"
                  >{{rank_info.employee.dept_name}}-{{rank_info.employee.name}}</span>
                  <br>
                  <span v-if="(rank_info.manager_type == 3)">（积分专员）</span>
                  <span v-if="(rank_info.manager_type == 1)">（部门管理员）</span>
                  <span v-if="(rank_info.manager_type == 2)">（公司管理员）</span>
                  <span v-if="(rank_info.manager_type == 4)">（公司管理员）</span>
                  <span v-if="(rank_info.manager_type == 0)">(公司员工)</span>
                  <img :src="imgUrl_01" class="card-panel-img_01">
                </div>
              </div>
              <div class="card-panel-updatetext" v-if="rank_info != null" style="margin: 40px 40px 0 0;">
                数据更新于：
                <span
                  class="card-panel-timetext"
                >{{rank_info.department.updatetime | dateTimeFormatter}}</span>
              </div>
              <router-link :to="{name:'point_rank'}" class="card-panel-BP" v-loading="loading1">
                <div class="card-panel-BP01" v-if="rank_info != null">
                  <count-to
                    :start-val="0"
                    :end-val="rank_info.compnay.point*1"
                    :duration="2600"
                    class="card-panel-num"
                  ></count-to>
                  <p class>当月总积分</p>
                </div>
                <div class="x-sidebar"/>
                <div class="card-panel-BP02" v-if="rank_info != null">
                  <count-to
                    :start-val="0"
                    :end-val="rank_info.compnay.rank*1"
                    :duration="2600"
                    class="card-panel-num"
                  ></count-to>

                  <img v-if="rank_info.compnay.status>0" :src="imgUrl_02" class="card-panel-img_02">
                  <img
                    v-if="rank_info.compnay.status<0"
                    :src="imgUrl_down"
                    class="card-panel-img_02"
                  >
                  <span
                    v-if="rank_info.compnay.status > 0"
                    style="vertical-align: super; color:rgb(245,108,108)"
                  >{{rank_info.compnay.rank_change}}</span>
                  <span
                    v-if="rank_info.compnay.status < 0"
                    style="vertical-align: super; color:rgb(103,194,58)"
                  >{{rank_info.compnay.rank_change}}</span>
                  <!-- <span></span>   -->
                  <p class>总排名</p>
                </div>
                <div class="x-sidebar"/>
                <div class="card-panel-BP03" v-if="rank_info != null">
                  <count-to
                    :start-val="0"
                    :end-val="rank_info.department.rank*1"
                    :duration="2600"
                    class="card-panel-num"
                  ></count-to>
                  <img
                    v-if="rank_info.department.status>0"
                    :src="imgUrl_02"
                    class="card-panel-img_02"
                  >
                  <img
                    v-if="rank_info.department.status<0"
                    :src="imgUrl_down"
                    class="card-panel-img_02"
                  >
                   <span
                    v-if="rank_info.department.status > 0"
                    style="vertical-align: super; color:rgb(245,108,108)"
                  >{{rank_info.department.rank_change}}</span>
                  <span
                    v-if="rank_info.department.status < 0"
                    style="vertical-align: super; color:rgb(103,194,58)"
                  >{{rank_info.department.rank_change}}</span>
                  <p class>部门排名</p>
                </div>
              </router-link>
              <h3 class="card-panel-tasktitle">本月数据统计</h3>
              <div class="card-panel-Score" v-loading="loading2">
                <router-link :to="{name:'event_master'}" class="card-panel-Score01">
                  <count-to
                    :start-val="0"
                    :end-val="employee_data.point_sum[0].point*1"
                    :duration="2600"
                    class="card-panel-mark"
                  ></count-to>
                  <p class>奖分</p>
                </router-link>
                <div class="x-sidebar"/>
                <router-link :to="{name:'event_master'}" class="card-panel-Score02">
                  <count-to
                    :start-val="0"
                    :end-val="employee_data.point_sum[1].point*1"
                    :duration="2600"
                    class="card-panel-mark"
                  ></count-to>
                  <p class>扣分</p>
                </router-link>
                <div class="x-sidebar"/>
                <router-link :to="{name:'task_mine'}" class="card-panel-Score03">
                  <count-to
                    :start-val="0"
                    :end-val="employee_data.task_count*1"
                    :duration="2600"
                    class="card-panel-mark"
                  ></count-to>
                  <p class>领取任务</p>
                </router-link>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :lg="14" v-loading="loading4">
          <el-scrollbar
            v-show="tableData.length!=0"
            wrap-class="column-wrapper scrollable-items-container"
            :native="false"
            style="height: 300px; padding-top:20px;"
          >
            <el-table
              @filter-change="filterHandler"
              ref="multipleTable"
              :data="tableData"
              :border="false"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column
                prop="category_path"
                label="积分分类"
                column-key="category"
                :filterMultiple="false"
                :show-overflow-tooltip="true"
                :filters="category_list"
              ></el-table-column>

              <el-table-column prop="remark" :show-overflow-tooltip="true" label="备注"></el-table-column>
              <el-table-column label="分值">
                <template slot-scope="scope">
                  <span
                    v-bind:class="scope.row.point < 0 ? 'point-negative' : 'point-positive'"
                  >{{ scope.row.point }}</span>
                </template>
              </el-table-column>
              <el-table-column label="时间">
                <template slot-scope="scope">
                <i v-if="scope.row.event_time" class="el-icon-time"></i>
                <span>{{dateFormatter('','',scope.row.event_time)}}</span>
              </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
          <el-pagination
            v-if="tableData.length > 0"
            background
            layout="total,sizes, prev, pager, next"
            :page-size="pageLimit"
            :page-sizes="[10, 20, 50, 100]"
            :total="totalCount"
            @size-change="handleSizeChange"
            :current-page.sync="currentPage"
            @current-change="changePage"
            :page-sizes="[5,10,20,30,50]"
          ></el-pagination>
          <div v-if="tableData.length == 0" style="height: 350px; position:relative;">
            <div
              style="
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -115px;
"
            >
              <img
                v-if="tableData.length == 0"
                src="static/images/nodata.png"
                style="display: block; margin:0 auto;"
              >
              <p style="color:#ccc; text-align: center">暂无积分事件</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div v-if="rank_info.employee != null">
      <ChartPersonalBar
        ref="ChartPersonalBarCom"
        :employee_id="filter.target_id"
        :time_range="time_range"
      ></ChartPersonalBar>
    </div>
  </div>
</template>
<script>
import ChartPersonalBar from '@/views/integral/ChartPersonalBar'
import CountTo from 'vue-count-to'
import moment from 'moment'
export default {
  data() {
    const now = new Date()
    const startDate = new Date(now.getFullYear(), now.getMonth(), 1)
    const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0)
    return {
      settings: this.$store.getters.system_setting,
      filter: {
        target_id: '',
        category_id: [],
        point_type: 0,
        time_range: null
      },
      category_list: [],
      totalCount: 0,
      currentPage: 1,
      tableData: [],
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      employee_data: {
        task_count: 0,
        point_sum: [
          {
            point: 0,
            type: 1
          },
          {
            point: 0,
            type: -1
          }
        ]
      },
      pageLimit: 5,
      rank_info: { employee: null },
      imgUrl_01: 'static/images/rank1.png',
      imgUrl_02: 'static/images/up.png',
      imgUrl_down: 'static/images/down.png',
      time_range: [startDate, endDate],
      profile: this.$store.getters.user_info,
      categoryTree: [],
      employeeOptions: [],
      pointTypes: [],
      trendChartContainerId: 'trend-chart-container',
      structurePositiveChartContainerId: 'structure-positive-chart-container',
      structureNegativeChartContainerId: 'structure-negative-chart-container',
      trendChartOptions: {
        chart: {
          type: 'line'
        },
        title: {
          text: '积分趋势图',
          style: {
            fontSize: '14px'
          }
        },
        credits: {
          enabled: false
        },
        colors: ['#42B983', '#F45B5B'],
        xAxis: {
          categories: [],
          labels: {
            style: {
              fontSize: '13px'
            }
          },
          title: {
            text: null
          }
        },
        yAxis: {
          title: {
            text: null
          },
          labels: {
            style: {
              fontSize: '13px'
            }
          },
          minTickInterval: 1
        },
        series: [],
        lang: {
          noData: '暂无数据'
        },
        noData: {
          style: {
            fontWeight: 'bold',
            fontSize: '14px',
            color: '#303030'
          }
        }
      },
      structurePositiveChartOptions: {
        chart: {
          type: 'pie'
        },
        title: {
          text: '奖分构成图',
          style: {
            fontSize: '14px'
          }
        },
        credits: {
          enabled: false
        },
        yAxis: {
          title: {
            text: null
          },
          labels: {
            style: {
              fontSize: '13px'
            }
          }
        },
        series: [],
        lang: {
          noData: '暂无数据'
        },
        noData: {
          style: {
            fontWeight: 'bold',
            fontSize: '14px',
            color: '#303030'
          }
        }
      },
      structureNegativeChartOptions: {
        chart: {
          type: 'pie'
        },
        title: {
          text: '扣分构成图',
          style: {
            fontSize: '14px'
          }
        },
        credits: {
          enabled: false
        },
        yAxis: {
          title: {
            text: null
          },
          labels: {
            style: {
              fontSize: '13px'
            }
          }
        },
        series: [],
        lang: {
          noData: '暂无数据'
        },
        noData: {
          style: {
            fontWeight: 'bold',
            fontSize: '14px',
            color: '#303030'
          }
        }
      },
      instantPickerOptions: {
        shortcuts: [
          {
            text: '本周',
            onClick(picker) {
              const now = new Date(new Date().toLocaleDateString())
              const start =
                now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000
              const end = start + 7 * 24 * 60 * 60 * 1000 - 1000
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '上周',
            onClick(picker) {
              const now = new Date(new Date().toLocaleDateString())
              const start =
                now.getTime() - (now.getDay() + 6) * 24 * 60 * 60 * 1000
              const end = start + 7 * 24 * 60 * 60 * 1000 - 1000
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本月',
            onClick(picker) {
              const now = new Date()
              const startDate = new Date(now.getFullYear(), now.getMonth(), 1)
              const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0)
              picker.$emit('pick', [startDate.getTime(), endDate.getTime()])
            }
          },
          {
            text: '上月',
            onClick(picker) {
              const now = new Date()
              const startDate = new Date(
                now.getFullYear() - (now.getMonth() > 0 ? 0 : 1),
                (now.getMonth() + 11) % 12,
                1
              )
              const endDate = new Date(now.getFullYear(), now.getMonth(), 0)
              picker.$emit('pick', [startDate.getTime(), endDate.getTime()])
            }
          },
          {
            text: '本年',
            onClick(picker) {
              const now = new Date()
              const startDate = new Date(now.getFullYear(), 0, 1)
              const endDate = new Date(now.getFullYear() + 1, 0, 0)
              picker.$emit('pick', [startDate.getTime(), endDate.getTime()])
            }
          }
        ]
      }
    }
  },
  components: {
    ChartPersonalBar,
    CountTo
  },
  methods: {
    handleSizeChange(val) {
      this.pageLimit = val
      this.onFilterChanged()
    },
    onFilterChanged: function() {
      this.currentPage = 1
      this.loadEventList()
    },
    changePage: function(current) {
      if (isNaN(current) || current < 1) {
        return false
      }
      this.loadEventList()
    },
    filterHandler: function(value) {
      if (typeof value.category !== 'undefined' && value.category.length == 0) {
        this.filter.category_id = []
      }
      if (typeof value.category !== 'undefined' && value.category.length > 0) {
        this.filter.category_id = value.category
      }

      this.onFilterChanged()
    },

    modeTypeFormatter: function(value) {
      switch (value) {
        case 1:
          return '积分录入'
        case 2:
          return '积分申请'
        default:
          return ''
      }
    },

    // 获取积分事件列表
    loadEventList: function() {
      this.loading4 = true
      if (this.filter.target_id == 0) {
        return false
      }
      const params = {
        employee_id: this.filter.target_id,
        page: this.currentPage,
        interval: this.pageLimit,
        target_id_set: this.filter.target_id
      }
      for (const item in this.filter) {
        const value = this.filter[item]
        if (item == 'target_id_set') {
          if (!value || value.length == 0) {
            continue
          }
          params[item] = value.join(',')
        } else if (item == 'category_id') {
          if (!value || value.length == 0) {
            continue
          }
          params[item] = value[value.length - 1]
        } else if (item == 'time_range') {
          if (!value || value.length < 2) {
            continue
          }
          const timeRangeArr = value.map(x => parseInt(x / 1000))
          timeRangeArr[1] += 60 * 60 * 24 - 1
          params[item] = timeRangeArr.join(',')
        } else {
          params[item] = value
        }
      }
      var self = this
      self.loading = true
      this.$http('get','/integral.php/ajax_request_common/get_integral_events',params)
        .then(function(response) {
          if (response.status == 200) {
            self.loading4 = false
            self.loading = false
            var jsonData = response.data
            try {
              self.department_list = jsonData.filter_list.department
              self.category_list = jsonData.filter_list.category
              self.totalCount = jsonData.total_count
              self.tableData = jsonData.list_data
            } catch (err) {
              console.log(err)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },

    reviewStatusFormatter: function(row, column, cellValue) {
      return cellValue == 1 ? '待审核' : '已生效'
    },
    dateFormatter: function(row, column, cellValue) {
      return this.$moment(cellValue * 1000).format('MM月DD日')
    },
    loadPointType: function() {
      var self = this
      this.$http('get','/integral.php/ajax_request_common/get_point_types')
        .then(function(response) {
          if (response.status == 200) {
            const jsonData = response.data
            try {
              self.pointTypes = jsonData
            } catch (err) {
              console.log(err)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },

    loadChartData: function() {
      if (
        this.filter.time_range != null &&
        this.filter.time_range.length == 2
      ) {
        time_range =
          this.filter.time_range[0] / 1000 +
          ',' +
          (this.filter.time_range[1] / 1000 + 60 * 60 * 24 - 1)
      }

      const params = {
        employee_id: this.filter.target_id,
        page: this.currentPage
      }
      for (const item in this.filter) {
        const value = this.filter[item]
        if (item == 'category_id') {
          if (!value || value.length == 0) {
            continue
          }
          params[item] = value[value.length - 1]
        } else if (item == 'time_range') {
          if (!value || value.length < 2) {
            continue
          }
          const timeRangeArr = value.map(x => parseInt(x / 1000))
          timeRangeArr[1] += 60 * 60 * 24 - 1
          params[item] = timeRangeArr.join(',')
        } else {
          params[item] = value
        }
      }
      if (!params.target_id && this.profile.is_creator == 1) {
        return
      }
      var self = this
      this.$http('get','/integral.php/point_data/chart_data_by_employee',params)
        .then(function(response) {
          if (response.status == 200) {
            const jsonData = response.data
            try {
              self.$refs['trendChart'].updateData({
                filter_text: jsonData.filter_text,
                chart: jsonData.trend_chart_data
              })
              self.$refs['structurePositiveChart'].updateData({
                filter_text: jsonData.filter_text,
                chart: jsonData.structure_positive_chart_data
              })
              self.$refs['structureNegativeChart'].updateData({
                filter_text: jsonData.filter_text,
                chart: jsonData.structure_negative_chart_data
              })
            } catch (err) {
              console.log(err)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    get_rank_data() {
      const self = this

      self.loading1 = true
      const time_range = self.getCurrMonthDays()
      console.log(moment(self.getCurrMonthDays()[0]).format('x'))
      let time_start = moment(time_range[0]).format('x') / 1000
      let time_end = moment(time_range[1]).format('x') / 1000 + (3600 * 24 - 1)
      if (self.filter.time_range != null) {
        time_start = self.filter.time_range[0] / 1000
        time_end = self.filter.time_range[1] / 1000 + (3600 * 24 - 1)
      }

      const params = {
        employee_id: self.filter.target_id,
        time_range: time_start + ',' + time_end,
        point_type: self.filter.point_type
      }
      this.$http('get','/integral.php/point_data/get_employee_rank',params)
        .then(response => {
          if (response.status == 200) {
            self.loading1 = false
            var jsonData = response.data

            try {
              self.rank_info = jsonData.data
              if (self.rank_info.employee != null) {
                self.$nextTick(() => {
                  console.log(self.$refs['ChartPersonalBarCom'])
                  self.$refs['ChartPersonalBarCom'].filter.time_range =
                    self.time_range
                  self.$refs['ChartPersonalBarCom'].filter.point_type =
                    self.filter.point_type
                  self.$refs['ChartPersonalBarCom'].loadChartData()
                })
              }
            } catch (err) {
              console.log(err)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },

    get_manager_auth_info() {
      const self = this
      self.loading2 = true

      const time_range = self.getCurrMonthDays()
      console.log(moment(self.getCurrMonthDays()[0]).format('x'))
      const time_start = moment(time_range[0]).format('x') / 1000
      const time_end = moment(time_range[1]).format('x') / 1000 + 3600 * 24 - 1

      const params = {
        employee_id: self.filter.target_id,
        time_range: time_start + ',' + time_end
      }
      if (self.filter.time_range != null) {
        params.time_range = [
          self.filter.time_range[0] / 1000,
          self.filter.time_range[1] / 1000
        ].join(',')
      } else {
        params.time_range = [time_start, time_end].join(',')
      }
      this.$http('get','/integral.php/ajax_request_common/get_employee_data',params)
        .then(response => {
          self.loading2 = false
          if (response.status == 200) {
            var jsonData = response.data
            try {
              if (jsonData.data.point_sum.length > 0) {
                self.employee_data = jsonData.data
              }
            } catch (err) {
              console.log(err)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    // 获取控件所需数据
    loadWidgetData: function() {
      var self = this
      const params = {
        id: this.profile.id,
        category_tree: 1,
        employee_list: 1
      }
      if (self.settings.data_permission.indexOf('all') >= 0) {
        params['all'] = 1
      }
      this.$http('get','/integral.php/ajax_request_common/prepare_integral_options',params)
        .then(function(response) {
          if (response.status == 200) {
            var jsonData = response.data
            try {
              self.categoryTree = jsonData.category_tree
              self.employeeOptions = jsonData.employee_list

              if (self.profile.is_creator == 1) {
                self.filter.target_id = jsonData.employee_list[0].id
                self.loadData()
              }
            } catch (err) {
              console.log(err)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    getCurrMonthDays() {
      const date = []
      const start =
        moment()
          .add('month', 0)
          .format('YYYY-MM') + '-01'
      const end = moment(start)
        .add('month', 1)
        .add('days', -1)
        .format('YYYY-MM-DD')
      date.push(start)
      date.push(end)
      return date
    },
    loadData() {
      const self = this

      self.filter.category_id = []

      const now = new Date()
      const startDate = new Date(now.getFullYear(), now.getMonth(), 1)
      const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0)
      if (self.filter.time_range != null) {
        self.time_range = [
          self.filter.time_range[0],
          self.filter.time_range[1]
        ]
      } else {
        self.time_range = [startDate, endDate]
      }

      this.get_rank_data()
      this.get_manager_auth_info()
      this.loadEventList()
    }
  },
  filters: {
    dateTimeFormatter: function(cellValue) {
      return cellValue ? moment(cellValue * 1000).format('MM-DD HH:mm') : ''
    }
  },
  created() {
    if (this.profile.is_creator == 0) {
      this.filter.target_id = this.profile.id
      this.loadData()
    }
    this.loadWidgetData()
    this.loadPointType()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.charts-pie-box {
  float: left;
}

.charts-tag li {
  list-style-type: none;
  line-height: 2;
  font-size: 14px;
}

.charts-tag li span {
  display: inline;
  padding: 0px 12px;
  margin-right: 12px;
  border-radius: 2px;
}

.person-panel5 {
  height: 330px;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  margin-bottom: 10px !important;
  margin-top: 18px;
  .card-panel-left {
    padding-right: 0px !important;
    padding-left: 0 !important;
  }
  .card-panel {
    font-size: 12px;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    .card-panel-icon-wrapper {
      color: #fff;
    }
    .icon-people {
      background: rgba(216, 216, 216, 1);
    }
    .icon-people {
      color: #fff;
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 25px 0 0 36px;
      transition: all 0.38s ease-out;
      border-radius: 100%;
    }
    .card-panel-icon {
      float: left;
      font-size: 36px;
    }
    .card-panel-img_01 {
      width: 20px;
      margin-left: 15px;
    }
    .card-panel-description {
      float: left;
      margin-top: 31px;
      margin-left: 15px;
      .card-panel-text {
        font-weight: bold;
        line-height: 18px;
        color: #606266;
        font-size: 16px;
        margin-bottom: 12px;
      }
    }
    .card-panel-updatetext {
      float: right;
      color: #606266;
      font-size: 14px;
      margin-top: 48px;
      margin-right: 48px;
      .card-panel-timetext {
        white-space: nowrap;
      }
    }
    .card-panel-BP {
      float: left;
      color: #606266;
      width: 100%;
      font-size: 14px;
      margin-top: 20px;
      margin-left: 10px;
      margin-right: 944px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      text-align: center;
      .card-panel-BP01 {
        width: 32.333%;
      }
      .card-panel-BP02 {
        width: 32.333%;
      }
      .card-panel-BP03 {
        width: 32.333%;
      }
      .x-sidebar {
        float: left;
        height: 67px;
        border-right: 0.09rem solid #dddddd;
      }
    }
    .card-panel-BP-text {
      font-family: "Microsoft YaHei";
      color: rgba(144, 147, 153, 1);
      font-size: 14px;
      white-space: nowrap;
      line-height: 19px;
      text-align: center;
      .card-panel-img_02 {
        max-height: 0.3rem;
      }
    }
    .card-panel-num {
      font-family: "Microsoft YaHei";
      font-size: 32px;
      color: rgba(245, 108, 108, 1);
    }
    .card-panel-tasktitle {
      font-family: "Microsoft YaHei";
      color: rgba(85, 85, 85, 1);
      float: left;
      width: 120px;
      height: 10px;
      font-size: 16px;
      font-size: 14px;
      margin-left: 35px;
      margin-right: 906px;
    }
    .card-panel-Score {
      float: left;
      color: #606266;
      width: 100%;
      font-size: 14px;
      margin-top: 10px;
      margin-left: 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      text-align: center;
      .card-panel-Score01 {
        width: 32.333%;
      }
      .card-panel-Score02 {
        width: 32.333%;
      }
      .card-panel-Score03 {
        width: 32.333%;
      }
      .x-sidebar {
        float: left;
        height: 67px;
        border-right: 0.09rem solid #dddddd;
      }
    }
    .card-panel-Score-text {
      font-family: "Microsoft YaHei";
      color: rgba(144, 147, 153, 1);
      font-size: 14px;
      white-space: nowrap;
      line-height: 19px;
      text-align: center;
    }
    .card-panel-mark {
      font-family: "Microsoft YaHei";
      font-size: 32px;
      color: rgba(91, 139, 247, 1);
    }
  }
  .card-panel-right {
    float: right;
    padding-right: 20px;

    background: #fff;
  }
}

.person-panel .card-panel {
  box-shadow: none !important;
  border: none;
}
</style>
