laboratory_maintenance_app/pages/home/index.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>
  </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 {
      swiperList: [require("@/static/images/home/lab.png")],
      workList: [
        {
          name: "实验室巡检",
          img: require("@/static/images/home/lab_xj.png"),
          num: 10,
          pagePath: '/pages/inspection/records'
        },
        {
          name: "报送记录",
          img: require("@/static/images/home/bs_jl.png"),
          num: 0,
          pagePath: '/pages/submission/records'
        },
        {
          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.$refs.BetLoading.show();
      setTimeout(() => {
        this.$refs.BetLoading.hide();
      }, 1000);
    });
    //工作台
    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>