推荐系统初始化

web/src/components/menus/GraphRecommend.vue

@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <div class="menu-title">
+      辅助维修决策
+    </div>
+    <div class="menu-content">
+      <div class="recommend-content">
+        <div class="recommend-title">装备维修信息检索主界面</div>
+        <div class="recommed-tab">
+          <label :class="active == 0?'tab-active':''" @click="selectTab(0)">信息汇聚</label>
+          <label :class="active == 1?'tab-active':''" @click="selectTab(1)">知识检索</label>
+          <label :class="active == 2?'tab-active':''" @click="selectTab(2)">故障定位</label>
+          <label :class="active == 3?'tab-active':''" @click="selectTab(3)">维修推荐</label>
+        </div>
+        <div style="display: flex;width: 100%;margin-bottom: 30px">
+          <el-input
+              placeholder="请输入内容"
+              v-model="keyword" style="flex: 1">
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+          <el-button type="primary" style="margin-left: 30px">图谱一下</el-button>
+        </div>
+        <div v-if="active == 0">
+          <div class="graph-box">
+            <graph ref="graph"></graph>
+          </div>
+          <div style="margin-top: 15px;text-align: center">信息汇聚子图</div>
+        </div>
+        <div v-if="active == 1" class="search-box">
+          <div class="search-box-item" style="flex: 1"></div>
+          <div class="search-box-item" style="width: 300px;margin-left: 20px">
+            {h1,r1,t1}
+            {h2,r2,t2}
+            {h3,r3,t3}
+          </div>
+        </div>
+        <div v-if="active == 2">
+          <div class="graph-table-title">故障定位描述</div>
+          <div class="graph-table-content">
+            发动机故障标志亮灯的原因有：<br>
+            1、水温、曲轴位置、空气流量、进气温度、氧传感器等这些传感器受损，接触不良或信号<br>
+            中断时，ECU就不能准确获得发动机的数据，此时会引起发动机故障灯亮；<br>
+            2、发动机保养不良；<br>
+            3、没有按要求添加汽油和机油，造成发动机磨损等。<br>
+            根据查询的描
+          </div>
+        </div>
+        <div v-if="active == 3">
+          <div class="graph-table-title">维修推荐</div>
+          <div class="graph-table-content">
+            发动机故障灯亮的维修方法是：<br>
+            1、更换氧气传感器；2、更换三元催化器；3、紧固或更换油箱盖；4、更换恒温器；5、更
+            换点火线圈；6、更换空气流量传感器；7、按期保养，跟据车辆保养卡的时间周期，按期
+            进行保养。发动机的作用是：将汽油、柴油的热能通过在密封气缸内燃烧后膨胀气体，推动
+            活塞做功转变为机械能。发动机的保养方法是：1、定期更换机油及滤芯；2、使用合适质
+            量等级的润滑油；3、定期清理水箱；4、定期空气滤清器、机油滤清器及汽油滤清器；5、
+            保持曲轴箱通风良好定期清洗；6、定期清洗燃油系统
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import request from '@/utils/request';
+import graph from "@/components/graph/Graph";
+
+var _this;
+export default {
+  components: {
+    'graph': graph,
+  },
+  name: "graphRecommend",
+  data() {
+    return {
+      keyword: "",
+      active: 0
+    }
+  },
+  mounted() {
+    _this = this;
+    let cmd = {
+      path: '/noumenon/query_relation_by_ontologyid',
+      qo: {
+        ontologyId: 2
+      }
+    };
+    _this.$refs['graph'].initGraph({
+      nodes: [
+        {id: "1", name: "type1", label: "节点1"},
+        {id: "2", name: "type1", label: "节点2"}
+      ],
+      edges: [
+        {source: "1", target: "2", name: "type2", label: "关系1"}
+      ]
+    }, true);
+  },
+  methods: {
+    selectTab(index) {
+      _this.active = index;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.recommend-content {
+  width: 65%;
+  margin: 40px auto 0 auto;
+
+  .recommend-title {
+    font-size: 30px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .recommed-tab {
+    margin-top: 50px;
+
+    label {
+      height: 35px;
+      line-height: 35px;
+      display: inline-block;
+      padding: 0px 20px;
+      margin-right: 10px;
+      border-left: 1px solid #dcdddf;
+      border-right: 1px solid #dcdddf;
+      border-top: 1px solid #dcdddf;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      color: #303133;
+      cursor: pointer;
+    }
+
+    .tab-active {
+      color: #ffffff;
+      border-color: #409eff;
+      background-color: #409eff;
+    }
+  }
+
+  .graph-box {
+    border: 1px solid #dcdddf;
+    width: 100%;
+    height: 500px;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 25px;
+  }
+
+  .search-box {
+    display: flex;
+    align-content: space-between;
+
+    .search-box-item {
+      height: 450px;
+      border: 1px solid #dcdddf;
+      overflow-y: auto;
+      padding: 20px;
+      line-height: 25px;
+    }
+  }
+
+  .graph-table-title {
+    width: calc(100% - 42px);
+    background: rgba(250, 250, 250, 1);
+    border: 1px solid #dcdddf;
+    height: 40px;
+    line-height: 40px;
+    padding: 0px 20px;
+  }
+
+  .graph-table-content {
+    border-left: 1px solid #dcdddf;
+    border-right: 1px solid #dcdddf;
+    border-bottom: 1px solid #dcdddf;
+    padding: 20px 20px;
+    line-height: 25px;
+    max-height: 450px;
+    overflow-y: auto;
+  }
+}
+
+
+</style>