laboratory_maintenance_app/pages/login/authInfo.vue

<template>
    <view class="page-css">
      <view class="">
        <view class="banner-swiper" v-if="swiperList.length > 0">
          <view class="logo-txt">科研医疗建筑运维平台</view>
          <u-swiper height="444" :list="swiperList" mode="none"></u-swiper>
        </view>
        <view class="work-title">工作台</view>
        <view class="workbench">
          <view v-for="(item, index) in workList" :key="index" class="workbench-slider">
            <view class="workbench-item" @click="goPage(item)">
              <view class="workbench-item-icon">
                <image :src="item.img" mode="aspectFit" />
              </view>
              <u-badge class="badge" type="error" :count="item.num" :offset="[0, 0]"></u-badge>
            </view>
            <view class="workbench-name">{{ item.name }}</view>
          </view>
        </view>
        <view class="work-title">实验室巡检</view>
        <view>
          <swiperSlider></swiperSlider>
        </view>
        <view class="work-title">设备报警</view>
        <view>
          <alarm></alarm>
        </view>
        <view class="work-title">维修统计</view>
        <view class="statistics">
          <eacharts :type="'maintenanceStatistics'"></eacharts>
          <eacharts :type="'maintenanceStatisticsPie'"></eacharts>
        </view>
      </view>
      <betone-tabbar ref="tabbarRef" />
      <betone-loading ref="BetLoading"></betone-loading>
      <u-modal v-model="show" :content="content" ></u-modal>

    </view>
  </template>
  <script>
  import swiperSlider from "./components/swiper.vue";
  import alarm from "./components/alarm.vue";
  import eacharts from "./components/eacharts.vue";
  export default {
    components: {
      swiperSlider,
      alarm,
      eacharts,
    },
    data() {
      return {
        show:true,
        content:'账号审核中！',
        swiperList: [require("@/static/images/home/lab.png")],
        workList: [
          {
            name: "实验室巡检",
            img: require("@/static/images/home/lab_xj.png"),
            num: 10,
            pagePath: ''
          },
          {
            name: "报送记录",
            img: require("@/static/images/home/bs_jl.png"),
            num: 0,
            pagePath: ''
          },
          {
            name: "设备报警",
            img: require("@/static/images/home/alarm.png"),
            num: 2,
            pagePath: ''
          },
          {
            name: "其他",
            img: require("@/static/images/home/full.png"),
            num: 0,
            pagePath: ''
          },
        ],
      };
    },
    onShow() {
      this.$nextTick(() => {
        this.$refs.tabbarRef.getPermission();
      });
      //工作台
      this.getworkbench();
    },
    methods: {
      getworkbench() {
        console.log(55);
        // this.$u.api.getworkbench().then(res=>{
  
        // }).catch(err=>{
  
        // })
      },
      goPage(item){
        uni.navigateTo({
          url: item.pagePath,
        });
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  .page-css {
    width: 100%;
    // min-height: 100%;
    padding: 0;
    background: rgba(239, 239, 239, 1);
    padding-top: var(--status-bar-height);
    .banner-swiper {
      margin-bottom: 64rpx;
      position: relative;
  
      .logo-txt {
        color: rgba(255, 255, 255, 1);
        font-size: 36rpx;
        position: absolute;
        top: 40rpx;
        left: 20rpx;
        z-index: 10;
      }
    }
  
    .work-title {
      color: rgba(16, 16, 16, 1);
      font-size: 32rpx;
      padding: 0 0 32rpx 36rpx;
    }
  
    .workbench {
      height: 210rpx;
      position: relative;
      display: flex;
      justify-content: space-around;
      margin: 0 40rpx 32rpx;
  
      .workbench-item {
        width: 160rpx;
        height: 148rpx;
        background-color: rgba(58, 98, 215, 0.57);
        border-radius: 8rpx;
        position: relative;
  
        .workbench-item-icon {
          width: 64rpx;
          height: 64rpx;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto;
  
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
  
      .workbench-name {
        width: 100%;
        text-align: center;
        font-size: 28rpx;
        color: rgba(16, 16, 16, 1);
        margin-top: 16rpx;
      }
  
      .badge {
        // background-color: blue;
        // color: white;
      }
    }
  
    .statistics_pie {
      width: 100%;
    }
  }
  </style>