recom-gorse/web/src/components/menus/user/SimilarUser.vue

<template>
  <div>
    <div class="menu-title">
      相似用户（{{ userId }}）
      <div class="icon icon-back" @click="backBtn">
        <i title="返回"></i>
      </div>
    </div>
    <div class="block_box" style="margin-top: 0">
      <div class="title">信息</div>
      <div>
        <el-form label-width="100px">
          <el-form-item label="标签">
            <template v-for="(tag,index) in user.labelsArr">
              <el-tag :key="index">{{ tag }}</el-tag>
            </template>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="block_box">
      <div class="title">Related Items</div>
      <div>
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="行号" width="60"></el-table-column>
          <el-table-column prop="UserId" label="UserId"></el-table-column>
          <el-table-column prop="labels" label="标签">
            <div slot-scope="scope">
              <template v-for="(tag,index) in scope.row.labelsArr">
                <el-tag :key="index" v-if="index < 5">{{ tag }}</el-tag>
              </template>
              <el-tag v-if="scope.row.labelsArr.length > 5">...</el-tag>
            </div>
          </el-table-column>
          <el-table-column prop="Score" label="Score">
            <template slot-scope="scope">
              {{scope.row.Score.toFixed(5)}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="210">
            <template slot-scope="scope">
              <el-button @click.native.prevent="recommendItem(scope.row)" type="text" size="small">
                洞悉
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';

var _this;
export default {
  name: "similarUser",
  data() {
    return {
      qo: "",
      userId: '',
      user: {},
      list: []
    }
  },
  mounted() {
    _this = this;
    _this.qo = _this.$route.query.qo;
    _this.userId = _this.$route.query.userId;
    _this.queryUser();
    _this.getSimilarUser();
  },
  methods: {
    queryUser() {
      request({
        url: '/risk-user/query_unique',
        method: 'post',
        data: {
          EQS_fid: _this.userId
        }
      }).then(res => {
        res.data.labelsArr = res.data.labels ? res.data.labels.split(',') : [];
        _this.user = res.data;
      });
    },
    getSimilarUser() {
      request({
        url: '/gorse/get_similar_user',
        method: 'post',
        data: {
          userId: _this.userId
        }
      }).then(res => {
        res.data.forEach(row => {
          row.labelsArr = row.labels ? row.labels.split(',') : [];
        });
        _this.list = res.data;
      });
    },
    recommendItem(item) {
      _this.$router.push({
        path: "recommendItem", query: {
          userId: item.UserId,
          qo: JSON.stringify(_this.qo)
        }
      });
    },
    backBtn() {
      this.$router.push({
        path: "userManage", query: {
          qo: _this.qo
        }
      });
    },
  }
}
</script>
<style src="../../../css/back.css" scoped></style>
<style scoped lang="scss">

.block_box {
  margin: 25px;
  background: #FFFFFF;
  border-radius: 3px;

  .title {
    border-bottom: 1px solid #ccc;
    padding: 15px 25px;
  }

  >div {
    padding: 25px;

  }
}
</style>