<!-- 系统表单组件 -->
|
<template>
|
<view class="m-form">
|
<view class="m-page-over">
|
<!-- <view class="m-form-head"><u-icon name="close-circle" color="#fff" size="40" @click="cancel"></u-icon></view> -->
|
<!-- 修改 -->
|
<view class="m-form-label">
|
<u--form
|
labelPosition="left"
|
labelAlign="left"
|
:model="model"
|
ref="form"
|
labelWidth="100"
|
:labelStyle="{ color: '#459EFF', 'white-space': 'nowrap', 'letter-spacing': '0.65em' }"
|
>
|
<u-form-item label="目标地址" prop="udpAdress" v-show="false" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': '#459EFF',
|
}"
|
placeholderStyle="color:#fff"
|
color="#fff"
|
v-model="model.udpAdress"
|
readonly
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="目标端口" prop="baoliu20" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': '#459EFF',
|
}"
|
placeholderStyle="color:#fff"
|
color="#fff"
|
v-model="model.baoliu20"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="本机地址" prop="localaddress" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': '#459EFF',
|
}"
|
placeholderStyle="color:#fff"
|
color="#fff"
|
v-model="model.localaddress"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="本机端口" prop="localhost" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': '#459EFF',
|
}"
|
readonly
|
placeholderStyle="color:#fff"
|
color="#fff"
|
v-model="model.localhost"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="视图刷新速率" prop="baoliu13" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': '#459EFF',
|
}"
|
placeholderStyle="color:#fff"
|
color="#fff"
|
v-model="model.baoliu13"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="标签数量上限" prop="baoliu14" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': '#459EFF',
|
}"
|
placeholderStyle="color:#fff"
|
color="#fff"
|
v-model="model.baoliu14"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="围栏数量上限" prop="baoliu15" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': '#459EFF',
|
}"
|
placeholderStyle="color:#fff"
|
color="#fff"
|
v-model="model.baoliu15"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="实时轨迹时长" prop="real_trak_time" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': '#459EFF',
|
}"
|
placeholderStyle="color:#fff"
|
color="#fff"
|
v-model="model.real_trak_time"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="显示围栏" prop="gas_show" borderBottom ref="item">
|
<u-switch v-model="model.gas_show" asyncChange @change="asyncChange($event, 1)"></u-switch>
|
</u-form-item>
|
<u-form-item label="显示基站" prop="viewAnckid" borderBottom ref="item">
|
<u-switch v-model="model.viewAnckid" asyncChange @change="asyncChange($event, 2)"></u-switch>
|
</u-form-item>
|
<u-form-item label="显示轨迹" prop="baoliu16" borderBottom ref="item">
|
<u-switch v-model="model.baoliu16" asyncChange @change="asyncChange($event, 3)"></u-switch>
|
</u-form-item>
|
<u-form-item label="缩略信息" prop="baoliu17" borderBottom ref="item">
|
<u-switch v-model="model.baoliu17" asyncChange @change="asyncChange($event, 4)"></u-switch>
|
</u-form-item>
|
<u-form-item label="百度地图" prop="yulan_map" borderBottom ref="item">
|
<u-switch v-model="model.yulan_map" asyncChange @change="asyncChange($event, 5)"></u-switch>
|
</u-form-item>
|
<u-form-item label="启用密码" prop="show_password" borderBottom ref="item">
|
<u-switch v-model="model.show_password" asyncChange @change="asyncChange($event, 6)"></u-switch>
|
</u-form-item>
|
</u--form>
|
</view>
|
<view class="m-form-button-list"><u-button type="primary" text="确定" @click="save"></u-button></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { connChart,getWiFiIP } from '@/common/utils.js';
|
export default {
|
props: {
|
mapType: String
|
},
|
data() {
|
return {
|
model: {
|
baoliu13: '1', //视图刷新速率
|
baoliu14: '5', //标签数量上限
|
baoliu15: '3', //围栏数量上限
|
real_trak_time: '30', //实时轨迹时长
|
udpAdress: '', //交互地址
|
baoliu20: '8233', //交互端口-默认8233
|
gas_show: '1', //是否显示围栏
|
baoliu17: '1', //是否缩略显示信息
|
viewAnckid: '1', //是否显示基站
|
baoliu16: '1', //是否显示轨迹
|
yulan_map: '1' ,//百度地图切换
|
localhost:'7777',//本机端口
|
localaddress:'',//本机地址
|
show_password:'1'//是否输入密码
|
}
|
};
|
},
|
methods: {
|
//保存
|
save() {
|
this.$store.commit('updateSys', this.model);
|
//修改系统信息
|
var labelModel = connChart('sys');
|
labelModel.update({
|
udpAdress: this.model.udpAdress,
|
baoliu20: this.model.baoliu20,
|
baoliu13: this.model.baoliu13,
|
baoliu14: this.model.baoliu14,
|
baoliu15: this.model.baoliu15,
|
real_trak_time: this.model.real_trak_time,
|
gas_show: this.model.gas_show?'1':'0',
|
viewAnckid: this.model.viewAnckid?'1':'0',
|
baoliu16: this.model.baoliu16?'1':'0',
|
baoliu17: this.model.baoliu17?'1':'0',
|
yulan_map: this.model.yulan_map?'1':'0',
|
show_password:this.model.show_password?'1':'0'
|
},(err,results)=>{
|
console.log(results);
|
this.$store.commit('updateSys', this.model);
|
this.$emit('submitSysForm');
|
});
|
},
|
//取消
|
cancel() {
|
this.$emit('cancelSysForm');
|
},
|
//开关
|
asyncChange(e, index) {
|
if (index == 1) this.model.gas_show = e;
|
if (index == 2) this.model.viewAnckid = e;
|
if (index == 3) this.model.baoliu16 = e;
|
if (index == 4) this.model.baoliu17 = e;
|
if (index == 5) this.model.yulan_map = e;
|
if(index==6)this.model.show_password=e
|
// uni.showModal({
|
// content: e ? '确定要打开吗' : '确定要关闭吗',
|
// confirmColor:"#68B0FE",
|
// cancelColor:"#68B0FE",
|
// success: res => {
|
// if (res.confirm) {
|
// if (index == 1) this.model.gas_show = e;
|
// if (index == 2) this.model.viewAnckid = e;
|
// if (index == 3) this.model.baoliu16 = e;
|
// if (index == 4) this.model.baoliu17 = e;
|
// if (index == 5) this.model.yulan_map = e;
|
// }
|
// }
|
// });
|
},
|
//获取系统信息
|
getSysInfo() {
|
var labelModel = connChart('sys');
|
labelModel.find((e,r)=>{
|
console.log(e,r)
|
if(r!=undefined && r.length!=0){
|
this.model = r[0];
|
this.model.gas_show=this.model.gas_show==1?true:false
|
this.model.viewAnckid=this.model.viewAnckid==1?true:false
|
this.model.baoliu16=this.model.baoliu16==1?true:false
|
this.model.baoliu17=this.model.baoliu17==1?true:false
|
this.model.yulan_map=this.model.yulan_map==1?true:false
|
this.model.show_password=this.model.show_password==1?true:false
|
}else{
|
labelModel.insert({
|
udpAdress: this.model.udpAdress,
|
baoliu20: this.model.baoliu20,
|
baoliu13: this.model.baoliu13,
|
baoliu14: this.model.baoliu14,
|
baoliu15: this.model.baoliu15,
|
real_trak_time: this.model.real_trak_time,
|
gas_show: this.model.gas_show?'1':'0',
|
viewAnckid: this.model.viewAnckid?'1':'0',
|
baoliu16: this.model.baoliu16?'1':'0',
|
baoliu17: this.model.baoliu17?'1':'0',
|
yulan_map: this.model.yulan_map?'1':'0',
|
show_password:this.model.show_password?'1':'0'
|
},(e,r)=>{
|
console.log(e,r)
|
})
|
}
|
this.model.localhost='7777'
|
this.model.localaddress=getWiFiIP()
|
})
|
}
|
},
|
mounted() {
|
this.getSysInfo();
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.m-form {
|
position: fixed;
|
top: calc(3.5em + 20px);
|
left: 0;
|
background-color: rgba(255, 255, 255, 0.9);
|
width: 100%;
|
height: calc(100vh - 3.5em - 20px - 60px);
|
overflow: scroll;
|
z-index: 750;
|
// border-radius: 15px;
|
box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.16);
|
display: flex;
|
flex-direction: column;
|
}
|
.m-page-over{
|
width: calc(100vw - 8em - 1px);
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
border-right: 1px solid #63AFF9;
|
}
|
.m-form-head {
|
width: 100%;
|
border-bottom: 1px solid #fff;
|
}
|
.m-form-head .u-icon {
|
float: right;
|
}
|
/deep/ .u-form-item:nth-of-type(5) .u-form-item__body__left__content__label,
|
/deep/ .u-form-item:nth-of-type(6) .u-form-item__body__left__content__label,
|
/deep/ .u-form-item:nth-of-type(7) .u-form-item__body__left__content__label,
|
/deep/ .u-form-item:nth-of-type(8) .u-form-item__body__left__content__label{
|
letter-spacing: 0 !important;
|
}
|
.m-form-label {
|
width: 80%;
|
margin: 0 auto;
|
margin-bottom: 0.5em;
|
overflow: overlay;
|
}
|
input {
|
width: 50px;
|
}
|
.m-form-button-list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 1em;
|
}
|
.m-form-button-list .u-button {
|
width: 5em;
|
}
|
.m-form-button-list .u-button:nth-child(2),
|
.m-form-button-list .u-button:nth-child(3),
|
.m-form-button-list .u-button:nth-child(4) {
|
margin-top: 2em;
|
}
|
</style>
|
