front
/
knowledgeMap


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>知识图谱系统</title>
  <script src="./js/vue.js"></script>
  <link rel="stylesheet" href="./elementUI/theme-chalk/index.css">
  <script src="./elementUI/index.js"></script>
  <script src="./js/axios.js"></script>
  <!-- 引入jquery -->
  <!-- <script type="module" src="./js/home.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <style>
    /*vue未加载好使隐藏页面*/
    [v-cloak] {
      display: none;
    }

    #app {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }

    main {
      padding: 0px 10px;
      box-sizing: border-box;
    }

    .pagination {
      margin: 20px 0px 10px;
    }

    .el-pagination {
      text-align: right;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .label-item {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      border-radius: 10pt;
      background-color: antiquewhite;
      border: 1px solid lightblue;
      justify-content: center;
      margin: 15px;
      height: fit-content;
      width: 150px;
      align-items: center;
    }

    .label-count {
      width: 100%;
      font-size: 16pt;
      font-weight: bold;
      align-content: center;
      text-align: center;
    }

    .label-category {
      width: 100%;
      background-color: rgb(152, 175, 175);
      border-radius: 10pt 10pt 0 0;
      border: 1px solid lightblue;
      font-size: 18pt;
      font-weight: bold;
      text-align: center;
    }
  </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>
        <el-table-column type="index" 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>
      <div class="pagination">
        <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>
    </main>
  </div>

</body>
<script>
  let myChart = null
  let timer = null //计时器标志
  const api = {
    getCountList: "/kg/count/getCountList",
    getCountInfo: "/kg/count/getCountInfo"
  }
  const vm = new Vue({
    el: "#app",
    name: "graphDataStatistics",
    data() {
      return {
        total: 10,
        countInfo: {},
        totalElements: {},
        new_table_height: 1000,
        currentPage: 1,
        selectPageSize: 10,
        tableData: [
          {
            nodeType: "疾病",
            nodeNum: 5000,
            nodeAttributeNum: 5000,
            coefficientType: 5000,
            coefficientNum: 5000,
          },
          {
            nodeType: "症状",
            nodeNum: 5000,
            nodeAttributeNum: 5000,
            coefficientType: 5000,
            coefficientNum: 5000,
          },
          {
            nodeType: "并发症",
            nodeNum: 5000,
            nodeAttributeNum: 5000,
            coefficientType: 5000,
            coefficientNum: 5000,
          },
        ],
      }
    },
    methods: {
      getCountList() {
        const params = {
          pageNo: this.currentPage,
          pageSize: this.selectPageSize,
        }
        axios.post(api.getCountList, params).then((res) => {
          const { data, code, msg } = res.data
          if (code === '0') {
            this.tableData = [...data.content]
            this.total = data.totalElements
          }
        }).catch(e => {
          console.log(e)
        })
      },
      getCountInfo() {
        axios.post(api.getCountInfo).then(res => {
          const { data, code, msg } = res.data
          if (code === '0') {
            this.countInfo = data
          }
        }).catch(e => {
          console.log(e)
        }

        )
      },
      paginationChange(getCurrentPages, pageSize) {
        this.currentPage = getCurrentPages;
        this.selectPageSize = pageSize;
        this.getCountList(getCurrentPages, pageSize)
      },
      handleCurrentChang(page) {
        this.currentPage = page
      },
      handleSizeChange(size) {
        this.selectPageSize = size
      }
    },
    watch: {
      currentPage(newVal) {
        this.getCountList()
      },
      selectPageSize(newVal) {
        this.getCountList()
      }
    },
    computed: {

    },
    created() {


    },
    mounted() {
      this.getCountInfo()
      this.getCountList()

    },
    destroyed() {

    }
  })
</script>

</html>