baoshi-swms-app-web/src/views/outbound/picking/list/index.vue

<template>
  <div class="container">
    <van-nav-bar
      title="拣货任务"
      left-arrow
      fixed
      placeholder
      @click-left="goBack"
    >
      <template #left>
        <van-icon name="arrow-left" size="25"  />
        <div style="color: #fff" >返回</div>
      </template>
      <template #right>
        <div style="color: #fff" @click="onSelectMode({key:'picking'})">开始作业</div>
        <van-icon name="list-switch" size="25"   @click="onClickRight" />
      </template>
    </van-nav-bar>
<!--    <van-pull-refresh v-model="loading" @refresh="onRefresh" style="min-height: 93.1vh;">-->
     <div v-if="locationList.length>0">
      <div class="code">
        <div class="code-title">
          <div>{{ taskItem.length>0?pickingNo:'无效任务' }}</div>
          <div class="code-tips"><van-notice-bar :background="'none'" :speed="50" :text="tips()" /></div>
          <div class="code-count"><span>{{ quantity }}</span>/{{ allQuantity }}</div>
        </div>
        <van-field class="code-input"
                   v-model="containerNo"
                   readonly
                   @click="onContainerNo(containerNo===''?2:scanType)"
                   placeholder="拣货容器号" >
          <template #button>
            <van-button size="mini" type="primary" v-if="containerNo===''" plain  @click="onContainerNo(2)" >设置拣货容器</van-button>
            <van-button size="mini" type="primary" v-else plain  @click="onContainerNo(scanType)" >更换拣货容器</van-button>
          </template>
        </van-field>
      </div>
      <van-row  class="list">
        <van-col span="8">
          <div class="left">
            <div class="item"  ref="itemRefs" :class="index==activeIndex?'active':allPicking(location)"
                 v-for="(location,index) in locationList"
                 :key="index"
                 @click="onLocation(index)">
              <span>{{ location.location }}</span><span class="recommend" v-if="nextLocation==location.location && allPicking(location)!=='allActive'" >推荐</span>
            </div>
          </div>
        </van-col>
        <van-col span="16">
          <div class="right">
            <div class="right-list"  v-for="(item,index) in locationList[activeIndex].list"
                 :class="activeClass(item)">
              <div>{{ ownerMap[item.owner] || item.owner }}</div>
              <div class="content" @click="onLotAtt(item)" >
                <div class="c-left">
                  <div class="c-left-count">{{ item.expectedQuantity }}</div>
<!--                  <div class="c-left-tips">数量</div>-->
                </div>
                <div class="c-right">
                  <div style="font-weight: bold;">{{ item.barcode }}</div>
                  <div>{{ item.name }}</div>
                </div>
                <div style="width: 10px">
                  <van-icon name="arrow" size="20" color="#666" />
                </div>
              </div>
              <van-field class="input" ref="scanCountRef" label-width="50px" v-model="item.count" type="number" :min="1"
                         :max="item.expectedQuantity"
                         @keydown.enter="onCount(item,0)"
                         label="实拣数" placeholder="请输实拣数量"
                          >
                <template #button>
                  <van-button  v-if="item.operationTime==null && item.count==0"   size="mini" type="primary"  plain  @click="jump(item)"  :loading="jumpLoading"  loading-text="加载中...">跳过</van-button>
                </template>
              </van-field>
              <WaveInfo :binds="item.binds" />
            </div>
          </div>
        </van-col>
      </van-row>
     </div>
      <div v-if="locationList.length==0" >
        <van-pull-refresh v-model="loading" @refresh="onRefresh" style="min-height: 93.1vh;">
          <van-empty
            image-size="100"
            description="暂无拣货数据"
          />
        </van-pull-refresh>
      </div>
<!--    </van-pull-refresh>-->
    <van-action-sheet
      v-model:show="modeTrueFalseBy"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelectMode"
    />
    <!--    拣货容器号-->
    <container-no-input ref="containerNoInputRef" @setContainer="setContainer" :selectTask="selectTask"  />
    <!--    拣货任务号-->
    <picking-no-input  ref="pickingNoInputRef" @loadData="loadData" />
    <input-barcode ref="inputBarcodeRef" @setBarcode="_handlerScan" />
    <van-floating-bubble v-if="locationList.length>0"  :gap="50" axis="xy" magnetic="x"  @click="onContainerNo(containerNo===''?2:scanType)">容器</van-floating-bubble>
    <lot-att ref="lotAttRef" />
    <barcode-combine ref="barcodeCombineRef" @setCombine="setCombine" :container="containerNo" :matched-sku="matchedSku" />
  </div>
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { showConfirmDialog, showDialog, showFailToast, showNotify, showToast } from 'vant'
import { fetchPickingData, getPickingTask } from '@/views/outbound/picking/list/hooks/list'
import { getOwnerList } from '@/hooks/basic'
import { useRouter,useRoute } from 'vue-router'
import { getListCombineSku, removePickingTask, setPickingDetail } from '@/api/picking'
const router = useRouter()
const route = useRoute()
const store = useStore()
const basic = basicStore()
import { useStore } from '@/store/modules/user'
import { goBack, getHeader, playVoicePickNum, scanError, scanSuccess, androidFocus } from '@/utils/android'
import { closeListener, openListener, scanInit } from '@/utils/keydownListener'
import BarcodeCombine from '@/views/outbound/picking/components/BarcodeCombine.vue'
const PickingNoInput = defineAsyncComponent(() => import('@/views/outbound/picking/components/PickingNoInput.vue'))
const ContainerNoInput = defineAsyncComponent(() => import('@/views/outbound/picking/components/ContainerNoInput.vue'))
const InputBarcode = defineAsyncComponent(() => import('@/views/outbound/picking/components/InputBarcode.vue'))
const LotAtt = defineAsyncComponent(() => import('@/views/outbound/picking/components/LotAtt.vue'))
import { barcodeCombine } from '@/views/outbound/picking/list/hooks/barcodeCombine'
import { formatDateTime } from '@/utils/date'
import { isLot } from '@/views/outbound/picking/list/hooks/lotNum'
import { barcodeToUpperCase, toMap } from '@/utils/dataType'
import { containerDef } from '@/views/outbound/picking/list/hooks/containerDef'
import { getCarrierList } from '@/hooks/basic/carrier'
import { basicStore } from '@/store/modules/basic'
import { closeLoading, showLoading } from '@/utils/loading'
import WaveInfo from '@/views/outbound/picking/components/WaveInfo.vue'
onUnmounted(() => {
  closeListener()
})
try {
  getHeader()
}catch (error) {
  router.push('/login')
}
const warehouse = store.warehouse
const containerNo = ref('')
//容器号ref
const scanCountRef = ref(null)
onMounted(() => {
  openListener()
  setTimeout(() => {
    scanInit(_handlerScan)
  },300)
})
const pickingNo=ref('')
//拣货容器号
const containerNoTrueFalseBy=ref(false)
// 操作面板
const modeTrueFalseBy=ref(false)
// 获取货主
const { ownerMap, getOwnerData } = getOwnerList()
// 获取货主
const {carrierMap, getCarrierData } = getCarrierList()

let taskMap = ref({})
//组合后库位
let locationList = ref([])
//默认第一条数据激活
let activeIndex = ref(0)
//扫描类型
const scanType = ref(1)
//已经拣货任务
const selectTask=ref([])

const scanBarcode=ref('')
//上一个条码
const preBarcode=ref('')

const taskItem=ref([])
//匹配组合商品数据
const matchedSku=ref([])
// 切换容器号
const containerNoInputRef=ref(null)
const onContainerNo=(type)=>{
  setTimeout(()=>{
    containerNoInputRef.value?.show(containerNo.value,type)
  },300)
}
const allQuantity=ref(0)
//加载数据
const loadData =  async (pickingCode,type) => {
  pickingNo.value=pickingCode
  //获取第一个拣货单号
  const { taskList,expectedQuantity }=await getPickingTask(warehouse,pickingCode)
  if(taskList.value.length==0){
    return
  }
  result()
  allQuantity.value=expectedQuantity.value
  taskItem.value=taskList.value
  // 对数组进行分组
  taskMap.value = {}
  taskItem.value.forEach(item => {
    if(item.operationTime){
      item.count=item.quantity
    }else{
      item.count=''
    }
    const { location } = item
    // 使用对象的简写形式初始化分组
    if (!taskMap.value[location]) {
      taskMap.value[location] = { location, list: [],scanLocation:'',scanBarcode:'' }
    }
    //将有操作时间的放到后边
    if (item.operationTime) {
      taskMap.value[location].list.push(item);
    } else {
      taskMap.value[location].list.unshift(item);
    }
  })
  locationList.value = Object.values(taskMap.value)
  // 将已拣货的数据放到一个数组
  selectTask.value = taskItem.value
    .filter(item => item.operationTime!=null)  // 过滤出有 productionDate 且不为空的对象
    .map(item => {
      return {
        barcode: item.barcode,
        location: item.location,
        lotNum:item.lotNum,
        line:item.line,
        operationTime: item.operationTime,
        container: item.container,
        quantity:item.quantity
      };
    });
  if(selectTask.value.length>0){
    getDefContainer(selectTask.value)
  }else {
    if(type!=1) return
    scanBarcode.value=''
    containerNo.value=''
    androidFocus()
    onContainerNo(2)
  }
}
// 设置拣货容器
const setContainer=(code,type)=>{
  containerNo.value=code
  if(type==4){
    onScan(3)
  }else {
    onScan(type)
  }
}
// 获取拣货任务号
const getPickingCode= async()=>{
  const { pickingCode } = await fetchPickingData(warehouse)
  if(pickingCode!=null){
    pickingNo.value=pickingCode
    await loadData(pickingCode,1)
  }else {
    await router.push('/picking-task')
  }
}
if(route.query.code){
  loadData(route.query.code,1)
}else {
  getPickingCode()
}
if(Object.keys(basic.carrierMap).length == 0){
  getCarrierData()
}
getOwnerData()
// 计算已成功数量
const quantity = computed(() => {
  return selectTask.value.reduce((sum, item) => {
    return Number(sum) + (Number(item.quantity) ?? 0)
  }, 0)
})

//如果有执行过的数据，将时间最近的容器号放到容器里
const getDefContainer=(selectTask)=>{
 const closestItem=containerDef(selectTask)
  containerNo.value=closestItem.container
  onScan(2)
}
const messageTips=ref('')
const tips = () => {
  if (scanType.value==1) {
    return '请扫描容器号'
  }else if(scanType.value==2){
    return '请扫描下一拣货库位'
  }else if(scanType.value==3){
    return '请扫描商品条码'
  }else if(scanType.value==4){
    return messageTips.value
  }
}
//切换不同库位
const onLocation = (index) => {
  activeIndex.value = index
    nextTick(() => {
      onScan(2)
    })
}
const itemRefs = ref([]);
// 监听 activeIndex 变化，滚动到指定位置
watch(activeIndex, (newIndex) => {
  nextTick(() => {
    const item = itemRefs.value[newIndex];
    if (item) {
      item.scrollIntoView({
        behavior: 'smooth',  // 平滑滚动
        block: 'start',      // 滚动到顶部 nearest center
      });
    }
  });
});

//设置扫描类型 1容器、2库位、3条码
const onScan = (type) => {
  nextTick(() => {
    scanType.value = type
  })
}
const barcodeCombineRef=ref(null)
//扫描条码监听
const _handlerScan=(code)=> {
  if(scanType.value===1){
    if(code.split('-')[0]!=='JH'){
       showToast({duration:5000,message:'请使用标准拣货容器'})
      return
    }
    containerNo.value=code
    onScan(2)
    return
  }
  scanBarcode.value=code
  const modelLocative=locationList.value[activeIndex.value]
  if(scanType.value===2){

    if(containerNo.value == '') {
      showToast({duration:5000,message:'请先扫描容器号'})
      return
    }
    if(taskMap.value[code.toUpperCase()]){
      nextLocation.value=''
      activeIndex.value = locationList.value.findIndex(item => item.location === barcodeToUpperCase(code))
      onScan(3)
      scanSuccess()
    }else{
      scanError()
      showToast({duration:5000,message:'无效库位！请检查扫描库位'})
    }
  }
  if(scanType.value===3 || scanType.value===4 ){
    preBarcode.value=scanBarcode.value
    // 将当前库位下的商品条码拿出对比
    const barcode = [...new Set(
      modelLocative.list
        .flatMap(item => [item.barcode, item.barcodeAs])
        .filter(value => value !== null )
    )]
    if (barcode.some(item => barcodeToUpperCase(item) ===  barcodeToUpperCase(code))) {
        //将匹配到的条码放到第一个
        modelLocative.list=modelLocative.list.reduce((list, item) => {
          if (barcodeToUpperCase(item.barcode) === barcodeToUpperCase(code)) {
            list.unshift(item);
          } else {
            list.push(item);
          }
          return list;
        }, [])
        const activeBarcode=modelLocative.list[0]
        playVoicePickNum(activeBarcode.expectedQuantity)
        if(activeBarcode.operationTime){
          showConfirmDialog({
            title: '温馨提示',
            message:
              `当前条码《${activeBarcode.barcode}》已经拣货成功是否确认重复提交？`,
          })
            .then(() => {
              activeBarcode.count=activeBarcode.expectedQuantity
              onScan(4)
              setTimeout(()=>{
                //匹配到条码扣减库存
                onCount(activeBarcode,0)
              },200)
            }).catch(()=>{
              const allOperationTimeExist = modelLocative.list.every(({ operationTime }) => operationTime);
              if(allOperationTimeExist){
                onScan(2)
              }
            })
        }else {
          activeBarcode.count=activeBarcode.expectedQuantity
          onScan(4)
          setTimeout(()=>{
            //匹配到条码扣减库存
            onCount(activeBarcode,0)
          },200)
        }
    }else{
      //查询组合条码
      matchedSku.value=[]
      getListCombineSku({combineSku:code, workEnvironment:'picking'}).then(res=>{
        if(res.data.length>0){
          const combineSkuMap=toMap(res.data,'barcode')
          const matchedSkuList=barcodeCombine(modelLocative.list,combineSkuMap)
          if(matchedSkuList.length>0){
            if(matchedSkuList.length==res.data.length){
              matchedSku.value=matchedSkuList
              barcodeCombineRef.value.show()
            }else{
              scanError()
              showDialog({
                title:'温馨提示',
                message:'组合商品与拣货任务不匹配，请检查组合商品配置！'
              })
            }
          }else {
            scanError()
            showDialog({
              title:'温馨提示',
              message:'组合商品与拣货任务不匹配，请检查组合商品配置！'
            })
          }
        }else {
          scanError()
          showToast({duration:5000,message:'无效条码！请检查扫描条码'})
        }
      })
    }
  }
}

// 进行条件验证
const validate = (data,type) => {
  if (containerNo.value === '') {
    showToast({duration:5000,message:'请先扫描拣货容器'})
    return false;
  }
  if (scanType.value === 2 && type!==1) {
    showToast({duration:5000,message:'请先扫描库位'})
    return false;
  }
  if(data.quantity!==0 && scanType.value === 3){
    showToast({duration:5000,message:'请先扫描条码'})
    return false;
  }
  if (data.count < 0) {
    messageTips.value='拣货数量无效'
    showToast({duration:5000,message:'拣货数量无效'})
    return false;
  }
  if (data.count > data.expectedQuantity) {
    showToast({duration:5000,message:'拣货数量不能大于所需数量'})
    messageTips.value='拣货数量不能大于所需数量'
    return false;
  }
  if (isLot(selectTask.value, [data])) {
    messageTips.value='当前容器下已有其他批次产品,请更换容器号'
    scanBarcode.value=''
    showToast({duration:5000,message:'当前容器下已有其他批次产品,请更换容器号'})
    return false;
  }
  return true;
}
//输入数量
const jumpLoading=ref(false);
const onCount=(item,type)=>{
  const data=JSON.parse(JSON.stringify(item))
  data.operationTime=formatDateTime(new Date())
  data.container=containerNo.value
  const params=[data]
  if(type==0){
    data.quantity=data.count
  }else {
    data.quantity=0
  }
  // 验证数据的有效性
  if (!validate(data,type)) return;
  if(type!==0){
    jumpLoading.value=true
  }
  _setPickingDetail(params,type)
}
//组合商品
const setCombine=(data)=>{
  if (isLot(selectTask.value, data)) {
    messageTips.value='当前容器下已有其他批次产品,请更换容器号'
    scanBarcode.value=''
    showToast({duration:5000,message:'当前容器下已有其他批次产品,请更换容器号'})
    return false;
  }
  _setPickingDetail(data,2)
}
const nextLocation=ref()
const _setPickingDetail=(params,type)=>{
  const activeList=locationList.value[activeIndex.value]
  //扣减库存
  showLoading()
  setPickingDetail(params).then((res)=>{
    closeLoading()
    jumpLoading.value = false;
    if (res.data == false) {
      showDialog({
        title: '温馨提示',
        message: '该库位条码存在取消单，任务已被刷新，请将当前货品归还原库位'
      }).then(() => {
        loadData(pickingNo.value,1);
      });
      return;
    }
    //任务行号相同说明重复执行
    if (!selectTask.value.find(task => params.some(param => task.line === param.line))) {
      // 遍历 params 数组并处理每个元素
      params.forEach((param) => {
        const task = {
          barcode: param.barcode,
          location: param.location,
          lotNum: param.lotNum,
          line: param.line,
          operationTime: param.operationTime,  // 使用每个对象的 operationTime
          container: param.container,
          quantity: param.quantity
        };
        selectTask.value.push(task);
      })
    }
    // 更新 locationList 中的 operationTime
    params.forEach((param, index) => {
      if (activeList.list[index]) {
        activeList.list[index].operationTime = param.operationTime;
        activeList.list[index].count = param.quantity;
        activeList.list[index].quantity = param.quantity;
      }
    });
    //验证库位里的所有商品是否都存在拣货时间
    const { list } = activeList
    const allOperationTimeExist = list.every(({ operationTime }) => operationTime); // 检查所有商品是否都有拣货时间
    if (!allOperationTimeExist) {
      onScan(3); // 如果有商品缺少拣货时间，直接调用 onScan(3)
    } else {
      nextLocation.value=''
      if(activeIndex.value<locationList.value.length-1){
        nextLocation.value=locationList.value[activeIndex.value+1].location
        showNotify({
          message: `当前库位商品已全部拣完，请扫描下一个库位${locationList.value[activeIndex.value+1].location}`,
          duration: 5000,
          type:'warning'
        });
      }
      if(type==2){
        const numberExist = list.every(({ expectedQuantity, quantity }) => expectedQuantity == quantity && quantity!=0); // 检查数量是否匹配
        onScan(numberExist ? 2 : 3)
      }else {
        onScan(2)
      }
    }
    //对有操作时间的进行排序放到下边
    list.sort((a, b) => {
      if (a.operationTime && !b.operationTime) {
        return 1;
      }
      if (!a.operationTime && b.operationTime) {
        return -1;
      }
      return 0;
    });
    if(type==1){
      locationList.value[activeIndex.value].list.forEach(items=>{
        if(items.line==params[0].line){
          items.count=0
        }
      })
    }
    scanSuccess()
    if(selectTask.value.length===taskItem.value.length){
      showConfirmDialog({
        title:'温馨提示',
        message:'任务已经完成,是否回到选择任务界面'
      }).then(() => {
        result()
        getPickingCode()
      }).catch(() => {
        loadData(pickingNo.value,1)
      })
    }
  }).catch((err)=> {
    closeLoading()
    scanBarcode.value = ''
    onScan(4)
    messageTips.value = err.message
    scanError()
    if(err.code=='ERR_NETWORK'){
      messageTips.value = '网络开小车了，请稍后重试！'
    }if(err.code=='ECONNABORTED'){
      messageTips.value = '请求超时，请稍后重试！'
    }else {
      showNotify({
        message: err.message,
        duration: 5000,
      });
      // showFailToast({duration:5000,message:err.message})
    }
    jumpLoading.value=false
  })
}
const result=()=>{
  scanBarcode.value=''
  containerNo.value=''
  selectTask.value=[]
  activeIndex.value=0
  scanType.value=1
}
// 跳过拣货
const jump=(item)=>{
  item.quantity=0
  if (!validate(item,1)) return;
  showConfirmDialog({
    title:'温馨提示',
    message:'您正在进行缺货跳过操作，是否继续'
  }).then(() => {
    onCount(item,1)
  }).catch(() => {

  })

}

//切换模式
const actions = [
  { name: '取消任务',key:'removeTask' },
  { name: '获取任务',key:'task' },
  // { name: '任务号作业' ,key:'picking'},
  { name: '检索条码' ,key:'inputBarcode'},
];
const onClickRight = () => {
  modeTrueFalseBy.value=true
}
const pickingNoInputRef=ref(null)
const inputBarcodeRef=ref(null)
const onSelectMode= async (value) => {
  if(value.key=='task'){
   await router.push({name:'PickingTask',query:{type:'picking'}})
  }else if(value.key=='picking'){
    pickingNoInputRef.value?.show()
  }else if(value.key=='inputBarcode'){
    inputBarcodeRef.value?.show()
  }else if(value.key=='removeTask'){
    if(pickingNo.value){
      if(selectTask.value.length>0){
        showDialog({
          title: '温馨提示',
          message: '当前任务已有拣出货品不可还原任务！！',
        }).then(() => {});
      return
      }
      showDialog({
        title: '温馨提示',
        message: '您正在进行还原任务操作，是否继续？',
      }).then(() => {
        showLoading()
        removePickingTask({code:pickingNo.value}).then(res=>{
           router.push({name:'PickingTask'})
          showToast({duration:3000,message:'当前任务已取消正在跳转到获取任务页面，请稍后~'})
          // closeLoading()
        }).catch(() => {
          closeLoading()
        })
      });

    }
  }
}
const lotAttRef=ref(null)
const onLotAtt=(item)=>{
  lotAttRef.value?.show(item)

}

//库位商品拣货完成高亮 allActive
const allPicking = (location) => {
  const all = location.list.every(item => item.operationTime);
  if(all){
    return 'allActive'
  }else if(nextLocation.value==location.location){
    return 'nextActive'
  }
}
//库位商品高亮
const activeClass=(item)=>{
  const modelLocative = locationList.value[activeIndex.value]
  if (
    modelLocative.location === item.location &&
    (
      barcodeToUpperCase(item.barcode) === barcodeToUpperCase(scanBarcode.value)||
      (item.barcodeAs=== barcodeToUpperCase(scanBarcode.value) && scanBarcode.value !== '')
    ) &&
    item.operationTime === null
  ) {
    return 'active'
  }
  else if(item.operationTime!=null){
    return 'allActive'
  }

}

//刷新页面
const loading = ref(false)
const onRefresh = () => {
  setTimeout(() => {
    loadData(pickingNo.value,1)
    showToast('刷新成功')
    loading.value = false
  }, 1000)
}
</script>
<style scoped lang="sass">
.container
  .code
    height: 67px
    padding: 5px 10px
    background: #e9f4ff
    box-sizing: border-box

    .code-title
      display: flex
      justify-content: space-between

      .code-tips
        color: #ed6a0c
        flex: 1

      .code-count
        font-size: 16px
        font-weight: bold

        span
          color: #0077ff

    .code-input
      font-size: 16px
      font-weight: bold
      background: #e9f4ff
      padding: 2px 10px
      border-bottom: 2px solid #0077ff

  .list
    overflow: scroll

    .left
      background: #e9f4ff
      padding: 2px 10px
      height: 80vh
      overflow: scroll
      box-sizing: border-box

      .item
        font-size: 14px
        background: #fff
        padding: 10px 5px
        margin-bottom: 6px
        border-radius: 8px 0 0 8px
        box-sizing: border-box
        word-wrap: break-word
        font-weight: bold
        position: relative
        .recommend
          position: absolute
          right: -10px
          top: 0
          font-size: 11px
          background: #f64e4e
          border-radius: 6px
          padding: 0 3px
      .active
        background: #1989fa
        color: #fff
        position: relative
        right: -10px
      .allActive
        background: #72dc41
        color: #fff
      .nextActive
        background: #ff8d29
        color: #fff

    .right
      height: 80vh
      overflow: scroll
      box-sizing: border-box
      text-align: left
      padding: 2px 0
      background: #fff
      .right-list
        padding: 10px
        margin-bottom: 5px
        border-bottom: 1px solid #D3D3D3
        border-radius: 0 8px 8px 0
        .content
          display: flex
          justify-content: space-between
          align-items: center
          .c-left
            width: 25%
            text-align: center
            position: relative

            .c-left-tips
              position: absolute
              left: 0
              right: 0
              top: 0
              bottom: 0
              color: #D3D3D3
              z-index: -10
              opacity: .7
              font-size: 24px
            .c-left-count
              font-weight: bold
              font-size: 30px
          .c-right
            flex: 0 0 75%
            max-width: 75%
      .right-list:last-child
        border-bottom: none
      .active
        background: #c7e3ff
        opacity: .8
      .allActive
        background: #72dc41
        opacity: .8
      .wave
        padding: 5px

        .wave-item
          display: flex
          justify-content: space-between
          font-size: 12px

      .input
        font-size: 14px
        font-weight: bold
        padding: 5px 10px
        background: none
        border-bottom: 2px solid #1989fa

</style>