定位优化

quanyawei

2024-01-11 da25434b85fc5b4321c429bf95e719d00ec395bb

 pages/actionChange/newPage/index.vue

New file
@@ -0,0 +1,517 @@
<template>
   <view class="mianContent">
      <p class="title">基本信息</p>
      <u-form ref="uForm" label-width="80" :model="form" :rules="rules" :labelStyle="labelStyle">
         <u-form-item border-bottom label="上报时间:" prop="escalationTime" required @click="showeEscalationTime = true">
            <u-input v-model="form.escalationTime" border="none" disabled disabled-color="#ffffff" placeholder="请选择"
               type="select" />
            <u-icon slot="right" name="arrow-right" />
            <u-datetime-picker ref="datetimePicker" v-model="timeFormet" mode="date" :show="showeEscalationTime"
               @confirm="checkTime" @cancel='showeEscalationTime=false' />
         </u-form-item>
         <u-form-item border-bottom label="污染位置:" prop="pollutePosition" required>
            <view style="display: flex;align-items: center;">
               <u--textarea v-model="form.pollutePosition" border="none" placeholder="请输入"
                  autoHeight></u--textarea>
               <view style="width: 60px;">
                  <u-button @tap="authVerification()" text="地图选择" type="success" size="mini"></u-button>
               </view>
            </view>
            <!-- <u-input v-model="form.pollutePosition" border="none" placeholder="请输入" type="text">
               <template slot="suffix">
                  <u-button @tap="authVerification()" text="地图选择" type="success" size="mini"></u-button>
               </template>
            </u-input> -->
         </u-form-item>
         <u-form-item border-bottom label="责任主体:" prop="unitId" required @click="
               showCheckBox = true;
               hideKeyboard('unitList', 'unitId');
            ">
            <u--input v-model="form.unitId" border="none" disabled disabled-color="#ffffff" placeholder="请选择" />
            <u-icon slot="right" name="arrow-right" />
         </u-form-item>
         <u-form-item border-bottom label="污染分类:" prop="polluteType" required @click="
               showCheckBox = true;
               hideKeyboard('polluteList', 'polluteType');
            ">
            <u-input v-model="form.polluteType" border="none" disabled disabled-color="#ffffff" placeholder="请选择"
               type="select" />
            <u-icon slot="right" name="arrow-right" />
         </u-form-item>
         <u-form-item border="none" border-bottom label="整改类型:" prop="changeType" required>
            <u-radio-group v-model="form.changeType" style="font-size: 13px;">
               <u-radio :key="index" v-for="(item, index) in changeEnum" :customStyle="{marginRight: '16px'}"
                  :label="item.name" :name="item.value" />
            </u-radio-group>
         </u-form-item>
         <u-form-item border-bottom label="限期天数:" placeholder="请输入" required :disabled='Number(form.changeType)===1'>
            <u-input v-model="form.changeDay" border="none" type="number" :disabled='Number(form.changeType)===1' />
         </u-form-item>
         <u-form-item border-bottom label="上报单位:" prop="escalationUnitId" required @click="
               showCheckBox = true;
               hideKeyboard('unitList', 'escalationUnitId');
            ">
            <u-input v-model="form.escalationUnitId" border="none" disabled disabled-color="#ffffff"
               placeholder="请选择" type="select" />
            <u-icon slot="right" name="arrow-right" />
         </u-form-item>
         <u-form-item border-bottom label="上报人:" prop="escalationName" required>
            <u-input v-model="form.escalationName" border="none" placeholder="请输入" type="text" />
         </u-form-item>
         <u-form-item border-bottom label="排查方式:" prop="investigationType" required>
            <u-radio-group v-model="form.investigationType" style="font-size: 13px;">
               <u-radio :key="index" v-for="(item, index) in Dic.investigationEnum"
                  :customStyle="{marginRight: '16px'}" :label="item.name" :name="item.value" />
            </u-radio-group>
         </u-form-item>
         <u-form-item border-bottom label="任务分类:" prop="keyPoint">
            <u-radio-group v-model="form.keyPoint" style="font-size: 13px;" placement='column'>
               <u-radio :key="index" v-for="(item, index) in Dic.emphasisEnum" :customStyle="{marginTop: '10px'}"
                  :label="item.name" :name="item.value" />
            </u-radio-group>
         </u-form-item>
         <u-form-item border-bottom label="问题描述:" prop="problemDescribe" required>
            <u--textarea v-model="form.problemDescribe" border="none" placeholder="请输入内容" />
         </u-form-item>
         <u-form-item border-bottom label="相关附件:">
            <view class="fileBox">
               <fileUpload :sys-code="sysCode" @handleFile="handleFile" />
            </view>
         </u-form-item>
      </u-form>
      <u-picker :show="showCheckBox" keyName="label" :columns="actionOptionList" @cancel="showCheckBox = false"
         :default-selector="[0]" :immediateChange='true' @confirm="selectBack"></u-picker>
      <!--    <u-action-sheet v-if="actionOptionList.length > 0" :actions="actionOptionList" :show="showCheckBox" title="请选择"
         @close="showCheckBox = false" @select="selectBack" /> -->
      <view class="bunts">
         <view class="but butRight">
            <u-button shape="square" @click="close">关闭</u-button>
         </view>
         <view class="but butleft">
            <u-button shape="square" type="primary" @click="submit">提交</u-button>
         </view>
      </view>
   </view>
</template>
<script>
   import fileUpload from '../components/fileUpload.vue'
   import amap from '../../../libs/amap-wx.js'
   export default {
      components: {
         fileUpload
      },
      data() {
         return {
            sysCode: '1010201', //
            showCheckBox: false,
            labelStyle: {
               fontSize: '30.77rpx'
            },
            addressInfor: {},
            showeEscalationTime: false,
            actionOptionList: [],
            rules: {
               'unitId': {
                  required: true,
                  message: '请输入',
                  trigger: ['blur', 'change']
               },
               'polluteType': {
                  required: true,
                  message: '请选择',
                  trigger: ['blur', 'change']
               },
               'changeDay': {
                  required: true,
                  message: '请选择',
                  trigger: ['blur', 'change']
               },
               'escalationName': {
                  required: true,
                  message: '请选择',
                  trigger: ['blur']
               },
               'escalationUnitId': {
                  required: true,
                  message: '请选择',
                  trigger: ['blur', 'change']
               },
               'escalationTime': {
                  required: true,
                  message: '请选择',
                  trigger: ['blur']
               },
               'problemDescribe': {
                  required: true,
                  message: '请输入',
                  trigger: ['blur']
               },
               'pollutePosition': {
                  required: true,
                  message: '请输入',
                  trigger: ['blur']
               },
            },
            currentKey: '',
            Dic: [],
            changeEnum: [],
            timeFormet: Number(new Date()),
            form: {
               unitId: '',
               polluteType: '',
               changeType: '',
               changeDay: '',
               escalationName: '',
               escalationUnitId: '',
               escalationTime: '',
               problemDescribe: '',
               pollutePosition: '',
               keyPoint: 0
            },
            sumbitForm: {
               unitId: '',
               polluteType: '',
               changeType: '',
               changeDay: '',
               escalationName: '',
               escalationUnitId: '',
               escalationTime: '',
               problemDescribe: '',
               pollutePosition: '',
               keyPoint: null
            },
            unitList: [],
            polluteList: [],
            fileBaseList: [],
            key: '04a1196c84f5d193c7d91c66150908be',
            amapPlugin: null,
         }
      },
      onReady() {
         //onReady 为uni-app支持的生命周期之一
         this.$refs.uForm.setRules(this.rules)
      },
      onLoad() {
         this.amapPlugin = new amap.AMapWX({
            key: this.key //该key 是在高德中申请的微信小程序key
         })
      },
      onShow() {
         uni.hideTabBar()
      },
      created() {
         this.getUnitList()
         this.getContaminateList()
      },
      onBackPress(e) {
         uni.navigateBack({
            delta: 1, //返回上上一级注意这里要设置为2
         })
         return false
      },
      methods: {
         authVerification() {
            uni.getSetting({
               success: res => {
                  if (res.authSetting['scope.userLocation']) {
                     /* 用户授权成功时走这里 */
                     this.handerLocation()
                  } else if (res.authSetting['scope.userLocation'] === undefined) {
                     /* 用户未授权时走这里 */
                     console.log('没有授权', res)
                     this.handleOpenSetting()
                  } else {
                     /* 用户拒绝了授权后走这里 */
                     console.log('拒绝了授权 false')
                     this.handleOpenSetting()
                  }
               },
            })
         },
         handerChooseLocation(latitude, longitude) {
            uni.chooseLocation({
               latitude: latitude || '',
               longitude: longitude || '',
               success: res => {
                  console.log('取消按钮', res)
                  this.addressInfor = res
                  this.form.pollutePosition = `${res.name }  —  ${res.address}`
               },
               fail: function(err) {
                  console.log('取消按钮', err)
               }
            })
         },
         handerLocation() {
            let that = this
            if (this.addressInfor.latitude === '') {
               uni.getLocation({
                  type: 'gcj02',
                  isHighAccuracy: true, //开启高精度定位
                  success: function(res) {
                     console.log('111', res)
                     that.handerChooseLocation(res.latitude, res.longitude)
                  },
                  fail(error) {
                     console.log('失败', error)
                  }
               })
            } else {
               that.handerChooseLocation(this.addressInfor.latitude, this.addressInfor.longitude)
            }
         },
         handleOpenSetting() {
            let that = this
            uni.authorize({
               scope: 'scope.userLocation',
               success() {
                  console.log('res', '1111')
                  //点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
                  that.handerLocation()
               },
               fail(error) {
                  //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
                  console.log('拒绝授权', error)
                  uni.showModal({
                     title: '提示',
                     content: '若点击不授权，将无法使用位置功能',
                     cancelText: '不授权',
                     confirmText: '授权',
                     success(res) {
                        console.log(res)
                        if (res.confirm) {
                           // 选择弹框内授权
                           uni.openSetting({
                              success(res) {
                                 that.handerLocation()
                              }
                           })
                        } else if (res.cancel) {
                           // 选择弹框内 不授权
                           console.log('用户点击不授权')
                        }
                     }
                  })
               }
            })
         },
         handleFile(data) {
            console.log('datadata', data)
            this.fileBaseList = data
         },
         close() {
            uni.$emit('currIndex', {
               data: {
                  index: '0',
                  showTabBar: true
               }
            })
            uni.navigateBack({
               delta: 1, //返回上上一级注意这里要设置为2
            })
         },
         hideKeyboard(data, key) {
            this.actionOptionList = []
            let list = this[data]
            this.currentKey = key
            list.forEach(item => {
               item.label = item.dataValue || item.name || item.unitName
               item.id = item.dataKey || item.value || item.unitId
            })
            console.log('list', list)
            this.$set(this.actionOptionList, 0, list)
         },
         selectBack(e) {
            console.log(e)
            this.form[this.currentKey] = e.value[0].label
            this.sumbitForm[this.currentKey] = e.value[0].id
            console.log('this.form.changeType', this.currentKey)
            if (Number(this.sumbitForm.changeType) !== 1) {
               this.sumbitForm.changeDay = '0'
               this.form.changeDay = '0'
            } else {
               this.sumbitForm.changeDay = ''
               this.form.changeDay = ''
            }
            this.showCheckBox = false
         },
         checkTime(e) {
            this.showeEscalationTime = false
            let data = this.$utils.dateFormatter(e.value)
            console.log('e.value', e.value)
            this.form.escalationTime = data
            this.sumbitForm.escalationTime = data
         },
         submit() {
            console.log('this.sumbitForm', this.form)
            this.$refs.uForm.validate().then(res => {
               this.sumbitForm.problemDescribe = this.form.problemDescribe
               this.sumbitForm.pollutePosition = this.form.pollutePosition
               this.sumbitForm.address = this.addressInfor.name
               this.sumbitForm.latitude = this.addressInfor.latitude
               this.sumbitForm.longitude = this.addressInfor.longitude
               this.sumbitForm.name = this.addressInfor.name
               this.sumbitForm.changeDay = this.form.changeDay
               this.sumbitForm.escalationName = this.form.escalationName
               this.sumbitForm.investigationType = this.form.investigationType
               this.sumbitForm.fileBaseList = this.fileBaseList
               this.sumbitForm.changeType = this.form.changeType
               this.sumbitForm.keyPoint = this.form.keyPoint
               this.sumbitForm.state = '20'
               this.$http.httpPost('/allocation/insert', {
                  ...this.sumbitForm
               }).then(res => {
                  uni.$u.toast('提交成功')
                  this.close()
               }).catch(errors => {
                  uni.$u.toast(errors.split(',')[0])
                  console.log(errors)
               })
            }).catch(errors => {
               uni.$u.toast('校验失败')
            })
         },
         setDefaultValue() {
            let time = new Date().getTime()
            let data = this.$utils.dateFormatter(time)
            this.form.escalationTime = data
            this.sumbitForm.escalationTime = data
            if (this.changeEnum.length > 0) {
               this.form.changeType = this.changeEnum[0].value
               this.sumbitForm.changeType = this.changeEnum[0].value
            }
            let userInfor = JSON.parse(uni.getStorageSync('userInfor') || '{}')
            if (userInfor.unitId && this.unitList.length > 0) {
               let data = this.unitList && this.unitList.find(a => Number(a.unitId) === Number(userInfor.unitId))
                  .unitName
               this.form.unitId = data
               this.sumbitForm.unitId = userInfor.unitId
               this.form.escalationUnitId = data
               this.sumbitForm.escalationUnitId = userInfor.unitId
            } else {
               if (this.unitList.length > 0) {
                  this.form.unitId = this.unitList[0].unitName
                  this.sumbitForm.unitId = this.unitList[0].unitId
                  this.form.escalationUnitId = this.unitList[0].unitName
                  this.sumbitForm.escalationUnitId = this.unitList[0].unitId
               }
            }
            this.form.escalationName = userInfor.userName || ''
            this.sumbitForm.escalationName = userInfor.userName || ''
            this.form.investigationType = 1
            this.sumbitForm.investigationType = 1
            let that = this
            uni.getLocation({
               type: 'gcj02',
               isHighAccuracy: true, //开启高精度定位
               success: function(res) {
                  that.amapPlugin.getRegeo({
                     type: 'gcj02',
                     location: '' + res.longitude + ',' + res.latitude + '',
                     success: function(e) {
                        console.log(e)
                        that.addressInfor.address = `${ e[0].desc }  —  ${e[0].name}`
                        that.addressInfor.latitude = e[0].latitude
                        that.addressInfor.longitude = e[0].longitude
                        that.addressInfor.name = e[0].desc
                        that.form.pollutePosition = `${ e[0].desc }  —  ${e[0].name}`
                     },
                     fail: res => {
                        console.log(JSON.stringify(res))
                     }
                  })
               }
            })
         },
         // 获取责任单位list
         getUnitList() {
            this.$http.httpGet('/allocation/unit').then(res => {
               this.unitList = res.data
               this.Dic = JSON.parse(uni.getStorageSync('dict') || '[]')
               this.changeEnum = this.Dic.changeEnum
               this.changeEnum = this.Dic.changeEnum
               this.setDefaultValue()
            })
         },
         getContaminateList() {
            this.$http.httpGet('/allocation/contaminate').then(res => {
               this.polluteList = res.data
            })
         },
      },
   }
</script>
<style scoped lang="scss">
   uni-page-body {
      padding-top: 10px;
   }

   .mianContent {
      margin: 19.23rpx;
      border-radius: 5px;
      padding-bottom: 38.46rpx;

      .title {
         padding: 9.62rpx;
         font-size: 16px;
         font-weight: 700;
         color: #101010;
         border-bottom: 1px solid #bbb;
      }

      /deep/.u-form-item {
         padding-left: 10px;
      }

      /deep/.u-textarea {
         padding: 0 !important;
         width: calc(100%-70px);
      }

      // /deep/.u-form-item__body {
      //    padding: 8px 0px !important;
      //    font-size: 15px !important;
      // }
      // /deep/.u-form-item__body__left__content__label,
      // /deep/.u-input__content__field-wrapper__field,
      // /deep/.u-radio__text {
      //    font-size: 15px !important;
      // }
   }

   .bunts {
      display: flex;
      margin-top: 20px;
      margin-bottom: 96.15rpx;
      padding: 0 20px;
      justify-content: center;

      .but {
         width: 50%;
      }

      .butRight {
         padding-right: 20px;
      }

      .butleft {
         padding-left: 20px;
      }
   }

   .fileBox {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      position: relative;
      width: 100%;
      height: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
   }
</style>