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

<template>
  <div class="similar-item-box">
    <div class="menu-title">
      相似用户（{{ gorseQo.itemId }}）
      <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="50px">
          <el-form-item label="时间">{{ item.createTime }}</el-form-item>
          <el-form-item label="类别">
            <template v-for="(tag,index) in item.categoriesArr">
              <el-tag :key="index">{{ tag }}</el-tag>
            </template>
          </el-form-item>
          <el-form-item label="标签">
            <template v-for="(tag,index) in item.labelsArr">
              <el-tag :key="index">{{ tag }}</el-tag>
            </template>
          </el-form-item>
          <el-form-item label="描述">
            {{ item.description }}
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="block_box">
      <div class="title">Related Items</div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="categories">
          <el-select v-model="gorseQo.category" @change="getSimilarItem">
            <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 style="padding-top: 0">
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="行号" width="60"></el-table-column>
          <el-table-column prop="ItemId" label="fid"></el-table-column>
          <el-table-column prop="labels" label="类别">
            <div slot-scope="scope">
              <template v-for="(tag,index) in scope.row.Categories">
                <el-tag :key="index" v-if="index < 5">{{ tag }}</el-tag>
              </template>
              <el-tag v-if="scope.row.Categories.length > 5">...</el-tag>
            </div>
          </el-table-column>
          <el-table-column prop="labels" label="标签">
            <div slot-scope="scope">
              <template v-for="(tag,index) in scope.row.Labels">
                <el-tag :key="index" v-if="index < 5">{{ tag }}</el-tag>
              </template>
              <el-tag v-if="scope.row.Labels.length > 5">...</el-tag>
            </div>
          </el-table-column>
          <el-table-column prop="Comment" label="描述">
            <template slot-scope="scope" v-if="scope.row.Comment">
              {{ scope.row.Comment.substring(0, 100) }}
            </template>
          </el-table-column>
          <el-table-column prop="Score" label="Score" width="100">
            <template slot-scope="scope">
              {{ scope.row.Score.toFixed(5) }}
            </template>
          </el-table-column>
          <el-table-column prop="Timestamp" label="创建时间" width="200"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

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

var _this;
export default {
  name: "similarItem",
  data() {
    return {
      qo: "",
      gorseQo: {
        itemId: '',
        category: '',
        n: 10
      },
      item: {},
      list: [],
      categoryList: []
    }
  },
  mounted() {
    _this = this;
    _this.qo = _this.$route.query.qo;
    _this.gorseQo.itemId = _this.$route.query.itemId;
    _this.queryCategoryList();
    _this.queryItem();
    _this.getSimilarItem();
  },
  methods: {
    queryCategoryList() {
      request({
        url: '/category/query_list',
        method: 'post',
        data: {}
      }).then(res => {
        _this.categoryList = res.data;
      });
    },
    queryItem() {
      request({
        url: '/entrys/query_unique',
        method: 'post',
        data: {
          EQS_fid: _this.gorseQo.itemId
        }
      }).then(res => {
        res.data.labelsArr = res.data.labels ? res.data.labels.split(',') : [];
        res.data.categoriesArr = res.data.categories ? res.data.categories.split(',') : [];
        _this.item = res.data;
      });
    },
    getSimilarItem() {
      request({
        url: '/gorse/get_similar_item',
        method: 'post',
        data: _this.gorseQo
      }).then(res => {
        _this.list = res.data;
      });
    },
    backBtn() {
      this.$router.push({
        path: "entrysManage", query: {
          qo: _this.qo
        }
      });
    },
  }
}
</script>
<style src="../../../css/back.css" scoped></style>
<style scoped lang="scss">

.similar-item-box {
  height: 100%;
  overflow-y: auto;
}


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

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

  > div {
    padding: 25px;

  }
}

.demo-form-inline {
  padding: 25px 25px 0 25px;
}
</style>