electricControl/pages/main/set.stml

289 lines
6.1 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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">电流通道:</text>
<view class="item_content">
<text class="item_label" @click="handleSelectChange(index,item)">{{item.circuitName}}路电流</text>
<input class="input" v-model="item.current" type="number" 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: 100vh;
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: 60px;
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_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: 100px;
width: 140px;
margin-left: 20px;
border-radius: 10px;
}
.btn {
padding: 5px;
border-radius: 10px;
font-size: 32px;
width: 90px;
height: 100px;
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>