ylrz_saas_his_scrm_adminUI/src/views/index.vue

<template>
   <div class="dashboard-container">
      <div class="dashboard-editor-container" v-hasPermi="['his:index']">
        <panel-group />

        <div class="divBox">
            <el-card :bordered="false" dis-hover>
              <div slot="header">
                <div class="acea-row row-middle">
                  <el-avatar
                    icon="el-icon-s-operation"
                    size="small"
                    style="color: #1890ff; background: #e6f7ff; font-size: 13px"
                  />
                  <span class="ivu-pl-8" style="vertical-align: top;">订单统计</span>

                   <el-link type="primary" :underline="false" class="ivu-pl-8" style="float: right; levertical-align: top;" @click="getDocT(0)">总排行</el-link>
                    <el-link type="primary" :underline="false" class="ivu-pl-8" style="float: right; levertical-align: top;" @click="getDocT(1)">本年排行</el-link>
                    <el-link type="primary" :underline="false" class="ivu-pl-8" style="float: right; levertical-align: top;" @click="getDocT(2)">本月排行</el-link>
                    <el-link type="primary" :underline="false" class="ivu-pl-8" style="float: right; levertical-align: top;" @click="getDocT(3)">本周排行</el-link>
                   <el-link type="primary" :underline="false" class="ivu-pl-8" style="float: right; levertical-align: top;"  @click="getDocT(4)">今日排行</el-link>
                </div>
              </div>
              <el-row :gutter="24">
                <el-col
                  :xl="16"
                  :lg="16"
                  :md="24"
                  :sm="24"
                  :xs="24"
                  class="ivu-mb mb10 dashboard-console-visit"
                >
                  <span >药品订单统计</span>
                 <store-order-money />
                 <span>问诊统计</span>
                 <inquiry-order-money />
                </el-col>
                <el-col
                  :xl="8"
                  :lg="8"
                  :md="24"
                  :sm="24"
                  :xs="24"
                  class="ivu-mb mb10 dashboard-console-visit"
                >
                  <span class="ivu-pl-8" >医生问诊排行榜TOP10</span>
                  <div style=" margin-bottom: 50px;"></div>
                 <doctor-chart ref="getDoc" />
                </el-col>
              </el-row>
            </el-card>
        </div>
      </div>
      <div class="dashboard-editor-container">
        {{greeting}}：{{user.nickName}}
        <span style="margin-left: 20px;color: gray;">{{ currentTime }}</span>
        <span style="margin-left: 20px;color: gray;">{{ currentDay }}</span>
      </div>

  </div>
</template>

<script>

import doctorChart from "./components/his/doctorChart.vue";
import PanelGroup from "./components/his/panelGroup.vue";
import StoreOrderMoney from "./components/his/storeOrderMoney.vue";
import inquiryOrderMoney from "./components/his/inquiryOrderMoney.vue";
import user from "../store/modules/user";
export default {
  name: 'Index',
  components: {
    PanelGroup,StoreOrderMoney,doctorChart,inquiryOrderMoney
  },
  data() {
    return {
       data:null,
       currentTime: '',
        currentDay: '',
        greeting:'',
      }
  },
  created() {
    //this.getIndex();
    console.log(this.user);
  },
  computed: {
    user(){
      return this.$store.state.user.user;
    }
  },
  methods: {
    // getIndex() {
    //   this.loading = true;
    //   getIndex().then(response => {
    //     this.data = response.data;
    //
    //   });
    // },
    getDocT(row){
      setTimeout(() => {
           this.$refs.getDoc.getDoc(row);
      }, 1);
    },
    updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      const ampm = hours >= 12 ? '下午' : '上午';
            this.greeting = `${ampm}好`;
        const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
          this.currentDay = daysOfWeek[now.getDay()];
    },
  },
  mounted() {
      // 更新时间并设置定时器每秒更新一次
      this.updateTime();
      setInterval(() => {
        this.updateTime();
      }, 1000);
    },
  }

</script>


<style rel="stylesheet/scss" lang="scss" scoped>
  .count{
        margin: 10px;
        padding-bottom: 25px;
      }
  .dashboard-editor-container {
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  .acea-row {
    ::v-deep.el-avatar--small {
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }
  .checkTime {
    ::v-deep.el-radio__input {
      display: none;
    }
  }
  .ivu-pl-8 {
    margin-left: 8px;
    font-size: 14px;
  }
  .divBox {
    // padding: 0 20px !important;
  }
  .dashboard-console-visit {
    ::v-deep.el-card__header {
      padding: 14px 20px !important;
    }
    ul {
      li {
        list-style-type: none;
        margin-top: 12px;
      }
    }
  }
  .ivu-mb {
    margin-bottom: 10px;
  }
  </style>