<!-- 绘制围栏表单组件 -->
|
<template>
|
<view :class="{'m-form':!isStart,'m-form-1':isStart}">
|
<view class="m-form-head" v-show="!isStart"><u-icon name="close-circle" color="#fff" size="40" @click="cancel"></u-icon></view>
|
<view class="m-form-label" v-show="!isStart">
|
<u--form labelPosition="left" :model="model" :rules="rules" ref="form" labelWidth="100" :labelStyle="{ color: 'rgb(129, 129, 129)' }">
|
<u-form-item v-if="Step == 'first'" label="选择标签" prop="type" borderBottom ref="item">
|
<uni-data-select v-model="value_name" :localdata="range" @change="changeRange"></uni-data-select>
|
</u-form-item>
|
<u-form-item v-if="Step == 'first'" label="标签ID" prop="p_tagid" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': 'rgb(233, 233, 233)',
|
'box-shadow': 'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'
|
}"
|
readonly
|
placeholderStyle="color:#6a6a6a"
|
color="#000"
|
v-model="model.p_tagid"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item v-if="Step == 'second'" label="围栏名称" prop="name" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': 'rgb(233, 233, 233)',
|
'box-shadow': 'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'
|
}"
|
placeholderStyle="color:#6a6a6a"
|
color="#000"
|
v-model="model.name"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item v-if="Step == 'second'" label="关联部门" prop="bumen" borderBottom ref="item">
|
<uni-data-select v-model="value_bumen" :localdata="rangeBuMen" @change="changeRangeBuMen"></uni-data-select>
|
</u-form-item>
|
<u-form-item v-if="Step == 'second'" label="告警高度" prop="baoliu1" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': 'rgb(233, 233, 233)',
|
'box-shadow': 'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'
|
}"
|
placeholderStyle="color:#6a6a6a"
|
placeholder="单位米"
|
color="#000"
|
v-model="model.baoliu1"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item v-if="Step == 'second'" label="启用围栏" prop="valueSwitch" borderBottom ref="item">
|
<u-switch v-model="model.valueSwitch" asyncChange @change="asyncChange"></u-switch>
|
</u-form-item>
|
</u--form>
|
</view>
|
<view class="m-form-button-list" v-show="!isStart">
|
<u-button type="primary" text="开始绘制" @click="startDraw" v-if="Step == 'first' && isShow"></u-button>
|
<!-- <u-button type="primary" text="结束绘制" @click="endDraw" v-if="Step == 'first'"></u-button> -->
|
<u-button type="primary" text="下一步" @click="nextStep" v-if="Step == 'first' && !isShow"></u-button>
|
<u-button type="primary" text="保存围栏" @click="save" v-if="Step == 'second'"></u-button>
|
</view>
|
<view class="m-form-btn" @click="endDraw" v-if="Step == 'first' && isStart">
|
结束绘制
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { connChart,getPointsCenter } from '@/common/utils.js';
|
import {formatDate} from '@/common/tools.js'
|
import {gps2xybiandianzhan} from '@/common/GnssToXY.js'
|
export default {
|
props: {},
|
data() {
|
return {
|
model: {
|
name: '',
|
valueSwitch: false,
|
baoliu1: '',
|
bumen: '',
|
p_tagid: ''
|
},
|
rules: {
|
baoliu1: {
|
validator: (rule, value, callback) => {
|
// 返回true表示校验通过，返回false表示不通过
|
var pattern=/^\d+(\.\d{1,2})?$/;
|
return pattern.test(value);
|
},
|
required: true,
|
message: '精度0.01m',
|
trigger: ['blur', 'change']
|
}
|
},
|
Step: 'first',
|
valueList: [],
|
range: [],
|
value_name: '',
|
value_bumen: '',
|
rangeBuMen: [],
|
isShow:true,
|
isStart:false
|
};
|
},
|
methods: {
|
//开始绘制
|
startDraw() {
|
// this.model.p_tagid
|
uni.$u.toast('围栏绘制中:手持URT走个闭合围栏然后结束绘制');
|
this.isStart=true
|
this.$store.commit('setDefaultData')
|
this.$emit('startDraw',{tagid:this.model.p_tagid})
|
},
|
//结束绘制
|
endDraw() {
|
this.isShow=false
|
this.isStart=false
|
this.$emit('endDraw')
|
},
|
//下一步
|
nextStep() {
|
this.Step = 'second';
|
},
|
//保存围栏
|
save() {
|
var center=getPointsCenter(this.$store.state.tallyRailPositon_j_w_list)
|
console.log(center,this.$store.state.tallyRailPositon_j_w_list)
|
// console.log(center.split(',')[0],center.split(',')[1])
|
var max_x=Math.max.apply(Math,this.$store.state.tallyRailPositon_j_w.map(item => { return item.x }))
|
var max_y=Math.max.apply(Math,this.$store.state.tallyRailPositon_j_w.map(item => { return item.y }))
|
var min_x=Math.min.apply(Math,this.$store.state.tallyRailPositon_j_w.map(item => { return item.x }))
|
var min_y=Math.min.apply(Math,this.$store.state.tallyRailPositon_j_w.map(item => { return item.y }))
|
var max_point=gps2xybiandianzhan(this.$store.state.yuandian_jingdu,this.$store.state.yuandian_weidu,max_x,max_y)
|
var min_point=gps2xybiandianzhan(this.$store.state.yuandian_jingdu,this.$store.state.yuandian_weidu,min_x,min_y)
|
console.log(this.$store.state.yuandian_jingdu,this.$store.state.yuandian_weidu,center[0],center[1])
|
var centerpoint=gps2xybiandianzhan(this.$store.state.yuandian_jingdu,this.$store.state.yuandian_weidu,center[0],center[1])
|
var labelModel = connChart('fence');
|
labelModel.insert({
|
baoliu1: this.model.baoliu1,
|
floor: '0',
|
name: this.model.name,
|
bumen: this.model.bumen,
|
baoliu7: this.model.valueSwitch ? '1' : '0',
|
zuobiao:JSON.stringify(this.$store.state.tallyRailPositon),
|
pts:JSON.stringify(this.$store.state.tallyRailPositon_j_w),
|
max:max_point[0]+','+max_point[1],
|
min:min_point[0]+','+min_point[1],
|
addtime:formatDate(new Date(),'yyyy-MM-dd hh:mm:ss'),
|
centerpoint:centerpoint[0]+','+centerpoint[1],
|
},(e,r)=>{
|
console.log(e,r)
|
if(!e){
|
uni.$u.toast('保存成功')
|
this.$emit('submitDrawForm');
|
}
|
})
|
},
|
//取消
|
cancel() {
|
this.$emit('cancelDrawForm');
|
},
|
//启用围栏-开关
|
asyncChange(e) {
|
this.model.valueSwitch = e;
|
// uni.showModal({
|
// content: e ? '确定要打开吗' : '确定要关闭吗',
|
// confirmColor:"#68B0FE",
|
// cancelColor:"#68B0FE",
|
// success: res => {
|
// if (res.confirm) {
|
// this.model.valueSwitch = e;
|
// }
|
// }
|
// });
|
},
|
//获取标签列表数据
|
getTallyList() {
|
var labelModel = connChart('label');
|
labelModel.find((e,r)=>{
|
console.log(e,r)
|
if(r.length!=0){
|
this.range = [];
|
r.forEach((e, index) => {
|
this.range.push({
|
text: e.p_tagid + ' ' + e.p_name,
|
value: e.p_tagid
|
});
|
});
|
}
|
})
|
},
|
//部门查询
|
jiedepartment() {
|
var labelModel = connChart('department');
|
labelModel.find((e,r)=>{
|
console.log(e,r)
|
if(r.length!=0){
|
r.forEach(e => {
|
this.rangeBuMen.push({
|
text: e.department_name,
|
value: e.department_name
|
});
|
if(e.department_name=='系统默认'){
|
this.value_bumen = e.department_name;
|
this.model.bumen = e.department_name;
|
}
|
});
|
|
}
|
})
|
},
|
changeRange(e) {
|
this.value_name = e;
|
this.model.p_tagid = e;
|
},
|
changeRangeBuMen(e) {
|
this.value_bumen = e;
|
this.model.bumen = e;
|
}
|
},
|
mounted() {
|
this.getTallyList();
|
this.jiedepartment();
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.m-form {
|
position: fixed;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: rgba(233, 233, 233, 0.8);
|
width: 60%;
|
display: flex;
|
flex-direction: column;
|
z-index: 700;
|
box-shadow: -3.536px -3.536px 5px 0px rgba(255, 255, 255, 0.75), 4.721px 6.457px 8px -5px rgba(191, 191, 191, 1);
|
}
|
.m-form-1{
|
position: fixed;
|
bottom: 8em;
|
left: 50%;
|
transform: translate(-50%, 0);
|
z-index: 700;
|
.m-form-btn{
|
background-color: rgba(69, 158, 255, 0.9);
|
border-radius: 3em;
|
width: 10em;
|
padding: 15px 0;
|
color: #fff;
|
font-size: 1.5em;
|
text-align: center;
|
}
|
}
|
.m-form-head {
|
width: 100%;
|
border-bottom: 1px solid #fff;
|
}
|
.m-form-head .u-icon {
|
float: right;
|
}
|
/deep/ .u-form-item__body__left__content__label {
|
color: #fff;
|
}
|
.m-form-label {
|
width: 80%;
|
margin: 0 auto;
|
margin-bottom: 0.5em;
|
}
|
.m-form-button-list {
|
width: 100%;
|
display: flex;
|
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: 1em;
|
// }
|
</style>
|
