web/src/views/dataexport/PreviewData.vue

<template>
  <div class='previewData'>
    <van-tabs v-if="result && result.length > 0" v-model="active" title-active-color='#2cb7ca' color='#2cb7ca'
      line-width='150px' line-height='2px' @click='toggle' sticky :offset-top="offsetTop">
      <van-tab title='标准字段包' name='1'>
        <div class='table-container'>
          <table class='table table-bz' cellspacing='0' cellpadding='0'>
            <thead class='thead'>
              <tr>
                <td>序号</td>
                <td>匹配关键词</td>
                <td>省份</td>
                <td>城市</td>
                <td>公告标题</td>
                <td>公告类别</td>
                <td>发布时间</td>
                <td>采购单位</td>
                <td>中标单位</td>
                <td>中标金额<br>(万元)</td>
                <td>项目名称</td>
                <td>公告内容</td>
                <td>剑鱼标讯地址</td>
              </tr>
            </thead>
            <tbody class="tbody decrypt">
              <tr v-for="(bz, index) in result" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ bz.keyword }}</td>
                <td>{{ bz.area }}</td>
                <td>{{ bz.city }}</td>
                <td>{{ bz.title }}</td>
                <td>{{ bz.subtype }}</td>
                <td>{{ bz.publishtime }}</td>
                <td>{{ bz.buyer }}</td>
                <td>{{ bz.s_winner }}</td>
                <td>{{ moneyFormatForCover(bz.bidamount) }}</td>
                <td>{{ bz.projectname }}</td>
                <td>{{ bz.detail }}</td>
                <td>{{ bz.url }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </van-tab>
      <van-tab title='高级字段包' name='2'>
        <div class='table-container'>
          <table class='table table-gj' cellspacing='0' cellpadding='0'>
            <thead class='thead'>
              <tr>
                <td rowspan='2'>序号</td>
                <td rowspan='2'>匹配关键词</td>
                <td rowspan='2'>省份</td>
                <td rowspan='2'>城市</td>
                <td rowspan='2'>区县</td>
                <td rowspan='2'>公告标题</td>
                <td rowspan='2'>公告类别</td>
                <td rowspan='2'>公告内容</td>
                <td rowspan='2'>发布时间</td>
                <td rowspan='2'>公告地址</td>
                <td rowspan='2'>剑鱼标讯地址</td>
                <td rowspan='2'>项目名称</td>
                <td rowspan='2'>行业</td>
                <td rowspan=2>项目编号</td>
                <td rowspan='2'>项目范围</td>
                <td rowspan='2'>预算金额<br>(万元)</td>
                <td rowspan='2'>中标金额<br>(万元)</td>
                <td rowspan='2'>报名截止日期</td>
                <td rowspan='2'>开标日期</td>
                <td rowspan='2'>投标截止日期</td>
                <td rowspan='2'>合同签订时间</td>
                <td colspan='5'>采购单位信息</td>
                <td rowspan='2'>招标代理机构</td>
                <td colspan='3'>中标单位信息(来源:招标公告网站)</td>
                <td colspan='3'>中标单位信息(来源:国家企业公示网站)</td>
              </tr>
              <tr>
                <td>单位名称</td>
                <td>采购单位类型</td>
                <td>联系人</td>
                <td>联系电话</td>
                <td>单位地址</td>
                <td>单位名称</td>
                <td>联系人</td>
                <td>联系电话</td>
                <td>联系人</td>
                <td>联系电话</td>
                <td>电子邮箱</td>
              </tr>
            </thead>
            <tbody class="tbody decrypt">
              <tr v-for="(gj, iindex) in result" :key="iindex">
                <td>{{ iindex + 1 }}</td>
                <td>{{ gj.keyword }}</td>
                <td>{{ gj.area }}</td>
                <td>{{ gj.city }}</td>
                <td>{{ gj.district }}</td>
                <td>{{ gj.title }}</td>
                <td>{{ gj.subtype }}</td>
                <td>{{ gj.detail }}</td>
                <td>{{ gj.publishtime }}</td>
                <td>{{ gj.href }}</td>
                <td>{{ gj.url }}</td>
                <td>{{ gj.projectname }}</td>
                <td>{{ gj.s_topscopeclass }}</td>
                <td>{{ gj.projectcode }}</td>
                <td>{{ gj.projectscope }}</td>
                <td>{{ moneyFormatForCover(gj.budget) }}</td>
                <td>{{ moneyFormatForCover(gj.bidamount) }}</td>
                <td>{{ gj.signendtime }}</td>
                <td>{{ gj.bidopentime }}</td>
                <td>{{ gj.bidendtime }}</td>
                <td>{{ gj.signaturedate }}</td>
                <td>{{ gj.buyer }}</td>
                <td>{{ gj.buyerclass }}</td>
                <td>{{ textFormatForMosaic(gj.buyerperson) }}</td>
                <td>{{ textFormatForMosaic(gj.buyertel) }}</td>
                <td>{{ gj.buyeraddr }}</td>
                <td>{{ gj.agency }}</td>
                <td class="havemore"><tr v-for="( item ,indexs) in gj.s_winnerlist" ><td :class="{'b-none': indexs+1 === gj.s_winnerlist.length}">{{ item }}</td></tr></td>
                <td>{{ textFormatForMosaic(gj.winnerperson) }}</td>
                <td>{{ textFormatForMosaic(gj.winnertel) }}</td>
                <td class="havemore"><tr v-for="( item ,indexs) in gj.legal_person_list" ><td :class="{'b-none': indexs+1 === gj.legal_person_list.length}">{{ textFormatForMosaic(item) || '-'}}</td></tr></td>
                <td class="havemore"><tr v-for="( item ,indexs) in gj.company_phone_list" ><td :class="{'b-none': indexs+1 === gj.company_phone_list.length}">{{ textFormatForMosaic(item) || '-' }}</td></tr></td>
                <td class="havemore"><tr v-for="( item ,indexs) in gj.company_email_list" ><td :class="{'b-none': indexs+1 === gj.company_email_list.length}">{{ item || '-'}}</td></tr></td>
              </tr>
            </tbody>
          </table>
        </div>
      </van-tab>
    </van-tabs>
    <AppEmpty v-else>
      <div slot="default">{{ emptyText }}</div>
    </AppEmpty>
    <van-overlay :show="showMask" z-index="100">
      <div class="wrapper">
        <span class="loading"></span>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { Tab, Tabs, Overlay } from 'vant'
import { AppEmpty } from '@/ui'
import { getPreview } from '@/api/modules'
export default {
  name: 'previewData',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Overlay.name]: Overlay,
    [AppEmpty.name]: AppEmpty
  },
  data: () => ({
    offsetTop: 0,
    showMask: true,
    active: '1',
    emptyText: '',
    result: []
  }),
  created() {
    if (this.$route.query.type === 'senior') {
      this.active = '2'
      this.getPreviewData(2)
    } else {
      this.active = '1'
      this.getPreviewData(1)
    }
  },
  mounted() {
    this.getStickyOffset()
  },
  methods: {
    getStickyOffset() {
      const header = document.querySelector('.common-app-header')
      if (header) {
        this.offsetTop = header?.clientHeight || 0
      }
    },
    async getPreviewData(type) {
      const params = {
        dataType: type,
        _id: this.$route.params.id
      }
      const { res } = await getPreview(params)
      if (res) {
        this.showMask = false
        if (res.data) {
          let result = res.data
          result.forEach(ele =>{
            if (ele.s_winner){
              ele.s_winnerlist = ele.s_winner.split(',')
            }else{
              ele.s_winnerlist = []
            }
              let company_email_list = []
              let company_phone_list = []
              let legal_person_list = []
            if(ele.winnerMaps && ele.winnerMaps.length > 0){

              ele.s_winnerlist.forEach(a =>{
                company_email_list.push('')
                company_phone_list.push('')
                legal_person_list.push('')
              })
              ele.winnerMaps.forEach(e =>{
                company_email_list[ele.s_winnerlist.indexOf(e.company_name)] = e.company_email
                company_phone_list[ele.s_winnerlist.indexOf(e.company_name)] = e.company_phone
                legal_person_list[ele.s_winnerlist.indexOf(e.company_name)] = e.legal_person
              })
            }else{
              ele.s_winnerlist.forEach(a =>{
                company_email_list.push('')
                company_phone_list.push('')
                legal_person_list.push('')
              })
            }
            ele.company_email_list = company_email_list
            ele.company_phone_list = company_phone_list
            ele.legal_person_list = legal_person_list
          })
          this.result = result
        } else if (res.msg) {
          this.emptyText = '今日已超出预览次数'
        } else {
          this.emptyText = '暂无数据'
        }
      }
    },
    toggle(val) {
      this.showMask = true
      this.getPreviewData(val)
    },
    textFormatForMosaic(text, phone) {
      if (typeof text === 'string' || typeof text === 'number') {
        if (phone) {
          return String(text).replace(/([\w\W]*)([\w\W]{4})$/, '$1****')
        } else {
          return String(text).replace(/^(.)(.*)/, '$1**')
        }
      }
      return text
    },
    moneyFormatForCover(money) {
      if (typeof money === 'string' || typeof money === 'number') {
        return String(money).replace(/(\d)(\.){0,1}(\d)/, '$1$2*')
      }
      return money
    }
  }
}
</script>

<style scoped lang='scss'>
.havemore{
  padding: 0!important;

}
.havemore td{
  border-right: none !important;
  display: flex;
  width: 100%!important;

}
.havemore tr{
  display: flex;
  width: 100%!important;
  background-color: rgba(255, 255, 255, 0) !important;
}
.b-none{
  border-bottom: none !important;
}
.previewData {
  background: #fff;

  .table-container {
    flex: 1;
    width: 100%;
    overflow: scroll;
    border-top: 1px solid transparent;
    background: #fff;

    .table {
      height: 100%;
      overflow-x: scroll;
      position: relative;
      margin-bottom: 10px;
      background: url(@/assets/image/public/sy.png) repeat;

      .thead {
        td {
          padding: 5px;
          height: 35px;
          font-size: 12px;
          border-top: #DCE1E4 1px solid;
          border-right: #DCE1E4 1px solid;
          border-bottom: #DCE1E4 1px solid;
          white-space: nowrap;
          text-align: center;
          background-color: #e9f6ff;
        }
      }

      .tbody {
        td {
          font-size: 10px;
          text-align: center;
          padding: 5px;
          border-right: #DCE1E4 1px solid;
          border-bottom: #DCE1E4 1px solid;
        }
      }
    }

    .table-bz {
      min-width: 2000px;

      .tbody {
        tr:nth-child(odd) {
          background-color: rgba(0, 0, 0, .02);
        }

        td:nth-child(1) {
          width: 2%;
        }

        td:nth-child(2) {
          width: 3%;
        }

        td:nth-child(3) {
          width: 3%;
        }

        td:nth-child(4) {
          width: 10%;
        }

        tr:nth-child(2) td:nth-child(5) {
          width: 4%;
          white-space: nowrap;
        }

        td:nth-child(6) {
          width: 5%;
          white-space: nowrap;
        }

        td:nth-child(7) {
          width: 12%;
        }

        td:nth-child(8) {
          width: 12%;
        }

        td:nth-child(9) {
          width: 5%;
        }

        td:nth-child(10) {
          width: 12%;
        }

        td:nth-child(11) {
          width: 17%;
        }

        td:nth-child(12) {
          width: 15%;
          word-break: break-all;
        }
      }
    }

    .table-gj {
      min-width: 4020px;

      tr:nth-child(odd) {
        background-color: rgba(0, 0, 0, .02);
      }

      td:nth-child(1) {
        width: 1%;
      }

      td:nth-child(2) {
        width: 1.5%;
      }

      td:nth-child(3) {
        width: 1%;
        white-space: nowrap;
      }

      td:nth-child(4) {
        width: 1%;
        white-space: nowrap;
      }

      td:nth-child(5) {
        width: 1%;
      }

      td:nth-child(6) {
        width: 3%;
        word-break: break-all;
      }

      td:nth-child(7) {
        width: 1%;
        word-break: break-all;
      }

      td:nth-child(8) {
        width: 3.5%;
      }

      td:nth-child(9) {
        width: 1%;
        word-break: break-all;
      }

      td:nth-child(10) {
        width: 2.5%;
        word-break: break-all;
      }

      td:nth-child(11) {
        width: 2.5%;
        word-break: break-all;
      }

      td:nth-child(12) {
        width: 2%;
        word-break: break-all;
      }

      td:nth-child(13) {
        width: 1%;
      }

      td:nth-child(14) {
        width: 1.5%;
      }

      td:nth-child(15) {
        width: 1%;
      }

      td:nth-child(16) {
        width: 1%;
      }

      td:nth-child(17) {
        width: 1%;
        white-space: nowrap;
      }

      td:nth-child(18) {
        width: 1%;
        white-space: nowrap;
      }

      td:nth-child(19) {
        width: 1%;
        white-space: nowrap;
      }

      td:nth-child(20) {
        width: 1%;
      }

      td:nth-child(21) {
        width: 1%;
      }

      td:nth-child(22) {
        width: 1%;
      }

      td:nth-child(23) {
        width: 1%;
      }

      td:nth-child(24) {
        width: 1%;
        word-break: break-all;
      }

      td:nth-child(25) {
        width: 1%;
      }

      td:nth-child(26) {
        width: 1%;
      }

      td:nth-child(27) {
        width: 1%;
      }

      td:nth-child(28) {
        width: 1%;
      }

      td:nth-child(29) {
        width: 1%;
      }

      td:nth-child(30) {
        width: 1%;
      }
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .loading {
      height: 40px;
      width: 40px;
      margin: 10px;
      border-radius: 50%;
      box-shadow: 0 2px 3px rgb(44 183 202 / 80%);
      animation: loading_ ease 1s infinite;
    }

    @keyframes loading_ {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  }

  ::v-deep {
    .van-tabs__wrap {
      height: 50px;
    }

    .van-tab {
      font-size: 18px;
      color: #1d1d1d;
    }
  }
}</style>