|
|
@@ -0,0 +1,220 @@
|
|
|
+<!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>
|
