FE-V2-XCX/pages/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>
    <!-- <view class="min-icon-button-box" style="margin-bottom: 0;">
      <view @click="goPage('casuallyPat')">
        <img src="@/images/Version2.2/icon_sy_ssp.png">
        <view>随手拍</view>
      </view>
      <view @click="goPage('safetyInspect')">
        <img src="@/images/Version2.2/icon_sy_aqjc.png">
        <view>安全检查</view>
      </view>
      <view @click="goPage('photoInspection')">
        <img src="@/images/icon_dzt_pzjc.png">
        <view>离开检查</view>
      </view>
      <view @click="goPage('accessQualification')">
        <img src="@/images/Version2.2/icon_sy_zrsq.png">
        <view>准入审核</view>
      </view>
      <view @click="goPage('gas')">
        <img src="@/images/Version3.0/icon_sy_qpgl.png">
        <view>气瓶管理</view>
      </view>
      <view @click="goPage('none')">
        <img src="@/images/Version3.0/icon_sy_hxp.png">
        <view>化学品管理</view>
      </view>
      <view @click="goPage('none')">
        <img src="@/images/Version3.0/icon_sy_tzsb.png">
        <view>特种设备</view>
      </view>
      <view @click="goPage('none')">
        <img src="@/images/Version3.0/icon_sy_aqxx.png">
        <view>安全档案</view>
      </view>
    </view> -->
    <view class=big-icon-button-box>
		<!-- 气瓶管理 -->
		<view class="big-icon-button-box_l">
			<!-- <img  class="big-icon-button-box_bg" src="@/images/img_bg_qpgl.png" @click="goPage('gasManage')"> -->
			<view class="big-icon-button-box_t1">气瓶管理</view>
			<view class="big-icon-button-box_t2">安全第一   预防为主</view>
		</view>
		<view class="big-icon-button-box_r">
			<!-- 安全报警 -->
			<img src="@/images/Version2.3/button_1.png" @click="goPage('alarm')">
			<!-- 应急疏散 -->
			<img src="@/images/Version2.3/button_2.png" @click="goPage('emergencyEvacuation')">
		</view>
      
    </view>
    <!-- 分级管控 -->
    <!-- <view class="grading">
      <img class="grading_l" src="@/images/icon_sy_fjgk.png"/>
      <view class="grading_c">分级管控</view>
      <view class="grading_r" @click="goPage('grading')">{{gradingCount>0?gradingCount+'项工作待完成':''}}<img src="@/images/icon_wdwg_gd.png"/></view>
    </view> -->

    <view class="for-title-p" @click="goSecurityAlertList" v-if="alarmList[0]">
      <img class="left-img" src="@/images/Version2.2/icon_aqbj.png">
      <view class="name-view">安全报警</view>
      <view class="num-view">{{securityAlertNum}}</view>
      <view class="null-view"></view>
      <img class="right-img" src="@/images/icon_04.png">
    </view>
    <view class="for-max-box-one" 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/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/icon_15.png">
            <view>{{minItem}}</view>
          </view>
        </view>
        <view class="button-view" @click="laboratoryInfo(item)">查看详情</view>
      </view>
    </view>
    <view class="for-title-p" v-if="dataList[0]">
      <img class="left-img" src="@/images/Version2.2/icon_sy_wdsys.png">
      <view class="name-view">我的实验室</view>
    </view>
    <view class="for-max-box" v-if="dataList[0]">
      <img class="null-img" v-if="!dataList[0]" src="@/images/null-data-1.png">
      <view class="for-box" v-for="(item,index) in dataList" :key="index" @click="laboratoryInfoOne(item)">
        <view class="title-box">
          <view :style="'border:1rpx solid '+item.fiedColor+';background:#fff;color:'+item.fiedColor+';'">{{item.levelName}}</view>
          <view>{{item.name}}</view>
          <img src="@/images/icon_04.png">
        </view>
        <view class="address-box"><span>{{item.typeName}}</span>{{item.deptName}}</view>
        <view class="address-box-two" v-if='item.subAddrrStr!="  "'>
          <img src="@/images/icon_14.png">
          <view>{{item.subAddrrStr}}</view>
        </view>
		<view class="text-box" v-if="item.sensorFunctionList[0]">
			<view class="min-box" v-for="(minItem,index2) in item.sensorFunctionList" :key="index2">
				<view class="min-min-box">
					<img v-show="minItem.hasWarn" src="@/images/icon_15.png">
					<view :class="{'colorA':minItem.hasWarn}">{{minItem.funcName}}：{{minItem.formatVal?minItem.formatVal:'-'}}</view>
				</view>
			</view>
		</view>
      </view>
    </view>
    <tab-bar></tab-bar>
  </view>
</template>

<script>
import $mqtt from '@/utils/mqtt.min.js';
import { config } from '@/api/request/config.js'
import { appReceivePhotoNote,getApprovalCount,subject_class,getSafeWarnList,laboratoryInfo,laboratoryList,getLoginUserInfo,outSubjectPhoto,gradingControl,listData,getGentleIdentifier} from '@/api/index.js'
import { tabBar } from '@/component/tabBar.vue'
import { topWarn } from '@/component/topWarn.vue'
import { navBar } from '@/component/navbar.vue'
export default {
  components: {
    tabBar,
    topWarn,
	navBar
  },
  data() {
    return {
	  navHeight: uni.getStorageSync('navHeight'),
	  title:'实验室安全智能监测与控制系统',
      //随手拍数量
      appReceivePhotoNoteNum:0,
      //准入数量
      passedNum:"",
      subject_classData:[],
      securityAlertNum:"",
      //MQTT请求参数
      mtopic:"lab/bigview",
      mtopicOne:"lab/function/data",
      msg:"",
      client:{},
      //报警数据
      alarmList:[],
      //实验室数据
      dataList:[],
      //用户信息数据(用来决定是否可以跳转检查项)
      userInfo:{
        isadmin:null,
        ischeck:null,
        list:null,
      },
      buttonArray:[],
      gradingCount:0,//分级管控未完成总数
      homepageBanner:uni.getStorageSync('homepageBanner'),
	  fanList:[],//控制记录触发方式
    }
  },
  created() {

  },
  mounted(){
    this.appReceivePhotoNote();
    this.getApprovalCount();
    this.subject_class();
    this.laboratoryList();
    this.getSafeWarnList();
    this.getLoginUserInfo();
    this.getGrading();
	this.getListData();
    //监听报警信息
    getApp().watch(this.getSafeWarnList,'mqttAlarmData');
  },
  methods: {
	  //查询控制记录触发方式
	  async getListData() {
		let _this = this;
		let obj={
		  pageNum:1,
		  pageSize:20,
		  dictType:'trigger_modes'
		}
		const {data} = await listData(obj)
		if (data.code == 200) {
		   this.fanList=data.rows
		}
	  },
    //暂无提示
    goCheckPage(){
      if(this.userInfo.isadmin){
        uni.navigateTo({
          url: '/pages_manage/workbench/problemRectification/rectifyList'
        });
      }else if(this.userInfo.ischeck == 1){
        uni.navigateTo({
          url: '/pages_manage/workbench/securityCheck/inspectionRecords'
        });
      }else{
        uni.showToast({
          title: '您没有该权限',
          icon:"none",
          mask:true,
          duration: 2000
        });
      }
    },
    //监听传感器信息
    getMqttSensorData(val){
      let self = this;
      if(val.subId){
        for(let i=0;i<self.dataList.length;i++){
          if(self.dataList[i].id == val.subId){
            self.$set(self.dataList[i],'sensorFunctionList',val.functionStatuses);
          }
        }
      }
    },
    //获取分级管控未完成总数
    async getGrading(){
      let obj = {

      }
      const {data} = await gradingControl(obj)
      if(data.code==200){
        this.gradingCount=data.data.length;
      }

    },
    async getLoginUserInfo(){
      const {data} = await getLoginUserInfo();
      if(data.code == 200){
        this.userInfo = data.data;
        let list = [];
        if(data.data.isadmin){
          //实验室负责人
          let obj = {
            id:"1",
            name:"检查记录",
          }
          list.push(obj)
        }
        if(data.data.ischeck == 1){
          //检查者
          let obj = {
            id:"2",
            name:"问题整改",
          }
          list.push(obj)
        }
        this.$set(this,'buttonArray',list);

      }
    },
    //获取报警信息详情
    async laboratoryInfo(item){
        uni.navigateTo({
          url: '/pages/earlyWarningManage/earlyWarningList'
        });
		
		// let self=this;
  //     const {data} = await laboratoryInfo(item.subDiyVo.id);
  //     if(data.code == 200){
  //       let obj = data.data[0];
  //       obj.subClassVO = item.subDiyVo.subClassVO;
  //       obj.name = item.subDiyVo.name;
  //       obj.subTypeLable = item.subDiyVo.subTypeLable;
  //       obj.deptName = item.subDiyVo.deptName;
  //       obj.subAddrrStr = item.subDiyVo.subAddrrStr;
		// //循环判断如果是排风扇的话,启动的时候是人工还是预案还是定时
		// for(let i=0;i<obj.labHardwareVOList.length;i++){
		//  if(obj.labHardwareVOList[i].hardwareTypeEnum.hardwareTypeCode == '2'){
		//  	for(let b=0;b<self.fanList.length;b++){
		//  	  if(self.fanList[b].dictValue==obj.labHardwareVOList[i].triggerModes){
		//  		obj.labHardwareVOList[i].dictLabel=self.fanList[b].dictLabel
		//  	  }
		//  	}
		//  }
		// }
  //       uni.navigateTo({
  //         url: '/pages_manage/workbench/laboratory/laboratoryInfo?item='+encodeURIComponent(JSON.stringify(obj))+'&deptId='+obj.deptId
  //       });
  //     }
    },
    //获取实验室详情
    async laboratoryInfoOne(item){
		let self=this;
      const {data} = await laboratoryInfo(item.id);
      if(data.code == 200){
        let obj = data.data[0];
        obj.subClassVO = item.subClassVO;
        obj.name = item.name;
        obj.subTypeLable = item.subTypeLable;
        obj.deptName = item.deptName;
        obj.subAddrrStr = item.subAddrrStr;
        obj.sensorFunctionList = item.sensorFunctionList;
		//循环判断如果是排风扇的话,启动的时候是人工还是预案还是定时
		for(let i=0;i<obj.labHardwareVOList.length;i++){
		 if(obj.labHardwareVOList[i].hardwareTypeEnum.hardwareTypeCode == '2'){
		 	for(let b=0;b<self.fanList.length;b++){
		 	  if(self.fanList[b].dictValue==obj.labHardwareVOList[i].triggerModes){
		 		obj.labHardwareVOList[i].dictLabel=self.fanList[b].dictLabel
		 	  }
		 	}
		  }
		}
        uni.navigateTo({
          url: '/pages_manage/workbench/laboratory/laboratoryInfo?item='+encodeURIComponent(JSON.stringify(obj))+'&deptId='+item.deptId
        });
      }
    },
    //获取报警信息列表
    async getSafeWarnList(){
      let obj = {
        pageNum:1,
        pageSize:1,
        count:0,
        groupStatus:1,
      };
      const {data} = await getSafeWarnList(obj);
      if(data.code == 200){
        this.alarmList = data.data.list;
        this.securityAlertNum = data.data.count;
        // if(data.rows[0]){
        //   this.securityAlertNum = data.rows[0].todayHappenCount;
        // }else{
        //   this.securityAlertNum = 0;
        // }
      }
    },
    //获取实验室列表
    async laboratoryList(){
      let self = this;
      let obj = {
		pageNum:1,
		pageSize:10,
        deptId:this.facultyIndex?this.facultyList[this.facultyIndex].deptId:'',
        subDept:this.subjectIndex?this.subjectList[this.subjectIndex].dictValue:'',
        level:this.levelIndex?this.levelList[this.levelIndex].dictValue:'',
      };
      const {data} = await laboratoryList(obj);
      if(data.code == 200){
        for(let o=0;o<data.data.length;o++){
          if(data.data[o].labHardwareVOList){
            data.data[o].hardwareList = [];
            for(let i=0;i<data.data[o].labHardwareVOList.length;i++){
              if(data.data[o].labHardwareVOList[i].hardwareTypeEnum.code == 4 &&data.data[o].labHardwareVOList[i].hardwareNUM){
                if(data.data[o].hardwareNUM){
                  data.data[o].hardwareNUM = data.data[o].hardwareNUM + ',' + data.data[o].labHardwareVOList[i].hardwareNUM
                }else{
                  data.data[o].hardwareNUM = data.data[o].labHardwareVOList[i].hardwareNUM
                }
              }else{
                let obj = {
                  name:"",
                  type:"",
                };
                obj.name = data.data[o].labHardwareVOList[i].hardwareTypeEnum.hardwareTypeName
                obj.type = data.data[o].labHardwareVOList[i].state.code;
                obj.id = data.data[o].labHardwareVOList[i].id;
                data.data[o].hardwareList.push(obj);
              }
            }
          }
        }
        this.dataList = data.data;
		let list = [];
		let obj = {
			type:"lab/function/data",
			idList:[],
		}
		for(let i=0;i<self.dataList.length;i++){
			let num = 0;
			for(let o=0;o<obj.idList.length;o++){
				if(obj.idList[o] == self.dataList[i].id){
					num++
				}
			}
			if(num == 0){
				obj.idList.push(self.dataList[i].id)
			}
		}
		list.push({type:"lab/riskPlan/trigger/notice",});
		getApp().appMqttOn(1,list);
      }
    },
    //获取输入数量
    async getApprovalCount(){
      const {data} = await getApprovalCount()
      if(data.code == 200){
        this.passedNum = data.data.passed + '人已获得';
      }
    },
    //获取管理员工作台随手拍数量数据
    async appReceivePhotoNote(){
      const {data} = await appReceivePhotoNote();
      if(data.code == 200){
        this.appReceivePhotoNoteNum = data.data.photoCount;
      }
    },
    //获取学科字典
    async subject_class(){
      const {data} = await subject_class();
      if(data.code == 200){
        this.subject_classData = data.data;
      }
    },
    //去安全警报
    goSecurityAlertList(){
      uni.navigateTo({
        url: '/pages/earlyWarningManage/earlyWarningList',//安全警报
      });
    },
    //页面跳转
    goPage(type){
      if(type=='casuallyPat'){
        uni.navigateTo({
            url: '/pages_safetyExamine/snapshotManage/snapshotAdd'
        });
      }else if(type=='receiveCasuallyPat'){//收到随手拍
        uni.navigateTo({
          url: '/pages_manage/workbench/receiveCasuallyPat/receiveCasuallyPat',
        });
      }else if(type=='accessQualification'){//收到随手拍
        uni.navigateTo({
          url: '/pages_manage/workbench/accessQualification/accessQualification',
        });

      }else if(type == 'safetyInspect'){//安全检查
        this.getGentleIdentifier();
      }
      else if(type == 'alarm'){
        uni.navigateTo({
          url: '/pages/earlyWarningManage/earlyWarningList',//安全警报
        });
      }else if(type == 'emergencyEvacuation'){
        uni.navigateTo({
          url: '/pages_manage/emergencyEvacuationBig',//安全警报
        });
      }else if(type == 'photoInspection'){
        this.outSubjectPhoto();
      }else if(type == 'grading'){
        uni.navigateTo({
          url: '/pages_manage/gradingControl/gradingControl',//分级管控
        });
      }else if(type == 'gasManage'){//气瓶管理
        uni.navigateTo({
          url: '/pages/gasBottle/gasManage/gasManage',
        });
      }else if(type == 'none'){
		  uni.showToast({
		    title: '暂未开放',
		    icon:"none",
		    mask:true,
		    duration: 2000
		  });
	  }
    },//获取拍照检查配置
    async outSubjectPhoto(){
      const {data} = await outSubjectPhoto();
      if(data.code == 200){
        if(data.data == null){
          //需要检查(重新填写)
          let obj = {
            sub:"实验室照片",
            subUrl:"",
            garbage:"垃圾桶清理后照片",
            garbageUrl:"",
            dangerous:"使用危险设备照片(选填)",
            dangerousUrl:"",
            sourceRisk:"危险源设备使用登记本照片(选填)",
            sourceRiskUrl:"",
          };
          uni.navigateTo({
            url: '/pages_student/workbench/photoInspection?newData='+encodeURIComponent(JSON.stringify(obj)),
          });
        }else if(data.data == false){
          //不需要检查
          uni.showToast({
            title: '暂无检查数据',
            icon:"none",
            mask:true,
            duration: 2000
          });
        }else{
          //需要检查(修改内容)
          let obj = {
            id:data.data.id,
            sub:"实验室照片",
            subUrl:data.data.subUrl,
            garbage:"垃圾桶清理后照片",
            garbageUrl:data.data.garbageUrl,
            dangerous:"使用危险设备照片(选填)",
            dangerousUrl:data.data.dangerousUrl,
            sourceRisk:"危险源设备使用登记本照片(选填)",
            sourceRiskUrl:data.data.sourceRiskUrl,
          };
          uni.navigateTo({
            url: '/pages_student/workbench/photoInspection?newData='+encodeURIComponent(JSON.stringify(obj)),
          });
        }
      }
    },
    //获取用户身份标识"adminGentle": false,   管理员身份 "rectifyGentle": false,   整改身份"applyGentle": false    检查者身份
    async getGentleIdentifier(){
      let self = this;
      const {data} = await getGentleIdentifier();
      if(data.code==200){
        let pageType = null
        // 如果是管理员 检查者和整改者
        let list=[];
        if(data.data.adminGentle){
          list.push({name:'管理员',pageType:1})
        }
        if(data.data.applyGentle ||data.data.myApplyGentle){
          list.push({name:'检查者',pageType:2})
        }
        if(data.data.rectifyGentle){
          list.push({name:'整改者',pageType:3})
        }
        uni.setStorageSync('gentleIdentifier',list)
        uni.setStorageSync('gentleIdentifierData',data.data)
        if(list.length>0){
          uni.navigateTo({
            url: '/pages/safetyExamineWorkbench',
          });
        }else{
          uni.showToast({
            title: '没有相关权限',
            icon:"none",
            mask:true,
            duration: 2000
          });
        }
      }
    },
  },
  beforeDestroy(){
	//断开mqtt连接
	getApp().offMQTT();
    //删除报警监听
    getApp().deleteAlarmWatch();
    //删除传感器监听
    getApp().deleteSensorWatch();
  }
}
</script>

<style lang="stylus" scoped>
.manage-workbench{
  height:100%;
  width:100%;
  overflow-y:scroll;
  box-sizing: border-box;
  .top-big-img{
    height:342rpx;
    width:750rpx;
  }
  .min-icon-button-box{
    display flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width:710rpx;
    margin:20rpx;
    background :#ffffff;
    border-radius:20rpx;
    padding-bottom: 20rpx;
    view{
      width: 176rpx;
      img{
        height:75rpx;
        width:75rpx;
        margin:30rpx auto 10rpx;
      }
      view{
        text-align center
        font-size:24rpx;
      }
    }
  }
  .big-icon-button-box{
    display flex;
	justify-content: space-between;
    margin:20rpx;
	.big-icon-button-box_l{
		background: url("../images/img_bg_qpgl.png") no-repeat;
		background-size: 372rpx 260rpx;
		width:372rpx;
		height:260rpx;
		// .big-icon-button-box_bg{
		// 	width:372rpx;
		// 	height:260rpx;
		// }
		.big-icon-button-box_t1{
			width: 149rpx;
			height: 40rpx;
			background: rgba(225,225,225,0.3);
			border-radius: 2rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			text-align: center;
			margin:94rpx 0 0 181rpx;
			// position:absolute;
			// right: 42rpx;
			// top: 94rpx;
			
		}
		.big-icon-button-box_t2{
			width: 175rpx;
			height: 20rpx;
			font-size: 18rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			line-height: 20rpx;
			margin:20rpx 0 0 181rpx;
			// position:absolute;
			// right: 28rpx;
			// top: 148rpx;
			
		}
	}
	.big-icon-button-box_r{
		img{
		  width:320rpx;
		  height:120rpx;
		}
		>img:nth-of-type(2){
			margin-top: 20rpx;
		}
	}
  }
  /* 分级管控 */
  .grading{
    width :712rpx;
    height :80rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    margin-left:20rpx;
    margin-bottom :20rpx;
    display:flex;
    justify-content :flex-start;
    align-items :center;
    .grading_l{
      width :34rpx;
      height :34rpx;
      margin-left:16rpx;
    }
    .grading_c{
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-left:16rpx;
    }
    .grading_r{
      width :504rpx;
      height :80rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #EE3A3A;
      display :flex;
      justify-content :flex-end;
      align-items: center;
      >img{
        width: 20rpx;
        height: 20rpx;
        margin-left :20rpx;
        margin-top :8rpx;
      }
    }
  }

  .top-max-box{
    height:300rpx;
    .top-min-box{
      display: flex
      margin:20rpx;
      .left-box{
        background #fff
        height:130rpx;
        width:345rpx;
        border-radius: 10px;
        display flex
        .left-img{
          height:80rpx;
          width:80rpx;
          margin:25rpx 30rpx;
        }
        view{
          line-height:130rpx;
          font-size: 28rpx;
          color:#333;
          flex:1;
        }
        .right-img{
          width:20rpx;
          height:20rpx;
          margin:55rpx 30rpx 0 0;
        }
      }
      .right-box{
        background #fff
        height:130rpx;
        width:345rpx;
        margin-left:20rpx;
        border-radius: 10rpx;
        display flex
        .left-img{
          height:80rpx;
          width:80rpx;
          margin:25rpx 30rpx;
        }
        .right-min-view{
          flex:1;
          .right-min-title{
            line-height:28rpx;
            font-size: 28rpx;
            margin-top:32rpx;
            color: #333333;
          }
          .right-bottom-min-box{
            display flex
            view{
              flex:1;
              text-align right
              margin:25rpx 14rpx 0 0;
              font-size: 22rpx;
              color: #999999;
              line-height: 22rpx;
            }
            img{
              width:20rpx;
              height:20rpx;
              margin:27rpx 80rpx 0 0;
            }
          }
        }

      }
    }
    .bottom-min-box{
      background #fff
      height:130rpx;
      width:710rpx;
      border-radius: 10px;
      margin:0 20rpx;
      display flex
      .left-img{
        height:80rpx;
        width:80rpx;
        margin:25rpx 30rpx;
      }
      view{
        flex:1;
        line-height:130rpx;
      }
      view:nth-child(2){
        font-size: 28rpx;
        color:#333;
      }
      view:nth-child(3){
        text-align right
        font-size: 22rpx;
        color:#999;
        margin-right:12rpx;
      }
      .right-img{
        width:20rpx;
        height:20rpx;
        margin:55rpx 30rpx 0 0;
      }
    }
  }
  .for-title-p{
    border-top-left-radius 20rpx
    border-top-right-radius 20rpx
    background #fff
    padding-left:25rpx;
    display flex
    margin:20rpx 20rpx 0;
    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-one{
    margin:0 20rpx;
    border-bottom-left-radius 20rpx
    border-bottom-right-radius 20rpx
    .for-box:nth-child(1){
      border-top:none;
    }
    .for-box{
      border-top:4rpx solid #dedede;
      background #fff
      overflow: hidden
      .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;
        }
        .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;
      }
    }
    .get-null-box{
      height:100rpx;
      line-height:100rpx;
      color:#999;
      text-align center
    }
  }
  .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;
        }
      }
      .text-box{
        /*border-top:1rpx dashed #e0e0e0;*/
        border-top:1rpx solid #E0E0E0;
        padding:20rpx 20rpx 0;
        /*
                  overflow-x:scroll;
                  overflow-y:hidden;
                  white-space: nowrap;
                  */
        .min-box{
          display inline-block
          /*padding:0 30rpx 0 10rpx;*/
          width:335rpx;
          .min-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:#333;
            }
            .colorA{
              color:#EE3A3A;
            }
          }
        }
      }
      .sensor-max-box{
        margin:0 20rpx;
        border-top:1rpx solid #e0e0e0;
        border-bottom:1rpx solid #e0e0e0;
        display flex
        .for-sensor-box{
          flex:1;
          display flex
          font-size:28rpx;
          line-height:94rpx;
          view{
            margin-left:20rpx;
            font-size:25rpx;
            line-height:94rpx;
            color:#0183FA;
          }
        }
      }
      .button-max-box{
        .button-box{
          display flex
          view:nth-child(1){
            flex:1;
            line-height:90rpx;
            color:#333333;
            margin-left:30rpx;
            font-size:28rpx;
          }
          view:nth-child(2){
            width:142rpx;
            line-height:42rpx;
            border:4rpx solid #0183FA;
            border-radius:25rpx;
            color: #0183FA;
            font-size: 30rpx;
            text-align center;
            margin:20rpx 20rpx 20rpx 0;
          }
        }
        .for-button-box{
          display flex
          view{
            flex:1;
            line-height:90rpx;
            color:#333333;
            margin-left:30rpx;
            font-size:28rpx;
          }
          img{
            height:50rpx;
            width:100rpx;
            margin:20rpx 20rpx 20rpx 0;
          }
          view:nth-child(2){
            text-align right
            color:#999;
            margin-right:30rpx;
          }
        }
      }
    }
  }
}
</style>