analysis.vue

<template>
  <div class="contentBox">
	  <div class="content">
		  <div style="padding: 20px 15px 20px 23px;">
			  <span class="selectBox">
				  <el-select  v-model="selectDevs"  placeholder="请选择" @change="devsChange" :popper-append-to-body=false>
				  	<el-option v-for="item in devsList" :value="item.device_id" :label='item.device_name'></el-option>
				  </el-select>
			  </span>
			  <div class="resourceDiv">
				<span>图片可用分析资源：{{resource.picture_free}}</span>
				<span>图片在用分析资源：{{resource.picture_busy}}</span>
				<span>视频可用分析资源：{{resource.video_free}}</span>
				<span>视频在用分析资源：{{resource.video_busy}}</span>  
			  </div>
			  
		  </div>
		  <div  style="padding: 0 15px 20px 23px;">
			  <el-table
			  height="574"
			      :data="tableData"
				  stripe
			      border
			      style="width: 100%">
			      <el-table-column
				  align="center"
			        prop="device_name"
			        label="设备名称">
			      </el-table-column>
			      <el-table-column
			        prop="in_ip"
					align="center"
			        label="ip地址">
			      </el-table-column>
			      <el-table-column
					  align="center"
			        prop="online"
					:formatter="statusFormatter"
			        label="在线状态">
			      </el-table-column>
				  <el-table-column
					  align="center"
				    prop="video_total"
				    label="分析资源数">
				  </el-table-column>
				  <el-table-column
					  align="center"
				    prop="video_free"
				    label="可用分析资源数">
				  </el-table-column>
				  <el-table-column
					  align="center"
				    prop="working_status"
				    label="工作状态">
				  </el-table-column>
				  <el-table-column
					  align="center"
					  width="300"
				    prop="operation"
				    label="操作">
					<template slot-scope="scope">
						<el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false>
							<span class="iconfont icon-xiugai editIcon"   @click="detail(scope.$index, scope.row)"></span>
						</el-tooltip>
					</template>
				  </el-table-column>
			    </el-table>
				<div style="margin-top: 28px;">
					<el-pagination
					style="float: right;"
					  background
					  prev-text="上一页"
					  next-text="下一页"
					   :page-sizes="[30, 50, 100, 200]"
					  layout="prev, pager, next,sizes"
					  :current-page="page"
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"
					  :total="total">
					</el-pagination>
					<div style="clear: both;"></div>
				</div>
				
		  </div>
	  </div>
	  <el-dialog title="详情" :visible.sync="detailVisible">
	    <el-table height="574"
			      :data="detailData"
				  stripe
			      border>
				  <li>{{detail.online == 1 ? (detail.status.hardWareInfo.temperature[0]?detail.status.hardWareInfo.temperature[0].curTemperature : ''):''}}</li>
	      <el-table-column prop="device_name" align="center" label="核心板名称"></el-table-column>
	      <el-table-column prop="in_ip" align="center" label="核心板IP"></el-table-column>
		  <el-table-column
			align="center"
		    prop="online"
			:formatter="statusFormatter"
		    label="在线状态">
		  </el-table-column>
		  <el-table-column prop="cpuUse" align="center" label="CPU使用率" :formatter="cpuUseFormatter"></el-table-column>
	      <el-table-column prop="cpuTem" align="center" label="CPU温度(℃)" :formatter="cpuTemFormatter"></el-table-column>
	    </el-table>
	  </el-dialog>
  </div>
</template>
<script>
	export default {
		data(){
			return{
				detailData:[],
				dev_unid: sessionStorage.getItem('dev_unid'),
				resource:{
					picture_busy: 0,
					picture_free: 0,
					video_busy: 0,
					video_free: 0,
				},
				total:0,
				page:1,
				pageSize:30,
				tableData: [],
				devsList:[],
				selectDevs:'',
				detailVisible:false
			}
		},
		components:{
		},
		mounted(){
			this.getResource();
			this.getDevsName();
		},
		methods:{
			devsChange(){
				this.getTableList();
			},
			getResource(){
				this.$api.resource.getResource({},this.dev_unid).then(res=>{
					this.resource=res.works;
				})
			},
			getDevsName(){
				this.$api.resource.getDevsName({
					is_leaf: 0
				},this.dev_unid).then(res=>{
					this.devsList=res.list_data;
					if(res.list_data.length>0){
						this.selectDevs=res.list_data[0].device_id;
					}
					this.getTableList();
				})
			},
			statusFormatter(row, column, cellValue, index){
				if(cellValue == 1){
					return '在线'
				}else if(cellValue == 0){
					return '离线'
				}else {
					return '未知'
				}
			},
			cpuUseFormatter(row, column, cellValue, index){
				if(row.online == 1){
					return parseInt(row.status.hardWareInfo.usedResourceInfo.cpuRatio*60)+'%'
				}else{
					return ''
				}
			},
			cpuTemFormatter(row, column, cellValue, index){
				if(row.online == 1){
					if(row.status.hardWareInfo.temperature[0]){
						return row.status.hardWareInfo.temperature[0].curTemperature
					}else{
						return ''
					}
				}else{
					return ''
				}
			},
			handleSizeChange(val) {
				this.pageSize=val;
				this.getTableList();
			},
			handleCurrentChange(val) {
				this.page=val;
				this.getTableList();
			  },
			getTableList(){
				this.tableData=[];
				let offset = (this.page - 1) * this.pageSize;
				this.$api.resource.getDevsName({
					limit: this.pageSize,
					offset: offset,
					parent_id: this.selectDevs,
				},this.dev_unid).then((res)=>{
					this.total=res.total_num;
					
					if(res.list_data==null){
						this.tableData=[]
					}else{
						this.tableData=res.list_data;
					}
				}).catch((error)=>{
					
				})
			},
			detail(index,row){
				this.detailData=[];
				this.detailVisible=true;
				this.$api.resource.getDevsName({
					parent_id:row.device_id,
					offset: 0,
					limit: 10000,
				},this.dev_unid).then(res=>{
					this.detailData=res.list_data;
					this.detailData.unshift(row)
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.topCon{
		background: $white-back-color;
		margin-bottom: 12px;
		height: 100px;
		.left{
			display: inline-block;
			margin: {
				top: 22px;
				left: 30px;
			};
			img{
				width:65px ;
				height: 55px;
				margin-right: 11px;
			}
			.topText{
				font-size:24px;
				font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
				font-weight:bold;
				margin-bottom: 4px;
			}
			.bottomText{
				font-size:14px;
				font-family:MicrosoftYaHeiUI;
			}
		}
		.right{
			float: right;
			.topText{
				font-size:28px;
				font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
				font-weight:bold;
			}
			.bottomText{
				position: relative;
				    top: -1px;
				font-size:14px;
				font-family:MicrosoftYaHeiUI;
			}
		}
		.textCon{
			display: inline-block;
			vertical-align: top;
		}
		.border{
			display: inline-block;
			height: 40px;
			border: {
				left: 2px solid $border-color;
			};
		}
		.rightBox{
			margin-top: 14px;
			display: inline-block;
			img{
				margin:{
					top:15px;
					right: 22px;
				}
			}
		}
		.rightBox:nth-of-type(1){
			img{
				width: 34px;
				height: 34px;
			}
			.textCon{
				margin-right:114px ;
			}
		}
		.rightBox:nth-of-type(2){
			    position: relative;
			    top: 4px;
			img{
				width: 40px;
				height: 40px;
				margin-left: 102px;
			}
			.textCon{
				margin-right:101px ;
			}
		}
		.rightBox:nth-of-type(3){
			img{
				width: 34px;
				height: 35px;
				margin-left: 104px;
			}
			.textCon{
				margin-right:184px ;
			}
		}
	}
	.resourceDiv{
		display: inline-block;
		margin-left: 10%;
		span{
			margin-right: 5%;
		}
	}
	.content{
		background: #FFFFFF;
	}
	.inputBox{
		margin-right: 20px;
	}
	.selectBox{
		margin-right: 20px;
	}
	.editIcon{
		cursor: pointer;
		color:#0069ff;
		font-size:16px;
	}
	.editIcon2{
		cursor: pointer;
		color:#87d14b;
		font-size:16px;
	}
	.playIcon{
		cursor: pointer;
		color:#34b3a2;
		font-size:16px;
	}
	.pauseIcon{
		cursor: pointer;
		color:#ffc62e;
		font-size:14px;
	}
	.delIcon{
		cursor: pointer;
		color:#f2365a;
		font-size:16px;
	}
</style>