eta_front/src/views/positionAnalysis_manage/components/indexContent.vue

<template>
    <div class="index-content-wrap">
        <div class="top-box">
            <span style="margin-right:20px">{{num}}{{$t('ToolBox.PositionAnalysis.variety')}}</span>
            <span>{{time}}</span>
        </div>
        <div class="list-wrap">
            <div class="item" v-for="item in clist" :key="item.ClassifyName">
                <div class="label">{{item.ClassifyName}}</div>
                <div style="margin-top:20px;">
                    <div 
                        class="opt" :class="{'active':$route.query.classify_type===_item.ClassifyType}"
                        v-for="_item in item.Items" 
                        :key="_item.ClassifyType"
                        @click="goDetail(_item,item)"
                    >{{_item.ClassifyType}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    num:Number,
    time:String,
    exchange:String,
    now:String,
    list:null,
    isHistory:Boolean
  },
  computed: {
    clist() {
      if(this.isHistory){
          /* console.log('看历史'); */
          return this.list
      }

      const now=this.$moment(this.now).format('YYMM')//当前时间
      const arr=this.list?JSON.parse(JSON.stringify(this.list)):[]
      let resArr=[]
      if(this.exchange!='郑商所'){
          resArr=arr.map(item=>{
              item.Items=item.Items.filter(_item=>{
                  const t=_item.ClassifyType.substr(-4)
                  
                  //15号之后过滤非当月合约
				  return Number(this.now.substr(-2)) <= 15 ? Number(t)>=now : Number(t)>now;
              })
              return item
          })
      }else{
          resArr=arr.map(item=>{
              item.Items=item.Items.filter(_item=>{
                  // 如果合约编号没有含日期 肯定是少于4位的 因为至少为一个字母加三位数的日期
                  if(_item.ClassifyType.length<4) return true
                  const t=2+_item.ClassifyType.substr(-3)
                  
                  return Number(this.now.substr(-2)) <= 15 ? Number(t)>=now : Number(t)>now;
              })
              return item
          })
      }

      return resArr
    }
  },
  data() {
    return {
    }
  },

  methods: {
    goDetail(_item,item){
      this.$router.push({
          path:"/positionAnalysisDetail",
          query:{
              classify_name:item.ClassifyName,
              classify_type:_item.ClassifyType,
              exchange:this.exchange,
              isHistory:this.isHistory
          }
      })      
    }
  },

  mounted() {

  }
}

</script>

<style lang="scss" scoped>
@import '~@/styles/theme-vars.scss';
.index-content-wrap{
    display: flex;
    flex-direction: column;
    .top-box{
        background: #e6eefb;
        padding: 15px 30px;
        span{
            display: inline-block;
        }
    }
    .list-wrap{
        padding: 30px;
        height: 958px;
        box-sizing: border-box;
        overflow-y: auto;
        .item{
            margin-bottom: 30px;
            /* display: flex; */

            .label{
                color: #666;
                width: 100px;
                padding-top: 10px;
                font-size: 14px;
            }
            .opt{
                padding: 6px 10px;
                min-width: 100px;
                text-align: center;
                display: inline-block;
                margin-right: 20px;
                margin-bottom: 20px;
                background: #e6eefb;
                border: 1px solid $theme-color;
                border-radius: 4px;
                cursor: pointer;
                &:hover,&.active{
                    background-color: #0052D9;
                    color: #FFFFFF;
                }
            }
        }
    }
}
</style>