dvcp_v2_webapp/project/qianxinan/AppPointsDetails/components/Detail.vue

<template>
  <section class="detail">
    <ai-title slot="title" :title="`${data.name}详情`" isShowBottomBorder :isShowBack="true" @onBackClick="cancel(false)"/>
    <el-row style="margin-top: 20px;">
      <div class="card_list">
        <div class="card">
          <h2>姓名</h2>
          <p class="color1">{{ data.name }}</p>
        </div>
        <div class="card">
          <h2>积分余额</h2>
          <p class="color2">{{ data.nowScore || 0 }}</p>
        </div>
        <div class="card">
          <h2>已用积分</h2>
          <p class="color3">{{ data.usedIntegral || 0 }}</p>
        </div>
      </div>
    </el-row>
    <el-row class="echertsBox" style="margin-bottom: 16px">
      <div class="title">
        <h4>事件汇总</h4>
        <div class="timecSelect">
          时间：
          <el-date-picker size="small" value-format="yyyy-MM-dd" @change="timeChange" v-model="timeList" type="daterange" range-separator="至"
                          :start-placeholder="startPla" :end-placeholder="endPla"></el-date-picker>
        </div>
      </div>
      <div class="bar_Box">
        <div id="chartDom" style="height: 230px; width: 100%;" v-show="xData.length && yData.length"></div>
        <ai-empty style="height: 200px; width: 100%;" v-show="!xData.length && !yData.length"></ai-empty>
      </div>
    </el-row>
    <ai-card>
      <ai-title slot="title" title="余额变动明细"/>
      <template #content>
        <ai-search-bar>
          <template #left>
            <ai-select v-model="search.scoreType" placeholder="请选择类型" @change="search.current=1,getIntegralChange()"
                       :selectList="dict.getDict('srScoreType')"/>
          </template>
          <template #right>
            <ai-download :instance="instance" :url="`/app/appscoredetail/listExport?id=${$route.query.id}`" :params="search" fileName="网格员余额变动明细"
                         :disabled="tableData.length == 0">
              <el-button size="small">导出</el-button>
            </ai-download>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
                  @getList="getIntegralChange" :col-configs="colConfigs" :dict="dict">
        </ai-table>
      </template>
    </ai-card>
  </section>
</template>

<script>
import dayjs from "dayjs";
import * as echarts from 'echarts';

export default {
  name: "detail",
  data() {
    return {
      myChart: null,
      tableData: [],
      search: {
        scoreType: '',
        current: 1,
        size: 10,
      },
      total: 0,
      girdList: [],
      timeList: [],
      data: {},
      startTime: '',
      endTime: '',
      xData: [],
      yData: [],
      startPla: '',
      endPla: ''
    }
  },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    params: Object
  },

  computed: {
    colConfigs() {
      return [
        {prop: "createTime", label: '时间', align: "center",width: "200px"},
        {prop: "scoreType", label: '类型', align: "center", width: "240px", dict: "srScoreType"},
        {prop: "changeScore", label: '变动积分', align: "center",},
        {prop: "nowScore", label: '剩余积分', align: "center", width: "200px"},
        {prop: "eventDesc", label: '事件', align: "center",'show-overflow-tooltip': true},
      ]
    }
  },
  created() {
    this.$dict.load('srScoreType').then(() => {
      this.getDetail()
      let nowTime = dayjs().format('YYYY-MM-DD')
      this.startPla = dayjs().subtract(29, 'day').format('YYYY-MM-DD')
      this.endPla = nowTime
    })

  },
  methods: {
    // 详情
    getDetail() {
      this.instance.post(`/app/appscoredetail/userInfo`, null, {
        params: {
          sysUserId: this.params.id
        }
      }).then(res => {
        if (res?.data) {
          this.data = res.data
          this.getEventSummary()
          this.getIntegralChange()
        }
      })
    },

    // 事件汇总
    getEventSummary() {
      this.instance.post(`/app/appscoredetail/detailTypeStatistics`, null, {
        params: {
          startTime: this.startTime,
          endTime: this.endTime,
          sysUserId: this.data.id
        }
      }).then(res => {
        if (res?.data) {
          this.xData = res.data.map(x => x.eventName)
          this.yData = res.data.map(y => y.totalIntegral)
          this.getColEcherts(this.xData, this.yData)
        }
      })
    },

    // 余额变动明细
    getIntegralChange() {
      this.instance.post(`/app/appscoredetail/list`, null, {
        params: {
          ...this.search,  //积分类型
          total: this.total,
          sysUserId: this.data.id
        }
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },

    timeChange() {
      if (this.timeList.length) {
        this.startTime = this.timeList[0]
        this.endTime = this.timeList[1]
        this.getEventSummary()
      }
    },

    getColEcherts(xData, yData) {
      let chartDom = document.getElementById('chartDom');
      chartDom.style.width = window.innerWidth - 335 + "px";
      this.myChart = echarts.init(chartDom);
      this.myChart.setOption({
        dataZoom: [
          {
            type: "slider",
            xAxisIndex: [0],
            filterMode: "filter",
          },
        ],
        grid: {
          left: '16px',
          right: '28px',
          bottom: '14px',
          top: '30px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: yData,
            type: 'bar',
            itemStyle: {
              normal: {
                color: "#5087ec",
                label: {
                  show: true,  //开启显示
                  position: 'top',    //在上方显示
                  textStyle: {
                    fontSize: 13,
                    color: '#666'
                  }
                },
              },
            },
            barWidth: 20,
            barGap: '20%',
          }
        ]
      }, true);
      window.addEventListener("resize", this.onResize)
    },

    onResize() {
      this.myChart.resize()
    },

    cancel(isRefresh) {
      this.$emit('change', {
        type: 'List',
        isRefresh: !!isRefresh
      })
    }

  },

  filters: {
    formatTime(num) {
      if (num > 0) {
        return '+' + num
      } else {
        return num
      }
    }
  },

  mounted() {
    this.getColEcherts()
  },

  destroyed() {
    window.removeEventListener('resize', this.onResize)
  },
}
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  overflow-y: scroll;

  .card_list {
    display: flex;

    .card {
      flex: 1;
      height: 96px;
      background: #FFFFFF;
      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.1500);
      border-radius: 4px;
      margin-right: 20px;
      padding: 16px 24px;
      box-sizing: border-box;

      h2 {
        color: #888888;
        font-weight: 600;
        font-size: 16px;
      }

      p {
        margin-top: 8px;
        font-size: 24px;
        font-weight: 600;
      }

      .color1 {
        color: #2891FF;
      }

      .color2 {
        color: #22AA99;
      }

      .color3 {
        color: #F8B425;
      }
    }

    .card:last-child {
      margin-right: 0;
    }
  }

  .echertsBox {
    width: 100%;
    margin-top: 20px;
    background: #FFFFFF;
    box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.1500);
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;

    .title {
      display: flex;
      justify-content: space-between;

      h4 {
        color: #222222;
        font-weight: 600;
      }

    }

    .bar_Box {
      width: 100%;

      #chartDom {
        width: 100%;
        height: 230px;
        margin-top: 16px;
      }
    }

  }
}
</style>