FE-app-oam/pages/hardware/infoPage.vue

<template>
	<view id="iotDevice-info-page">
		<!-- 基础信息 -->
		<view class="info-title-max-big-box">
			<view class="info-title-name-box">
				<view>硬件名称：{{newData.hardwareName}}</view>
				<view :class="newData.operatingState?'online-1':'online-2'">{{newData.operatingState ?'开启':'关闭'}}</view>
			</view>
			<view class="info-title-name-box">
				<view>硬件类型：{{newData.hardwareTypeName}}</view>
				<view :class="newData.online?'state-1':'state-2'">{{newData.state ?'启用':'停用'}}</view>
			</view>
			<view class="info-title-text"><span>硬件编号：</span>{{newData.deviceNo}}</view>
			<view class="info-title-text"><span>硬件ID：</span>{{newData.deviceId}}</view>
			<view class="info-title-text">
				<span>位置：</span>
				{{newData.schoolName?newData.schoolName:''}}
				{{newData.schoolName?' - '+newData.buildName:''}}
				{{newData.buildName?' - '+newData.floorName:''}}
				{{newData.floorName?' - '+newData.subjectName:''}}
			</view>
		</view>
		<!-- 选项卡按钮 -->
		<view class="info-button-max-big-box">
			<view class="info-button-view" @click="buttonCheck(1)"
			:class="pageType == 1?'info-button-check':''">日志</view>
			<view class="info-button-view" @click="buttonCheck(2)"
			:class="pageType == 2?'info-button-check':''">调试</view>
		</view>
		<!-- 设备日志 -->
		<view class="info-log-max-big-box" v-if="pageType == 1">
			<view class="query-max-big-box">
				<view class="query-input-box">
					<picker @change="typeListChange" :value="typeListIndex" :range="typeList">
						<view style="width:330rpx;" class="query-input"
						:class="!typeName?'query-input-placeholder':''">
							{{typeName?typeName:'选择类型'}}
						</view>
					</picker>
				</view>
				<view class="query-button-one" @click="handleQuery">查询</view>
				<view class="query-button-two" @click="resetQuery">重置</view>
			</view>
			<view class="list-max-big-box">
				<view class="list-max-big-null" v-if="!dataList[0]">暂无数据</view>
				<view class="for-list-max-big-box"
				v-for="(item,index) in dataList" :key="index">
					<view class="for-list-title-box">
						<view>{{item.logType?'打开':'关闭'}}</view>
						<view :class="item.state?'stateColorA':'stateColorB'">{{item.state?'成功':'失败'}}</view>
						<view>{{parseTime(item.createTime,"{y}-{m}-{d} {h}:{i}")}}</view>
					</view>
					<view class="for-list-remark-box">
						<view class="for-list-remark">备注：{{item.remark}}</view>
						<view class="for-list-button" @click="shadeOpen(item,1)">查看</view>
					</view>
				</view>
			</view>
			<view class="pagination-max-big-box">
				<view class="pagination-button" @click="paginationButton(1)"
				:class="queryParams.page == 1 ? 'pagination-color':''">上一页</view>
				<view class="pagination-num">{{queryParams.page}}/{{pages}}</view>
				<view class="pagination-button" @click="paginationButton(2)"
				:class="queryParams.page == pages || queryParams.page > pages ? 'pagination-color':''">下一页</view>
			</view>
		</view>
		<!-- 功能调试 -->
		<view class="info-deBug-max-big-box" v-if="pageType == 2">
			<view class="info-deBug-max-big-null" v-if="!debugDataList[0]">暂无数据</view>
			<view class="info-deBug-for-box" @click.stop="lookDebugInfo(item)"
			v-for="(item,index) in debugDataList" :key="index">
				<image :src="item.featureType == 0 ? warningImg : (item.featureType == 1 ? successImg : errorImg)"></image>
				<view class="info-deBug-for-title-box">
					<view>{{item.name}}</view>
					<view>{{item.remark}}</view>
				</view>
				<view class="info-deBug-for-type-box"
					:class="item.featureType === 0?'colorC':(item.featureType === 1?'colorA':'colorB')">
					{{item.featureType == 0 ?'':(item.featureType == 1 ?'正常':'异常')}}
				</view>
        <view class="info-deBug-for-button">
          <view :class="item.featureType === 0 ? 'buttonTypeA' : 'buttonTypeB'"
            @click.stop="debugButton(item,index)">
            {{item.featureType === 0 ? '调试' : '复位'}}
          </view>
        </view>
			</view>
		</view>
		<view class="info-positon-max-big-box" v-if="shadeType == 1 || shadeType == 2">
			<view class="info-positon-big-box">
				<view class="info-positon-box" v-if="shadeType == 1">
					<view class="info-positon-text-box">
						<view>请求：</view>
						<view class="info-positon-text">{{shadeData.reqBody}}</view>
					</view>
					<view class="info-positon-text-box">
						<view>响应：</view>
						<view class="info-positon-text">{{shadeData.respBody}}</view>
					</view>
				</view>
				<view class="info-positon-box" v-if="shadeType == 2">
					<view class="info-positon-text-box">
						<view>功能名称：</view>
						<view class="info-positon-text">{{shadeData.name}}</view>
					</view>
					<view class="info-positon-text-box">
						<view>功能备注：</view>
						<view class="info-positon-text">{{shadeData.remark}}</view>
					</view>
					<view class="info-positon-text-box">
						<view>请求地址：</view>
						<view class="info-positon-text">{{shadeData.reqApi}}</view>
					</view>
					<view class="info-positon-text-box">
						<view>请求方式：</view>
						<view class="info-positon-text">{{shadeData.reqMethod}}</view>
					</view>
					<view class="info-positon-text-for-box" v-if="shadeData.dataList[0]">
						<view>请求参数：</view>
						<view class="info-positon-text-for" v-for="(minItem,minIndex) in shadeData.dataList" :key="minIndex">
							{{minItem.key}} : {{minItem.value}}
						</view>
					</view>
					<view class="info-positon-text-box">
						<view>响应参数：</view>
						<view class="info-positon-text">{{shadeData.response}}</view>
					</view>
				</view>
				<view class="info-positon-button-box">
					<view @click="shadeOff">关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		iotHardwareLogList,
		iotHardwareFunctionDropList,
		iotHardwareDetail,
		iotDebugFunctionGet,
		iotDebugFunctionPost
	} from '@/api/index.js'
	export default {
		data(){
			return {
				successImg:require('@/images/success_icon.png'),
				errorImg:require('@/images/error_icon.png'),
				warningImg:require('@/images/warning_icon.png'),
				pageType:1,
				newData:{},
				//进度条数据
				scheduleData:{
					featureType:0,
					schedule:0,
				},
				//诊断相关
				featureDataList:[
					{
						name:"设备状态",
						remark:"禁用状态会导致诊断失败",
						type:'state',
						featureType:0,
						response:'',
					},
					{
						name:"在线状态 ",
						remark:"禁用会导致设备连接失败",
						type:'online',
						featureType:0,
						response:'',
					},
					{
						name:"通信状态",
						remark:"禁用和配置错误会导致设备连接失败",
						type:'connect',
						featureType:0,
						response:'',
					},
				],
				//调试功能相关
				debugDataList:[],
        //调试方法数据
        debugIndex:null,
				//物联日志相关
				typeList:['成功','失败'],
				typeListIndex:0,
				typeName:'',
				dataList:[],
				pages:0,
				queryParams:{
					page:1,
					pageSize:10,
					state:null,
				},
				//弹窗相关
				shadeType:false,
				shadeData:{},
				//上报日志相关
				dataTypeList:['正常数据','风险数据'],
				dataTypeListIndex:0,
				dataTypeName:'',
				logList:[],
				logPages:0,
				logQueryParams:{
					page:1,
					pageSize:10,
					dataType:'',
				},
				
			}
		},
		onLoad(option) {
			this.$set(this,'newData',JSON.parse(decodeURIComponent(option.item)));
		},
		onShow() {
			this.resetQuery();
		},
		methods: {
			//子页面切换
			buttonCheck(type){
				if(this.pageType != type){
					if(type == 1){
						this.resetQuery();
					}else if(type == 2){
						this.iotHardwareFunctionDropList();
					}
					this.$set(this,'pageType',type);
				}
			},
      //重新诊断
      resetButton(){
        let self = this;
        this.$set(this,'scheduleData',{
          featureType:0,
          schedule:0,
        });
        this.$set(this.featureDataList[0],'featureType',0);
        this.$set(this.featureDataList[1],'featureType',0);
        this.$set(this.featureDataList[2],'featureType',0);
        setTimeout(() => {
          self.diagnosis();
        }, 100);
      },
			//获取功能调试列表
			async iotHardwareFunctionDropList(){
				const { data } = await iotHardwareFunctionDropList({typeId:this.newData.hardwareTypeId});
				if(data.code == 200){
					data.data.forEach((item) => {
						item.featureType = 0;
					})
          this.$set(this,'debugDataList',data.data);
				}
			},
			//调试功能接口
			debugButton(item,index){
				if(item.featureType === 0){
					this.$set(this,'debugIndex',index);
					let url = item.reqApi
					let dataList = JSON.parse(item.reqParams);
					let obj = {
						url:item.reqApi,
					}
					for(let i=0;i<dataList.length;i++){
						if(dataList[i].keyType == 'data'){
							obj[dataList[i].keyName] = this.newData[dataList[i].keyName];
						}else if(dataList[i].keyType == 'argument'){
							obj[dataList[i].keyName] = dataList[i].keyArgument;
						}else if(dataList[i].keyType == 'file'){
							obj[dataList[i].keyName] = uni.getStorageSync('fileBrowseEnvironment') + dataList[i].keyFile;
						}
					}
					if(item.reqMethod == 'POST'){
						this.iotDebugFunctionPost(url,obj);
					}else if(item.reqMethod == 'GET'){
						this.iotDebugFunctionGet(url,obj);
					}
				}else{
					this.$set(this.debugDataList[index],'response','');
					this.$set(this.debugDataList[index],'featureType',0);
					this.$set(this,'debugIndex',null);
				}
			},
			//post调试
			async iotDebugFunctionPost(url,obj){
				const { data } = await iotDebugFunctionPost(url,obj);
				this.$set(this.debugDataList[this.debugIndex],'response',JSON.stringify(data));
				if(data.code == 200){
					this.$set(this.debugDataList[this.debugIndex],'featureType',1);
				}else{
					this.$set(this.debugDataList[this.debugIndex],'featureType',2);
				}
				this.iotHardwareDetail();
			},
			//get调试
			async iotDebugFunctionGet(url,obj){
				const { data } = await iotDebugFunctionGet(url,obj);
				this.$set(this.debugDataList[this.debugIndex],'response',JSON.stringify(data));
				if(data.code == 200){
					this.$set(this.debugDataList[this.debugIndex],'featureType',1);
				}else{
					this.$set(this.debugDataList[this.debugIndex],'featureType',2);
				}
				this.iotHardwareDetail();
			},
			//硬件详情
			async iotHardwareDetail(){
				const { data } = await iotHardwareDetail({id:this.newData.id});
				console.log('data'),data
				if(data.code == 200){
          this.$set(this.newData,'operatingState',data.data.operatingState);
				}
			},
			//查看debug数据
			lookDebugInfo(item){
				if(item.featureType != 0){
					let obj = {
						name:item.name,
						remark:item.remark,
						reqApi:item.reqApi,
						reqMethod:item.reqMethod,
						response:item.response,
						dataList:[],
					}
					let dataList = JSON.parse(item.reqParams);
					for(let i=0;i<dataList.length;i++){
						if(dataList[i].keyType == 'data'){
							obj.dataList.push({
								key:dataList[i].keyName,
								value:this.newData[dataList[i].keyName]?this.newData[dataList[i].keyName]:'',
							})
						}else if(dataList[i].keyType == 'argument'){
							obj.dataList.push({
								key:dataList[i].keyName,
								value:dataList[i].keyArgument?dataList[i].keyArgument:'',
							})
						}else if(dataList[i].keyType == 'file'){
							obj.dataList.push({
								key:dataList[i].keyName,
								value:dataList[i].keyFile?uni.getStorageSync('fileBrowseEnvironment') + dataList[i].keyFile:'',
							})
						}
					}
					this.shadeOpen(obj,2);
				}
			},
			//状态选中
			typeListChange(event){
				this.$set(this,'typeName',event.target.value == 0?'成功':'失败');
				this.$set(this.queryParams,'state',event.target.value == 0?true:false);
			},
			//查询按钮
			handleQuery(){
				this.$set(this.queryParams,'page',1);
				this.getList();
			},
			//重置按钮
			resetQuery(){
				this.$set(this,'typeListIndex',0);
				this.$set(this,'typeName','');
				this.$set(this,'queryParams',{
					page:1,
					pageSize:10,
					state:null,
				});
				this.getList();
			},
			//翻页
			paginationButton(type){
				if(type == 1){
					if(this.queryParams.page != 1){
						this.queryParams.page--
						this.getList();
					}
				}else if(type == 2){
					if(this.queryParams.page != this.pages && this.queryParams.page < this.pages){
						this.queryParams.page++
						this.getList();
					}
				}
			},
			//获取物联设备列表
			async getList(){
				let obj = JSON.parse(JSON.stringify(this.queryParams))
				obj.hardwareId = this.newData.id;
				const {data} = await iotHardwareLogList(obj);
				if(data.code==200){
					this.$set(this,'pages',data.data.pages);
					this.$set(this,'dataList',data.data.records);
				}
			},
			//开启弹窗
			shadeOpen(item,type){
				this.$set(this,'shadeData',item);
				this.$set(this,'shadeType',type);
			},
			//关闭弹窗
			shadeOff(){
				this.$set(this,'shadeType',0);
				this.$set(this,'shadeData',{});
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#iotDevice-info-page {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		.info-title-max-big-box{
			height:250rpx;
			background-color: #fff;
			font-size:30rpx;
			padding:20rpx 30rpx;
			.info-title-name-box{
				display: flex;
				view{
					line-height:50rpx;
				}
				view:nth-child(1){
					flex: 1;
				}
				view:nth-child(2){
					margin:5rpx 0;
					height:40rpx;
					line-height:40rpx;
					font-size:26rpx;
					width:100rpx;
					text-align: center;
					color:#fff;
					border-radius:8rpx;
				}
				.online-1{
					background-color:#14AE10;
				}
				.online-2{
					background-color:#999;
				}
				.state-1{
					background-color:#0183FA;
				}
				.state-2{
					background-color:#999;
				}
			}
			.info-title-text{
				line-height:50rpx;
				span{
					display: inline-block;
					// width:160rpx;
				}
			}
		}
		.info-button-max-big-box{
			display: flex;
			.info-button-view{
				background-color: #999;
				color:#fff;
				line-height:60rpx;
				height:60rpx;
				flex:1;
				text-align: center;
				font-size:28rpx;
			}
			.info-button-check{
				background-color: #0183FA !important;
			}
		}
		.info-log-max-big-box{
			flex:1;
			display:flex;
			flex-direction: column;
			overflow-x: hidden;
			.query-max-big-box{
				height:80rpx;
				background-color: #fff;
				display: flex;
				font-size:28rpx;
				.query-input-box{
					display: flex;
					margin:10rpx 0 0 20rpx;
					.query-input{
						padding:0 20rpx;
						height:60rpx;
						line-height:60rpx;
						font-size:26rpx;
						border-radius:8rpx;
						border:1px solid #dedede;
					}
					.query-input-placeholder{
						color: #999 !important;
					}
				}
				.query-button-one{
					margin:10rpx 0 0 10rpx;
					background-color: #0183FA;
					color:#fff;
					border-radius:8rpx;
					width:160rpx;
					height:62rpx;
					line-height:62rpx;
					text-align: center;
					font-size:28rpx;
				}
				.query-button-two{
					margin:10rpx;
					background-color: #999;
					color:#fff;
					border-radius:8rpx;
					width:160rpx;
					height:62rpx;
					line-height:62rpx;
					text-align: center;
					font-size:28rpx;
				}
				.query-button-three{
					margin:10rpx 10rpx 0 0;
					background-color: #409EFF;
					color:#fff;
					border-radius:8rpx;
					width:100rpx;
					height:62rpx;
					line-height:62rpx;
					text-align: center;
					font-size:28rpx;
				}
			}
			.list-max-big-box{
				flex:1;
				overflow-x: hidden;
				overflow-y: scroll;
				margin:20rpx;
				.list-max-big-null{
					font-size:28rpx;
					text-align:center;
					line-height:100rpx;
					color:#999;
				}
				.for-list-max-big-box{
					background-color: #fff;
					color:#333;
					font-size:30rpx;
					margin-bottom:20rpx;
					border-radius:8rpx;
					.for-list-title-box{
						display: flex;
						border-bottom:1rpx solid #dedede;
						padding:20rpx;
						view{
							line-height:50rpx;
							font-size:28rpx;
						}
						view:nth-child(1){
							flex:1;
						}
						view:nth-child(2){
							width:140rpx;
						}
						view:nth-child(3){
							width:240rpx;
						}
						.stateColorA{
							color:#14AE10;
						}
						.stateColorB{
							color:#FF6666;
						}
					}
					.for-list-remark-box{
						display: flex;
						.for-list-remark{
							padding:20rpx;
							line-height:50rpx;
							font-size:28rpx;
							flex:1;
							display:block;
							overflow:hidden;
							text-overflow:ellipsis;
							white-space:nowrap;
						}
						.for-list-button{
							margin:20rpx 20rpx 0 0;
							border-radius:8rpx;
							width:120rpx;
							height:50rpx;
							line-height:50rpx;
							text-align: center;
							font-size:28rpx;
							background-color:#409EFF ;
							color: #fff;
						}
					}
				}
			}
			.pagination-max-big-box{
				height:80rpx;
				background-color: #fff;
				display: flex;
				.pagination-button{
					margin:10rpx;
					border-radius:8rpx;
					width:140rpx;
					height:60rpx;
					line-height:60rpx;
					text-align: center;
					font-size:28rpx;
					background-color:#0183FA;
					color:#fff;
				}
				.pagination-num{
					flex:1;
					text-align: center;
					line-height:80rpx;
				}
				.pagination-color{
					background-color: #dedede;
				}
			}
		}
		.info-feature-max-big-box{
			flex:1;
			overflow-x: hidden;
			overflow-y: scroll;
			.schedule-box{
				padding-bottom:10rpx;
				.schedule-min-box{
					border:1rpx solid #999;
					padding:2rpx;
					border-radius:20rpx;
					height:20rpx;
					margin:40rpx 40rpx 0 50rpx;
					view{
						height:20rpx;
						border-radius:20rpx;
						background-color: #00a0e9;
					}
				}
				.schedule-title-box{
					height:30rpx;
					line-height:30rpx;
					text-align: center;
					font-size:24rpx;
					margin:10rpx 0;
				}
			}
			.info-feature-for-box{
				display: flex;
				background-color: #fff;
				font-size:28rpx;
				height:100rpx;
				margin:0 30rpx 10rpx;
				border-radius:12rpx;
				image{
					width:60rpx;
					height:60rpx;
					margin:20rpx;
				}
				.info-feature-for-title-box{
					padding:10rpx 0;
					flex:1;
					view{
						color:#333;
						line-height:40rpx;
					}
					view:nth-child(1){
						font-size:28rpx;
					}
					view:nth-child(2){
						font-size:24rpx;
					}
				}
				.info-feature-for-type-box{
					width:200rpx;
					font-size:26rpx;
					font-weight:700;
					line-height:100rpx;
					text-align: center;
				}
        .colorA{
          color:#24B276;
        }
        .colorB{
          color:#FF6666;
        }
        .colorC{
          color:#FF9000;
        }
			}
		}
		.info-deBug-max-big-box{
			flex:1;
			overflow-x: hidden;
			overflow-y: scroll;
			padding:30rpx 0;
			.info-deBug-max-big-null{
				font-size:28rpx;
				text-align:center;
				line-height:100rpx;
				color:#999;
			}
			.info-deBug-for-box{
				display: flex;
				background-color: #fff;
				font-size:28rpx;
				height:100rpx;
				margin:0 30rpx 10rpx;
				border-radius:12rpx;
				image{
					width:60rpx;
					height:60rpx;
					margin:20rpx;
				}
				.info-deBug-for-title-box{
					padding:10rpx 0;
					flex:1;
					view{
						color:#333;
						line-height:40rpx;
					}
					view:nth-child(1){
						font-size:28rpx;
					}
					view:nth-child(2){
						font-size:24rpx;
					}
				}
				.info-deBug-for-type-box{
					width:80rpx;
					font-size:26rpx;
					font-weight:700;
					line-height:100rpx;
				}
			  .colorA{
			    color:#24B276;
			  }
			  .colorB{
			    color:#FF6666;
			  }
			  .colorC{
			    color:#FF9000;
			  }
				.info-deBug-for-button{
					view{
						margin:25rpx 25rpx 25rpx 0;
						height:50rpx;
						line-height:50rpx;
						font-size:28rpx;
						width:120rpx;
						text-align: center;
						cursor: pointer;
						border-radius:4rpx;
					}
					.buttonTypeA{
						border:1px solid #0183FA;
						background-color: #0183FA;
						color:#fff;
					}
          .buttonTypeB{
            border:1px solid #999999;
            background-color: #999999;
            color:#fff;
          }
				}
			}
		}
		.info-feature-button-box{
			display: flex;
			.info-feature-button-null{
				flex:1;
			}
			.info-feature-button{
				margin:20rpx 0;
				width:160rpx;
				height:60rpx;
				line-height:60rpx;
				background-color: #0183FA;
				color:#fff;
				text-align: center;
				font-size:24rpx;
				border-radius:12rpx;
				margin-top:30rpx;
			}
		}
		.info-positon-max-big-box{
			z-index:100;
			position: absolute;
			bottom:0;
			left:0;
			width:100%;
			height:100%;
			background-color: rgba(0,0,0,0.6);
			.info-positon-big-box{
				width:80%;
				height:80%;
				margin-left:10%;
				margin-top:10%;
				border-radius:16rpx;
				display: flex;
				flex-direction:column;
				overflow-x: hidden;
				overflow-y: scroll;
				background-color: #fff;
				.info-positon-box{
					flex:1;
					overflow-x: hidden;
					overflow-y: scroll;
					.info-positon-text-box{
						view:nth-child(1){
							padding:10rpx 20rpx;
							background-color: #eeeeee;
							font-size:28rpx;
						}
						.info-positon-text{
							padding:20rpx 40rpx;
							word-wrap: break-word;
							font-size:26rpx;
						}
					}
					.info-positon-text-for-box{
						padding-bottom:10rpx;
						view:nth-child(1){
							padding:10rpx 20rpx;
							background-color: #eeeeee;
							font-size:28rpx;
							margin-bottom:10rpx;
						}
						.info-positon-text-for{
							padding:10rpx 40rpx;
							word-wrap: break-word;
							line-height:26rpx;
							font-size:26rpx;
						}
					}
				}
				.info-positon-button-box{
					border-top:1px solid #dedede;
					view{
						background-color: #999;
						color:#fff;
						text-align: center;
						line-height:60rpx;
						height:60rpx;
						font-size:28rpx;
						width:160rpx;
						margin:10rpx auto;
						border-radius:12rpx;
					}
				}
			}
		}
	}
</style>