hi-ucs/back/src/views/modules/workBench/components/trend-view.vue

<template>
  <div class="trend">
    <content-title title="部门发布能力被调用趋势">
      <div class="button">
        <div
          v-for="(item, idx) in titles"
          :key="item"
          @click="handleTitleSwitch(idx)"
          class="top-title"
          :class="{ active: idx == selectedTitle }"
        >
          {{ item }}
        </div>
      </div>
    </content-title>
    <div id="trendId" class="trend-echart"></div>
  </div>
</template>
<script>
import { trendLineChart } from './lineOption'
import contentTitle from './content-title'
import * as Apis from '../api'
import moment from 'moment'
export default {
  data () {
    return {
      titles: ['近七日', '月度'],
      selectedTitle: 0,
      trendChartData: {},
      startDate: '',
      endDate: Math.round(new Date() / 1000),
      ydata: [],
      xaxis: []
    }
  },
  components: {
    contentTitle
  },
  mounted () {
    this.initChart()
  },
  watch: {
    selectedTitle: {
      handler: function (newVal, oldVal) {
        this.startDate = this.getData(newVal == 0 ? 7 : 30)
        this.ydata = this.getday2(this.selectedTitle === 0 ? 7 : 30)
        this.ydata.map((item) => {
          this.xaxis.push(0)
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 返回最近七天的日期
    getday2 (index) {
      const days = []
      var Dates = new Date()
      for (let i = 0; i <= 24 * (index - 1); i += 24) {
        // 今天加上前6天
        const dateItem = new Date(Dates.getTime() - i * 60 * 60 * 1000) // 使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
        const y = dateItem.getFullYear() // 获取年份
        let m = dateItem.getMonth() + 1 // 获取月份js月份从0开始，需要+1
        let d = dateItem.getDate() // 获取日期
        m = this.addDate0(m) // 给为单数的月份补零
        d = this.addDate0(d) // 给为单数的日期补零
        const valueItem = y + '-' + m + '-' + d // 组合
        days.unshift(valueItem) // 添加至数组
      }

      return days
    },

    // 给日期加0
    addDate0 (time) {
      if (time.toString().length == 1) {
        time = '0' + time.toString()
      }
      return time
    },
    // 发布动态
    initChart () {
      Apis.getByDept(
        {
          startDate: this.startDate,
          endDate: this.endDate
        },
        (res) => {
          if (res.data.data && res.data.data.length > 0) {
            this.data = res.data.data[0].values
            this.data.map((item) => {
              const time = moment(item[0] * 1000).format('YYYY-MM-DD')
              this.ydata.map((itemSon, indexSon) => {
                if (itemSon === time) {
                  this.xaxis[indexSon] = parseInt(item[1])
                }
              })
            })
            this.trendChartData = {
              xaxis: this.ydata,
              ydata: this.xaxis
            }
          } else {
            this.trendChartData = {
              xaxis: this.ydata,
              ydata: this.xaxis
            }
          }

          this.$nextTick(() => {
            trendLineChart('trendId', this.trendChartData)
          })
        },
        (err) => {

        }
      )
    },
    handleTitleSwitch (idx) {
      this.selectedTitle = idx
      this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30)

      this.initChart()
    },
    getData (aa) {
      const date1 = new Date()
      const time1 =
        date1.getFullYear() +
        '-' +
        (date1.getMonth() + 1) +
        '-' +
        date1.getDate() // time1表示当前时间
      const date2 = new Date(date1)
      date2.setDate(date1.getDate() - aa)
      const time2 = Math.round(date2 / 1000)
      return time2
    }
  }
}
</script>
<style lang="scss" scoped>
.trend {
  width: 516px;
  height: 335px;
  background: #fff;
  margin-right: 4px;
  padding: 0 20px 0 20px;
  .trend-echart {
    height: 280px;
    width: 500px;
    margin: 0 auto;
  }
  .button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 110px;

    .top-title {
      font-size: 16px;
      height: 30px;
      line-height: 30px;
      &.active {
        color: #0058e1;
        font-weight: bold;
        border-bottom: 2px solid #0058e1;
      }
    }
  }
}
</style>