recom-gorse/web/src/components/menus/item/RecommendItem.vue

<template>
  <div style="height: 100%">
    <div class="menu-title">
      洞悉（{{ gorseQo.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>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="gorseQo.recommendation" @change="getRecommendItem">
            <el-option :key="item.value" :value="item.value" :label="item.label"
                       v-for="item in recommendList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="categories">
          <el-select v-model="gorseQo.category" @change="getRecommendItem">
            <el-option value="" label="无"></el-option>
            <el-option :key="item.id" :value="item.name" :label="item.name"
                       v-for="item in categoryList"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="line-item-box">
        <div class="line-item" v-for="item in list" :key="item.id">
          <div class="title-time">
            <div>{{ item.ItemId }}</div>
            <div>{{ item.Timestamp }}</div>
          </div>
          <div class="description">{{ item.Comment }}</div>
          <div class="labels">
            <el-tag v-for="la in item.Labels">{{ la }}</el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

var _this;
export default {
  name: "RecommendItem",
  data() {
    return {
      qo: "",
      gorseQo: {
        userId: '',
        n: 10,
        recommendation: '_',
        category: ''
      },
      user: {},
      categoryList: [],
      recommendList: [{
        label: 'Recommendation',
        value: '_'
      }, {
        label: 'Offline Recommendation',
        value: 'offline'
      }, {
        label: 'Collaborative Recommendation',
        value: 'collaborative'
      }, {
        label: 'Item-based Recommendation',
        value: 'item_based'
      }, {
        label: 'User-based Recommendation',
        value: 'user_based'
      }],
      list: []
    }
  },
  mounted() {
    _this = this;
    _this.qo = _this.$route.query.qo;
    _this.gorseQo.userId = _this.$route.query.userId;
    _this.queryCategoryList();
    _this.getRecommendItem();
  },
  methods: {
    queryCategoryList() {
      request({
        url: '/category/query_list',
        method: 'post',
        data: {}
      }).then(res => {
        _this.categoryList = res.data;
      });
    },
    getRecommendItem() {
      request({
        url: '/gorse/get_recommend_by_user',
        method: 'post',
        data: _this.gorseQo
      }).then(res => {
        res.data.forEach(row => {
          row.labelsArr = row.labels ? row.labels.split(',') : [];
        });
        _this.list = res.data;
      });
    },
    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;
  height: calc(100% - 160px);

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

}

.demo-form-inline {
  padding: 25px 25px 0 25px;
}

.line-item-box {
  height: calc(100% - 140px);
  overflow-y: auto;

  .line-item {
    font-size: 14px;
    line-height: 32px;
    padding: 0 25px 10px 25px;
    margin: 20px 0;
    border-bottom: 1px solid #dee0e2;


    .title-time {
      display: flex;

      div:first-child {
        font-weight: bold;
        font-size: 18px;
        color: #9da2a8;
      }

      div:last-child {
        margin-left: auto;
        color: #bbbcbd;
      }
    }

    .description {
      color: #bbbcbd;
    }

    .labels {
      color: #9da2a8;

      .el-tag {
        margin: 0 10px 10px 0;
      }
    }
  }

}
</style>