electricControl/pages/main/set.stml

<template>
<scroll-view class="scroll-view" scroll-x scroll-y="false">
	<view class="set_wrap">
		<text class="set_back_text" @click="handleBackIndex">返回</text>
		<view class="set_list">
			<view 
				class="list_inline"
				v-for="(item,index) in setList"
			>
				<!-- <view class="inline_item">
					<text class="item_label">{{item.typeName}}：</text>
					<view class="item_content">
						<view class="switch_box"><switch class="switch" index={index} :checked="item.isTypeOpen==='1'" @change="handleSwitchChange" /></view>
					</view>
				</view> -->
				<view class="inline_item">
					<text class="item_label_name">{{item.typeName}}：</text>
					<view class="item_content">
						<text class="item_label">{{item.circuitName}}路电流</text>
						<!-- @click="handleSelectChange(index,item)" -->
						<input class="input" v-model="item.current" type="number" adjust-position="false" keyboard-type="decimal" confirm-type="done" :disabled="item.isTypeOpen==='0'" placeholder="请输入电流" />
						<text class="item_label">A</text>
						<button class="btn" style="display:inline" @click="setDianliu(item)">保存</button>
					</view>
				</view>
			</view>
		</view>
		<!-- <text class="set_btn" @click="handleSubmitSet">保存参数</text> -->
	</view>
</scroll-view>
</template>
<script>
import {dbUtils} from '../../script/dbUtils.js'
import {serialPortUtil} from '../../script/serialPortUtil.js'
import {CrcUt} from '../../script/CRCUtils.js'
let UIMultiSelector = api.require("UIMultiSelector"); 
export default {
	name: 'set',
	data() {
		return{
			setList:[],
			//电流通道列表
			currentList: [
				{
					text:'1',
					status:'normal'
				},
				{
					text:'2',
					status:'normal'
				},
				{
					text:'3',
					status:'normal'
				},
				{
					text:'4',
					status:'normal'
				},
			],
		}
	},
	apiready(){
		const vm = this;
		vm.initDb()
	},
	methods: {
		initDb(){
			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 Sb', function(ret, err) {
						var data = ret.data;
						if(undefined != data && data.length > 0){
							vm.data.setList = data;
						}
					});
				}
			});
		},
		//返回首页
		handleBackIndex(){
			api.closeWin();
			api.sendEvent({
				name: 'myEvent',
				extra: {
					close: 'close',
				}
			});
		},
		//下拉选择
		handleSelectChange(selectNum,item) {
			let _setList = this.data.setList;
			//设置下拉选项
			UIMultiSelector.open({
				rect: {
					h: 400
				},
				text: {
					title: '电流通道',
					leftBtn: '取消',
					rightBtn: '确认',
				},
				styles: {
					mask: 'rgba(0,0,0,0)',
					title: {
						bg: '#ffffff',
						color: '#000000',
						size: 36,
						h: 80
					},
					leftButton: {
						w: 160,
						h: 80,
						marginT: 5,
						marginL: 8,
						color: '#ffffff',
						size: 36,
						bg:'#5199FF'
					},
					rightButton: {
						w: 160,
						h: 80,
						marginT: 5,
						marginR: 8,
						color: '#ffffff',
						size: 36,
						bg:'#5199FF'
					},
					item: {
						h: 80,
						bg: '#ffffff',
						bgActive: '#5199FF',
						bgHighlight: '#5199FF',
						color: '#000000',
						active: '#ffffff',
						highlight: '#ffffff',
						size: 36,
						activeSize:36,
						lineColor: '#d8d8d8',
						textAlign: 'center'
					},
				},
				max: 1,
				singleSelection: true,
				animation: true,
				items:this.data.currentList
			}, function(ret){
				if(ret.eventType === 'clickLeft'){
					UIMultiSelector.close();
				}else if(ret.eventType === 'clickRight' || ret.eventType === 'clickItem'){
					UIMultiSelector.close();
					_setList[selectNum].circuitName = ret.items.length > 0?ret.items[0].text:_setList[selectNum].circuitName;
				}
			});
		},
		setDianliu(item){
			var db = api.require('db');
			var sql = "update Sb set current = '"+ item.current+"' where id ='"+ item.id +"'";
			dbUtils.execute(db, sql, function(ret, err) {
				var msg = '更新成功'
				if(!ret.status){
					msg = '更新失败'
				}
				api.toast({
					msg: msg,
					duration: 2000,
					location: 'middle'
				});
			})
		},
		//保存参数
		handleSubmitSet(){
			var cmdArr = [];
			const vm = this;
			this.data.setList.forEach(s=>{
				var cmd = s.sbId+" 03 00 48 00 02";
				cmd = cmd + " " + CrcUt.GetCrc(cmd);
				cmdArr.push(cmd);
			})
			setInterval(() => {
				if(vm.data.stopRead){
					vm.sendMsg('FE 01 00 00 00 08 29 C3');
				}
			 },2000)
		},
		sendMsg(cmd){  
			let ret = serialPortUtil.send({
				index: 0,
				sendType: 'hex',
				data: cmd
			});
		},
	}
}
</script>
<style>
	.set_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: relative;
	}
	.set_back_text{
		font-size: 40px;
		color: #ffffff;
		font-weight: bold;
		position: absolute;
		top: 20px;
		left: 20px;
	}
	.set_list{
		margin-top: 40px;
		display: flex;
		align-items: center;
	}
	.list_inline{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 10px 0;
	}
	.inline_item{
		margin: 0 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item_label{
		font-size: 40px;
		font-weight: bold;
		color: #ffffff;
	}
	.item_label_name{
		font-size: 40px;
		font-weight: bold;
		color: #ffffff;
		width: 200px;
		text-align: left;
	}
	.item_content{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.switch_box{
		display: flex;
		justify-content: center;
        align-items: center;
        width: 76px;
        height: 46px;
	}
	.switch{
		transform: scale(1.5, 1.5);
	}
	.input{
		box-sizing: border-box;
		padding: 5px;
		border: 1px solid silver;
		font-size: 32px;
		height: 60px;
		width: 180px;
		margin-left: 20px;
		border-radius: 10px;
	}
	.btn {
		padding: 5px;
		border-radius: 10px;
		font-size: 32px;
        width: 90px;
        height: 60px;
		margin-left: 20px;
        color: #fff;
        background-image: linear-gradient(to bottom, #00b, #006);
    }
	.set_btn{
		font-size: 40px;
		color: #5199FF;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 10px 20px;
		border-radius: 10px;
		text-align: center;
		width: 300px;
		margin: 50px auto 0;
		font-weight: bold;
	}
</style>