jiace-web/src/views/portrait.vue

<template>
  <div class="portrait_page content">
    <div class="header" v-if="type == 'policy'">
      <span class="span">{{ val }}：</span>
      <el-radio
        v-model="queryParams.labelId"
        v-for="item in portraitList"
        :key="item.id"
        :label="item.id"
        border
        @change="handleClick"
        >{{ item.name }}</el-radio
      >
    </div>
    <div class="header" v-else-if="type == 'policyRead'">
      <span class="span">{{ val }}：</span>
      <el-radio
        v-model="queryParams.attributeId"
        v-for="item in attributeOptions"
        :key="item.value"
        :label="item.value"
        border
        @change="handleClick"
        >{{ item.label }}</el-radio
      >
    </div>
    <div class="screen_l_b" v-for="item in portraitData" :key="item.id">
      <div class="title text_hidden_one pointer">
        <router-link
          target="_blank"
          :to="{
            path: '/result',
            query: { key: type, id: item.id }
          }"
        >
          {{ item.title }}
        </router-link>
      </div>
      <div class="info" v-if="type != 'information'">
        <span>来源：{{ item.source }}</span>
        <span>发布：{{ item.listDate }}</span>
      </div>
      <div class="info" style="justify-content: flex-end;" v-else>
        <span>发布：{{ item.createTime }}</span>
      </div>
    </div>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getPortraitList"
    />
  </div>
</template>

<script>
import { getPolicyMatch } from '@/api/home/notice';
import { mapGetters } from 'vuex';
import { userInfo, getLabelSetting } from '@/api/home/info';
import { getPolicyRead, getInformation } from '@/api/home/home';
export default {
  data() {
    return {
      type: '',
      val: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      portraitList: [], // 企业画像
      // 归口选项
      attributeOptions: [
        {
          value: 'KJJ',
          label: '科技'
        },
        {
          value: 'JXJ',
          label: '经信'
        },
        {
          value: 'FGW',
          label: '发改'
        },
        {
          value: 'OTHER',
          label: '其他'
        }
      ],
      portraitData: [], // 企业画像绑定的政策列表
      portraitTotal: 0
    };
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    // 获取企业画像数据列表
    getPortraitList() {
      if (this.type == 'policy') {
        getPolicyMatch(this.queryParams).then(({ data }) => {
          this.portraitData = data.list;
          this.total = data.total;
        });
      } else if (this.type == 'policyRead') {
        getPolicyRead(this.queryParams).then(({ data }) => {
          this.portraitData = data.list;
          this.total = data.total;
        });
      } else if (this.type == 'information') {
        getInformation(this.queryParams).then(({ data }) => {
          this.portraitData = data.list;
          this.total = data.total;
        });
      }
    },
    handleClick() {
      this.getPortraitList();
    }
  },
  created() {
    if (this.token) {
      console.log();
      const { key, val } = this.$route.query;
      this.type = key;
      this.val = val;
      if (key == 'policy') {
        userInfo().then(({ data }) => {
          if (data.companyId) {
            getLabelSetting({ companyId: data.companyId }).then(({ data }) => {
              if (data.length) {
                console.log(data);
                this.portraitList = data.map(item =>
                  item.labelList
                    ? item.labelList.filter(v => v.isHas)[0]
                      ? item.labelList.filter(v => v.isHas)[0]
                      : ''
                    : undefined
                );
                this.queryParams.labelId = this.portraitList[0].id;
                this.getPortraitList();
              }
            });
          }
        });
      } else if (key == 'policyRead') {
        this.queryParams.attributeId = this.attributeOptions[0].value;
        this.getPortraitList();
      } else if (key == 'information') {
        this.getPortraitList();
      } else {
        this.msgError('非法进入');
      }
    } else {
      this.msgError('请先登录');
    }
  }
};
</script>

<style lang="scss" scoped>
.portrait_page {
  margin-top: 30px;
  .header {
    display: flex;
    align-items: center;
    height: 90px;
    padding: 30px;
    background-color: #f5f5f5;
    .el-tabs {
      margin-left: 20px;
      /deep/.el-tabs__nav-wrap::after {
        height: 0;
      }
    }
    /deep/.el-radio__input {
      display: none;
    }
  }
  .screen_l_b {
    height: 110px;
    line-height: 45px;
    margin-top: 20px;
    padding: 0 20px;
    border-bottom: 1px solid #e3e3e3;
    .title {
      font-size: 18px;
      color: #333;
      // text-align: left;
    }
    .info {
      font-size: 16px;
      color: #999;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>