nsgk_mobile/src/views/lawEnforcement/task/taskSignIn.vue

<template>
  <div class="app-container">
    <div class="header_main">
      执法打卡
      <div class="return_btn" @click="onClickLeft"></div>
    </div>
    <baidu-map :center="center" panBy="[50,50]" :zoom="zoom" :scroll-wheel-zoom="true" :pinch-to-zoom="true" map-type="BMAP_NORMAL_MAP" style="height:150vh" >
      <!-- 必须给容器指高度，不然地图将显示在一个高度为0的容器中，看不到 -->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: '../../../../static/images/lawEnforcement/new/address.gif', size: {width: 50, height: 50}}"></bm-marker>
    </baidu-map>

    <div style="position:absolute;top: 75px;width: 100%;">
      <div class="main_box top_box">
        <van-field readonly v-model="form.caseSource" label="案件来源" :border="false" />
        <van-field readonly v-model="form.schemeId" label="关联方案" :border="false" />
        <van-field readonly v-model="form.caseName" label="案件名称" :border="false" />
      </div>

      <div class="main_box" style="margin-top: 10px;padding: 0rem 0.426667rem;">
        <div class="file_box">
          <p class="left_box">未</p>
          <div class="center_box">
            <p class="time">{{ nowTime }}<span>（{{ nowDate }}）</span></p>
            <p class="dress">{{clockinAddr}}</p>
          </div>
          <div class="file_box_btn" @click="$router.push({name:'lawEnforcementTaskRecord', query: {id:form.id,relationType:form.caseProgress,clockin_user:clockin_user}})">
            <img src="../../../../static/images/lawEnforcement/icon/task_icon.png">
            <p>打卡记录</p>
          </div>
        </div>
        <div class="file_box" style="border-top: 1px solid #DEDEDE">
          <van-uploader v-model="fileList" :after-read="afterRead" @delete="deleteFile" />
        </div>

        <div class="bz">
          <van-field placeholder="请输入备注" v-model="remark" :border="false" />
        </div>
      </div>

      <div class="main_box" style="margin-top: 10px;padding: 0.266667rem 0.426667rem;">
        <p class="now_dress">当前位置：{{clockinAddr}}</p>
      </div>
    </div>
<!--    $router.push({name:'lawEnforcementSignInRecord'}) @click="submitForm"-->
    <div class="submitButton" @click="submitForm" >
      <p class="datetime">{{ nowTime }}</p>
      <p>打卡</p>
    </div>
  </div>
</template>

<script>
  import { getCase , schemeList , commonUpload , getUserProfile , addClockin } from "@/api/lawEnforcement/index";
  export default {
    name: "programmeDetail",
    data() {
      return {
        checked:'',
        showBankType:false,
        showPayeeType:false,
        showPicker:false,
        form:{
          clockinAddr:''
        },
        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
        zoom: 15, //地图展示级别

        bankType:'',
        payeeType:'',
        value:'',

        bankTypeOptions:[],
        payeeTypeOptions:[],
        tEnforceSchemeHandlerList:[],
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(2021, 0, 17),

        activeNames: ['1'],
        activeNames1: ['1'],
        activeNames2: ['1'],
        nowDate: this.format(new Date(),'yyyy-MM-dd'), // 当前日期
        nowTime: '', // 当前时间

        fileList:[],
        openPic:[],
        openPic2:[],
        clockinAddr:'',
        remark:'',
        clockin_user:''
      };
    },
    created() {
      // this.getDictionaries()
      var that = this;
      setInterval(function () {
        that.nowTime = that.format(new Date(),'HH:mm')
      }, 500);
      this.getDicts("case_source").then(response => {
        this.caseSourceOptions = response.data;
      });
      this.getDetail();

      getUserProfile().then(res => {
        this.clockin_user = res.data.userName;
      })
    },
    methods: {
      getDetail(){
        getCase(this.$route.query.id).then((response) => {
          response.data.caseSource = response.data.caseSource == '' ? '' : this.selectDictLabel(this.caseSourceOptions, response.data.caseSource);
          var schemeQueryParam = {
            applyStatus: "1",
          };
          schemeList(schemeQueryParam).then((res) => {
            let scheme = res.rows.filter(function (e) { return e.id == response.data.schemeId; });
            if (scheme.length > 0){
              response.data.schemeId = scheme[0].schemeName
            }
          });
          this.form = response.data;
          var that = this;
          that.getNowLocation();
        });
      },
      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        this.openPic.push(file.file);
        let params1 = new FormData();
        params1.append("file", file.file);
        commonUpload(params1).then((r1) => {
          this.openPic2.push(r1.fileName);
        })
      },
      deleteFile(file,detail) {
        console.log(file)
        console.log(detail)
        this.openPic2.splice(detail.index,1);
      },
      getNowLocation(){
        let that = this;
        var location_lon = "";
        var location_lat = ""; // 经度,纬度
        navigator.geolocation.getCurrentPosition((position) => {
          console.log(position)
          let lat = position.coords.latitude;
          let lng = position.coords.longitude;
          const pointBak = new BMap.Point(lng, lat);
          const convertor = new BMap.Convertor();
          convertor.translate([pointBak], 1, 5,function(resPoint) {
            if(resPoint && resPoint.points && resPoint.points.length>0){
              lng = resPoint.points[0].lng;
              lat = resPoint.points[0].lat;
            }
            const point = new BMap.Point(lng, lat);
            const geo = new BMap.Geocoder();
            that.form.latitude = point.lat;
            that.form.longitude = point.lng;
            that.center.lng = point.lng;
            that.center.lat = point.lat;
            geo.getLocation(point, (res) => {
              console.log(res)
              that.clockinAddr = res.address;
              that.form.clockinAddr = res.address;
            });
          });
        });
      },
      submitForm(){
          let queryParams = {
            deptId: this.form.deptId,
            caseId: this.$route.query.id,   // 案件ID
            relationType: this.form.caseProgress,  // 案件所在阶段（2:勘察 3:立案 4:取证 5:处理 6:裁决 7:执行）
            clockinAddr: this.form.clockinAddr,  // 打卡地址（中文汉字地址）
            clockinDate: this.format(new Date(),'yyyy-MM-dd'),  // 打卡日期（仅日期，例如：2022-09-29 ）
            clockinTime: this.format(new Date(),'HH:mm'),  // 打卡时间 （仅日期，例如：11:19）
            clockinUser: this.clockin_user,  // 打卡账号（获取当前登录执法人员用户的账号，一般是手机号账号）
            attachement: this.openPic2.join(','),  // 打卡上传附件(附件的路径字符串，多个附件路径之前通过英文逗号分隔)
            latitude: this.form.latitude,  // 打卡纬度（定位坐标纬度）
            longitude: this.form.longitude,  // 打卡经度（定位坐标经度）
            remark:this.remark
          };
          console.log(queryParams)
          addClockin(queryParams).then(response => {
            if (response.code == 200){
              this.$toast.success('打卡成功');
            }
          })
      }
      // showPosition(position){
      //   console.log("我当前经度为"+position.coords.latitude+",纬度为"+position.coords.longitude+"的地方哦")
      // },
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 0;
    height: 100vh;
    overflow: hidden;
  }
  .bz{
    padding-bottom: 15PX;
    /deep/ .van-cell{
      padding: 2px 8px;
      border: 1px solid #C9C9C9;
      border-radius: 8px;
    }
  }
  .header_main{
    height: 116px;
    background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 36px;
    line-height: 116px;
    text-align: center;
    color: #fff;
    z-index: 999;
    .return_btn{
      width: 24px;
      height: 43.2px;
      background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
      background-size: 20px 36px;
      position: absolute;
      left: 38px;
      top: 36px;
    }
    .add_btn{
      width: 56.4px;
      height: 40.8px;
      background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
      background-size: 47px 34px;
      position: absolute;
      right: 38px;
      top: 36px;
    }
  }
  .top_box{
    background: url('../../../../static/images/lawEnforcement/icon/task_icon_03.png') no-repeat 97% 10%;
    padding: 10PX 0;
    /*background-size: 100% 100%;*/
    /deep/ .van-cell{
      background: none;
    }
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 10PX;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .file_box{
    display: flex;
    align-items: center;
    font-size: 0.35rem;
    padding: 0.266667rem 0;
    .left_box{
      background: #C9C9C9;
      color: #ffffff;
      width: 27PX;
      height: 27PX;
      line-height: 27PX;
      text-align: center;
      border-radius: 100%;
    }
    .center_box{
      padding: 0rem 0.426667rem;
      .time{
        font-size: 0.5rem;
        span{
          font-size: 0.35rem;
          color: #878787;
        }
      }
      .dress{
        color: #B4B0B0;
        background: url('../../../../static/images/lawEnforcement/icon/task_icon_01.png') no-repeat left center;
        padding-left: 14PX;
      }
    }
    .file_box_btn{
      text-align: center;
      color: #1CB8B1;
      margin-left: auto;
    }
  }
  .now_dress{
    font-size: 0.35rem;
    background: url('../../../../static/images/lawEnforcement/icon/task_icon_02.png') no-repeat left center;
    padding-left: 20PX;
    line-height: 35PX;
  }
  .submitButton{
    width: 25vw;
    background-image: linear-gradient(to right, #2E79E9 , #77A6EF);
    text-align: center;
    color: #ffffff;
    height: 25vw;
    line-height: 70px;
    border-radius: 100%;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    p{
      font-size: 0.4rem;
      line-height: 1;
      margin-top: 3vw;
    }
    .datetime{
      margin-top: 6vw;
      /*font-weight: bold;*/
      font-size: 0.6rem;
    }
  }
</style>