王飞
2025-03-07 c5e49c10499435802a6551b98772f95660c6f85a
pages/index/draw.vue
@@ -1,20 +1,19 @@
<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" > -->
@@ -24,26 +23,26 @@
            </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>
@@ -53,10 +52,14 @@
               <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>
@@ -148,7 +151,8 @@
               banjing:'',
               type:'进入报警',
               list: [],
               disable:false
               disable: false,
               company: this.company,
            },
            showSkeleton: true,
            options: [{
@@ -173,7 +177,7 @@
                  text: '圆形'
               },
               {
                  text: '矩形'
                  text: '多边形'
               }
            ],
            
@@ -215,18 +219,11 @@
         }
      },
      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
@@ -250,10 +247,9 @@
      },
      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
@@ -271,9 +267,9 @@
                  });
               }
            })
            }
         },
         onchange(e){
            console.log(e);
            var list =[]
            if (this.list.length<e.value) {
               for (var i = this.list.length; i < e.value; i++) {
@@ -285,8 +281,6 @@
            }else{
               this.list.splice(e.value,this.list.length-e.value)
            }
            console.log(this.list);
         },
         submitForm(){
            this.form.list=this.list
@@ -341,7 +335,7 @@
                     });
                     return false;
                  }
               }else if (this.form.shape=='矩形') {
            } else if (this.form.shape == '多边形') {
                  if (this.form.list.length<0) {
                     this.$refs.refSuccess.showBox({
                        type: 'error',
@@ -350,20 +344,34 @@
                     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',
@@ -371,7 +379,7 @@
                     });
                  }
               })
            }
            
         },
         cleanconext(){
@@ -381,7 +389,6 @@
            }
         },
         acquisitionxy(index){
            console.log(index);
            if (this.form.tagId=='') {
               this.$refs.refSuccess.showBox({
                  type: 'error',
@@ -389,12 +396,12 @@
               });
               
            }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
@@ -410,12 +417,11 @@
                  }
               })
            }
            }
            
         },
         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{
@@ -425,42 +431,21 @@
         
         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
         },
         // 模拟请求加载数据
@@ -469,9 +454,8 @@
               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(() => {
@@ -479,7 +463,6 @@
                     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,
@@ -488,17 +471,21 @@
                  }, 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 = [];
@@ -507,7 +494,6 @@
                     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,
@@ -516,6 +502,7 @@
                  }, 1500);
               }
            })
            }
            // let name = this.keyword
            // console.log();
            // findPerson(name).then((res) => {
@@ -533,12 +520,11 @@
         },
         // 模拟请求数据刷新
         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 = [];
@@ -547,10 +533,8 @@
                     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
@@ -558,14 +542,7 @@
                  }, 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);
            }
         },
      }
   }
@@ -601,6 +578,7 @@
      // height: 40rpx;
      // background: rgba(103, 149, 255, 0.2);
   }
   .page-wrap {
      height: 100%;
      width: 100%;
@@ -651,6 +629,7 @@
   
      }
   }
.container {
      width: 100%;
      position: 'absolute';