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

<template>
  <div>
    <div>
      <div class="search">
        <a-input-search
          v-info.trim="queryParam.sampleName"
          allowClear
          enter-button
          size="large"
          style="width:500px"
          placeholder="请输入设备名称"
        >
          <my-icon slot="addonBefore" :style="{ padding:'5px' }" type="icon-shaixuan" @click="drawerVisible = true"/>
        </a-input-search>
        <a-drawer
          title="筛选"
          placement="top"
          :closable="false"
          :visible="drawerVisible"
          @close="drawerClose"
        >
          <a-form layout="inline">
            <a-row :gutter="20">
              <a-col :xxl="8" :md="12" :sm="24">
                <a-form-item label="样品名称">
                  <a-input v-model.trim="queryParam.sampleName" placeholder="请输入样品名称"/>
                </a-form-item>
              </a-col>
              <a-col :xxl="8" :md="12" :sm="24">
                <a-form-item label="批次号">
                  <a-input v-model.trim="queryParam.batchNo" placeholder="请输入批次号"/>
                </a-form-item>
              </a-col>

            </a-row>
          </a-form>
          <div
            :style="{
              position: 'absolute',
              right: 0,
              bottom: 0,
              width: '100%',
              padding: '10px 16px',
              textAlign: 'center',
              zIndex: 1,
            }">
            <a-button type="primary" size="large" @click="getInfo">查询</a-button>
            <a-button style="margin-left: 88px" size="large" @click="queryParam={}">重置</a-button>
          </div>
        </a-drawer>
      </div>
      <a-row :gutter="40">
        <a-col :span="6">
          <div class="">
            <div style=" overflow: auto;height: 350px;">
              <div
                class="one_title_option"
                v-for="position in sbPositionData"
                :key="position.id"
                @click="selectCountByPosition(position)"
                v-show="position.type === 1"
                :class="parentId==position.id?'opt_one_title_option':''">
                <div><my-icon :type="item==1?'icon-lianyouchangqu-white':'icon-lianyouchangqu-copy'" style="font-size:80px; color:#fff;margin-right: 30px;"/></div>
                <div>
                  <div>{{ position.name }}</div>
                  <div>{{ position.num }}台，总{{ position.childNum }}台</div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="18" class="gutter-box">
          <a-row :gutter="[20,20]">
            <a-col :span="6" v-for="position in sbPositionData" v-show="position.type === 2 && position.parentId === parentId" :key="position.id" @click="selectCountByUseTypeGroup(position)">
              <div class="gutter-btn gutter-color " :class="code==position.code?'opt_option':''">
                <div style="font-size:32px">{{ position.name }}</div>
                <div style="font-size:16px">3楼</div>
                <div style="font-size:28px ;color:#3462FD">{{ position.num }}台</div>
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <div>
        <div class="main gutter-color">
          <!-- <div class="title">报修数据</div> -->
          <div>
            <a-descriptions :column="6" bordered>
              <a-descriptions-item v-for="item in typeData" :key="item.id" :label="BaseTool.Object.getField(useTypeMap,item.useType)">{{ item.num }}台</a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </div>
      <div class="btn">
      </div>
    </div>
  </div>
</template>
<script>

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

export default {
  data () {
    return {
      value: 1,
      drawerVisible: false,
      queryParam: {},
      radioStyle: {
        display: 'flex',
        // flexDirection: 'column',
        alignItems: 'center',
        height: '60px',
        fontSize: '25px',
        lineHeight: '60px'
      },
      confirmLoading: false,
      modalTitle: null,
      configMap: {},
      parentId: null,
      code: null,
      sbPositionData: [],
      useTypeMap: {},
      typeData: [],
      factoryStr: null,
      form: this.$form.createForm(this),
      visible: true,
      user: this.$store.getters.userInfo
    }
  },
  created () {
    // 下拉框map
    this.useTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SB_USE_TYPE)
    selectCountByPositionGroup().then(res => {
      this.sbPositionData = res.data
      this.selectCountByPosition(res.data[0])
    })
  },
  methods: {
    drawerClose () {
      this.drawerVisible = false
    },
    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 = []
    },
    selectCountByUseTypeGroup (position) {
      this.code = position.code
      selectCountByUseTypeGroup(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>
  .search{
    width: 100%;
background: #fff;
text-align: center;
padding:10px;
margin-bottom: 20px;
  }
.gutter-box{
  height: 350px;
  overflow: auto;
}
.gutter-color{
  background: #fff;
  border: 1px solid #DDDDDD;
}

.gutter-btn{
  height: 165px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color:#333;
  &:hover{
    cursor: pointer;
  }
}
.act{
  color:#3462FD;
}
.main{
 margin-top:30px;
}
.title{
 font-size: 28px;
 font-family: PingFang SC;
 font-weight: 500;
 color: #3462FD;
 padding:10px 42px;
 border-bottom: 1px solid #DDDDDD;
}
.btn{
   position: fixed;
   bottom: 50px;
   width: 100%;
    display: flex;
    justify-content: center;
}
.center{
 display: flex;
 justify-content: center;
 align-items: center;
}
.opt_option{
    background: linear-gradient(-3deg, #cce2f0 0%, #99D1F6 100%);
    color:#fff;
}
.one_title_option{
    background:#fff;
    display: flex;
    // width: 100%;
    // justify-content: space-between;
    align-items: center;
    margin-bottom:10px;
    font-size: 25px;
    font-family: PingFang SC;
    color: #333333;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #C0BEBE;
    padding:17px ;
  }
   .opt_one_title_option{
    background: linear-gradient(-3deg, #99D1F6 0%, #9196F3 100%);
    color:#fff;
   }
::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
</style>