electricControl/pages/main/history.stml

<template>
	<view class="history_wrap">
		<text class="history_back_text" @click="handleBackIndex">返回</text>
		<text class="history_title">历史操作记录</text>
		<view class="table_wrap">
			<view class="table_title">
				<text class="table_title_item_one">动作</text>
				<text class="table_title_item_two">实时参数</text>
				<text class="table_title_item_three">时间</text>
			</view>
			<scroll-view 
				class="history_list" 
				scroll-x ="false" 
				scroll-y
				onscrolltoupper="handleRefresh"
				onscrolltolower="handleLoadMore"
			>
				<view 
					class="history_list_inline"
					v-for="item in listData"
				>
					<text class="history_list_inline_item_one">{{item.action}}</text>
					<text class="history_list_inline_item_two">{{item.param}}</text>
					<text class="history_list_inline_item_three">{{item.time}}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import {dbUtils} from '../../script/dbUtils.js'
export default {
	name: 'history',
	data() {
		return{
			listData:[
				// {name:'高压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'11.15 13:28:55'},
				// {name:'高压风冷关闭',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13:25:55'},
				// {name:'低压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.25:55'},
				// {name:'中压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.23:55'},
				// {name:'高压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.21:55'},
				// {name:'高压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.20:55'},
				// {name:'高压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'11.15 13:28:55'},
				// {name:'高压风冷关闭',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13:25:55'},
				// {name:'低压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.25:55'},
				// {name:'中压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.23:55'},
				// {name:'高压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.21:55'},
				// {name:'高压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.20:55'},
				// {name:'高压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'11.15 13:28:55'},
				// {name:'高压风冷关闭',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13:25:55'},
				// {name:'低压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.25:55'},
				// {name:'中压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.23:55'},
				// {name:'高压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.21:55'},
				// {name:'高压风冷开启',cmd:'A路电流(5.2A) B路电流(0.2A) C路电流(2.4A) D路电流(1.5A)',time:'12.15 13.20:55'},
			]
		}
	},
	apiready(){
			const vm = this;
			var db = api.require('db');
			db.openDatabase({
				name: 'test',
				path: 'fs://Database/cqjiouzai.db'
			}, function(ret, err) {
				if (ret.status) {
					dbUtils.select(db, 'SELECT * FROM Log', function(ret, err) {
						var data = ret.data;
						if(undefined != data && data.length > 0){
							vm.data.listData = data;
						}
					});
				}
			});
	},
	methods: {
		//返回首页
		handleBackIndex(){
			api.closeWin();
			api.sendEvent({
				name: 'myEvent',
				extra: {
					close: 'close',
				}
			});
		},
		//下拉刷新
		handleRefresh(){
			console.log("顶部触发");
		},
		//加载更多
		handleLoadMore(){
			console.log("加载更多");
		},
	}
}
</script>
<style>
.history_wrap{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 20px;
	background-image: url("../../image/login.png");
	background-size: 120%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
}
.history_back_text{
	font-size: 40px;
	color: #ffffff;
	font-weight: bold;
	position: absolute;
	top: 20px;
	left: 20px;
}
.history_title{
	width: 100%;
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	color: #ffffff;
}
.table_wrap{
	width: 100%;
	margin-top: 20px;
}
.table_title{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.table_title_item_one{
	font-size: 30px;
	color: #ffffff;
	border: 1px solid #ffffff;
	width: 17%;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
}
.table_title_item_two{
	font-size: 30px;
	color: #ffffff;
	border: 1px solid #ffffff;
	width: 64%;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
}
.table_title_item_three{
	font-size: 30px;
	color: #ffffff;
	border: 1px solid #ffffff;
	width: 19%;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
}
.history_list{
	border: 1px solid silver;
	width: 100%;
	height: 70vh;
}
.history_list_inline{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.history_list_inline_item_one{
	font-size: 22px;
	color: #ffffff;
	border: 1px solid #ffffff;
	width: 17%;
	box-sizing: border-box;
	padding: 10px;
}
.history_list_inline_item_two{
	font-size: 22px;
	color: #ffffff;
	border: 1px solid #ffffff;
	width: 64%;
	box-sizing: border-box;
	padding: 10px;
}
.history_list_inline_item_three{
	font-size: 22px;
	color: #ffffff;
	border: 1px solid #ffffff;
	width: 19%;
	box-sizing: border-box;
	padding: 10px;
}
</style>