laboratory_maintenance_app/pages/home/index.vue

<template>
  <view class="page-css">
    <u-navbar :is-back="false" title="工作台">
      <view slot="right" @click="goPage('/pages/notice/index')">
        <u-badge size="mini" type="error" count="7"></u-badge>
        <u-icon name="chat" size="60" color="#3a62d7" :is-center="true" style="padding-right: 20rpx;">
        </u-icon>
      </view>
    </u-navbar>
    <!-- 通知公告 -->
    <view class="notice_box" v-if="noticeList.length > 0">
      <u-notice-bar mode="horizontal" type="primary" :list="noticeList" :more-icon="true" @getMore="getNotice()"
        :is-circular="false"></u-notice-bar>
    </view>
    <view class="">
      <view class="banner-swiper" v-if="swiperList.length > 0">
        <image :src="swiperList[0]" style="padding-right:12rpx;height:444rpx;width:100%"></image>
      </view>
      <view class="menu_box">
        <view class="menu_title">工作台</view>
        <view class="menu_list clearfix" v-if="dataTypes==1">
          <view class="item_box" @click="goPage('/pages/inspection/plan')">
            <view class="item_img">
              <image src="@/static/images/home/left.svg" mode="aspectFit" />
            </view>
            <view class="item_txt">巡检计划</view>
          </view>
          <view class="item_box" @click="goPage('/pages/submission/records?name=报送记录')">
            <view class="item_img">
              <image src="@/static/images/home/left.svg" mode="aspectFit" />
            </view>
            <view class="item_txt">报送记录</view>
          </view>
        </view>
        <view class="menu_list clearfix" v-else-if="dataTypes==4">
          <view class="item_box" @click="goPage('/pages/submission/records?name=维修任务')">
            <view class="item_img">
              <image src="@/static/images/home/left.svg" mode="aspectFit" />
            </view>
            <view class="item_txt">维修任务</view>
          </view>
          <view class="item_box" @click="goPage('/pages/inspection/quest')">
            <view class="item_img">
              <image src="@/static/images/home/left.svg" mode="aspectFit" />
            </view>
            <view class="item_txt">巡检任务</view>
          </view>
        </view>
        <view class="menu_list clearfix" v-else>
          <view class="item_box" @click="goPage('/pages/submission/records?name=接单记录')">
            <view class="item_img">
              <image src="@/static/images/home/left.svg" mode="aspectFit" />
            </view>
            <view class="item_txt">接单记录</view>
          </view>
          <view class="item_box" @click="goPage('/pages/inspection/quest')">
            <view class="item_img">
              <image src="@/static/images/home/left.svg" mode="aspectFit" />
            </view>
            <view class="item_txt">巡检任务</view>
          </view>
        </view>
      </view>


      <view class="work-title">设备统计</view>
      <eachartsPie :echartData="pieInfo"></eachartsPie>

      <view class="work-title">检修单状态</view>
      <eachartsNightpie :echartData="pieInfo"></eachartsNightpie>

      <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";
import eachartsPie from "./components/eacharts_pie.vue";
import eachartsNightpie from "./components/eacharts_nightpie.vue";
export default {
  components: {
    swiperSlider,
    alarm,
    eacharts,
    eachartsPie,
    eachartsNightpie
  },
  computed: {

    dataTypes() {
      return this.$store.state.dataType
    },
  },
  data() {
    return {
      swiperList: [],
      workList: [],
      pieInfo: [],//饼图数据
      noticeList: [

      ],//通知列表
    };
  },
  onLoad() {
    this.pieStat()
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.tabbarRef.getPermission();
      this.getNoticeList()

    });
    //工作台

    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/plan'
              item.img = require("@/static/images/home/lab_xj.png")
            }
            if (item.name.indexOf('记录') > 0) {
              item.pagePath = '/pages/submission/records?type=submission'
              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 != undefined) {
            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,
      });
    },
    scanCode() {
      uni.scanCode({
        success: (res) => {
          console.log('扫码结果：' + res.result);
          // 扫码成功后的操作，例如：
          // this.handleScanResult(res.result);
        },
        fail: (err) => {
          console.error('扫码失败：' + err);
        }
      });
    },
    // 饼图数据
    pieStat() {
      this.$u.api.pieStat().then(res => {
        if (res.code == 200) {
          this.pieInfo = res.data.fault
        }
      })
    },
    // 通知公告
    getNotice() {
      uni.navigateTo({
        url: '/pages/notice/announcement',
      });
    },

    getNoticeList() {
      this.$u.api.getNoticeList().then(res => {
        if (res.code == 200) {
          let data = res.data.records
          data.forEach(item => {
            this.noticeList.push(item.title)
          })
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.page-css {
  width: 100%;
  // min-height: 100%;
  padding: 0;
  padding-top: var(--status-bar-height);

  .banner-swiper {
    margin-bottom: 32rpx;
    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;
    margin-top: 32rpx;
  }

  .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%;
  }

  .menu_box {
    background: #fff;
    position: relative;
    margin: 0 32rpx;
    border-radius: 20rpx;

    &::after {
      content: '';
      position: absolute;
      height: 4rpx;
      width: 100%;
      background: #38D79F;
      position: absolute;
      top: 0;
      left: 0;
    }

    .menu_title {
      height: 100rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      line-height: 100rpx;
      text-align: left;
      font-style: normal;
      margin: 0 32rpx;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2rpx;
        background: #f5f5f5;
        width: 100%;
      }

    }

    .menu_list {
      padding-bottom: 32rpx;
      margin-left: 32rpx;
      margin-right: 32rpx;
      margin-top: 24rpx;

      .item_box {
        width: 50%;
        float: left;

        &:nth-child(1) {
          position: relative;

          &::after {
            content: '';
            position: absolute;
            width: 4rpx;
            height: 100%;
            background: #f5f5f5;
            right: 20rpx;
            top: 0;
          }
        }

        .item_img {
          width: 64rpx;
          height: 64rpx;
          float: left;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .item_txt {
          font-weight: 400;
          font-size: 32rpx;
          color: #333333;
          line-height: 64rpx;
          text-align: left;
          font-style: normal;
          padding-left: 20rpx;
          float: left;
        }
      }
    }
  }

  .notice_box {
    width: 100%;
    background: #fff;
  }
}
</style>