| | |
| | | <template> |
| | | <view class="template-job tn-safe-area-inset-bottom tn-skeleton" > |
| | | |
| | | |
| | | <!-- 顶部自定义导航 --> |
| | | <tn-nav-bar fixed style="position: absolute;z-index: 999999999;"> |
| | | <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="goTag">绘制</text> |
| | | @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="{height:vuex_custom_index_height+'px',top:vuex_custom_bar_height+'px',position: 'absolute'}"> |
| | | |
| | | <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-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-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-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-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-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-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 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> |
| | |
| | | banjing:'', |
| | | type:'进入报警', |
| | | list: [], |
| | | disable:false |
| | | disable: false, |
| | | company: this.company, |
| | | }, |
| | | showSkeleton: true, |
| | | options: [{ |
| | |
| | | text: '圆形' |
| | | }, |
| | | { |
| | | text: '矩形' |
| | | text: '多边形' |
| | | } |
| | | ], |
| | | |
| | |
| | | } |
| | | }, |
| | | mounted() { |
| | | console.log(this.vuex_custom_index_height); |
| | | this.findbumenall() |
| | | |
| | | console.log(this.formfence); |
| | | if (this.formfence.zuobiao!='') { |
| | | this.tips=false |
| | | |
| | | |
| | | } |
| | | this.form=this.formfence |
| | | console.log(this.lock); |
| | | console.log("打印数据=======》》》》》》》》》"); |
| | | // if (this.formfence.zuobiao!='') { |
| | | // this.tips=false |
| | | // } |
| | | // this.form=this.formfence |
| | | this.topheight = this.vuex_custom_bar_height + 15 |
| | | setTimeout(() => { |
| | | this.showSkeleton = false |
| | |
| | | }, |
| | | methods: { |
| | | findbumenall(){ |
| | | if (this.vuex_is_login) { |
| | | findbumen().then((res) => { |
| | | console.log(res); |
| | | if (res.code == 0) { |
| | | |
| | | for (var i = 0; i < res.data.length; i++) { |
| | | var json={} |
| | | json.text=res.data[i].departmentName |
| | |
| | | }); |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | onchange(e){ |
| | | console.log(e); |
| | | var list =[] |
| | | if (this.list.length<e.value) { |
| | | for (var i = this.list.length; i < e.value; i++) { |
| | |
| | | }else{ |
| | | this.list.splice(e.value,this.list.length-e.value) |
| | | } |
| | | |
| | | console.log(this.list); |
| | | }, |
| | | submitForm(){ |
| | | this.form.list=this.list |
| | |
| | | }); |
| | | return false; |
| | | } |
| | | }else if (this.form.shape=='矩形') { |
| | | } else if (this.form.shape == '多边形') { |
| | | if (this.form.list.length<0) { |
| | | this.$refs.refSuccess.showBox({ |
| | | type: 'error', |
| | |
| | | return false; |
| | | } |
| | | } |
| | | console.log(this.company); |
| | | console.log(this.form); |
| | | console.log(); |
| | | |
| | | this.form.company = this.company |
| | | if (this.vuex_is_login) { |
| | | submitper(this.form).then((res) => { |
| | | console.log(res); |
| | | if (res.code == 0) { |
| | | this.$refs.refSuccess.showBox({ |
| | | type: 'success', |
| | | txt: "保存成功" |
| | | }); |
| | | |
| | | // this.form.lonlat=res.data.baoliu2+";"+res.data.baoliu3 |
| | | // this.tips=false |
| | | // this.disable=false |
| | | //保存成功跳转围栏列表,清空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', |
| | |
| | | }); |
| | | } |
| | | }) |
| | | |
| | | } |
| | | |
| | | }, |
| | | cleanconext(){ |
| | |
| | | } |
| | | }, |
| | | acquisitionxy(index){ |
| | | console.log(index); |
| | | if (this.form.tagId=='') { |
| | | this.$refs.refSuccess.showBox({ |
| | | type: 'error', |
| | |
| | | }); |
| | | |
| | | }else{ |
| | | console.log(this.form); |
| | | const params ={ |
| | | baoliu3:this.form.tagId |
| | | baoliu3: this.form.tagId, |
| | | company: this.company, |
| | | } |
| | | if (this.vuex_is_login) { |
| | | acquisition(params).then((res) => { |
| | | console.log(res); |
| | | if (res.code == 0) { |
| | | this.form.zuobiao+=res.data.baoliu2+":"+res.data.baoliu3+";" |
| | | // this.zuobiao1=res.data.baoliu2+";"+res.data.baoliu3 |
| | |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | | }, |
| | | shapeCallback(index) { |
| | | this.form.shape = this.shapeList[index].text; |
| | | // this.form.baoliu6 = this.actionSheetList[index].text; |
| | | console.log(this.shapeList[index].text); |
| | | if (this.shapeList[index].text=='圆形') { |
| | | this.isshape=true |
| | | }else{ |
| | |
| | | |
| | | bymenCallback(index) { |
| | | this.form.bumen = this.bumenList[index].text; |
| | | // this.form.baoliu6 = this.actionSheetList[index].text; |
| | | console.log(this.bumenList[index].text); |
| | | |
| | | }, |
| | | typeCallback(index) { |
| | | this.form.type = this.typeList[index].text; |
| | | // this.form.baoliu6 = this.actionSheetList[index].text; |
| | | console.log(this.typeList[index].text); |
| | | |
| | | }, |
| | | |
| | | |
| | | editClick() { |
| | | console.log(1111111); |
| | | }, |
| | | deleteClick() { |
| | | console.log(2222222); |
| | | }, |
| | | goTag() { |
| | | this.isAchor = false |
| | | |
| | | // this.lock = true |
| | | |
| | | console.log(2323323); |
| | | // uni.reLaunch({ |
| | | // url: '/pages/index/equipmentCom' |
| | | // }); |
| | | this.$emit('goAchor'); |
| | | }, |
| | | goAchor() { |
| | | this.isAchor = false |
| | | // this.isAchor = false |
| | | this.lock = false |
| | | |
| | | console.log(2323323); |
| | | // findTag |
| | | |
| | | }, |
| | | |
| | | // 模拟请求加载数据 |
| | |
| | | current: data.page, |
| | | size: data.size, |
| | | } |
| | | |
| | | if (this.vuex_is_login) { |
| | | findFence(params).then((res) => { |
| | | console.log(res); |
| | | if (res.code == 0) { |
| | | let list = []; |
| | | setTimeout(() => { |
| | |
| | | for (var i = 0; i < res.data.records.length; i++) { |
| | | list.push(res.data.records[i]); |
| | | } |
| | | console.log(list); |
| | | this.list = [...this.list, ...list]; |
| | | callback({ |
| | | list: this.list, |
| | |
| | | }, 1500); |
| | | } |
| | | }) |
| | | }else{ |
| | | callback({ |
| | | list: [], |
| | | total: 0 |
| | | }); |
| | | } |
| | | }, |
| | | handleSearch(data, callback) { |
| | | console.log(555555555); |
| | | const params = { |
| | | current: 1, |
| | | size: 10, |
| | | objectid: this.keyword, |
| | | } |
| | | |
| | | if (this.vuex_is_login) { |
| | | findFence(params).then((res) => { |
| | | console.log(res); |
| | | this.list = [] |
| | | if (res.code == 0) { |
| | | let list = []; |
| | |
| | | for (var i = 0; i < res.data.records.length; i++) { |
| | | list.push(res.data.records[i]); |
| | | } |
| | | console.log(list); |
| | | this.list = [...this.list, ...list]; |
| | | callback({ |
| | | list: this.list, |
| | |
| | | }, 1500); |
| | | } |
| | | }) |
| | | } |
| | | // let name = this.keyword |
| | | // console.log(); |
| | | // findPerson(name).then((res) => { |
| | |
| | | }, |
| | | // 模拟请求数据刷新 |
| | | handleRefresh(data, callback) { |
| | | console.log(555555555555555); |
| | | const params = { |
| | | current: data.page, |
| | | size: data.size, |
| | | } |
| | | console.log(data); |
| | | if (this.vuex_is_login) { |
| | | findFence(data).then((res) => { |
| | | if (res.code == 0) { |
| | | let list = []; |
| | |
| | | for (var i = 0; i < res.data.records.length; i++) { |
| | | list.push(res.data.records[i]); |
| | | } |
| | | console.log(list); |
| | | this.list = [] |
| | | this.list = [...this.list, ...list]; |
| | | console.log(this.list); |
| | | callback({ |
| | | list: this.list, |
| | | total: res.data.total |
| | |
| | | }, 1500); |
| | | } |
| | | }) |
| | | // console.log(2222222222); |
| | | // setTimeout(() => { |
| | | // this.list = []; |
| | | // for (var i = 0; i < 3; i++) { |
| | | // this.list.push(i); |
| | | // } |
| | | // callback({ list: this.list, total: 30 }); |
| | | // }, 1500); |
| | | } |
| | | }, |
| | | } |
| | | } |
| | |
| | | // height: 40rpx; |
| | | // background: rgba(103, 149, 255, 0.2); |
| | | } |
| | | |
| | | .page-wrap { |
| | | height: 100%; |
| | | width: 100%; |
| | |
| | | |
| | | } |
| | | } |
| | | |
| | | .container { |
| | | width: 100%; |
| | | position: 'absolute'; |