jsm-mall-front/src/views/workOrder/orderHome/index.vue

<template>
  <div class="dashboard_container">
    <div class="refresh">
      <!-- <el-date-picker
        style="width: 130px"
        v-model="value1"
        format="yyyy"
        size="mini"
        type="year"
        placeholder="选择日期"
      >
      </el-date-picker> -->
      <span style="color: #1d82ff; margin-left: 20px" @click="refreshData">刷新数据</span>
      <i class="el-icon-refresh-left" style="color: #1d82ff" @click="refreshData"></i>
    </div>
    <div class="container_top">
      <div class="tab" v-for="(item, index) in tabs" :key="index" @click="openOrder(item.type, item.title)">
        <el-image class="img" :src="item.url" fit="fit"></el-image>
        <div class="text">
          <div class="title">{{ item.title }}</div>
          <div class="num">{{ item.num }}</div>
        </div>
      </div>
    </div>
    <div class="container_center">
      <div class="chart">
        <div class="head">
          <div class="title">近7天订单趋势</div>
          <div class="more" @click="openOrder()">查看更多</div>
        </div>
        <div ref="chart1" style="width: 100%; height: 280px"></div>
      </div>
      <div class="chart">
        <div class="head">
          <div class="title">未来7天需上门</div>
        </div>
        <div ref="chart2" style="width: 100%; height: 280px"></div>
      </div>
    </div>
    <div class="container_bottom">
      <div class="chart">
        <div class="head">
          <div class="title">近30天完工类型分布</div>
        </div>
        <div ref="chart3" style="width: 100%; height: 330px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCount } from '@/api/workOrder/orderHome'
export default {
  data() {
    return {
      tabs: [
        { title: '待派工', num: 0, url: require('@/assets/orderHome/dpg.png'), type: 'DWDPG' },
        { title: '待预约', num: 0, url: require('@/assets/orderHome/dpg.png'), type: 'DYY' },
        { title: '待抢单', num: 0, url: require('@/assets/orderHome/djs.png'), type: 'DQD' },
        { title: '待接收', num: 0, url: require('@/assets/orderHome/djs.png'), type: 'DJD' },
        { title: '服务中', num: 0, url: require('@/assets/orderHome/ffz.png'), type: 'FWZ' },
        { title: '异常待处理', num: 0, url: require('@/assets/orderHome/yc.png'), type: 'YCD' },
        { title: '差评统计', num: 0, url: require('@/assets/orderHome/pj.png'), type: 'appraise' }
      ],
      qtsm: [],
      qtddqs: {},
      wglxfb: {},
      value1: localStorage.getItem('orderYearVal') || new Date().getFullYear()
    }
  },
  watch: {
    value1(newVal) {
      this.getCount()
    }
  },
  computed: {
    getDate() {
      return function (d, t) {
        var date = new Date()
        var base = Date.parse(date) // 转换为时间戳
        var year = date.getFullYear() //获取当前年份
        var mon = date.getMonth() + 1 //获取当前月份
        var day = date.getDate() //获取当前日
        var oneDay = 24 * 3600 * 1000

        var daytimeArr = []
        for (var i = 0; i < d; i++) {
          //前七天的时间
          var now = new Date(t == 'before' ? base - oneDay * i : base + oneDay * i)
          var myear = now.getFullYear()
          var month = now.getMonth() + 1
          var mday = now.getDate()
          daytimeArr.push([month >= 10 ? month : '0' + month, mday >= 10 ? mday : '0' + mday].join('-'))
        }
        return t == 'before' ? daytimeArr.reverse() : daytimeArr
      }
    },
    filterOrderType() {
      return function (obj, type) {
        let names = []
        let series = []
        for (let key in this[obj]) {
          names.push(key)
          series.push({
            name: key,
            data: this[obj][key],
            type: 'line',
            smooth: true
          })
        }
        return type == 'name' ? names : series
      }
    }
  },
  created() {
    this.getCount()
  },
  mounted() {
    // this.drawChat1()
  },
  methods: {
    refreshData() {
      this.$echarts.init(this.$refs.chart1).dispose()
      this.$echarts.init(this.$refs.chart2).dispose()
      this.$echarts.init(this.$refs.chart3).dispose()
      this.getCount()
    },
    openOrder(type, name) {
      if (!type) {
        this.$router.push({
          name: window.isWorkOrderPoolPath,
          query: {}
        })
      } else if (type == 'appraise') {
        this.$router.push({
          name: 'appraise',
          query: {
            type: 1
          }
        })
      } else {
        this.$router.push({
          name: window.isWorkOrderPoolPath,
          params: {
            pageName: name || '-',
            pageType: 'orderStatus',
            pageCode: type
          }
        })
      }
    },
    getCount() {
      getCount(
        {}
        // this.value1
        //   ? {
        //       startTime: `${new Date(this.value1).getFullYear()}-01-01 00:00:00`,
        //       endTime: `${new Date(this.value1).getFullYear()}-12-31 23:59:59`
        //     }
        //   : {}
      ).then(res => {
        this.tabs[0].num = res.data.dpg || 0
        this.tabs[1].num = res.data.dyy || 0
        this.tabs[2].num = res.data.dqd || 0
        this.tabs[3].num = res.data.djs || 0
        this.tabs[4].num = res.data.fwz || 0
        this.tabs[5].num = res.data.ycdcl || 0
        this.tabs[6].num = res.data.cp || 0
        this.qtsm = res.data.qtsm
        this.qtddqs = res.data.qtddqs
        this.wglxfb = res.data.wglxfb
        this.drawChat1()
      })
    },
    drawChat1() {
      let chart1 = this.$echarts.init(this.$refs.chart1)
      let chart2 = this.$echarts.init(this.$refs.chart2)
      let chart3 = this.$echarts.init(this.$refs.chart3)
      let option1 = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.filterOrderType('qtddqs', 'name')
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.getDate(7, 'before')
        },
        yAxis: {
          type: 'value'
        },
        min: 0,
        max: value => {
          // 百位起最大值向上取整
          return Math.ceil(value.max / 100) * 100
        },
        series: this.filterOrderType('qtddqs', 'series')
      }
      let option2 = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.getDate(7, 'after')
        },
        yAxis: {
          type: 'value'
        },
        min: 0,
        max: value => {
          // 百位起最大值向上取整
          return Math.ceil(value.max / 100) * 100
        },
        series: [
          {
            name: '工单数',
            data: this.qtsm,
            type: 'line',
            smooth: true
          }
        ]
      }
      let option3 = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.filterOrderType('wglxfb', 'name')
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.getDate(30, 'before')
        },
        min: 0,
        max: value => {
          // 百位起最大值向上取整
          return Math.ceil(value.max / 100) * 100
        },
        yAxis: {
          type: 'value'
        },
        series: this.filterOrderType('wglxfb', 'series')
      }
      chart1.setOption(option1)
      chart2.setOption(option2)
      chart3.setOption(option3)
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard_container {
  background: #f5f5f5;
  padding: 20px;
  min-height: calc(100vh - 86px);
  box-sizing: border-box;
  .refresh {
    text-align: right;
    margin-bottom: 10px;
    span {
      cursor: pointer;
    }
    i {
      font-weight: bold;
      margin-left: 4px;
      cursor: pointer;
    }
  }
  .container_top {
    display: flex;
    .tab {
      display: flex;
      align-items: center;
      flex: 1;
      padding: 20px;
      margin-right: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      cursor: pointer;
      .text {
        margin-left: 30px;
        .title {
          color: #666666;
          font-size: 16px;
          margin-bottom: 8px;
        }
        .num {
          font-size: 26px;
          font-weight: bold;
        }
      }
      .img {
        width: 36px;
        height: 36px;
      }
    }
    .tab:last-child {
      margin-right: 0;
    }
  }
  .container_center {
    display: flex;
    margin: 10px 0;
    margin-top: 20px;
    .chart {
      flex: 1;
      height: 300px;
      background-color: #ffffff;
      margin-right: 20px;
    }
    .chart:last-child {
      margin-right: 0;
    }
  }
  .container_bottom {
    width: 100%;
    height: 350px;
    background-color: #ffffff;
  }
  .head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    font-weight: bold;
    .more {
      color: #1d82ff;
      cursor: pointer;
    }
  }
}
</style>