<template>
|
<view class="template-job tn-safe-area-inset-bottom tn-skeleton">
|
<!-- 顶部自定义导航 -->
|
<tn-nav-bar :isBack="false" fixed style="position: absolute;z-index: 999999999;">
|
<!-- <text v-if="isAchor==false" class="title_linespan" style="color: #00aaff;text-decoration: underline;"
|
@click="goAchor">绘制</text>
|
<text v-else class="title_linespan" @click="goAchor">绘制</text>
|
<text class="title_linespan" style="margin-left: 10px;" @click="goTag">管理</text> -->
|
<text v-if="isAchor==false" class="title_linespan" style="color: #00aaff;text-decoration: underline;"
|
@click="goAchor">绘制</text>
|
<text v-else class="title_linespan" @click="goAchor">绘制</text>
|
|
<text class="title_linespan" style="margin-left: 10px;" @click="goTag">管理</text>
|
</tn-nav-bar>
|
|
<view v-show="lock==false" class="page-wrap u-skeleton" :style="{'margin-top':vuex_custom_bar_height+16+'px'}">
|
<view class="item-wrap">
|
<!-- <view class="container" > -->
|
|
<tn-form>
|
<!-- <tn-form-item label="序号:">
|
<tn-input v-model="form.objectid" inputAlign="right" disabled></tn-input>
|
</tn-form-item> -->
|
<tn-form-item label="围栏形状:" labelWidth='100rpx'>
|
<tn-input v-model="form.shape" type="select" @click="show = true" inputAlign="right" />
|
<tn-action-sheet :list="shapeList" v-model="show" @click="shapeCallback"></tn-action-sheet>
|
</tn-form-item>
|
|
<tn-form-item label="围栏类型:" labelWidth='100rpx'>
|
<tn-input v-model="form.type" type="select" @click="show1 = true" inputAlign="right" />
|
<tn-action-sheet :list="typeList" v-model="show1" @click="typeCallback"></tn-action-sheet>
|
</tn-form-item>
|
<tn-form-item label="关联部门:" labelWidth='100rpx'>
|
<tn-input v-model="form.bumen" type="select" @click="show2 = true" inputAlign="right"
|
placeholder="请选择关联部门" />
|
<tn-action-sheet :list="bumenList" v-model="show2" @click="bymenCallback"></tn-action-sheet>
|
</tn-form-item>
|
<tn-form-item label="选择设备:" labelWidth='100rpx'>
|
<tn-input v-model="form.tagId" inputAlign="right" placeholder="请输入设备编号"></tn-input>
|
</tn-form-item>
|
<tn-form-item v-show="isshape==true" label="圆心坐标:" labelWidth='100rpx'>
|
<tn-input :disabled="disable" v-model="form.zuobiao" inputAlign="right"
|
@input="cleanconext"></tn-input>
|
<tn-button v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small"
|
@click="acquisitionxy">采集坐标</tn-button>
|
</tn-form-item>
|
<tn-form-item v-show="isshape==true" label="围栏半径:" labelWidth='100rpx'>
|
<tn-input v-model="form.banjing" inputAlign="right" placeholder="请输入围栏半径"></tn-input>
|
</tn-form-item>
|
<tn-form-item v-show="isshape==false" label="坐标数量:" labelWidth='100rpx'>
|
<tn-input disabled inputAlign="right"></tn-input>
|
<tn-number-box v-model="zuobiaonum" :min="0" :max="10" @change="onchange"></tn-number-box>
|
<!-- <tn-button v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small" @click="acquisitionxy">采集坐标</tn-button> -->
|
</tn-form-item>
|
<tn-form-item v-for="(item, index) in list" :key="index" v-show="isshape==false" label="坐标点"
|
labelWidth='100rpx'>
|
<tn-input v-show="list[index]==index" :disabled="disable" inputAlign="right"
|
@input="cleanconext"></tn-input>
|
<tn-input v-show="list[index]!=index" :disabled="disable" v-model="list[index]"
|
inputAlign="right" @input="cleanconext"></tn-input>
|
<tn-button v-show="list[index]==index" backgroundColor="#55aaff" fontColor="#ffffff"
|
size="small" @click="acquisitionxy(index)">采集坐标</tn-button>
|
</tn-form-item>
|
<!-- <tn-form-item v-show="isshape==false" label="坐标点2:" labelWidth='100rpx'>
|
<tn-input :disabled="disable" v-model="form.zuobiao" inputAlign="right" @input="cleanconext"></tn-input>
|
<tn-button v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small" @click="acquisitionxy">采集坐标</tn-button>
|
</tn-form-item>
|
<tn-form-item v-show="isshape==false" label="坐标点3:" labelWidth='100rpx'>
|
<tn-input :disabled="disable" v-model="form.zuobiao" inputAlign="right" @input="cleanconext"></tn-input>
|
<tn-button v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small" @click="acquisitionxy">采集坐标</tn-button>
|
</tn-form-item>
|
<tn-form-item v-show="isshape==false" label="坐标点4:" labelWidth='100rpx'>
|
<tn-input :disabled="disable" v-model="form.zuobiao" inputAlign="right" @input="cleanconext"></tn-input>
|
<tn-button v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small" @click="acquisitionxy">采集坐标</tn-button>
|
</tn-form-item>
|
<tn-form-item v-show="isshape==false" label="坐标点5:" labelWidth='100rpx'>
|
<tn-input :disabled="disable" v-model="form.zuobiao" inputAlign="right" @input="cleanconext"></tn-input>
|
<tn-button v-show="tips==true" backgroundColor="#55aaff" fontColor="#ffffff" size="small" @click="acquisitionxy">采集坐标</tn-button>
|
</tn-form-item> -->
|
|
<tn-form-item label="围栏高度:" labelWidth='100rpx'>
|
<!-- {{form.disable}} -->
|
<tn-input v-model="form.baoliu1" inputAlign="right" placeholder="请输入围栏高度"></tn-input>
|
<text>CM</text>
|
</tn-form-item>
|
<tn-form-item label="围栏名称:" labelWidth='100rpx'>
|
<tn-input v-model="form.name" inputAlign="right" placeholder="请输入围栏名称"></tn-input>
|
</tn-form-item>
|
</tn-form>
|
|
<!-- </view> -->
|
|
</view>
|
<button style="margin-top: 20px;" type="primary" @click="submitForm">保存围栏</button>
|
</view>
|
|
<tn-skeleton :show="showSkeleton"></tn-skeleton>
|
<successCom ref="refSuccess"></successCom>
|
<!-- <u-empty text="暂未开放" mode="list" style="width: 90%; top: 30%;left: 5%; position: absolute; "></u-empty> -->
|
<!-- u-search class="searchbg" shape="true" bg-color="rgba(255, 255, 255, 0.5)" placeholder="请输入名称" :show-action="false"
|
:style="{top: topheight+'px',position: 'absolute',width: '50%',left: '25%'}"></u-search> -->
|
<!-- <drawCom v-show="lock==true" @goAchor="goAchor"></drawCom> -->
|
</view>
|
</template>
|
<script>
|
import successCom from '@/components/success.vue'
|
import drawCom from '@/pages/index/draw.vue'
|
import {
|
minLogin
|
} from '@/js/minLogin.js'
|
import {
|
findbumen,
|
submitper,
|
findFence,
|
acquisition
|
} from '@/config/api.js';
|
import {
|
pagesEquipment
|
} from '@/js/pages/equipment.js'
|
export default {
|
mixins: [minLogin, pagesEquipment],
|
components: {
|
drawCom,
|
successCom
|
},
|
data() {
|
return {
|
tips: true,
|
zuobiaonum: 0,
|
isshape: true,
|
disable: true,
|
isAchor: false,
|
warnindex: 0,
|
warlist: {},
|
lock: false,
|
keyword: '',
|
pageNo: 1,
|
pageSize: 10,
|
imgStyle: {
|
width: '100px',
|
height: '1000px',
|
borderRadius: '50%'
|
},
|
form: {
|
bumen: '',
|
name: '',
|
baoliu1: '',
|
tagId: '',
|
zuobiao: '',
|
shape: '圆形',
|
banjing: '',
|
type: '进入报警',
|
list: [],
|
disable: false,
|
company: this.company,
|
},
|
showSkeleton: true,
|
options: [{
|
text: '删除',
|
style: {
|
backgroundColor: '#F93737',
|
}
|
}, ],
|
boxKey: 0,
|
scrollHeight: 500,
|
topheight: 0,
|
paddingTop: 60,
|
emitDate: 'indexHome',
|
show: false,
|
show1: false,
|
show2: false,
|
time: '',
|
list: [],
|
total: 0,
|
bumenList: [],
|
shapeList: [{
|
text: '圆形'
|
},
|
{
|
text: '多边形'
|
}
|
],
|
|
typeList: [{
|
text: '进入报警'
|
},
|
{
|
text: '出去告警'
|
},
|
{
|
text: '超员告警'
|
}
|
],
|
options1: [{
|
text: '删除',
|
style: {
|
backgroundColor: '#F93737'
|
}
|
}]
|
}
|
},
|
props: {
|
formfence: {
|
type: Object,
|
default: () => {
|
return []
|
}
|
},
|
|
},
|
computed: {
|
|
countList() {
|
let num = 0;
|
for (let i in this.list) {
|
num += this.list[i].fQty;
|
}
|
return num;
|
}
|
},
|
mounted() {
|
this.findbumenall()
|
// if (this.formfence.zuobiao!='') {
|
// this.tips=false
|
// }
|
// this.form=this.formfence
|
this.topheight = this.vuex_custom_bar_height + 15
|
setTimeout(() => {
|
this.showSkeleton = false
|
}, 1000)
|
|
// this.$refs.refSuccess.showBox({
|
// type:'error',//success/error/warning,
|
// txt:'操作失败，请重试！'
|
// })
|
|
this.scrollHeight = this.screenHeight - 282;
|
|
setTimeout(() => {
|
this.paddingTop = this.vuex_padding_top
|
this.paddingTop += 5
|
}, 400)
|
|
},
|
onLoad() {
|
|
},
|
methods: {
|
findbumenall() {
|
if (this.vuex_is_login) {
|
findbumen().then((res) => {
|
if (res.code == 0) {
|
for (var i = 0; i < res.data.length; i++) {
|
var json = {}
|
json.text = res.data[i].departmentName
|
// .textres.data[i]
|
this.bumenList.push(json)
|
}
|
|
// this.form.lonlat=res.data.baoliu2+";"+res.data.baoliu3
|
// this.tips=false
|
// this.disable=false
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
}
|
},
|
onchange(e) {
|
var list = []
|
if (this.list.length < e.value) {
|
for (var i = this.list.length; i < e.value; i++) {
|
|
list.push(i)
|
this.list.push(i)
|
// e[i]
|
}
|
} else {
|
this.list.splice(e.value, this.list.length - e.value)
|
}
|
},
|
submitForm() {
|
this.form.list = this.list
|
// if (this.form.shape=="圆形") {
|
// console.log(this.form);
|
|
|
// submitper(this.form).then((res) => {
|
// console.log(res);
|
// if (res.code == 0) {
|
// // this.form.lonlat=res.data.baoliu2+";"+res.data.baoliu3
|
// // this.tips=false
|
// // this.disable=false
|
// }else{
|
// this.$refs.refSuccess.showBox({
|
// type: 'error',
|
// txt: res.msg
|
// });
|
// }
|
// })
|
// }else{
|
if (this.form.tagId == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入设备编号采集坐标'
|
});
|
return false;
|
} else if (this.form.baoliu1 == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入围栏高度采集坐标'
|
});
|
return false;
|
} else if (this.form.name == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入围栏名称采集坐标'
|
});
|
return false;
|
} else if (this.form.shape == '圆形') {
|
if (this.form.zuobiao == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请采集坐标'
|
});
|
return false;
|
}
|
if (this.form.banjing == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入围栏半径'
|
});
|
return false;
|
}
|
} else if (this.form.shape == '多边形') {
|
if (this.form.list.length < 0) {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请采集坐标'
|
});
|
return false;
|
}
|
}
|
console.log(this.company);
|
console.log(this.form);
|
this.form.company = this.company
|
if (this.vuex_is_login) {
|
submitper(this.form).then((res) => {
|
if (res.code == 0) {
|
this.$refs.refSuccess.showBox({
|
type: 'success',
|
txt: "保存成功"
|
});
|
//保存成功跳转围栏列表，清空this.form
|
this.tips = true
|
this.isAchor = false
|
setTimeout(() => {
|
this.$emit('manualRefresh');
|
this.list = []
|
this.isshape = true
|
this.form.bumen = ''
|
this.form.name = ''
|
this.form.baoliu1 = ''
|
this.form.tagId = ''
|
this.form.zuobiao = ''
|
this.form.shape = '圆形'
|
this.form.banjing = ''
|
this.form.type = '进入报警'
|
this.form.list = []
|
this.form.disable = false
|
}, 2000);
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.data
|
});
|
}
|
})
|
}
|
|
},
|
cleanconext() {
|
if (this.form.zuobiao == '') {
|
this.tips = true
|
this.disable = true
|
}
|
},
|
acquisitionxy(index) {
|
if (this.form.tagId == '') {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入设备编号采集坐标'
|
});
|
|
} else {
|
const params = {
|
baoliu3: this.form.tagId,
|
company: this.company,
|
}
|
if (this.vuex_is_login) {
|
acquisition(params).then((res) => {
|
if (res.code == 0) {
|
this.form.zuobiao += res.data.baoliu2 + ":" + res.data.baoliu3 + ";"
|
// this.zuobiao1=res.data.baoliu2+";"+res.data.baoliu3
|
// this.list.
|
this.list.splice(index, 1, res.data.baoliu2 + ";" + res.data.baoliu3);
|
this.tips = false
|
this.disable = false
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
}
|
}
|
|
},
|
shapeCallback(index) {
|
this.form.shape = this.shapeList[index].text;
|
if (this.shapeList[index].text == '圆形') {
|
this.isshape = true
|
} else {
|
this.isshape = false
|
}
|
},
|
|
bymenCallback(index) {
|
this.form.bumen = this.bumenList[index].text;
|
|
},
|
typeCallback(index) {
|
this.form.type = this.typeList[index].text;
|
},
|
goTag() {
|
this.isAchor = false
|
// uni.reLaunch({
|
// url: '/pages/index/equipmentCom'
|
// });
|
this.$emit('goAchor');
|
},
|
goAchor() {
|
// this.isAchor = false
|
this.lock = false
|
},
|
|
// 模拟请求加载数据
|
handleLoad(data, callback) {
|
const params = {
|
current: data.page,
|
size: data.size,
|
}
|
if (this.vuex_is_login) {
|
findFence(params).then((res) => {
|
if (res.code == 0) {
|
let list = [];
|
setTimeout(() => {
|
let list = [];
|
for (var i = 0; i < res.data.records.length; i++) {
|
list.push(res.data.records[i]);
|
}
|
this.list = [...this.list, ...list];
|
callback({
|
list: this.list,
|
total: res.data.total
|
});
|
}, 1500);
|
}
|
})
|
}else{
|
callback({
|
list: [],
|
total: 0
|
});
|
}
|
},
|
handleSearch(data, callback) {
|
const params = {
|
current: 1,
|
size: 10,
|
objectid: this.keyword,
|
}
|
if (this.vuex_is_login) {
|
findFence(params).then((res) => {
|
this.list = []
|
if (res.code == 0) {
|
let list = [];
|
setTimeout(() => {
|
let list = [];
|
for (var i = 0; i < res.data.records.length; i++) {
|
list.push(res.data.records[i]);
|
}
|
this.list = [...this.list, ...list];
|
callback({
|
list: this.list,
|
total: res.data.total
|
});
|
}, 1500);
|
}
|
})
|
}
|
// let name = this.keyword
|
// console.log();
|
// findPerson(name).then((res) => {
|
// if (res.code == 0) {
|
// this.perlist = res.data
|
// console.log(this.perlist);
|
// } else {
|
// this.$refs.refSuccess.showBox({
|
// type: 'error',
|
// txt: res.msg
|
// });
|
// }
|
// })
|
|
},
|
// 模拟请求数据刷新
|
handleRefresh(data, callback) {
|
const params = {
|
current: data.page,
|
size: data.size,
|
}
|
if (this.vuex_is_login) {
|
findFence(data).then((res) => {
|
if (res.code == 0) {
|
let list = [];
|
setTimeout(() => {
|
let list = [];
|
for (var i = 0; i < res.data.records.length; i++) {
|
list.push(res.data.records[i]);
|
}
|
this.list = []
|
this.list = [...this.list, ...list];
|
callback({
|
list: this.list,
|
total: res.data.total
|
});
|
}, 1500);
|
}
|
})
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
/* 鼠标未悬浮时效果设置 */
|
.title_linespan {
|
font-size: 17px;
|
font-weight: bold;
|
// font-weight: 100px;
|
color: #000000
|
}
|
|
/* 鼠标悬浮后的设置 */
|
.title_linespan:hover {
|
font-size: 17px;
|
font-weight: bold;
|
color: #00aaff;
|
text-decoration: underline;
|
}
|
|
.modal-btn {
|
position: absolute;
|
|
left: 80%;
|
// margin-top: -40px;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// box-sizing: border-box;
|
// width: 120rpx;
|
// height: 40rpx;
|
// background: rgba(103, 149, 255, 0.2);
|
}
|
|
.page-wrap {
|
height: 100%;
|
width: 100%;
|
// padding-top: 45px;
|
padding-left: 30rpx;
|
padding-right: 30rpx;
|
|
.test-view {
|
height: 300rpx;
|
}
|
|
.navbar-content {
|
width: 100%;
|
display: flex;
|
padding: 30rpx;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.u-icon {
|
margin-left: 30rpx;
|
}
|
|
.item-wrap {
|
background-color: #ffffff;
|
// display: flex;
|
margin-top: 30rpx;
|
padding: 30rpx;
|
align-items: center;
|
border-radius: 16rpx;
|
box-shadow: 0rpx 8rpx 16rpx rgba(0, 0, 0, 0.11);
|
|
.avatar {
|
width: 150rpx;
|
height: 150rpx;
|
margin-right: 30rpx;
|
border-radius: 16rpx;
|
background-color: #c0c0c0;
|
}
|
|
.item {
|
width: 100rpx;
|
height: 30rpx;
|
margin-bottom: 10rpx;
|
border-radius: 16rpx;
|
background-color: #c8c7cc;
|
}
|
|
}
|
}
|
|
.container {
|
width: 100%;
|
position: 'absolute';
|
z-index: 9999999;
|
padding: 20px;
|
}
|
|
.card {
|
background-color: #fff;
|
padding: 15px;
|
margin-bottom: 20px;
|
border-radius: 8px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
|
.title {
|
font-size: 18px;
|
font-weight: bold;
|
}
|
|
.tags {
|
margin-top: 10px;
|
}
|
|
.tag {
|
display: inline-block;
|
padding: 2px 5px;
|
border-radius: 3px;
|
margin-right: 5px;
|
font-size: 12px;
|
}
|
|
.sos {
|
background-color: #f8bbd0;
|
color: #fff;
|
}
|
|
.time {
|
margin-top: 10px;
|
font-size: 14px;
|
color: #666;
|
}
|
|
.form-item {
|
margin-top: 15px;
|
}
|
|
.picker {
|
margin-top: 5px;
|
}
|
|
.submit-button {
|
margin-top: 20px;
|
background-color: #007aff;
|
color: #fff;
|
padding: 10px;
|
border-radius: 5px;
|
}
|
</style>
|
