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

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