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

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

View File

@ -74,7 +74,7 @@
</a-row> </a-row>
</div> </div>
<a-row :gutter="20"> <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="linese"></div>
<div class="echartsTitle" style="position: relative"> <div class="echartsTitle" style="position: relative">
<div class="ecicon"></div>CPU <div class="ecicon"></div>CPU
@ -94,7 +94,7 @@
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div> style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
<div class="linese"></div> <div class="linese"></div>
</a-col> </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="linese"></div>
<div class="echartsTitle"> <div class="echartsTitle">
<div class="ecicon"></div>磁盘 <div class="ecicon"></div>磁盘
@ -107,7 +107,7 @@
</div> </div>
<div class="linese"></div> <div class="linese"></div>
</a-col> </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="linese"></div>
<div class="echartsTitle" style="position: relative"> <div class="echartsTitle" style="position: relative">
<div class="ecicon"></div>内存 <div class="ecicon"></div>内存
@ -126,7 +126,7 @@
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div> style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
<div class="linese"></div> <div class="linese"></div>
</a-col> </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="linese"></div>
<div class="echartsTitle" style="position: relative"> <div class="echartsTitle" style="position: relative">
<div class="ecicon"></div>JVM <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-select>
</a-form-item> </a-form-item>
</a-col> </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-col :md="6" :sm="8">
<a-form-item label="关键词"> <a-form-item label="关键词">
<a-input placeholder="请输入搜索关键词" v-model="queryParam.massKey"></a-input> <a-input placeholder="请输入搜索关键词" v-model="queryParam.massKey"></a-input>
@ -51,7 +56,7 @@
<a-col :md="6"> <a-col :md="6">
<div class="linese"></div> <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" /> <a-tree :tree-data="treeDate" @select="onSelect" />
</div> </div>
<div class="linese"></div> <div class="linese"></div>
@ -59,7 +64,7 @@
<a-col :md="18"> <a-col :md="18">
<div class="linese"></div> <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" <a-table size="middle" bordered :columns="columns" :data-source="dataSource" :loading="loading"
:pagination="pagination" :scroll="{ x: 1200, y: 'calc(100vh - 450px)' }" rowKey="序号" :pagination="pagination" :scroll="{ x: 1200, y: 'calc(100vh - 450px)' }" rowKey="序号"
@change="handleTableChange"></a-table> @change="handleTableChange"></a-table>
@ -71,12 +76,16 @@
</template> </template>
<script> <script>
import { metaDataTypeTree, tableDataList } from '@/api/metaData' import { metaDataTypeTree, tableDataList } from '@/api/metaData'
import moment from 'moment';
export default { export default {
name: "metadata", name: "metadata",
components: { components: {
}, },
data() { data() {
return { return {
moment,
dateFormat: 'YYYY-MM-DD',
defaultTime: [],
loading: false, loading: false,
// //
queryParam: { queryParam: {
@ -96,6 +105,8 @@ export default {
tableParams: { tableParams: {
schemaMass: null, schemaMass: null,
tableName: null, tableName: null,
startDateString: null,
endDateString: null,
pageSize: 10, pageSize: 10,
pageNum: 1 pageNum: 1
}, },
@ -156,31 +167,30 @@ export default {
this.getTableDataList() this.getTableDataList()
} }
}, },
handleTableChange (pagination, filters, sorter) { handleTableChange(pagination, filters, sorter) {
this.pagination = pagination this.pagination = pagination
this.tableParams.pageNum = pagination.current - 1 this.tableParams.pageNum = pagination.current - 1
this.tableParams.pageSize = pagination.pageSize this.tableParams.pageSize = pagination.pageSize
this.getTableDataList() this.getTableDataList()
}, },
// //handleTableChange onChangeTime(date, dateString) {
// handleTableChange(pagination, filters, sorter) { if (date.length == 0) {
// // this.defaultTime = []
// //TODO this.tableParams.startDateString = null
// if (Object.keys(sorter).length > 0) { this.tableParams.endDateString = null
// this.isorter.column = sorter.field; this.tableParams.pageNum = 1
// this.isorter.order = "ascend" == sorter.order ? "asc" : "desc" this.getTableDataList()
// } } else {
// this.pagination = pagination; this.tableParams.startDateString = moment(date[0]).format(this.dateFormat);
// this.getTableDataList(); this.tableParams.endDateString = moment(date[1]).format(this.dateFormat);
// }, this.defaultTime = [this.tableParams.startDateString, this.tableParams.endDateString]
this.tableParams.pageNum = 1
this.getTableDataList()
}
},
getTableDataList() { getTableDataList() {
tableDataList(this.tableParams).then(res => { tableDataList(this.tableParams).then(res => {
if (res.code == 200) { if (res.code == 200) {
// this.dataSource = []
// this.dataSource = res.result
// if (res.result.total) {
// this.ipagination.total = res.result.total;
// }
this.columns = [] this.columns = []
res.result.columnNames.forEach(columns => { res.result.columnNames.forEach(columns => {
this.columns.push({ this.columns.push({

View File

@ -51,7 +51,7 @@
<a-col :md="6"> <a-col :md="6">
<div class="linese"></div> <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" /> <a-tree :tree-data="treeDate" @select="onSelect" />
</div> </div>
<div class="linese"></div> <div class="linese"></div>
@ -59,7 +59,7 @@
<a-col :md="18"> <a-col :md="18">
<div class="linese"></div> <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" <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
:pagination="false" :loading="loading" :scroll="{y: 'calc(100vh - 380px)' }"> :pagination="false" :loading="loading" :scroll="{y: 'calc(100vh - 380px)' }">

View File

@ -440,7 +440,7 @@ export default {
} }
.flodContent { .flodContent {
height: calc(100vh - 240px); height: calc(100vh - 226px);
overflow-y: auto; overflow-y: auto;
margin-right: 20px; margin-right: 20px;
} }
@ -448,12 +448,12 @@ export default {
font-size: 18px; font-size: 18px;
} }
.teeediv { .teeediv {
height: calc(100vh - 320px); height: calc(100vh - 304px);
background: #e6e9f1; background: #e6e9f1;
} }
.righttop { .righttop {
height: calc(100vh - 240px); height: calc(100vh - 226px);
float: left; float: left;
} }
.righttop .search{ .righttop .search{
@ -461,7 +461,7 @@ export default {
} }
.quarter-div { .quarter-div {
min-width: 196px; min-width: 200px;
height: 130px; height: 130px;
float: left; float: left;
margin-right: 12px; margin-right: 12px;
@ -487,6 +487,6 @@ export default {
font-size: 16px; font-size: 16px;
} }
.rtable { .rtable {
height: calc(100vh - 516px); height: calc(100vh - 498px);
} }
</style> </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> <div class="linese"></div>
<!-- table区域-begin --> <!-- 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" <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
:pagination="ipagination" :loading="loading" :pagination="ipagination" :loading="loading"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange"> :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange">

View File

@ -27,7 +27,7 @@
<div class="linese"></div> <div class="linese"></div>
<!-- table区域-begin --> <!-- 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 <a-table
ref="table" ref="table"
size="middle" size="middle"

View File

@ -43,7 +43,7 @@
</div> </div>
<div class="linese"></div> <div class="linese"></div>
<!-- table区域-begin --> <!-- 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" <a-table ref="table" size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
:pagination="ipagination" :loading="loading" @change="handleTableChange"> :pagination="ipagination" :loading="loading" @change="handleTableChange">

View File

@ -33,7 +33,7 @@
</div> </div>
<div class="linese"></div> <div class="linese"></div>
<!-- table区域-begin --> <!-- 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" <a-table ref="table" size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
:pagination="ipagination" :loading="loading" @change="handleTableChange"> :pagination="ipagination" :loading="loading" @change="handleTableChange">

View File

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