front
/
knowledgeMap


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>知识图谱系统</title>
  <!-- <link rel="stylesheet" href="./elementUI/theme-chalk/index.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <style>
    /*vue未加载好使隐藏页面*/
  </style>

</head>

<body>
  <div id="app" v-cloak>
    <header>
      <div v-for="item in countInfo.infos" class="label-item" v-show="item['name'] !== '实体属性'">
        <div class="label-category">
          {{ item["name"] }}
        </div>
        <div class="label-count">{{ item["num"] }}</div>
      </div>
    </header>
    <main>
      <el-table :data="tableData" border style="width: 100%" show-summary :max-height="MAX_TABLE_HEIGHT">
        <el-table-column type="index" :index="(currentPage-1)*selectPageSize+1" align="center" label="序号"
          width="100"></el-table-column>
        <el-table-column prop="nodeType" align="center" label="实体类型"></el-table-column>
        <el-table-column align="center" prop="nodeNum" sortable label="实体数量"></el-table-column>
        <el-table-column prop="relationType" align="center" sortable label="相关关系类型"></el-table-column>
        <el-table-column prop="relationNum" align="center" sortable label="相关关系数量"></el-table-column>
      </el-table>
    </main>
    <footer>
      <div class="pagination" v-if="total>10">
        <el-pagination background layout="total,sizes,prev, pager, next, jumper, ->" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChang"
          :page-sizes="[10, 20, 30, 40, 50, 100]"></el-pagination>
      </div>
    </footer>
  </div>
</body>
  <!-- 引入 Vue -->
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
  <!-- 引入 Element UI -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        countInfo: {
          infos: []
        },
        tableData: [],
        currentPage: 1,
        selectPageSize: 10,
        MAX_TABLE_HEIGHT: 500,
        total: 0
      },
      methods: {
        handleSizeChange(newSize) {
          this.selectPageSize = newSize;
        },
        handleCurrentChang(newPage) {
          this.currentPage = newPage;
        }
      }
    });
  </script>

</html>