electricControl/pages/main.stml

<template>
	<view class="index_wrap">
		<text class="index_title">运行状态</text>
		<view class="index_list">
			<view 
				class="index_inline"
				v-for="item in listData"
			>
				<view class="inline_item">
					<text class="inline_item_text">{{item.circuitName}}路电流：</text>
					<text class="inline_item_text">{{item.current}}A</text>
				</view>
				<view class="inline_item">
					<text class="inline_item_text">{{item.typeName}}：</text>
					<text :class="item.isTypeOpen=== '1'?'inline_item_circle_open':'inline_item_circle_close'"></text>
					<text class="inline_item_text">{{item.isTypeOpen === '1'?'开':'关'}}</text>
				</view>
			</view>
		</view>
		<view class="index_footer">
			<text class="footer_set" @click="handleToSet">设置</text>
			<text class="footer_history" @click="handleToHistory">操作历史</text>
		</view>
	</view>
</template>
<script>
import {dbUtils} from '../script/dbUtils.js'
export default {
	name: 'main',
	data() {
		return {
			listData:[]
		};
	},
	//初始化
	apiready(){
		const vm = this;
		var db = api.require('db');
		db.openDatabase({
            name: 'test',
            path: 'fs://Database/cqjiouzai.db'
        }, function(ret, err) {
            if (ret.status) {
              	//初始化设备表
                vm.initSb(db);
            }
        });
	},
	methods: {
		//跳转到设置页面
		handleToSet(){
			api.openWin({
				name: 'set',
				url:'./main/set.stml'
			})
		},
		//跳转到历史记录页
		handleToHistory(){
			api.openWin({
				name: 'history',
				url:'./main/history.stml'
			})
		},
		//创建设备表
		initSb(db) {
			const vm = this;
			// const uniqueId = 'id-' + new Date().getTime().toString(36) + '-' + Math.random().toString(36).substr(2, 9);
			// dbUtils.execute(db, "INSERT INTO Sb (id,circuitName,current,typeName,isTypeOpen) VALUES ('"+uniqueId+"','test1','lw','"+vm.currTimeFn(new Date())+"','test');", function(ret, err) {
			// })
			dbUtils.select(db, 'SELECT * FROM Sb', function(ret, err) {
				var data = ret.data;
				if(undefined != data && data.length > 0){
					vm.data.listData = data;
				}
				if (ret.status == false || err.status == false) {
					dbUtils.execute(db, 'CREATE TABLE Sb(id varchar(50), circuitName varchar(50), current varchar(20), typeName varchar(30),isTypeOpen int(10))', function(ret, err) {
						if (ret.status == true) {
							dbUtils.execute(db, "INSERT INTO Sb (Id,circuitName,current,typeName,isTypeOpen) VALUES ('1','1','3.21','高压风冷',1);", function(ret, err) {})
                        	dbUtils.execute(db, "INSERT INTO Sb (Id,circuitName,current,typeName,isTypeOpen) VALUES ('2','2','3.21','中压风冷',1);", function(ret, err) {})
                        	dbUtils.execute(db, "INSERT INTO Sb (Id,circuitName,current,typeName,isTypeOpen) VALUES ('3','3','3.21','低压风冷',0);", function(ret, err) {})
                        	dbUtils.execute(db, "INSERT INTO Sb (Id,circuitName,current,typeName,isTypeOpen) VALUES ('4','4','3.21','闭锁调压',0);", function(ret, err) {})
							console.log('创建设备表成功');
						}
					});
				} else {
					console.log('设备表已存在');
					// dbUtils.execute(db, "DROP TABLE Sb", function(ret, err) {
					// 	console.log(JSON.stringify(ret))
					// })
				}
			});
		},
		// 获取当前时间字符串
 		currTimeFn(_date) {
			let _year = _date.getFullYear();
			let _month = _date.getMonth() + 1 < 10 ? '0' + (_date.getMonth() + 1) : _date.getMonth() + 1;
			let _day = _date.getDate() < 10 ? '0' + _date.getDate() : _date.getDate();
			let _hour = _date.getHours() < 10 ? '0' + _date.getHours() : _date.getHours();
			let _minutes = _date.getMinutes() < 10 ? '0' + _date.getMinutes() : _date.getMinutes();
			let _seconds = _date.getSeconds() < 10 ? '0' + _date.getSeconds() : _date.getSeconds();
			return _year + "." + _month + "." + _day + " " + _hour + ":" + _minutes + ":" + _seconds;
		}
	}
};
</script>
<style>
.index_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;
}
.index_title{
	width: 100%;
	text-align: center;
	font-size: 60px;
	color: #ffffff;
	font-weight: bold;
}
.index_list{
	margin-top: 50px;
	display: flex;
	align-items: center;
}
.index_inline{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 10px 0;
}
.inline_item{
	margin: 0 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.inline_item_text{
	font-size: 40px;
	font-weight: bold;
	color: #ffffff;
	margin: 0 10px;
}
.inline_item_circle_open{
	width: 40px;
	height: 40px;
	background-color: #09be30;
	border-radius: 50%;
	margin: 0 10px;
}
.inline_item_circle_close{
	width: 40px;
	height: 40px;
	background-color: #fd0101;
	border-radius: 50%;
	margin: 0 10px;
}
.index_footer{
	width: 80%;
	margin: 50px auto 0;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.footer_set{
	font-size: 40px;
	font-weight: bold;
	box-sizing: border-box;
	padding: 10px 20px;
	color: #ffffff;
}
.footer_history{
	font-size: 40px;
	font-weight: bold;
	margin-left: 50px;
	box-sizing: border-box;
	padding: 10px 20px;
	color: #ffffff;
}
</style>