zy-largeScreen-2/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">近三十天各小组好评率排行榜</h2>
              <GroupPraise></GroupPraise>
            </div>
            <!-- 科室当日建单TOP10 -->
            <div class="app-item">
              <h2 class="app-item__header">科室当日建单TOP10</h2>
              <GroupPerformance></GroupPerformance>
            </div>
            <!-- 近三十天各小组人员工作时间利用率 -->
            <div class="app-item">
              <h2 class="app-item__header">近三十天各小组人员工作时间利用率</h2>
              <TimeUtilization></TimeUtilization>
            </div>
          </aside>
          <article class="app-index__center">
            <!-- 今日当班情况 -->
            <div class="app-item">
              <h2 class="app-item__header app-item__header--big">
                今日当班情况
                <ul class="app-item__headerData">
                  <li class="app-item__headerDataItem">总当班人数<em>{{todayBeOnDuty[0]}}/{{todayBeOnDuty[1]}}</em></li>
                </ul>
              </h2>
              <OnDutyToday @todayBeOnDutyHandle="todayBeOnDutyHandle"></OnDutyToday>
            </div>
            <!-- 当日工单趋势图 -->
            <div class="app-item">
              <h2 class="app-item__header app-item__header--big">
                当日工单趋势图
                <ul class="app-item__headerData">
                  <li class="app-item__headerDataItem">执行中<em>{{todayWorkOrder[0]}}</em></li>
                  <li class="app-item__headerDataItem">已超时<em>{{todayWorkOrder[1]}}</em></li>
                  <li class="app-item__headerDataItem">已完成<em>{{todayWorkOrder[2]}}</em></li>
                </ul>
              </h2>
              <TodayWorkOrder @todayWorkOrderHandle = "todayWorkOrderHandle"></TodayWorkOrder>
            </div>
            <!-- 今日工单异常情况 -->
            <div class="app-item">
              <h2 class="app-item__header app-item__header--big">
                今日工单异常情况
                <ul class="app-item__headerData">
                  <li class="app-item__headerDataItem app-item__headerDataItem--error">异常<em>{{todayAbnormityWorkOrder[0]}}</em></li>
                  <li class="app-item__headerDataItem app-item__headerDataItem--timeout">超时<em>{{todayAbnormityWorkOrder[1]}}</em></li>
                </ul>
              </h2>
              <ErrorWorkOrder @todayAbnormityWorkOrderHandle="todayAbnormityWorkOrderHandle"></ErrorWorkOrder>
            </div>
            <!-- 近三十天各类型工单按时送达率趋势 -->
            <div class="app-item">
              <h2 class="app-item__header app-item__header--big">
                近三十天各类型工单按时送达率趋势
                <ul class="app-item__headerData">
                  <li @click="currentDictionary = item[0]" v-for="item in dictionary" :key="item[0]" class="app-item__headerDataItem app-item__headerDataItem--normal" :class="{'app-item__headerDataItem--active':currentDictionary === item[0]}"><span>{{item[1]}}</span></li>
                </ul>
              </h2>
              <DeliveryRate @changeCurrentDictionary="changeCurrentDictionary" @dictionaryHandle="dictionaryHandle" :currentDictionary="currentDictionary"></DeliveryRate>
            </div>
          </article>
          <aside class="app-index__right">
            <!-- 今日积分前三人员 -->
            <div class="app-item">
              <h2 class="app-item__header">今日积分前三人员</h2>
              <PointsRanking></PointsRanking>
            </div>
            <!-- 近三十天人员按时到达率排行榜 -->
            <div class="app-item">
              <h2 class="app-item__header">近三十天人员按时到达率排行榜</h2>
              <OnTimeArrivalRate></OnTimeArrivalRate>
            </div>
            <!-- 当日任务类型TOP5 -->
            <div class="app-item">
              <h2 class="app-item__header">当日任务类型TOP5</h2>
              <BusinessTypeRatio></BusinessTypeRatio>
            </div>
          </aside>
        </main>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import AppHeader from '../components/AppHeader.vue'
import GroupPraise from '../components/GroupPraise.vue'
import GroupPerformance from '../components/GroupPerformance.vue'
import OnDutyToday from '../components/OnDutyToday.vue'
import TodayWorkOrder from '../components/TodayWorkOrder.vue'
import PointsRanking from '../components/PointsRanking.vue'
import BusinessTypeRatio from '../components/BusinessTypeRatio.vue'
import ErrorWorkOrder from '../components/ErrorWorkOrder.vue'
import DeliveryRate from '../components/DeliveryRate.vue'
import TimeUtilization from '../components/TimeUtilization.vue'
import OnTimeArrivalRate from '../components/OnTimeArrivalRate.vue'
export default {
  name: 'AppIndex',
  components: {
    AppHeader, // 头部
    GroupPraise, // 近三十天各小组好评率排行榜
    GroupPerformance, // 科室当日建单TOP10
    OnDutyToday, // 今日当班情况
    TodayWorkOrder, // 当日工单趋势图
    PointsRanking, // 今日积分前三人员
    BusinessTypeRatio, // 当日任务类型TOP5
    ErrorWorkOrder, // 今日工单异常情况
    DeliveryRate, // 近三十天各类型工单按时送达率趋势
    TimeUtilization, // 近三十天各小组人员工作时间利用率
    OnTimeArrivalRate// 近三十天人员按时到达率排行榜
  },
  data () {
    return {
      todayBeOnDuty: [], // 今日当班情况
      todayWorkOrder: [], // 当日工单趋势图
      todayAbnormityWorkOrder: [], // 今日工单异常情况
      dictionary: [], // 近三十天各类型工单按时送达率趋势
      currentDictionary: -1// 近三十天各类型工单按时送达率趋势(id)
    }
  },
  methods: {
    // 今日当班情况
    todayBeOnDutyHandle (value) {
      this.todayBeOnDuty = JSON.parse(value)
    },
    // 当日工单趋势图
    todayWorkOrderHandle (value) {
      this.todayWorkOrder = JSON.parse(value)
    },
    // 今日工单异常情况
    todayAbnormityWorkOrderHandle (value) {
      this.todayAbnormityWorkOrder = JSON.parse(value)
    },
    // 近三十天各类型工单按时送达率趋势
    dictionaryHandle (value) {
      this.dictionary = JSON.parse(value)
      this.currentDictionary = this.dictionary[0][0]
      this.dictionary.forEach(item => {
        if (item[0] === 255) {
          item[1] = '转运'
        } else if (item[0] === 256) {
          item[1] = '标本'
        } else if (item[0] === 257) {
          item[1] = '药品'
        } else if (item[0] === 258) {
          item[1] = '静配'
        } else if (item[0] === 259) {
          item[1] = '其他'
        } else if (item[0] === 260) {
          item[1] = '陪检'
        } else if (item[0] === 380) {
          item[1] = '轮巡'
        }
      })
    },
    // 近三十天各类型工单按时送达率趋势---修改索引
    changeCurrentDictionary (value) {
      this.currentDictionary = value
    }
  },
  provide () {
    return {
      hospitalId: this.$route.params.id
    }
  },
  mounted () {
    // setTimeout(() => {
    //   this.loading = false
    // }, 1000)
  }
}
</script>
<style lang="less">
.app-index {
  color: #fff;
  background-color: #000;
  width: 100vw;
  height: 100vh;
  .bg {
    padding: 0.2rem;
    background-image: url("../assets/img/bg.jpg");
    background-size: cover;
    background-position: center center;
  }
  // 各模块公共头部
  .app-item {
    position: relative;
    .app-item__header {
      height: 0.3375rem;
      font-size: 0.25rem;
      color: #fff;
      background: url("./../assets/img/image_title01.png") left bottom no-repeat;
      background-size: 100%;
      display: flex;
      justify-content: space-between;
      &.app-item__header--big{
        background: url("./../assets/img/image_title02.png") left bottom no-repeat;
        background-size: 100%;
        .app-item__headerData{
          display: flex;
          justify-content: space-between;
          align-content: center;
          font-size: .2rem;
          color: #fff;
          margin-right: 1.6625rem;
          margin-top: .05rem;
          .app-item__headerDataItem{
            margin-left: .3rem;
            position: relative;
            &.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: 24.3%;
    }
    .app-index__center {
      width: 49.5%;
    }
    .app-index__right {
      width: 24.3%;
    }
  }
}
</style>