hitch-sb-antd/src/views/sb/position/SbPositionNum copy.vue

<template>
  <div v-show="visible" class="main">
    <div>
      <div class="one_title">
        <a-row type="flex" :gutter="[20,20]">
          <a-col :span="6" v-for="position in sbPositionData" :key="position.id" @click="selectCountByPosition(position)" v-show="position.type === 1">
            <div class="one_title_option" :class="parentId==position.id?'opt_one_title_option':''">
              <div><my-icon type="icon-lianyouchangqu-copy" style="font-size:107px;"/></div>
              <div>
                <div> {{ position.name }}</div>
                <div style="color:#296BEF;font-size: 42px;">{{ position.num }}台，总{{ position.childNum }}台</div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <br />
      <div class="two_title">
        <a-row type="flex" :gutter="[20,40]">
          <a-col :span="3" v-for="position in sbPositionData" v-show="position.type === 2 && position.parentId === parentId" :key="position.id" @click="selectCountByPositionGroupBySbType(position)">
            <div class="two_title_option" :class="code==position.code?'opt_two_title_option':''">
              <div> {{ position.name }}</div>
              <div style="color:#296BEF;margin-top: 22px;">{{ position.num }}台</div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="three_title" v-if="typeData.length >0">
        <!-- <div class="title">丙二车间：28台</div> -->
        <a-row type="flex" justify="space-around" :gutter="[40,40]">
          <a-col :span="3" v-for="item in typeData" :key="item.id" >
            <div class="three_title_option" @click="jumpSbInfo(item)">
              <div>{{ item.typeName }}</div>
              <div style="padding:5px;background: #CDDBFA;opacity: 0.56;border-radius: 2px; color:#2C5DC7;margin-top: 10px;">{{ item.num }}台</div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>

import {
  selectCountByPositionGroup,
  selectCountByPositionGroupBySbType
} from '@/api/sb/count'

export default {
  name: 'SbPositionNum',
  components: {
  },
  data () {
    return {
      confirmLoading: false,
      modalTitle: null,
      configMap: {},
      parentId: null,
      code: null,
      sbPositionData: [],
      typeData: [],
      factoryStr: null,
      form: this.$form.createForm(this),
      visible: true,
      user: this.$store.getters.userInfo
    }
  },
  props: {
  },
  created () {
    // 下拉框map
    selectCountByPositionGroup().then(res => {
      this.sbPositionData = res.data
      this.selectCountByPosition(res.data[0])
    })
  },
  methods: {
    base (record) {
      this.visible = true
      // 如果是空标识添加
      if (this.BaseTool.Object.isBlank(record)) {
        this.modalTitle = '添加'
        this.data = []
      }
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      if (this.BaseTool.Object.isNotBlank(values)) {
        this.$emit('ok', values)
      } else {
        this.$emit('ok')
      }
    },
    selectCountByPosition (position) {
      this.parentId = position.id
      this.code = null
      this.typeData = []
    },
    selectCountByPositionGroupBySbType (position) {
      this.code = position.code
      selectCountByPositionGroupBySbType(position).then(res => {
        this.typeData = res.data
      })
    },
    jumpSbInfo (type) {
      const routeUrl = this.$router.resolve({ path: '/sb/info/company', query: { typeId: type.typeId } })
      window.open(routeUrl.href, '_blank')
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  padding:20px;
  // background: #fff;
  .one_title_option{
    background:#fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    cursor: pointer;
    border-radius: 10px;
    padding:17px 50px 17px 17px;
  }
   .opt_one_title_option{
    background: linear-gradient(-3deg, #99D1F6 0%, #9196F3 100%);
    color:#fff;
   }
  .two_title_option{
    background:#fff;
    text-align: center;
    font-size: 26px;
    padding:20px;
    cursor: pointer;
    box-shadow: 1px 14px 29px 0px rgba(138,97,250,0.19);
    border-radius: 10px;
  }
  .opt_two_title_option{
    background: linear-gradient(-3deg, #cce2f0 0%, #99D1F6 100%);
   }
   .three_title{
    margin-top: 50px;
    background: #FFFFFF;
    border: 1px solid #D2D5D9;
    border-radius: 4px;
    font-family: PingFang SC;
    padding: 20px;
    min-height:100vh;
    .title{
      width: 500px;
      font-size: 34px;
      font-weight: bold;
      padding: 10px 0 30px 0;
      color: #2C5DC7;
      border-bottom: 2px solid #2c5dc7;
      margin-bottom: 30px;
    }
    .three_title_option{
      cursor: pointer;
      font-size: 22px;
      font-weight: 500;
      text-align: center;
    }
   }
}
</style>