zy-largeScreen/src/views/AppIndex.vue

<template>
  <div class="app-index">
    <dv-full-screen-container class="bg">
      <div>
        <!-- 头部 -->
        <AppHeader></AppHeader>
        <!-- 主体 -->
        <main class="app-index__main">
          <aside class="app-index__left">
            <!-- 故障工单实时动态 -->
            <div class="app-item">
              <h2 class="app-item__header app-item__header--big">故障工单实时动态</h2>
              <RealTimeRepairOrder class="app-item__body"></RealTimeRepairOrder>
            </div>
            <!-- 上月维修科室排名TOP5 -->
            <div class="app-item">
              <h2 class="app-item__header app-item__header--big">
                上月维修科室排名TOP5
              </h2>
              <MaintenanceDepartmentTotal class="app-item__body"></MaintenanceDepartmentTotal>
            </div>
            <!-- 上月维修人员工单数TOP5 -->
            <div class="app-item">
              <h2 class="app-item__header app-item__header--big">
                上月维修人员工单数TOP5
              </h2>
              <PersonnelIntegral class="app-item__body"></PersonnelIntegral>
            </div>
          </aside>
          <article class="app-index__center">
            <!-- 汇总数据 -->
            <div class="app-item">
              <TotalStatistics class="app-item__body"></TotalStatistics>
            </div>
            <!-- 上月趋势图 -->
            <div class="app-item">
              <h2 class="app-item__header app-item__header--big">
                上月趋势图
                <ul class="app-item__headerData">
                  <li class="app-item__headerDataItem" :class="{ active: todayWorkOrderSign == 'repair' }">维修</li>
                  <li class="app-item__headerDataItem" :class="{ active: todayWorkOrderSign == 'delivery' }">配送</li>
                </ul>
              </h2>
              <TrendChart class="app-item__body" @signEmit="todayWorkOrderSign = $event"></TrendChart>
            </div>
            <div class="app-item-wrap">
              <!-- 上月故障现象占比 -->
              <div class="app-item">
                <h2 class="app-item__header app-item__header--big">
                  上月故障现象占比
                </h2>
                <CategoryTotal class="app-item__body"></CategoryTotal>
              </div>
              <!-- 上月业务分类工单占比 -->
              <div class="app-item">
                <h2 class="app-item__header app-item__header--big">
                  上月业务分类工单占比
                </h2>
                <BusinessTotal class="app-item__body"></BusinessTotal>
              </div>
            </div>
          </article>
          <aside class="app-index__right">
            <!-- 故障工单实时动态 -->
            <div class="app-item">
              <h2 class="app-item__header app-item__header--big">配送陪检工单实时动态</h2>
              <RealTimeDeliveryOrder class="app-item__body"></RealTimeDeliveryOrder>
            </div>
            <!-- 上月配送陪检科室排名TOP5 -->
            <div class="app-item">
              <h2 class="app-item__header app-item__header--big">
                上月配送陪检科室排名TOP5
              </h2>
              <DeliveryTotal class="app-item__body"></DeliveryTotal>
            </div>
            <!-- 上月配送陪检人员积分 -->
            <div class="app-item">
              <h2 class="app-item__header app-item__header--big">
                上月配送陪检人员积分
              </h2>
              <DeliveryUserTotal class="app-item__body"></DeliveryUserTotal>
            </div>
          </aside>
        </main>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import AppHeader from '../components/AppHeader.vue'
import RealTimeRepairOrder from '../components/RealTimeRepairOrder.vue'
import RealTimeDeliveryOrder from '../components/RealTimeDeliveryOrder.vue'
import TotalStatistics from '../components/TotalStatistics.vue'
import TrendChart from '../components/TrendChart.vue'
import MaintenanceDepartmentTotal from '../components/MaintenanceDepartmentTotal.vue'
import DeliveryTotal from '../components/DeliveryTotal.vue'
import DeliveryUserTotal from '../components/DeliveryUserTotal.vue'
import PersonnelIntegral from '../components/PersonnelIntegral.vue'
import CategoryTotal from '../components/CategoryTotal.vue'
import BusinessTotal from '../components/BusinessTotal.vue'
export default {
  name: 'AppIndex',
  components: {
    AppHeader, // 头部
    RealTimeRepairOrder, // 故障工单实时动态
    RealTimeDeliveryOrder, // 配送陪检工单实时动态
    TotalStatistics, // 汇总数据
    TrendChart, // 上月趋势图
    MaintenanceDepartmentTotal, // 上月维修科室排名TOP5
    DeliveryTotal, // 上月配送陪检科室排名TOP5
    DeliveryUserTotal, // 运送人员排名TOP5
    PersonnelIntegral, // 上月维修人员工单数TOP5
    CategoryTotal, // 上月故障现象占比
    BusinessTotal // 上月业务分类工单占比
  },
  data () {
    return {
      todayWorkOrderSign: 'repair'
    }
  },
  methods: {

  },
  provide () {
    console.log('route', this.$route)
    let hosId, dutyId, parentDutyId
    if (this.$route.params.queryType === '1') {
      hosId = undefined
      dutyId = undefined
      parentDutyId = undefined
    } else if (this.$route.params.queryType === '2') {
      hosId = this.$route.query.hosId ? +this.$route.query.hosId : undefined
      dutyId = undefined
      parentDutyId = undefined
    } else if (this.$route.params.queryType === '3') {
      hosId = undefined
      dutyId = this.$route.query.dutyId ? +this.$route.query.dutyId : undefined
      parentDutyId = undefined
    } else if (this.$route.params.queryType === '4') {
      hosId = undefined
      dutyId = undefined
      parentDutyId = this.$route.query.dutyId ? +this.$route.query.dutyId : undefined
    }
    console.log(parentDutyId, hosId, dutyId)
    return {
      parentDutyId,
      hosId,
      dutyId
    }
  },
  mounted () {

  }
}
</script>
<style lang="less">
.app-index {
  color: #fff;
  background-color: #062B4D;
  width: 100vw;
  height: 100vh;
  .bg {
    padding: 0.2rem;
  }
  .app-item-wrap{
    position: relative;
    overflow: hidden;
    display: flex;
    margin-top: .1rem;
    .app-item{
      margin-right: 0.1rem;
      margin-top: 0;
      flex: 1;
      &:last-of-type{
        margin-right: 0;
      }
    }
  }
  // 各模块公共头部
  .app-item {
    position: relative;
    margin-top: .1rem;
    border: 1px solid #265A8A;
    border-radius: .1rem;
    overflow: hidden;
    &:first-of-type{
      margin-top: 0;
    }
    .app-item__header {
      height: .525rem;
      font-size: .325rem;
      color: #fff;
      background: linear-gradient( 90deg, #485E8D 0%, #1E3C64 61%, #071F34 100%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 1;
      padding: 0 .125rem 0 .2rem;
      &.app-item__header--big{
        .app-item__headerData{
          display: flex;
          justify-content: space-between;
          align-content: center;
          font-size: .2rem;
          color: #fff;
          .app-item__headerDataItem{
            // cursor: pointer;
            margin-left: .0625rem;
            position: relative;
            color: #C8C8C8;
            font-size: .15rem;
            width: .525rem;
            height: .3rem;
            border-radius: .1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            &.active{
              border: 1px solid #265A8A;
              background-color: #14334F;
            }
            &:first-of-type{
              margin-left: 0;
            }
            &.app-item__headerDataItem--normal span{
              color: rgba(255, 255, 255, 0.6);
              cursor: pointer;
            }
            &.app-item__headerDataItem--active span{
              display: flex;
              justify-content: center;
              align-items: center;
              width: .75rem;
              background-color: #14334f;
              border-radius: .15rem;
              padding-top: .075rem;
              padding-bottom: .075rem;
              transform: translateY(-0.1rem);
              color: #fff;
            }
            &.app-item__headerDataItem--error{
              color: #c27073;
            }
            &.app-item__headerDataItem--timeout{
              color: #c2ab70;
            }
          }
          em{
            margin-left: .1rem;
          }
        }
      }
    }
  }
  // 主体
  .app-index__main{
    display: flex;
    justify-content: space-between;
    .app-index__left {
      width: 6.125rem;
      margin-right: .1rem;
    }
    .app-index__center {
      flex: 1;
      margin-right: .1rem;
    }
    .app-index__right {
      width: 5.15rem;
    }
  }
}
</style>