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-icon class="logo-scan" style="padding-right:12rpx" @click="scanCode" size="45" name="scan"></u-icon>
        <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: [],
      workList: [],
    };
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.tabbarRef.getPermission();
      this.$refs.BetLoading.show();
      setTimeout(() => {
        this.$refs.BetLoading.hide();
      }, 1000);
    });
    //工作台
    this.getUserInfo()
    this.getoverview()
  },
  methods: {
    // 工作台 列表  overview
    getoverview() {
      this.$u.api.overview().then(res => {
        if (res.code == 200) {
          let data_ = res.data
          data_.forEach(item => {
            if (item.name.indexOf('巡检') > 0) {
              item.pagePath = '/pages/inspection/records'
              item.img = require("@/static/images/home/lab_xj.png")
            }
            if (item.name.indexOf('记录') > 0) {
              item.pagePath = '/pages/submission/records'
              item.img = require("@/static/images/home/bs_jl.png")
            }
            if (item.name.indexOf('报警') > 0) {
              item.pagePath = ''
              item.img = require("@/static/images/home/alarm.png")
            }
          });
          data_.push({
            name: "其他",
            img: require("@/static/images/home/full.png"),
            num: 0,
            pagePath: ''
          })
          this.workList = data_
        }


      })
    },
    getUserInfo() {
      this.$u.api.getUserInfo().then(res => {
        if (res.code == 200) {

          if (res.data.backGroundPic != '') {
            this.swiperList.push(res.data.backGroundPic)
          } else {
            this.swiperList.push(require("@/static/images/home/lab.png"))
          }
        }
      }).catch(err => {
        this.swiperList.push(require("@/static/images/home/lab.png"))
      })
    },
    goPage(item) {
      uni.navigateTo({
        url: item.pagePath,
      });
    },
    scanCode() {
      uni.scanCode({
        success: (res) => {
          console.log('扫码结果：' + res.result);
          // 扫码成功后的操作，例如：
          // this.handleScanResult(res.result);
        },
        fail: (err) => {
          console.error('扫码失败：' + err);
        }
      });
    }
  },
};
</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;
    }

    .logo-scan {
      position: absolute;
      right: 20rpx;
      top: 40rpx;
      z-index: 10;
      color: rgba(255, 255, 255, 1);
    }
  }

  .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: 150rpx;
      height: 150rpx;
      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>