apt-nl-new/src/pages/modules/taskmanage/CarryPoint.vue

<template>
<div class="main-container">
  <div class="movepoint">
    <div class="con">
      <div class="box0">
        <div class="title">搬运起点</div>
      </div>
      <div class="box1">
        <div class="point-box">
          <div class="point fl" :class="{'statusbg': pkId === e.point_code}" v-for="e in dataList" :key="e.point_code" @click="toRadio(e)">{{e.code_name}}</div>
        </div>
        <!-- <div class="point fl" :class="{'statusbg': pkId === e.point_code}" v-for="e in dataList" :key="e.point_code" @click="toRadio(e)">{{e.code_name}}</div> -->
      </div>
      <div class="box2">
        <div class="btn" @click="toSure">定为目标站点</div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {queryPoint, confirmPoint} from '@/config/getData.js'
export default {
  name: 'MovePoint',
  data () {
    return {
      statusbg: false,
      pkId: '',
      selectObj: {},
      // dataList: []
      dataList: [
        {
          point_code: '1',
          code_name: '18-一线起升电机'
        },
        {
          point_code: '2',
          code_name: 'A-ZD102'
        },
        {
          point_code: '3',
          code_name: 'A-ZD103'
        },
        {
          point_code: '4',
          code_name: 'A-ZD101'
        },
        {
          point_code: '5',
          code_name: 'A-ZD101'
        },
        {
          point_code: '6',
          code_name: 'A-ZD101'
        },
        {
          point_code: '7',
          code_name: 'A-ZD101'
        },
        {
          point_code: '8',
          code_name: 'A-ZD101'
        },
        {
          point_code: '9',
          code_name: 'A-ZD101'
        },
        {
          point_code: '10',
          code_name: 'A-ZD101'
        },
        {
          point_code: '11',
          code_name: 'A-ZD101'
        },
        {
          point_code: '12',
          code_name: 'A-ZD101'
        },
        {
          point_code: '13',
          code_name: 'A-ZD101'
        },
        {
          point_code: '14',
          code_name: 'A-ZD101'
        },
        {
          point_code: '15',
          code_name: 'A-ZD101'
        },
        {
          point_code: '16',
          code_name: 'A-ZD101'
        }
      ]
    }
  },
  created () {
    this.initData()
  },
  methods: {
    // 这个接口需要放到agv上去才行
    async initData () {
      let res = await queryPoint()
      if (res.code === '1') {
        this.dataList = res.result
      } else {
        this.toast(res.desc)
      }
    },
    async confirmPoint () {
      let res = await confirmPoint(this.selectObj.point_code)
      if (res.code === '1') {
        this.toast(res.desc)
        this.selectObj = {}
      } else {
        this.toast(res.desc)
      }
    },
    toRadio (e) {
      this.pkId = this.pkId === e.point_code ? '' : e.point_code
      this.selectObj = e
    },
    toSure () {
      console.log(this.selectObj.point_code, 666)
      if (this.selectObj.point_code) {
        this.confirmPoint()
      }
    },
    toClear () {
      this.selectObj = {}
    }
  }
}
</script>
<style lang="stylus" scoped>
.con
  float left
.box0
  width 1586px
  height 102px
  background center / 100% 100% url(../../../images/new/bg-task-r1.png) no-repeat
  .title
    font-size 36px
    color #F6F9FE
    padding-left 39px
    padding-top 48px
.box1
  width 1592px
  height 819px
  background center / 100% 100% url(../../../images/new/bg-task-r2.png) no-repeat
  padding-top 28px
  padding-left 44px
  .point-box
    width 100%
    height 700px
    .point
      width 248px
      height 134px
      line-height 134px
      color #B4C1D8
      font-size 26px
      text-align center
      margin-right 3px
      margin-bottom 13px
      background center / 100% 100% url(../../../images/new/bg2.png) no-repeat
    .statusbg
      box-sizing border-box
      color #3CC1FF
      background center / 100% 100% url(../../../images/new/bg1.png) no-repeat !important
.box2
  position fixed
  left 935px
  bottom 88px
  .btn
    width 335px
    line-height 91px
    font-size 36px
    text-align center
    color #EFF2FF
    background center / 100% 100% url(../../../images/new/button.png) no-repeat
</style>