dy-admin-manager/src/views/main/baseinfo/business.vue

<template
>
  <el-card header="">
      <div slot="header" class="clearfix">
    <searchHeader
    v-if="mdate.length>0"
        :dates="mdate"
        :title="'业务数据'"
        :isShowQuert='false'
        @changeValue="changeValue"
      />
    </div>

    <statistic class="statistic" :cols="0">
      <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
        <span>
          {{item.title}}
          <el-tooltip v-if="item.desc" :content="item.desc" :open-delay=".3" placement="top">
            <i style="margin-left: 5px;cursor: pointer;" class="el-icon-warning-outline"/>
          </el-tooltip>
        </span>
        <span>
          <count-to :endVal="item.percent" :decimals="2"/>%
        </span>
      </statistic-item>
    </statistic>
    <ve-histogram
      style="width: 100%;"
      height="350px"
      :data="chartData"
      :data-empty="dataEmpty"
      :data-zoom="dataZoom"
      :extend="chartExtend"
      :legend='legend'
    ></ve-histogram>
  </el-card>
</template>
<script>
import 'v-charts/lib/style.css'
import 'echarts/lib/component/dataZoom'
import countTo from 'vue-count-to'
import veHistogram from 'v-charts/lib/histogram.common'
import searchHeader from "./modals/searchHeader";
import { getTimes } from "@/utils";
import { getIndex } from "../api";
import { descs,chioseNum } from "../constant";
import {
  getNowDateAndSunday,
  getNowDateAndMonday,
} from "@/utils/date";
export default {
  props: ['data',"search"],
  components: {
    've-histogram': veHistogram,
    'count-to': countTo,
    searchHeader
  },
  computed: {
     legend() {
      return {
        left: "10px",
      };
    },
    items() {
      return {
        HOMEWORK_CREATE_RATE: this.data['HOMEWORK_CREATE_RATE'] || {},
        HOMEWORK_SUBMIT_RATE: this.data['HOMEWORK_SUBMIT_RATE'] || {},
        HOMEWORK_COMMENT_RATE: this.data['HOMEWORK_COMMENT_RATE'] || {},
      }
    },
    chartExtend() {
      return {
        tooltip: {
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(150,150,150,0.2)'
            },
          },
          formatter: item => {
            return [item[0].axisValueLabel, ...item.map(d => `<br/>${d.marker}${d.seriesName}: ${d.value} %`)].join('')
          }
        }
      }
    },
    dataZoom() {
      return [
        {
         grid:{
           left:'0%'
         },
          type: 'slider',
          start: 40,
          end: 100
        }
      ]
    },
    chartData() {
      const values = Object.values(this.items)
      const months = {}
      for (const item of values) {
        for (const row of (item.indexMonthData || [])) {
          const key = this.$helpers.dayjs(row.month).format('YYYY-MM-DD')
          if (!months[key]) {
            months[key] = {
              '日期': key+'/'+getNowDateAndSunday(key),
            }
          }
          months[key][item.title] = row.percent
        }
      }

      return {
        columns: ['日期', ...values.map(item => {
          return item.title
        })],
        rows: Object.values(months)
      }
    },
    dataEmpty() {
      return !this.chartData.rows.length
    },
  },
  data () {
    return {
      active: 'ACTIVATION_RATE',
       mdate: [],
       loading:false
    }
  },
  mounted(){
    let nowTiem = this.$helpers.dayjs(new Date()).format('YYYY-MM-DD')
    let startTime =  this.$helpers.dayjs(getNowDateAndMonday(nowTiem)).subtract(56,'day').format('YYYY-MM-DD')
    let endTime = getNowDateAndSunday(nowTiem)
    this.mdate = [startTime,endTime];
    this.FetchDetail();

  },
  methods:{
   changeValue(date) {
      // 请求更改数据
      this.mdate = date;
      //  this.isDayOrMoth(date)
      this.FetchDetail();
    },
    async FetchDetail() {
      this.loading = true;
      const data = this.data;
      try {
        const { dates, ...rest } = this.search;
        const res = await getIndex({
          ...rest,
          ...getTimes(this.mdate, ["startDate", "endDate"]),
        });
        for (const item of res.data) {
          // 再循环一遍
          for (const key in this.items) {

            if (item.dataType == key) {
              data[item.dataType] = {
                ...item,
                desc: descs[item.dataType],
              };
            }
          }
        }

      } catch (error) {
        console.log(error);
      }
      this.loading = false
      this.dataInfo = data;
      this.$emit("resetDate", data);
    },
  }
}
</script>
<style lang="less" scoped>
  // .statistic{
  //   /deep/ .statistic-content{
  //     cursor: pointer;
  //     &.active > span{
  //       color: #14928a !important;
  //     }
  //   }
  // }
  .chioseBox {
  position: absolute;
  right: 20px;
  z-index: 1000;
}
.wrap {
  position: relative;
}
</style>