添加索引管理界面,修改样式

This commit is contained in:
wangchengming 2025-04-19 21:58:36 +08:00
parent 23332e9dfd
commit 2356973ac8
12 changed files with 339 additions and 39 deletions

View File

@ -138,10 +138,11 @@ export default {
<style lang="less" scoped>
.leftMenu {
background-image: url('~@/assets/img/leftMenu.png');
background-image: url(/img/leftMenu.031fa8a0.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 288px;
height: calc(100vh - 64px);
height: calc(100vh - 150px);
position: absolute;
left: 20px;
top: 140px;
@ -176,7 +177,7 @@ export default {
.content {
width: calc(100vw - 344px);
height: 913px;
height: calc(100vh - 154px);
background-color: #ffffff;
position: absolute;
left: 324px;

View File

@ -74,7 +74,7 @@
</a-row>
</div>
<a-row :gutter="20">
<a-col :md="16" :sm="1" style="height:calc(50vh - 125px);">
<a-col :md="16" :sm="1" style="height:calc(50vh - 133px);">
<div class="linese"></div>
<div class="echartsTitle" style="position: relative">
<div class="ecicon"></div>CPU
@ -94,7 +94,7 @@
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
<div class="linese"></div>
</a-col>
<a-col :md="8" :sm="2" style="height:calc(50vh - 125px);">
<a-col :md="8" :sm="2" style="height:calc(50vh - 133px);">
<div class="linese"></div>
<div class="echartsTitle">
<div class="ecicon"></div>磁盘
@ -107,7 +107,7 @@
</div>
<div class="linese"></div>
</a-col>
<a-col :md="12" :sm="3" style="height:calc(50vh - 185px);">
<a-col :md="12" :sm="3" style="height:calc(50vh - 193px);">
<div class="linese"></div>
<div class="echartsTitle" style="position: relative">
<div class="ecicon"></div>内存
@ -126,7 +126,7 @@
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
<div class="linese"></div>
</a-col>
<a-col :md="12" :sm="4" style="height:calc(50vh - 185px);">
<a-col :md="12" :sm="4" style="height:calc(50vh - 193px);">
<div class="linese"></div>
<div class="echartsTitle" style="position: relative">
<div class="ecicon"></div>JVM

View File

@ -0,0 +1,193 @@
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="30">
<a-col :md="20">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
</span>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="数据类型">
<a-select placeholder="选择同步状态" option-filter-prop="children" size="large" v-model="queryParam.schemaMass"
@change="handleTypeChange">
<a-select-option key="平台">
平台
</a-select-option>
<a-select-option key="编队">
编队
</a-select-option>
<a-select-option key="航空兵">
航空兵
</a-select-option>
<a-select-option key="陆战队">
陆战队
</a-select-option>
<a-select-option key="作战">
作战
</a-select-option>
<a-select-option key="反潜">
反潜
</a-select-option>
<a-select-option key="舰炮">
舰炮
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="关键词">
<a-input placeholder="请输入搜索关键词" v-model="queryParam.massKey"></a-input>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
<a-row :gutter="30" style="padding: 0 10px;">
<a-col :md="6">
<div class="linese"></div>
<!-- 分类区域 -->
<div style="height:calc(100vh - 316px);background: #e6e9f1;padding:10px;">
<a-tree :tree-data="treeDate" @select="onSelect" />
</div>
<div class="linese"></div>
</a-col>
<a-col :md="18">
<div class="linese"></div>
<!-- 表格区域 -->
<div style="height:calc(100vh - 316px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<a-table size="middle" bordered :columns="columns" :data-source="dataSource" :loading="loading"
:pagination="false" :scroll="{ y: 'calc(100vh - 380px)' }" rowKey="id"></a-table>
</div>
<div class="linese"></div>
</a-col>
</a-row>
</a-card>
</template>
<script>
import { metaDataTypeTree, tableDataList } from '@/api/metaData'
export default {
name: "metadata",
components: {
},
data() {
return {
loading: false,
//
queryParam: {
sourceType: 1,
schemaMass: null,
massKey: null
},
tableParams: {
schemaMass: null,
tableName: null,
startDateString: null,
endDateString: null,
pageSize: 10,
pageNum: 1
},
treeDate: [],
dataSource: [],
columns: [
{
title: '序号',
dataIndex: 'columnId',
width: 60,
align: "center",
},
{
title: '索引名称',
align: "center",
dataIndex: 'columnName',
},
{
title: '字段',
align: "center",
dataIndex: 'dataType',
},
{
title: '索引类型',
align: "center",
dataIndex: 'dataLength',
},
{
title: '创建时间',
align: "center",
dataIndex: 'nullable',
},
{
title: '描述',
align: "center",
dataIndex: 'dataDefault',
}
]
}
},
watch: {
'queryParam.massKey'(value) {
this.queryParam.massKey = value
this.getMetaDataTypeTree()
}
},
mounted() {
},
computed: {
},
created() {
this.getMetaDataTypeTree()
},
methods: {
getMetaDataTypeTree() {
metaDataTypeTree(this.queryParam).then(res => {
if (res.code == 200) {
this.treeDate = []
var keys = Object.keys(res.result)
keys.forEach((element, index) => {
const _children = res.result[element]
var childrenList = []
_children.forEach((childrenNode, chil) => {
childrenList.push({
key: 'children_' + chil,
type: 'childern',
title: childrenNode
})
});
this.treeDate.push({
key: 'type_' + index,
type: 'parentType',
title: element,
children: childrenList
})
});
}
})
},
handleTypeChange(value) {
this.queryParam.schemaMass = value
this.getMetaDataTypeTree()
},
onSelect(selectedKeys, info) {
if (info.node.dataRef.type && info.node.dataRef.type == 'childern') {
this.tableParams.schemaMass = info.node.$parent.dataRef.title
this.tableParams.tableName = info.node.dataRef.title
this.getTableDataList()
}
},
getTableDataList() {
tableDataList(this.tableParams).then(res => {
if (res.code == 200) {
this.dataSource = res.result.rows
}
})
}
}
}
</script>

View File

@ -38,6 +38,11 @@
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="时间范围">
<a-range-picker :default-value="defaultTime" :format="dateFormat" @change="onChangeTime" />
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="关键词">
<a-input placeholder="请输入搜索关键词" v-model="queryParam.massKey"></a-input>
@ -51,7 +56,7 @@
<a-col :md="6">
<div class="linese"></div>
<!-- 分类区域 -->
<div style="height:calc(100vh - 300px);background: #e6e9f1;padding:10px;">
<div style="height:calc(100vh - 316px);background: #e6e9f1;padding:10px;">
<a-tree :tree-data="treeDate" @select="onSelect" />
</div>
<div class="linese"></div>
@ -59,7 +64,7 @@
<a-col :md="18">
<div class="linese"></div>
<!-- 表格区域 -->
<div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<div style="height:calc(100vh - 316px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<a-table size="middle" bordered :columns="columns" :data-source="dataSource" :loading="loading"
:pagination="pagination" :scroll="{ x: 1200, y: 'calc(100vh - 450px)' }" rowKey="序号"
@change="handleTableChange"></a-table>
@ -71,12 +76,16 @@
</template>
<script>
import { metaDataTypeTree, tableDataList } from '@/api/metaData'
import moment from 'moment';
export default {
name: "metadata",
components: {
},
data() {
return {
moment,
dateFormat: 'YYYY-MM-DD',
defaultTime: [],
loading: false,
//
queryParam: {
@ -96,6 +105,8 @@ export default {
tableParams: {
schemaMass: null,
tableName: null,
startDateString: null,
endDateString: null,
pageSize: 10,
pageNum: 1
},
@ -156,31 +167,30 @@ export default {
this.getTableDataList()
}
},
handleTableChange (pagination, filters, sorter) {
handleTableChange(pagination, filters, sorter) {
this.pagination = pagination
this.tableParams.pageNum = pagination.current - 1
this.tableParams.pageSize = pagination.pageSize
this.getTableDataList()
},
// //handleTableChange
// handleTableChange(pagination, filters, sorter) {
// //
// //TODO
// if (Object.keys(sorter).length > 0) {
// this.isorter.column = sorter.field;
// this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
// }
// this.pagination = pagination;
// this.getTableDataList();
// },
onChangeTime(date, dateString) {
if (date.length == 0) {
this.defaultTime = []
this.tableParams.startDateString = null
this.tableParams.endDateString = null
this.tableParams.pageNum = 1
this.getTableDataList()
} else {
this.tableParams.startDateString = moment(date[0]).format(this.dateFormat);
this.tableParams.endDateString = moment(date[1]).format(this.dateFormat);
this.defaultTime = [this.tableParams.startDateString, this.tableParams.endDateString]
this.tableParams.pageNum = 1
this.getTableDataList()
}
},
getTableDataList() {
tableDataList(this.tableParams).then(res => {
if (res.code == 200) {
// this.dataSource = []
// this.dataSource = res.result
// if (res.result.total) {
// this.ipagination.total = res.result.total;
// }
if (res.code == 200) {
this.columns = []
res.result.columnNames.forEach(columns => {
this.columns.push({

View File

@ -51,7 +51,7 @@
<a-col :md="6">
<div class="linese"></div>
<!-- 分类区域 -->
<div style="height:calc(100vh - 300px);background: #e6e9f1;padding:10px;">
<div style="height:calc(100vh - 316px);background: #e6e9f1;padding:10px;">
<a-tree :tree-data="treeDate" @select="onSelect" />
</div>
<div class="linese"></div>
@ -59,7 +59,7 @@
<a-col :md="18">
<div class="linese"></div>
<!-- 表格区域 -->
<div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<div style="height:calc(100vh - 316px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
:pagination="false" :loading="loading" :scroll="{y: 'calc(100vh - 380px)' }">

View File

@ -440,7 +440,7 @@ export default {
}
.flodContent {
height: calc(100vh - 240px);
height: calc(100vh - 226px);
overflow-y: auto;
margin-right: 20px;
}
@ -448,12 +448,12 @@ export default {
font-size: 18px;
}
.teeediv {
height: calc(100vh - 320px);
height: calc(100vh - 304px);
background: #e6e9f1;
}
.righttop {
height: calc(100vh - 240px);
height: calc(100vh - 226px);
float: left;
}
.righttop .search{
@ -461,7 +461,7 @@ export default {
}
.quarter-div {
min-width: 196px;
min-width: 200px;
height: 130px;
float: left;
margin-right: 12px;
@ -487,6 +487,6 @@ export default {
font-size: 16px;
}
.rtable {
height: calc(100vh - 516px);
height: calc(100vh - 498px);
}
</style>

96
src/views/home/index.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<div class="analysisBG">
<div class="buttonBG">
<a-row :gutter="20">
<a-col :span="4" class="clickbutton" @click="openlink('/#/task/index')">
<div class="buttontext">任务管理</div>
<div class="buttonicon"><img src="~@/assets/img/任务管理.png"></div>
</a-col>
<a-col :span="4" class="clickbutton" @click="openlink('sjsxybs://test')">
<div class="buttontext">数据筛选与报送</div>
<div class="buttonicon"><img src="~@/assets/img/数据接入.png"></div>
</a-col>
<a-col :span="4" class="clickbutton" @click="openlink('/#/datalink/dblink')">
<div class="buttontext">数据接入</div>
<div class="buttonicon"><img src="~@/assets/img/数据导入.png"></div>
</a-col>
<a-col :span="4" class="clickbutton" @click="openlink('/#/data/statistics')">
<div class="buttontext">数据统计</div>
<div class="buttonicon"><img src="~@/assets/img/数据统计.png"></div>
</a-col>
<a-col :span="4" class="clickbutton" @click="openlink('/#/isystem/user')">
<div class="buttontext">系统管理</div>
<div class="buttonicon"><img src="~@/assets/img/系统管理.png"></div>
</a-col>
</a-row>
</div>
</div>
</template>
<script>
export default {
name: 'Analysis',
components: {},
data() {
return {
}
},
mounted() {
},
created() { },
methods: {
openlink(url) {
window.location.href = url;
}
}
}
</script>
<style scoped>
.analysisBG {
background-image: url(/img/analysisBG.113f8deb.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 820px;
}
.buttonBG {
margin-top: 12px;
margin-left: 30px;
height: 900px;
}
.clickbutton {
margin-top: 5%;
background-image: url('~@/assets/img/buttonbg.png');
background-repeat: no-repeat;
background-position: center top;
height: 447px;
width: 366px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transform: translateY(1px);
}
.buttonicon {
display: flex;
justify-content: center;
align-items: center;
margin-top: 22%;
}
.buttontext {
margin-top: 16%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
line-height: 1.8;
letter-spacing: 5px;
}
</style>

View File

@ -43,7 +43,7 @@
<div class="linese"></div>
<!-- table区域-begin -->
<div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<div style="height:calc(100vh - 316px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
:pagination="ipagination" :loading="loading"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange">

View File

@ -27,7 +27,7 @@
<div class="linese"></div>
<!-- table区域-begin -->
<div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<div style="height:calc(100vh - 316px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<a-table
ref="table"
size="middle"

View File

@ -43,7 +43,7 @@
</div>
<div class="linese"></div>
<!-- table区域-begin -->
<div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<div style="height:calc(100vh - 316px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<a-table ref="table" size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
:pagination="ipagination" :loading="loading" @change="handleTableChange">

View File

@ -33,7 +33,7 @@
</div>
<div class="linese"></div>
<!-- table区域-begin -->
<div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<div style="height:calc(100vh - 316px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<a-table ref="table" size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
:pagination="ipagination" :loading="loading" @change="handleTableChange">

View File

@ -21,7 +21,7 @@
selectedRowKeys.length }}</a>&nbsp;&nbsp;
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<div style="height:calc(100vh - 218px);overflow:auto;">
<div style="height:calc(100vh - 290px);overflow:auto;">
<a-table
:columns="columns"
size="middle"