recom-gorse/web/src/components/menus/IntelligenceRecommend.vue

<template>
  <div>
    <div class="menu-title">
      智能推荐
    </div>
    <div class="menu-content">
      <el-tabs type="border-card">
        <el-tab-pane label="人物推荐">
          <div>
            <el-select
                style="width: 100%;"
                v-model="selectUserId"
                filterable
                remote
                reserve-keyword
                placeholder="请输入人物关键词"
                :remote-method="remoteUserMethod"
                @change="handleUserSelectChange"
                :loading="userLoading">
              <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.fid"
                  :value="item.fid">
              </el-option>
            </el-select>
          </div>
          <div class="line-item" v-for="item in recommendByUserList" :key="item.id">
            <div class="title-time">
              <div>{{ item.fid }}</div>
              <div>{{ item.createTime }}</div>
            </div>
            <div class="description">{{ item.description }}</div>
            <div class="labels">
              <el-tag v-for="la in item.labelArr">{{la}}</el-tag>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分类推荐">
          <div>
            <el-select
                style="width: 100%;"
                v-model="selectCategory"
                filterable
                remote
                reserve-keyword
                placeholder="请输入分类关键词"
                :remote-method="remoteCategoryMethod"
                @change="handleCategorySelectChange"
                :loading="categoryLoading">
              <el-option
                  v-for="item in categoryList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
          </div>
          <div class="line-item" v-for="item in recommendByCategoryList" :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>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

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

var _this;
export default {
  name: "recommendManage",
  data() {
    return {
      userList: [],
      userLoading: false,
      selectUserId: '',
      recommendByUserList: [],

      categoryList: [],
      categoryLoading: false,
      selectCategory: '',
      recommendByCategoryList: []
    }
  },
  mounted() {
    _this = this;
  },
  methods: {
    remoteCategoryMethod(query) {
      if (query !== '') {
        this.categoryLoading = true;
        request({
          url: '/category/query_list',
          method: 'post',
          data: {
            LIKES_name: query
          }
        }).then(res => {
          this.categoryLoading = false;
          this.categoryList = res.data;
        });
      } else {
        this.categoryList = [];
      }
    },
    handleCategorySelectChange() {
      request({
        url: '/gorse/popular_by_category',
        method: 'post',
        data: {
          category: _this.selectCategory
        }
      }).then(res => {
        res.data.forEach(row => {
          if(row.labels) {
            row.labelArr = row.labels.split(',');
          }
        });
        this.recommendByCategoryList = res.data;
      });
    },
    remoteUserMethod(query) {
      if (query !== '') {
        this.userLoading = true;
        request({
          url: '/risk-user/query_list',
          method: 'post',
          data: {
            LIKES_fid: query
          }
        }).then(res => {
          this.userLoading = false;
          this.userList = res.data;
        });
      } else {
        this.userList = [];
      }
    },
    handleUserSelectChange() {
      request({
        url: '/gorse/recommend_by_userid',
        method: 'post',
        data: {
          userId: _this.selectUserId
        }
      }).then(res => {
        res.data.forEach(row => {
          if(row.labels) {
            row.labelArr = row.labels.split(',');
          }
        });
        this.recommendByUserList = res.data;
      });
    }
  }
}
</script>
<style lang="scss">

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

  .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>