This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-banyandb.git
The following commit(s) were added to refs/heads/main by this push:
new f392714 Preliminarily improve the overall structure of the databse
page. (#142)
f392714 is described below
commit f3927144fa3f0cad0f2f58d0dbf6d045fcda1728
Author: Wu ChuSheng <[email protected]>
AuthorDate: Tue Jul 5 10:40:15 2022 +0800
Preliminarily improve the overall structure of the databse page. (#142)
* Add elementUI, sass and [email protected]
* Add custom style CSS file, AsideComponent file and solve the problem of
abnormal display of navigation bar at the top of 404 page
* Add headers for some file, replace some icons
* Add Database menu shrink function and vuex. Add some icons from elementui
* Initialize menu directory
* Initialize the navigation bar and function buttons in main of database.
* Add drawer of Detail, update some code
* Add the data table, add the search and time
* Add paging function and improve the content in Detail
Co-authored-by: Gao Hongtao <[email protected]>
---
ui/src/assets/main.scss | 24 +++-
.../databaseComponents/MainComponent.vue | 48 +++++--
.../mainComponents/DataTableComponent.vue | 158 +++++++++++++++++++++
.../mainComponents/DrawerRightComponent.vue | 129 +++++++++++++++++
.../mainComponents/SecondNavigationComponent.vue | 103 +++++++++++++-
.../mainComponents/TopButtonComponent.vue | 4 +-
.../mainComponents/TopNavigationComponent.vue | 21 ++-
.../DetailListComponent.vue} | 24 ++--
.../drawerRightComponents/DetailTableComponent.vue | 76 ++++++++++
ui/src/main.js | 11 +-
ui/src/views/Database.vue | 4 +-
11 files changed, 570 insertions(+), 32 deletions(-)
diff --git a/ui/src/assets/main.scss b/ui/src/assets/main.scss
index a8f724c..9dc7787 100644
--- a/ui/src/assets/main.scss
+++ b/ui/src/assets/main.scss
@@ -35,6 +35,7 @@
.justify-start {justify-content: flex-start;}
.justify-end {justify-content: flex-end;}
.center {align-items: center; justify-content: center;}
+.flex-grow {flex-grow: 1;}
/* ==================
border line
@@ -58,12 +59,31 @@
.text-line-normal {line-height: 20px;}
.text-center {text-align: center;}
.text-justify {text-align: justify;}
+.text-start {text-align: start;}
.text-family {font-family: var(--font-family-main);}
.text-weight-mini {font-weight: var(--weight-mini);}
.text-weight-lt {font-weight: var(--weight-lt);}
.text-main-color {color: var(--color-main-font);}
+.text-general-color {color: var(--color-general-font)}
+.text-secondary-color {color: var(--color-secondary-font)}
+
/* ==================
icon style
==================== */
-.icon{font-size: 20px;}
-.pointer{cursor:pointer;}
\ No newline at end of file
+.icon {font-size: 20px;}
+.icon-little {font-size: 15px;}
+.pointer {cursor:pointer;}
+
+/* ==================
+ border-radius
+==================== */
+.border-radius {border-radius: 10px;}
+.border-radius-little {border-radius: 5px;}
+
+/* ==================
+ margin
+==================== */
+.margin-top-bottom {margin: 20px 0 20px 0;}
+.margin-top-bottom-little {margin: 10px 0 10px 0;}
+.margin-all {margin: 20px;}
+.margin-all-little {margin: 10px;}
\ No newline at end of file
diff --git a/ui/src/components/databaseComponents/MainComponent.vue
b/ui/src/components/databaseComponents/MainComponent.vue
index a43ac3a..346ca2d 100644
--- a/ui/src/components/databaseComponents/MainComponent.vue
+++ b/ui/src/components/databaseComponents/MainComponent.vue
@@ -18,28 +18,52 @@
-->
<template>
- <div>
- <el-card>
- <top-navigation-component></top-navigation-component>
- <second-navigation-component></second-navigation-component>
- </el-card>
+ <div class="flex" style="height:100%; width:100%;">
+ <div :style="showDrawer ? 'width: calc(80% - 2px)' : 'width: calc(100%
- 2px)'" style="height: 100%;">
+ <tag-navigation-component></tag-navigation-component>
+ <el-card style="max-height: 90%;">
+ <top-navigation-component
@handleNavigation="handleNavigation"></top-navigation-component>
+ <second-navigation-component
class="margin-top-bottom-little"></second-navigation-component>
+ <data-table-component
class="margin-all-little"></data-table-component>
+ </el-card>
+ </div>
+ <div class="bd-top bd-left drawer-right" v-if="showDrawer">
+ <drawer-right-component
@closeDetail="closeDetail"></drawer-right-component>
+ </div>
</div>
</template>
<script>
import TopNavigationComponent from
'./mainComponents/TopNavigationComponent.vue'
import SecondNavigationComponent from
'./mainComponents/SecondNavigationComponent.vue'
+import TagNavigationComponent from './TagNavigationComponent.vue'
+import DrawerRightComponent from './mainComponents/DrawerRightComponent.vue'
+import DataTableComponent from './mainComponents/DataTableComponent.vue'
export default {
name: 'MainComponent',
data() {
return {
-
+ showDrawer: false,
+ navWidth: "0px"
}
},
components: {
TopNavigationComponent,
- SecondNavigationComponent
- }
+ SecondNavigationComponent,
+ TagNavigationComponent,
+ DrawerRightComponent,
+ DataTableComponent
+ },
+ methods: {
+ handleNavigation(item, index) {
+ if (item.name == "Detail") {
+ this.showDrawer = !this.showDrawer
+ }
+ },
+ closeDetail() {
+ this.showDrawer = false
+ }
+ },
}
</script>
@@ -52,4 +76,12 @@ export default {
.el-card__body {
padding: 0;
}
+
+.drawer-right {
+ -webkit-animation: rtl-drawer-in .3s 1ms;
+ animation: rtl-drawer-in .3s 1ms;
+ width: 20%;
+ height: calc(100% - 5px);
+ background-color: var(--color-background);
+}
</style>
\ No newline at end of file
diff --git
a/ui/src/components/databaseComponents/mainComponents/DataTableComponent.vue
b/ui/src/components/databaseComponents/mainComponents/DataTableComponent.vue
new file mode 100644
index 0000000..0944747
--- /dev/null
+++ b/ui/src/components/databaseComponents/mainComponents/DataTableComponent.vue
@@ -0,0 +1,158 @@
+<!--
+ ~ Licensed to Apache Software Foundation (ASF) under one or more contributor
+ ~ license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright
+ ~ ownership. Apache Software Foundation (ASF) licenses this file to you under
+ ~ the Apache License, Version 2.0 (the "License"); you may
+ ~ not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ ~ KIND, either express or implied. See the License for the
+ ~ specific language governing permissions and limitations
+ ~ under the License.
+-->
+
+<template>
+ <div>
+ <el-table ref="multipleTable" max-height=625 stripe :data="tableData"
highlight-current-row
+ tooltip-effect="dark" @selection-change="handleSelectionChange">
+ <el-table-column type="selection" width="55">
+ </el-table-column>
+ <el-table-column label="Date" width="120">
+ <template slot-scope="scope">{{ scope.row.date }}</template>
+ </el-table-column>
+ <el-table-column prop="name" label="Name" width="120">
+ </el-table-column>
+ <el-table-column prop="address" label="Address"
show-overflow-tooltip>
+ </el-table-column>
+ </el-table>
+
+ <el-pagination class="margin-top-bottom"
@size-change="handleSizeChange" @current-change="handleCurrentChange"
+ :current-page="queryInfo.pagenum" :page-sizes="[6, 12, 18, 24]"
:page-size="queryInfo.pagesize"
+ layout="total, sizes, prev, pager, next, jumper" :total="total">
+ </el-pagination>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ total: 25,
+ queryInfo: {
+ pagenum: 1,
+ pagesize: 6,
+ },
+ tableData: [{
+ date: '2016-05-03',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-02',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-04',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-01',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-08',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-06',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-07',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-08',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-06',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-07',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-08',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-06',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-07',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-08',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-06',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-07',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-06',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-07',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-06',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-07',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }],
+ multipleSelection: [],
+ checkAllFlag: false
+ }
+ },
+
+ created() {
+ this.$bus.$on('checkAll', () => {
+ if (!this.checkAllFlag) {
+ this.tableData.forEach(row => {
+ this.$refs.multipleTable.toggleRowSelection(row)
+ })
+ this.checkAllFlag = true
+ }
+ })
+ this.$bus.$on('checkNone', () => {
+ this.$refs.multipleTable.clearSelection()
+ this.checkAllFlag = false
+ })
+ },
+
+ methods: {
+ handleSelectionChange(val) {
+ this.multipleSelection = val;
+ }
+ }
+}
+</script>
\ No newline at end of file
diff --git
a/ui/src/components/databaseComponents/mainComponents/DrawerRightComponent.vue
b/ui/src/components/databaseComponents/mainComponents/DrawerRightComponent.vue
new file mode 100644
index 0000000..dfd2d94
--- /dev/null
+++
b/ui/src/components/databaseComponents/mainComponents/DrawerRightComponent.vue
@@ -0,0 +1,129 @@
+<!--
+ ~ Licensed to Apache Software Foundation (ASF) under one or more contributor
+ ~ license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright
+ ~ ownership. Apache Software Foundation (ASF) licenses this file to you under
+ ~ the Apache License, Version 2.0 (the "License"); you may
+ ~ not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ ~ KIND, either express or implied. See the License for the
+ ~ specific language governing permissions and limitations
+ ~ under the License.
+-->
+<template>
+ <div class="drawer-container flex column">
+ <div class="text-secondary-color text-tips text-start text-family
detail-title">Details</div>
+ <div class="detail-content border-radius">
+ <div class="detail-content-container margin-all">
+ <div class="detail-content-title flex justify-between">
+ <div class="text-main-color text-title text-family">Name
DB</div>
+ <i class="el-icon-close pointer detail-close icon"
@click="closeDetail" @mouseover="handleOver"
+ @mouseleave="handleLeave"
+ :style="{ color: closeColor, backgroundColor:
closeBackgroundColor }"></i>
+ </div>
+ <div class="text-secondary-color text-tips text-start
text-family margin-top-bottom-little">Group:
+ Stream</div>
+ <div v-for="item in detailList" :key="item.key">
+ <detail-list-component :keyName="item.key"
:value="item.value"></detail-list-component>
+ </div>
+ <div class="text-main-color text-tips text-start text-family
margin-top-bottom-little">Tags Configuration Information</div>
+ <detail-table-component></detail-table-component>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import DetailListComponent from
'./drawerRightComponents/DetailListComponent.vue'
+import DetailTableComponent from
'./drawerRightComponents/DetailTableComponent.vue'
+export default {
+ name: 'DrawerRightComponent',
+ data() {
+ return {
+ closeColor: "var(--color-main-font)",
+ closeBackgroundColor: "var(--color-white)",
+ detailList: [{
+ key: "Url",
+ value: "Database/node/Stream"
+ }, {
+ key: "Start Time",
+ value: "2022/04/15 17:30:15"
+ }, {
+ key: "End Time",
+ value: "2022/04/15 17:50:17"
+ }, {
+ key: "Updated at",
+ value: "2022/04/15 17:44:59"
+ }, {
+ key: "Duration",
+ value: "5000ms"
+ }, {
+ key: "Size",
+ value: "30B"
+ }, {
+ key: "Tags Number",
+ value: "15"
+ }]
+ }
+ },
+ components: {
+ DetailListComponent,
+ DetailTableComponent
+ },
+ methods: {
+ handleOver() {
+ this.closeColor = "var(--color-main)",
+ this.closeBackgroundColor = "var(--color-select)"
+ },
+ handleLeave() {
+ this.closeColor = "var(--color-main-font)",
+ this.closeBackgroundColor = "var(--color-white)"
+ },
+ closeDetail() {
+ this.$emit('closeDetail')
+ }
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+ width: calc(100% - 30px);
+ height: calc(100% - 30px);
+ margin: 15px;
+
+ .detail-title {
+ width: 100%;
+ height: 15px;
+ line-height: 15px;
+ }
+
+ .detail-content {
+ margin-top: 15px;
+ width: 100%;
+ height: calc(100% - 30px);
+ background: var(--color-white);
+
+ .detail-content-container {
+ width: calc(100% - 40px);
+ height: calc(100% - 40px);
+
+ .detail-content-title {
+ width: 100%;
+ height: 20px;
+
+ .detail-close {
+ width: 20px;
+ height: 20px;
+ }
+ }
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git
a/ui/src/components/databaseComponents/mainComponents/SecondNavigationComponent.vue
b/ui/src/components/databaseComponents/mainComponents/SecondNavigationComponent.vue
index fb3aed4..8d06575 100644
---
a/ui/src/components/databaseComponents/mainComponents/SecondNavigationComponent.vue
+++
b/ui/src/components/databaseComponents/mainComponents/SecondNavigationComponent.vue
@@ -17,15 +17,112 @@
~ under the License.
-->
<template>
- <div class="flex center second-nav-contain">
- <el-button>Check All</el-button>
- <el-button>Check None</el-button>
+ <div class="flex second-nav-contain align-item-center justify-around">
+ <el-button class="nav-button" @click="checkAll">Check All</el-button>
+ <el-button class="nav-button" @click="checkNone">Check None</el-button>
+ <div class="flex align-item-center date-picker">
+ <div class="text-family text-main-color text-normal">Time</div>
+ <el-date-picker class="picker" v-model="value" align="right"
type="date" placeholder="Select time"
+ :picker-options="pickerOptions">
+ </el-date-picker>
+ </div>
+ <el-input class="search-input" placeholder="Search by Tags" clearable
v-model="query">
+ <el-button slot="append" icon="el-icon-search"></el-button>
+ </el-input>
+ <div class="flex refresh align-item-center justify-around pointer
border-radius-little"
+ :style="{ fontColor: refreshStyle.fontColor, color:
refreshStyle.color, backgroundColor: refreshStyle.backgroundColor }"
+ @mouseover="handleOver" @mouseleave="handleLeave">
+ <i class="el-icon-refresh-right icon"></i>
+ <div>Refresh</div>
+ </div>
</div>
</template>
+<script>
+export default {
+ name: 'SecondNavigationComponent',
+ data() {
+ return {
+ refreshStyle: {
+ fontColor: "var(--color-main-font)",
+ color: "var(--color-main-font)",
+ backgroundColor: "var(--color-white)"
+ },
+ query: "",
+ value: "",
+ pickerOptions: {
+ disabledDate(time) {
+ return time.getTime() > Date.now();
+ },
+ shortcuts: [{
+ text: 'Today',
+ onClick(picker) {
+ picker.$emit('pick', new Date());
+ }
+ }, {
+ text: 'Yesterday',
+ onClick(picker) {
+ const date = new Date();
+ date.setTime(date.getTime() - 3600 * 1000 * 24);
+ picker.$emit('pick', date);
+ }
+ }, {
+ text: 'A week ago',
+ onClick(picker) {
+ const date = new Date();
+ date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+ picker.$emit('pick', date);
+ }
+ }]
+ },
+ }
+ },
+ methods: {
+ handleOver() {
+ this.refreshStyle.fontColor = "var(--color-main)"
+ this.refreshStyle.color = "var(--color-main)"
+ this.refreshStyle.backgroundColor = "var(--color-select)"
+ },
+ handleLeave() {
+ this.refreshStyle.fontColor = "var(--color-main-font)"
+ this.refreshStyle.color = "var(--color-main-font)"
+ this.refreshStyle.backgroundColor = "var(--color-white)"
+ },
+ checkAll() {
+ this.$bus.$emit('checkAll')
+ },
+ checkNone() {
+ this.$bus.$emit('checkNone')
+ }
+ },
+}
+</script>
+
<style lang="scss" scoped>
+.nav-button {
+ width: 8%;
+}
+
.second-nav-contain {
width: 100%;
height: 50px;
+
+ .date-picker {
+ width: 35%;
+ }
+
+ .search-input {
+ width: 35%;
+ }
+
+ .refresh {
+ width: 5.5%;
+ height: 80%;
+ }
+}
+
+.picker {
+ width: 95%;
+ margin-left: 10px;
}
</style>
\ No newline at end of file
diff --git
a/ui/src/components/databaseComponents/mainComponents/TopButtonComponent.vue
b/ui/src/components/databaseComponents/mainComponents/TopButtonComponent.vue
index c877031..0e16307 100644
--- a/ui/src/components/databaseComponents/mainComponents/TopButtonComponent.vue
+++ b/ui/src/components/databaseComponents/mainComponents/TopButtonComponent.vue
@@ -18,7 +18,7 @@
-->
<template>
- <div class="buttonItem flex center text-main-color text-family"
:style="active" @mouseover="handleOver" @mouseleave="handleLeave">
+ <div class="button-item flex center text-main-color text-family"
:style="active" @mouseover="handleOver" @mouseleave="handleLeave">
<i :class="icon" class="text-big"></i>
<div class="text-main-color text-family text-title"
:style="active">{{name}}</div>
</div>
@@ -52,7 +52,7 @@ export default {
</script>
<style lang="scss" scoped>
-.buttonItem {
+.button-item {
height: 100%;
cursor: pointer;
}
diff --git
a/ui/src/components/databaseComponents/mainComponents/TopNavigationComponent.vue
b/ui/src/components/databaseComponents/mainComponents/TopNavigationComponent.vue
index e3af0b9..edea650 100644
---
a/ui/src/components/databaseComponents/mainComponents/TopNavigationComponent.vue
+++
b/ui/src/components/databaseComponents/mainComponents/TopNavigationComponent.vue
@@ -19,10 +19,16 @@
<template>
<div class="flex center top-contain">
- <div v-for="(item, index) in button" :key="item.name"
class="buttonItem poiner">
+ <div v-for="(item, index) in button" @click="handleNavigation(item,
index)" :key="item.name"
+ class="buttonItem poiner">
<top-button :icon="item.icon" :name="item.name"></top-button>
</div>
+ <!--el-drawer title="我是标题" :wrapperClosable="false" :size="450"
:visible.sync="drawer" :modal="false"
+ :append-to-body="true" direction="rtl"
:close-on-press-escape="false" :before-close="handleClose">
+ <span>我来啦!</span>
+ </el-drawer-->
</div>
+
</template>
<script>
@@ -40,7 +46,7 @@ export default {
}, {
icon: "el-icon-truck",
name: "Filter"
- },{
+ }, {
icon: "el-icon-sort",
name: "Sort"
}, {
@@ -55,14 +61,20 @@ export default {
}, {
icon: "el-icon-files",
name: "Design"
- }]
+ }],
+ drawer: false,
}
},
components: {
TopButton
},
methods: {
-
+ handleNavigation(item, index) {
+ this.$emit('handleNavigation', item, index)
+ },
+ handleClose(done) {
+ done()
+ }
}
}
</script>
@@ -73,6 +85,7 @@ export default {
height: 50px;
background-color: var(--color-Quad-border);
}
+
.buttonItem {
height: 100%;
flex-grow: 1;
diff --git
a/ui/src/components/databaseComponents/mainComponents/SecondNavigationComponent.vue
b/ui/src/components/databaseComponents/mainComponents/drawerRightComponents/DetailListComponent.vue
similarity index 65%
copy from
ui/src/components/databaseComponents/mainComponents/SecondNavigationComponent.vue
copy to
ui/src/components/databaseComponents/mainComponents/drawerRightComponents/DetailListComponent.vue
index fb3aed4..8122ba0 100644
---
a/ui/src/components/databaseComponents/mainComponents/SecondNavigationComponent.vue
+++
b/ui/src/components/databaseComponents/mainComponents/drawerRightComponents/DetailListComponent.vue
@@ -16,16 +16,24 @@
~ specific language governing permissions and limitations
~ under the License.
-->
+
<template>
- <div class="flex center second-nav-contain">
- <el-button>Check All</el-button>
- <el-button>Check None</el-button>
+ <div style="width: 100%; height: 45px;" class="flex justify-between
bd-bottom align-item-center">
+ <div class="text-main-color text-tips text-family">{{keyName}}</div>
+ <div class="text-secondary-color text-tips text-family">{{value}}</div>
</div>
</template>
-<style lang="scss" scoped>
-.second-nav-contain {
- width: 100%;
- height: 50px;
+<script>
+export default {
+ name: "DetailListComponent",
+ props: {
+ keyName: {
+ type: String,
+ },
+ value: {
+ type: String
+ }
+ }
}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git
a/ui/src/components/databaseComponents/mainComponents/drawerRightComponents/DetailTableComponent.vue
b/ui/src/components/databaseComponents/mainComponents/drawerRightComponents/DetailTableComponent.vue
new file mode 100644
index 0000000..9bbeb6d
--- /dev/null
+++
b/ui/src/components/databaseComponents/mainComponents/drawerRightComponents/DetailTableComponent.vue
@@ -0,0 +1,76 @@
+<!--
+ ~ Licensed to Apache Software Foundation (ASF) under one or more contributor
+ ~ license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright
+ ~ ownership. Apache Software Foundation (ASF) licenses this file to you under
+ ~ the Apache License, Version 2.0 (the "License"); you may
+ ~ not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ ~ KIND, either express or implied. See the License for the
+ ~ specific language governing permissions and limitations
+ ~ under the License.
+-->
+
+<template>
+ <div>
+ <el-table ref="multipleTable" height=395 stripe :data="tableData"
highlight-current-row tooltip-effect="dark"
+ @selection-change="handleSelectionChange">
+ <el-table-column label="Date" width="120">
+ <template slot-scope="scope">{{ scope.row.date }}</template>
+ </el-table-column>
+ <el-table-column prop="name" label="Name" width="120">
+ </el-table-column>
+ <el-table-column prop="address" label="Address"
show-overflow-tooltip>
+ </el-table-column>
+ </el-table>
+ </div>
+</template>
+
+<script>
+export default {
+ name: " DetailTableComponent",
+ data() {
+ return {
+ tableData: [{
+ date: '2016-05-03',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-02',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-04',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-01',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-03',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-02',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-04',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }, {
+ date: '2016-05-01',
+ name: 'Xiaohu Wang',
+ address: 'Shaihai'
+ }]
+ }
+ },
+}
+</script>
\ No newline at end of file
diff --git a/ui/src/main.js b/ui/src/main.js
index 20dc019..2944147 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -19,7 +19,7 @@
import Vue from 'vue'
import './plugins/axios'
-import { Button, Container, Header, Main, Aside, Menu, MenuItem,
MenuItemGroup, Submenu, Image, Loading, Tooltip, Tag, Card } from 'element-ui'
+import { Button, Container, Header, Main, Aside, Menu, MenuItem,
MenuItemGroup, Submenu, Image, Loading, Tooltip, Tag, Card, Drawer, MessageBox,
DatePicker, Input, Table, TableColumn, Pagination } from 'element-ui'
import App from './App.vue'
import router from './router'
import store from './store'
@@ -42,6 +42,13 @@ Vue.use(Image)
Vue.use(Tooltip)
Vue.use(Tag)
Vue.use(Card)
+Vue.use(Drawer)
+Vue.use(DatePicker)
+Vue.use(Input)
+Vue.use(Table)
+Vue.use(TableColumn)
+Vue.use((Pagination))
+Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$loading = Loading
Vue.prototype.$loading.create = () => {
Vue.prototype.$loading.instance = Loading.service({
@@ -55,7 +62,7 @@ Vue.prototype.$loading.close = () => {
Vue.prototype.$loading.instance.close()
})
}
-
+Vue.prototype.$bus = new Vue()
new Vue({
router,
diff --git a/ui/src/views/Database.vue b/ui/src/views/Database.vue
index 2cc40fd..83c1467 100644
--- a/ui/src/views/Database.vue
+++ b/ui/src/views/Database.vue
@@ -23,7 +23,6 @@
<aside-component></aside-component>
</el-aside>
<el-main style="background-color: var(--color-background)">
- <tag-navigation-component></tag-navigation-component>
<main-component></main-component>
</el-main>
</el-container>
@@ -31,7 +30,7 @@
<script>
import AsideComponent from
'../components/databaseComponents/AsideComponent.vue'
-import TagNavigationComponent from
'../components/databaseComponents/TagNavigationComponent.vue'
+
import MainComponent from '../components/databaseComponents/MainComponent.vue'
import { mapState } from 'vuex'
export default {
@@ -48,7 +47,6 @@ export default {
},
components: {
AsideComponent,
- TagNavigationComponent,
MainComponent
},
activated() {
