添加索引管理界面,修改样式
This commit is contained in:
parent
23332e9dfd
commit
2356973ac8
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
193
src/views/data/dataIndexing.vue
Normal file
193
src/views/data/dataIndexing.vue
Normal 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>
|
|
@ -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({
|
||||
|
|
|
@ -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)' }">
|
||||
|
||||
|
|
|
@ -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
96
src/views/home/index.vue
Normal 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>
|
|
@ -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">
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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">
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
selectedRowKeys.length }}</a>项
|
||||
<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"
|
||||
|
|
Loading…
Reference in New Issue
Block a user