master

分支 (1)

管理

管理

master

tower-monitoring-system
/
sensorDayData.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>日报表</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="css/index.css">
	<style>
		.el-input__inner{
			height: 35px;
		}
	</style>
</head>

<body class="hold-transition skin-purple sidebar-mini">
	<script src="js/vue.global.js"></script>
	<script src="js/index.full.js"></script>
    <div class="wrapper">
		<div class="content" style="margin-left: 0%;height: 800px;" id="app">
		  <!-- 内容头部 -->
			 <section class="content-header">
				 <p style="color: white;font-size: 23px;font-weight:bold;margin-left:1.5%">
				     日报表
				 </p>
			 </section>
		   <!-- 内容头部 /-->

			 <!-- 正文区域 -->
			 <section class="content" style="height: 50%;">

				 <!-- .box-body -->
				 <div class="box box-primary" style="background-color:#293441;height:19%;">

					 <div class="box-body">
						 <!-- 数据表格 -->
						 <div class="table-box">

							 <!--工具栏-->
							 <div style="margin-left:0%;margin-top:0%">
							  <el-form ref="form" :model="form" label-width="30%">

								  <el-row :gutter="28">

								   <el-col :span="7">
									   <el-form-item label="传感器名称:">
											<el-input v-model="form.name" style="width: 100%;"  placeholder="传感器名称"></el-input>
									   </el-form-item>
								   </el-col>
								   <el-col :span="7">
									   <el-form-item label="时间:">
											<el-date-picker
											  v-model="form.time"
											  type="day"
											  align="right"
											  style="width:100%"
											 >
											</el-date-picker>
									   </el-form-item>
								   </el-col>
								   <el-col :span="6">
									   <el-form-item label="类型:" style="margin-left: 20%;">
										   <el-select v-model="form.type"  placeholder="请选择状态">
										      <el-option  v-for="item in optionA4"  :key="item.value" :label="item.label" :value="item.value" />
										   </el-select>
									   </el-form-item>
								   </el-col>
								   <el-col :span="4">
									   <el-form-item>
											<el-button type="primary" size="mini" style="margin-left:15%;width:40%" @click="query">查询</el-button>
									   </el-form-item>
								   </el-col>
								  </el-row>
							  </el-form>
							 </div>
							 <br>
							 <!--工具栏/-->
						 </div>
					</div>
				 </div>
				 <!-- /.box-body -->

				 <!-- 表格 -->
				 <div id ="table" style="background-color:#293441;">

					 <div class="box-body">
						 <!-- 数据表格 -->
						 <div class="table-box">
							 <!--数据列表-->
							 <div>
							 <br>
						    <el-table
								:cell-style="cellStyle()"
								:header-cell-style="cellStyle()"
								:row-style="{height: '0'}"
								:data="list"
								border
								style="width: 80%;margin-left: 10%;">
								</el-table-column>
								<el-table-column
								  align="center"
								  min-width="10%"
								  prop="id"
								  label="编号">
								</el-table-column>
								 <el-table-column
								   align="center"
								   min-width="7%"
								   prop="sensorName"
								   label="传感器名称">
								 </el-table-column>
								 <el-table-column
								   align="center"
								   min-width="7%"
								   prop="hourMin"
								   label="一日最小倾斜度">
								 </el-table-column>
								 <el-table-column
								   align="center"
								   min-width="7%"
								   prop="hourMax"
								   label="一日最大倾斜度">
								 </el-table-column>
								 <el-table-column
								   min-width="14%"
								   align="center"
								   prop="hourTime"
								   label="时间">
								 </el-table-column>
						     </el-table>
							   <div style="margin-top:1%">
								<el-row :gutter="10">
									<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
									<el-col :span="8">
										<el-pagination
										  right
										  background
										  @size-change="handleSizeChange"
										  @current-change="handleCurrentChange"
										  :current-page="page"
										  :page-sizes="[5,7,10,15,20]"
										  :page-size="limit"
										  layout="total, sizes, prev, pager, next, jumper"
										  :total="total">
										</el-pagination>
									</el-col>
								</el-row>
							   </div>
							 </div><br />
							 <!-- /表格 -->

							 <!--数据列表/-->
						 </div>
					</div>
				 </div><br>
				 <!-- 表格/ -->

				 <!-- 图表 -->
				 <div id="chart"  style="background-color:#293441;">
					 <div class="box-body">
					 	<div class="table-box">
							<div id="container" style="height: 90%" >
					    </div>
					 </div>
				 </div>
				 <!-- /图表 -->
			 </section>
			 <!-- 正文区域 /-->


        </div>
    </div>

    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>

	<script>
		$("#chart").hide();
		$("#table").hide();
	    $.get('json/data/daily_data.json',function(ret){
			var Main = {
			        data() {
			             return {
							 optionA4: [
							         {
							           value: '0',
							           label: '表格'
							         },
							         {
							           value: '1',
							           label: '图表'
							         }
							  ],
							 form: {
							   type: "表格",
							   name:"",
							   time:""
							 },

			                 list: [],
			                 data: [],
			                 limit: 7,
			                 total: null,
			                 page: 1,
			                 searchData: "",

							 searchInput:'',

							 value7: ''
						};
			         },
			         created() {
			             this.pageList()
			         },
			         methods: {
						 query(){
							 if(this.form.name.length==0 || this.form.time==null){
							    alert("传感器名称和时间不能为空")
							 }else{
								 var date = new Date(this.form.time);
								 var year = date.getFullYear()
								 var month = date.getMonth()+1
								 if(month<10){
								 	month = '0'+month;
								 }
								 var day = date.getDate()
								 if(day<10){
								 	day = '0'+day;
								 }
								 var datetime = year + '-' + month + '-' + day;
								 console.log(datetime);

								if(this.form.type==0||this.form.type=="表格"){
									$("#chart").hide();
									$("#table").show();
								}
								if(this.form.type==1){

									$("#table").hide();
									$("#chart").show();

									var names=this.form.name;
									var time=datetime;
									var data_min=[];
									var data_max=[];
									var axios=[];
									window.onload=function () {
									    $.get('api/data/dailyData',{'name':names,'time':time},function (result){
									        for (var data of result){
									            data_min.push(data.hour_min);
									            data_max.push(data.hour_max);
									            axios.push(data.hour_time);
									        }
									        var dom = document.getElementById("container");
									        var myChart = echarts.init(dom,"chalk");
									        var option = {
									            title: {
									                text: names+"-"+time+"日报表"
									            },
									            tooltip: {
									                trigger: 'axis'
									            },
									            legend: {
									                data: ['每小时最小值', '每小时最大值']
									            },
									            grid: {
									                left: '3%',
									                right: '4%',
									                bottom: '3%',
									                containLabel: true
									            },
									            toolbox: {
									                feature: {
									                    saveAsImage: {}
									                }
									            },
									            xAxis: {
									                type: 'category',
									                boundaryGap: false,
									                data: axios,
									            },
									            yAxis: {
									                type: 'value'
									            },
									            series: [
									                {
									                    name: '每小时最小值',
									                    type: 'line',
									                    stack: '总量',
									                    data: data_min
									                },
									                {
									                    name: '每小时最大值',
									                    type: 'line',
									                    stack: '总量',
									                    data: data_max

									                }
									            ]
									        };
									        myChart.setOption(option);
									    },"json");

									};
								}

							 }
						 },
						 cellStyle(){
						     return 'background-color:#293441;color:white;border-color:#2E72BF'
						 },
			             pageList() {
			                 // 发请求拿到数据并暂存所有数据,方便以后操做
			                 this.data = ret
			                 this.getList()
			             },
			             // 处理数据
			             getList() {
			                 // es6过滤获得知足搜索条件的展现数据list
			                 let list = this.data.filter((item, index) =>
			                     item.sensorName.includes(this.searchData)
			                 )
			                 this.list = list.filter((item, index) =>
			                     index < this.page * this.limit && index >= this.limit * (this.page - 1)
			                 )
			                 this.total = list.length
			             },
			             // 当每页数量改变
			             handleSizeChange(val) {
			                 console.log(`每页 ${val} 条`);
			                 this.limit = val
			                 this.getList()
			             },
			             // 当当前页改变
			             handleCurrentChange(val) {
			                 console.log(`当前页: ${val}`);
			                 this.page = val
			                 this.getList()
			             },
			             // 搜索过滤数据
			             search() {
			                 this.page = 1
			                 this.getList()
			             }
			         }
			 };
			const app = Vue.createApp(Main);
			app.use(ElementPlus);
			app.mount("#app")
		})
	</script>
</body>

</html>
<!---->