v3-lab-xcx/pages/home/manageWorkbench.vue

<!-- 管理端工作台 -->
<template>
  <view class="manage-workbench" :style="{paddingTop:navHeight+'rpx'}">
    <nav-bar :title="title"></nav-bar>
    <img class="top-big-img" :src="homepageBanner">
    <top-warn></top-warn>
    <homeConfigurationSlot v-for="(item,index) in homeConfigData" :key="index" :homeConfig="item"></homeConfigurationSlot>
    <!--安全报警-->
    <view class="for-title-p" @click="goSecurityAlertList" v-if="alarmList[0]">
      <img class="left-img" src="@/images/basicsModules/icon_aqbj.png">
      <view class="name-view">安全报警</view>
      <view class="num-view">{{alarmList.length}}</view>
      <view class="null-view"></view>
      <img class="right-img" src="@/images/basicsModules/icon_04.png">
    </view>
    <view class="for-max-box" v-if="alarmList[0]">
      <view class="for-box" v-for="(item,index) in alarmList" :key="index">
        <view class="title-box">
          <view :style="'border:1rpx solid '+item.subDiyVo.fiedColor+';background:#fff;color:'+item.subDiyVo.fiedColor+';'">
            {{ item.subDiyVo.levelName }}
          </view>
          <view>{{ item.subDiyVo.name }}</view>
        </view>
        <view class="address-box"><span>{{ item.subDiyVo.typeName }}</span>{{ item.subDiyVo.deptName }}</view>
        <view class="address-box-two">
          <img src="@/images/basicsModules/icon_14.png">
          <view>{{ item.subDiyVo.subAddrrStr }}</view>
        </view>
        <view class="for-img-box">
          <view class="for-img-min-box" v-for="(minItem,index) in item.sensorSet" :key="index">
            <img src="@/images/basicsModules/icon_15.png">
            <view>{{ minItem }}</view>
          </view>
        </view>
        <view class="button-view" @click="laboratoryInfo(item)">查看详情</view>
      </view>
    </view>
    <!--我的实验室-->
    <view class="for-title-p">
      <img class="left-img" src="@/images/basicsModules/icon_sy_wdsys.png">
      <view class="name-view">我的实验室</view>
    </view>
    <view class="for-max-box">
      <img class="null-img" v-if="!dataList[0]" src="@/images/basicsModules/null-data-1.png">
      <view class="for-box" v-for="(item,index) in dataList" :key="index" @click="tableButton('subDetail',item)">
        <view class="title-box">
          <view :style="'border:1rpx solid '+item.levelColor+';background:#fff;color:'+item.levelColor+';'">
            {{ item.levelName }}
          </view>
            <view>{{ item.subName}}</view>
          <img src="@/images/basicsModules/icon_04.png">
        </view>
        <view class="address-box"><span>{{ item.typeName }}</span>{{ item.deptName }}</view>
        <view class="address-box-two">
          <img src="@/images/basicsModules/icon_14.png">
          <view>{{ item.buildName}} {{ item.floorName}} {{ item.subName}} {{ item.roomName}}</view>
        </view>
      </view>
    </view>
    <tab-bar></tab-bar>
  </view>
</template>

<script>
  import {getSafeWarnList, laboratoryAppletSubList,
    systemAppletLayoutSelect,laboratoryAppletGetSubDetailInfo
  } from '@/api/basicsModules/index.js'
  import {getHomeConfig} from '@/utils/homeConfig'
	// #ifdef MP-WEIXIN
	import {tabBar} from '@/component/tabBar.vue'
	import {topWarn} from '@/component/topWarn.vue'
	import {navBar} from '@/component/navbar.vue'
	import {homeConfigurationSlot} from '@/component/homeConfigurationSlot'
	// #endif
  export default {
    name: 'manageWorkbench',
		// #ifdef MP-WEIXIN
    components: {
      tabBar,
      topWarn,
      navBar,
      homeConfigurationSlot,
    },
		// #endif
		// #ifdef H5
		components: {
			"tabBar": () => import('@/component/tabBar.vue'),
			"topWarn": () => import('@/component/topWarn.vue'),
			"navBar": () => import('@/component/navbar.vue'),
			"homeConfigurationSlot": () => import('@/component/homeConfigurationSlot.vue'),
		},
		// #endif
    data() {
      return {
        homeConfigData: [],
        navHeight: uni.getStorageSync('navHeight'),
        title: '实验室安全智能监测与控制系统',
        //banner图片
        homepageBanner: uni.getStorageSync('homepageBanner'),
        subject_classData: [],
        securityAlertNum: "",
        //安全报警
        alarmList: [{
			subDiyVo:{
				levelName:'三大法师的',
				name:'111111',
				typeName:'sdfasfasd',
				subAddrrStr:'111111111111'
			},
			sensorSet:[
				'voc监测数值异常'
			]
		}],
        //实验室数据
        dataList: [],
        fanList: [],//控制记录触发方式
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 20,
        },
        safeWarnQueryParams:{
          page: 1,
          pageSize: 20,
          count: 0,
          groupStatus: 1,
        }
      }
    },
    created() {

    },
    mounted() {
      this.systemAppletLayoutSelect();
      this.laboratoryAppletSubList();
      //this.getSafeWarnList();
    },
    methods: {
      //获取菜单配置
      async systemAppletLayoutSelect() {
        const {data} = await systemAppletLayoutSelect({module: 'home'})
        if (data.code == 200) {
          let list = JSON.parse(JSON.stringify(data.data))
          for (let i = 0; i < list.length; i++) {
            list[i].layout = JSON.parse(list[i].layout);
          }
          this.$set(this, 'homeConfigData', getHomeConfig(list));
        }
      },
      //获取实验室列表
      async laboratoryAppletSubList() {
        let self = this;
        const {data} = await laboratoryAppletSubList(this.queryParams);
        if (data.code == 200) {
          this.$set(this,'dataList',data.data.records);
        }
      },
      //获取报警信息列表
      async getSafeWarnList() {
        const {data} = await getSafeWarnList(this.safeWarnQueryParams);
        if (data.code == 200) {
          this.alarmList = data.rows;
          if (data.rows[0]) {
            this.securityAlertNum = data.rows[0].todayHappenCount;
          } else {
            this.securityAlertNum = 0;
          }
        }
      },
	   tableButton(type,row){
        let self = this;
        if(type == 'subDetail'){
          //实验室详情
		  this.laboratoryAppletGetSubDetailInfo(row.infoId)

        }
      },
	  //获取实验室详情
	  async laboratoryAppletGetSubDetailInfo(infoId) {
	    const {data} = await laboratoryAppletGetSubDetailInfo({infoId:infoId});
	    if (data.code == 200) {
			uni.navigateTo({
				url: '/pages_manage/laboratory/infoPage?infoData='+encodeURIComponent(JSON.stringify(data.data))
			});
	    }
	  },
    },
    beforeDestroy() {

    }
  }
</script>

<style lang="stylus" scoped>
.manage-workbench {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  .top-big-img {
    height: 342 rpx;
    width: 750 rpx;
  }
  /*安全报警和我的实验室头部*/
  .for-title-p{
    border-top-left-radius 20rpx
    border-top-right-radius 20rpx
    background #fff
    padding-left:25rpx;
    display flex
    margin:0 20rpx;
    border-bottom:1rpx solid #e0e0e0;
    .left-img{
      height:34rpx;
      width:34rpx;
      margin:22rpx 10rpx 0 0;
    }
    .name-view{
      line-height:77rpx;
      font-size:30rpx;
      color:#333;
    }
    .num-view{
      width:28rpx;
      height:28rpx;
      font-size:20rpx;
      background:#EE3A3A;
      border-radius:50%;
      text-align :center;
      line-height:24rpx;
      color:#fff;
      margin:26rpx 0 0 10rpx;
    }
    .null-view{
      flex:1;
    }
    .right-img{
      height:20rpx;
      width:10rpx;
      margin:28rpx 19rpx 0 0;
    }
  }
  /*我的实验室*/
  .for-max-box{
    margin:0 20rpx 120rpx;
    background: #fff
    overflow: hidden
    border-bottom-left-radius 20rpx
    border-bottom-right-radius 20rpx
    .null-img{
      display block
      width:276rpx;
      height:321rpx;
      margin:40rpx auto;
    }
    .for-box:nth-child(1){
      border-top:none;
    }
    .for-box{
      border-top:4rpx solid #dedede;
      overflow hidden
      background #ffffff
      margin-bottom:20rpx;

      .title-box{
        margin:20rpx 20rpx 0;
        display flex
        view:nth-child(1){
          height:40rpx;
          line-height:40rpx;
          font-size:20rpx;
          border-radius:10rpx;
          padding:0 20rpx;
          color:#fff;
          margin-right:20rpx;
        }
        view:nth-child(2){
          line-height:42rpx;
          font-size:30rpx;
          color:#333;
          max-width:600rpx;
          flex:1;
        }
        img{
          width:12rpx;
          height:20rpx;
          margin-top:11rpx;
        }
        .colorA{
          background:#aa2315;
        }
        .colorB{
          background:#ff9b09;
        }
        .colorC{
          background:#3ea3e9;
        }
        .colorD{
          background:#3ea34c;
        }

      }
      .address-box{
        margin:20rpx 20rpx;
        font-size:26rpx;
        color:#999999;
        span{
          margin-right:60rpx;
        }
      }
      .address-box-two{
        display flex
        margin:0 20rpx 20rpx 20rpx;
        img{
          width:28rpx;
          height:30rpx;
          margin-right:18rpx;
        }
        view{
          line-height:30rpx;
          font-size:24rpx;
          color:#999999;
        }
      }
      /*安全报警*/
      .for-img-box{
        border-top:1rpx solid #e0e0e0;
        margin:0 20rpx;
        .for-img-min-box{
          display flex
          img{
            width:30rpx;
            height:27rpx;
            margin-top:24rpx;
            margin-right:10rpx;
          }
          view{
            line-height:74rpx;
            text-align center
            font-size:28rpx;
            color:#EE3A3A;
          }
        }
      }
      .button-view{
        margin:0 20rpx;
        border-top:1rpx dashed #e0e0e0;
        line-height:90rpx;
        text-align :center;
        font-size:26rpx;
        color:#333;
      }
    }
  }
}
</style>