gdy_qywx_pc/src/views/integral/PointStructureChart.vue

<!--suppress ALL -->
<template>
  <ve-pie :legend="pieLegend" :series="pieseries" :legend-visible="true" width="300px"
          height="150px"
          class="card-panel-pichart"/>
</template>

<script>
  import Vue from 'vue'
  import VCharts from 'v-charts'

  Vue.use(VCharts)
  export default {
    data() {

      return {
        pieseries:
          {
            name: '姓名',
            type: 'pie',
            radius: 55,
            center: [100, 80],
            label: {show: false},
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
        pieLegend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 30,
          bottom: 20,
          data: []
        }
      }
    },
    created() {
      this.get_chart_data()
      this.get_rank_data()
      this.get_manager_auth_info()
    },
    filters: {
      dateTimeFormatter: function (cellValue) {
        return cellValue ? moment(cellValue * 1000).format('MM-DD HH:mm') : ''
      },
    },
    methods: {



      getCurrMonthDays() {
        let date = []
        let start = moment().add('month', 0).format('YYYY-MM') + '-01'
        let end = moment(start).add('month', 1).add('days', -1).format('YYYY-MM-DD')
        date.push(start)
        date.push(end)
        return date
      },

      get_rank_data() {
        const self = this

        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.profile.id,
          time_range: time_start + ',' + time_end
        }
        this.$http('get','/integral.php/point_data/get_employee_rank',params).then((response) => {
          if (response.status == 200) {
            var jsonData = response.data
            try {
              self.rank_info = jsonData.data
              console.log(self.rank_info)
            } catch (err) {
              console.log(err)
            }
          }
        }).catch(function (error) {
          console.log(error)
        })
      },

      get_manager_auth_info() {
        const self = this

        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.profile.id,
          time_range: time_start + ',' + time_end
        }
        this.$http('get','/integral.php/point_data/get_manager_auth_info',params).then((response) => {
          if (response.status == 200) {
            var jsonData = response.data
            try {
              self.auth_info['addSum'] = 0
              self.auth_info['deduct_addCount'] = 0
              self.auth_info['deductSum'] = 0

              if(jsonData.data.length == 1){
                self.auth_info['addSum'] = jsonData.data[0].point*1
                self.auth_info['deduct_addCount'] += jsonData.data[0].rec_count*1

              }else if(jsonData.data.length == 2){
                self.auth_info['addSum'] = jsonData.data[0].point*1
                self.auth_info['deduct_addCount'] += jsonData.data[0].rec_count*1
                self.auth_info['deductSum'] = jsonData.data[1].point*1
                self.auth_info['deduct_addCount'] += jsonData.data[1].rec_count*1
              }

              console.log(self.auth_info)
            } catch (err) {
              console.log(err)
            }
          }
        }).catch(function (error) {
          console.log(error)
        })
      },


      get_chart_data() {
        const self = this
        const time_now = moment(Date.now(), 'YYYY-MM-DD HH:mm:ss')._i / 1000
        const time_end = time_now - 24 * 3600 * 30
        const params = {
          employee_id: self.profile.id,
          target_id: self.profile.id,
          point_type: 0,
          time_range: time_end + ',' + time_now
        }
        this.$http('get','/integral.php/point_data/chart_data_by_employee',params).then((response) => {
          if (response.status == 200) {
            var jsonData = response.data
            try {
              // 饼图
              const pieseries = []
              const pieLegend = []
              for (const item in jsonData.structure_positive_chart_data) {
                pieseries.push({
                  value: jsonData.structure_positive_chart_data[item][1],
                  name: jsonData.structure_positive_chart_data[item][0] + '(' + jsonData.structure_positive_chart_data[item][1] + ')'
                })
                pieLegend.push(jsonData.structure_positive_chart_data[item][0] + '(' + jsonData.structure_positive_chart_data[item][1] + ')')
              }
              self.$set(self.pieseries, 'data', pieseries)
              self.$set(self.pieLegend, 'data', pieLegend)

              // 线图
              const lineData = []
              for (const item in jsonData.trend_chart_data.labels) {
                lineData.push({
                  '日期': jsonData.trend_chart_data.labels[item],
                  '奖分': jsonData.trend_chart_data.p_positive[item],
                  '扣分': jsonData.trend_chart_data.p_negative[item] * -1
                })
              }
              self.$set(self.chartData02, 'rows', lineData)
            } catch (err) {
              console.log(err)
            }
          }
        }).catch(function (error) {
          console.log(error)
        })
      }

    }
  }
</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-panel {
    width: 100%;
    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, .05);
      border-color: rgba(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-text span{color:#666; font-size: 12px; font-weight: normal;}
      }
      .card-panel-updatetext {
        float: left;
        color: #606266;
        font-size: 14px;
        margin-top: 48px;
        margin-left: 60px;
        .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: 33.333%;
        }
        .card-panel-BP02 {
          width: 33.333%;
        }
        .card-panel-BP03 {
          width: 33.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: .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: 100%;
        }
        .card-panel-Score02 {
          width: 100%;
        }
        .card-panel-Score03 {
          width: 100%;
        }
        .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: 0px !important;

      background: #fff;

    }
  }


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