智能推荐

web/src/components/menus/IntelligenceRecommend.vue

@@ -0,0 +1,203 @@
+<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.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-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/recommend_by_userid',
+        method: 'post',
+        data: {
+          userId: _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/popular_by_category',
+        method: 'post',
+        data: {
+          category: _this.selectCategory
+        }
+      }).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>

web/src/router/index.js

@@ -51,6 +51,10 @@ export default new Router({
                     path: 'feedbackTypeManage',
                     component: () => import('@/components/menus/FeedbackTypeManage')
                 },
+                {
+                    path: 'intelligenceRecommend',
+                    component: () => import('@/components/menus/IntelligenceRecommend')
+                },
                 {
                     path: '/',
                     redirect: "entrysManage"

web/src/utils/menu.js

@@ -20,6 +20,12 @@ const menuList = [
         icon: "el-icon-headset",
         name: "反馈类型管理",
         url: "/feedbackTypeManage"
+    },
+    {
+        index: "4",
+        icon: "el-icon-s-opportunity",
+        name: "智能推荐",
+        url: "/intelligenceRecommend"
     }
 ];