feat: 功能组件添加
新增axios请求组件http.js,新增国际化组件i18n.js,新增完全分页组件pagination,样式调整
This commit is contained in:
wanghaoyu
@@ -6,12 +6,18 @@ const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
dev: {
|
||||
|
||||
// Paths
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {},
|
||||
|
||||
proxyTable: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8088/nz-admin', //设置调用接口域名和端口号别忘了加http
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
|
||||
},
|
||||
}
|
||||
},
|
||||
// Various Dev Server settings
|
||||
host: 'localhost', // can be overwritten by process.env.HOST
|
||||
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||
|
||||
45
nezha-fronted/package-lock.json
generated
45
nezha-fronted/package-lock.json
generated
@@ -289,6 +289,38 @@
|
||||
"postcss-value-parser": "^3.2.3"
|
||||
}
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
|
||||
"integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10",
|
||||
"is-buffer": "^2.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
}
|
||||
},
|
||||
"is-buffer": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
|
||||
"integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-code-frame": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
|
||||
@@ -6108,8 +6140,7 @@
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
},
|
||||
"multicast-dns": {
|
||||
"version": "6.2.3",
|
||||
@@ -11001,6 +11032,16 @@
|
||||
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
|
||||
"dev": true
|
||||
},
|
||||
"vue-i18n": {
|
||||
"version": "8.15.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.15.1.tgz",
|
||||
"integrity": "sha512-GBbz8qYCu0U2LNu4IcuFLZiuyninG4k26knvhL7GZG5Ncp4RR2VKDEH6g8gQ6I+UUBCvH2MBQVPSdxWe4DBkPw=="
|
||||
},
|
||||
"vue-infinite-scroll": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz",
|
||||
"integrity": "sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A=="
|
||||
},
|
||||
"vue-loader": {
|
||||
"version": "13.7.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz",
|
||||
|
||||
@@ -11,12 +11,21 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
body,html{
|
||||
/* font-family: "AlibabaPuHuiTiR"; */
|
||||
}
|
||||
.ly-table1 table{
|
||||
/* table-layout: unset; */
|
||||
}
|
||||
::-webkit-scrollbar{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb{
|
||||
border-radius: 1em;
|
||||
background-color: rgba(50,50,50,.3);
|
||||
}
|
||||
::-webkit-scrollbar-track{
|
||||
border-radius: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,6 @@ body {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow: auto;
|
||||
overflow-y: hidden;
|
||||
@@ -19,6 +18,17 @@ html {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*侧滑文字*/
|
||||
.el-form-item .el-form-item__label{
|
||||
font-size: 10px;
|
||||
text-align : left;
|
||||
}
|
||||
/*侧滑输入框高度*/
|
||||
.el-input .el-input__inner{
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
/*侧滑输入框宽度*/
|
||||
.el-form-item__content .el-input{
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>登录</div>
|
||||
<el-button @click="jump">默认按钮</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "login",
|
||||
methods:{
|
||||
jump(){
|
||||
this.$router.push({
|
||||
path: "/dashboard",
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -21,6 +21,12 @@
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="4">
|
||||
<template slot="title"><div @click="jumpTo('alarm')">{{$t('overall.asset')}}</div></template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
@@ -91,7 +97,7 @@ export default {
|
||||
<style scoped>
|
||||
.submenu{
|
||||
padding-left: 50%;
|
||||
width: 300px;
|
||||
width: 400px;
|
||||
float: left;
|
||||
}
|
||||
.header {
|
||||
@@ -101,7 +107,7 @@ export default {
|
||||
height: 60px;
|
||||
font-size: 22px;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
z-index: 500;
|
||||
box-shadow: 0px 20px 13px -19px #5E5E5E;
|
||||
}
|
||||
.header-right {
|
||||
|
||||
@@ -10,10 +10,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "./Header";
|
||||
import sideBar from "./SideBar";
|
||||
import Header from "./header";
|
||||
import sideBar from "./sideBar";
|
||||
export default {
|
||||
name: "Home.vue",
|
||||
name: "home",
|
||||
components: {Header,sideBar}
|
||||
}
|
||||
|
||||
@@ -34,6 +34,7 @@ export default {
|
||||
height: calc(100% - 50px);
|
||||
box-sizing: border-box;
|
||||
transform: translateY(0);
|
||||
padding: 20px
|
||||
}
|
||||
@media screen and (max-width: 1600px) {
|
||||
.content-box {
|
||||
@@ -5,6 +5,86 @@ const cn = {
|
||||
project:'工程',
|
||||
asset:'资产'
|
||||
},
|
||||
asset:{
|
||||
tableTitle:[
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'ID',
|
||||
show: true,
|
||||
}, {
|
||||
label: '资产类型',
|
||||
prop: '资产类型',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'Device SN',
|
||||
prop: 'Device SN',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'IP',
|
||||
prop: 'IP',
|
||||
show: true,
|
||||
}, {
|
||||
label: '资产状态',
|
||||
prop: '资产状态',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'Module',
|
||||
prop: 'Module',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'Alarm',
|
||||
prop: 'Alarm',
|
||||
show: true,
|
||||
}, {
|
||||
label: '数据中心',
|
||||
prop: '数据中心',
|
||||
show: true,
|
||||
}, {
|
||||
label: '机柜',
|
||||
prop: '机柜',
|
||||
show: true,
|
||||
}, {
|
||||
label: '型号',
|
||||
prop: '型号',
|
||||
show: true,
|
||||
}, {
|
||||
label: '厂商',
|
||||
prop: '厂商',
|
||||
show: true,
|
||||
}, {
|
||||
label: '采购日期',
|
||||
prop: '采购日期',
|
||||
show: true,
|
||||
}, {
|
||||
label: '保修截止期',
|
||||
prop: '保修截止期',
|
||||
show: true,
|
||||
}, {
|
||||
label: '设备责任人',
|
||||
prop: '设备责任人',
|
||||
show: true,
|
||||
}
|
||||
],
|
||||
tagTableTitle: [
|
||||
{
|
||||
label: '项目名称',
|
||||
prop: 'projectName',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'Module Name',
|
||||
prop: 'moduleName',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'EndPoint',
|
||||
prop: 'endPoint',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'Alarm',
|
||||
prop: 'alarm',
|
||||
show: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
...zhLocale
|
||||
}
|
||||
|
||||
|
||||
@@ -5,6 +5,86 @@ const en = {
|
||||
project:'project',
|
||||
asset:'asset'
|
||||
},
|
||||
asset:{
|
||||
tableTitle:[
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'ID',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'Asset Type',
|
||||
prop: '资产类型',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'Device SN',
|
||||
prop: 'Device SN',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'IP',
|
||||
prop: 'IP',
|
||||
show: true,
|
||||
}, {
|
||||
label: '资产状态',
|
||||
prop: '资产状态',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'Module',
|
||||
prop: 'Module',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'Alarm',
|
||||
prop: 'Alarm',
|
||||
show: true,
|
||||
}, {
|
||||
label: '数据中心',
|
||||
prop: '数据中心',
|
||||
show: true,
|
||||
}, {
|
||||
label: '机柜',
|
||||
prop: '机柜',
|
||||
show: true,
|
||||
}, {
|
||||
label: '型号',
|
||||
prop: '型号',
|
||||
show: true,
|
||||
}, {
|
||||
label: '厂商',
|
||||
prop: '厂商',
|
||||
show: true,
|
||||
}, {
|
||||
label: '采购日期',
|
||||
prop: '采购日期',
|
||||
show: true,
|
||||
}, {
|
||||
label: '保修截止期',
|
||||
prop: '保修截止期',
|
||||
show: true,
|
||||
}, {
|
||||
label: '设备责任人',
|
||||
prop: '设备责任人',
|
||||
show: true,
|
||||
}
|
||||
],
|
||||
tagTableTitle: [
|
||||
{
|
||||
label: 'Project Name',
|
||||
prop: 'projectName',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'Module Name',
|
||||
prop: 'moduleName',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'EndPoint',
|
||||
prop: 'endPoint',
|
||||
show: true,
|
||||
}, {
|
||||
label: 'Alarm',
|
||||
prop: 'alarm',
|
||||
show: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
...enLocale
|
||||
}
|
||||
|
||||
|
||||
41
nezha-fronted/src/components/common/login.vue
Normal file
41
nezha-fronted/src/components/common/login.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>登录</div>
|
||||
<el-input v-model="loginData.username" placeholder="请输入内容"></el-input>
|
||||
<el-input v-model="loginData.password" placeholder="请输入内容"></el-input>
|
||||
<button @click="login">登录</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "login",
|
||||
data() {
|
||||
return {
|
||||
loginData: {
|
||||
username: '',
|
||||
password: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
this.$post('api/sys/login', (this.loginData)).then(res => {
|
||||
if (res.code == 200) {
|
||||
sessionStorage.setItem("token", res.data.token);
|
||||
this.$router.push({
|
||||
path: "/asset",
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
64
nezha-fronted/src/components/common/pagination.vue
Normal file
64
nezha-fronted/src/components/common/pagination.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
ref="page"
|
||||
background
|
||||
@size-change="size"
|
||||
@prev-click="prev"
|
||||
@next-click="next"
|
||||
@current-change="current"
|
||||
:page-sizes="[20, 50, 100, 300]"
|
||||
:page-size="20"
|
||||
layout="prev, pager, next, jumper, sizes, total"
|
||||
:total="this.pageObj.total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "pagination",
|
||||
props: ['pageObj'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
background() {
|
||||
this.backgroundColor();
|
||||
},
|
||||
//点击上一页箭头
|
||||
prev() {
|
||||
this.backgroundColor();
|
||||
},
|
||||
//点击下一页箭头
|
||||
next(val) {
|
||||
this.backgroundColor();
|
||||
},
|
||||
//currentPage 改变时会触发
|
||||
current(val) {
|
||||
this.$emit("pageNo", val);
|
||||
this.backgroundColor();
|
||||
},
|
||||
size(val) {
|
||||
this.$emit("pageSize", val);
|
||||
this.backgroundColor();
|
||||
},
|
||||
//设置当前页的样式
|
||||
backgroundColor() {
|
||||
this.list = this.$refs.page.$el.children[2].children;
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
const element = this.list[i];
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
margin-left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
</style>
|
||||
@@ -3,9 +3,9 @@
|
||||
<div class="cartTitle">
|
||||
<div>Project</div>
|
||||
</div>
|
||||
<div v-for="{item} in arr" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="1">
|
||||
<div class="projectCard" :id="gett(item)"></div>
|
||||
</div>
|
||||
<!-- <div v-for="{item} in arr" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="1">-->
|
||||
<!-- <div class="projectCard" :id="gett(item)"></div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -14,20 +14,20 @@ export default {
|
||||
name: "SiderBar",
|
||||
data(){
|
||||
return{
|
||||
arr:[12,3,4,5,6,7,8,98,54]
|
||||
// arr:[12,3,4,5,6,7,8,98,54]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
gett: function (index) {
|
||||
return "sdf" + index
|
||||
},
|
||||
loadMore() {
|
||||
this.busy = true
|
||||
setTimeout(() => {
|
||||
this.page++
|
||||
}, 1000)
|
||||
this.arr.push('1')
|
||||
}
|
||||
// gett: function (index) {
|
||||
// return "sdf" + index
|
||||
// },
|
||||
// loadMore() {
|
||||
// this.busy = true
|
||||
// setTimeout(() => {
|
||||
// this.page++
|
||||
// }, 1000)
|
||||
// this.arr.push('1')
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,388 @@
|
||||
<template>
|
||||
<div style="height:95%;overflow-y:auto">
|
||||
<div>
|
||||
asset
|
||||
<el-input
|
||||
style="width: 90px;"
|
||||
placeholder="请输入内容"
|
||||
v-model="input"
|
||||
clearable>
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-table
|
||||
:data="this.tableData"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="(item, index) in tableTitle"
|
||||
v-if="item.show"
|
||||
min-width="120"
|
||||
:key="`col_${index}`"
|
||||
:label="item.label"
|
||||
>
|
||||
{{item}}
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop=='ID'">
|
||||
<p>
|
||||
<span>{{scope.row['id']}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="item.prop=='IP'">
|
||||
<p>
|
||||
<span>{{scope.row['host']}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看</el-button>
|
||||
<el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
<transition name="el-zoom-in-center" @click.stop>
|
||||
<div class="right-menu" v-if="tabShow" v-clickoutside:tagHide="tagShow">
|
||||
<div v-if="this.tagType=='add'">
|
||||
<el-form ref="form" :model="form" label-width="120px">
|
||||
<div class="right-box__top-btns">
|
||||
<div class="right-box__top-btn right-box__top-btn_full">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
<span>Esc</span>
|
||||
</div>
|
||||
<div class="right-box__top-btn right-box__top-btn_full">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<span>Save</span>
|
||||
</div>
|
||||
<div class="right-box__top-btn">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-delete"></i>
|
||||
</div>
|
||||
<span>Delete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-form-style">
|
||||
<el-form-item label="IP">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="SN">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Asset Type">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="ModelId">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="IDC">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Cabinet">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Host">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="State">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="this.tagType=='edit'">
|
||||
<el-form ref="form" :model="form" label-width="120px" size="small">
|
||||
<div class="right-box__top-btns">
|
||||
<div class="right-box__top-btn right-box__top-btn_full">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
<span>Esc</span>
|
||||
</div>
|
||||
<div class="right-box__top-btn right-box__top-btn_full">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<span>Save</span>
|
||||
</div>
|
||||
<div class="right-box__top-btn">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-delete"></i>
|
||||
</div>
|
||||
<span>Delete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-form-style">
|
||||
<el-form-item label="IP">
|
||||
<span>192.168.100.255</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SN">
|
||||
<span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Asset Type">
|
||||
<span>服务器</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="ModelId">
|
||||
<span>No1</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="IDC">
|
||||
<span>国内地区/北京市/1号</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Cabinet">
|
||||
<span>13排223机柜</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Host">
|
||||
<span>192.158.22.22</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="State">
|
||||
<span>在库</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Alarm">
|
||||
<div>111</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="padding-top: 10px">
|
||||
<span>endPoint:</span>
|
||||
</div>
|
||||
<div class="tag-table">
|
||||
<el-table
|
||||
:data="tagTableData"
|
||||
:row-style="{height:'20px'}"
|
||||
:cell-style="{padding:'2px'}"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="(item, index) in tagTableTitle"
|
||||
v-if="item.show"
|
||||
:key="`col_${index}`"
|
||||
:label="item.label"
|
||||
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop=='projectName'">
|
||||
<p>
|
||||
<span>{{scope.row['projectName']}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="item.prop=='moduleName'">
|
||||
<p>
|
||||
<span>{{scope.row['moduleName']}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="item.prop=='endPoint'">
|
||||
<div class="tableSquare">342</div>
|
||||
</div>
|
||||
<div v-if="item.prop=='alarm'">
|
||||
<div class="tableSquare">{{11}}/{{111}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label=""
|
||||
width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看
|
||||
</el-button>
|
||||
<el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <Pagination :pageobj="pageObj" ref="Pagination"></Pagination>-->
|
||||
<el-divider></el-divider>
|
||||
<span>默认CLI账户</span>
|
||||
<div style="padding-top: 10px">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域" style="width: 90%">
|
||||
<el-option label="区域一" value="shanghai">111111111111111111111</el-option>
|
||||
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
||||
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
||||
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-form-style">
|
||||
<el-form-item label="IP">
|
||||
<span>192.168.100.255</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SN">
|
||||
<span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Asset Type">
|
||||
<span>服务器</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="ModelId">
|
||||
<span>No1</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="IDC">
|
||||
<span>国内地区/北京市/1号</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "asset"
|
||||
name: "asset",
|
||||
data() {
|
||||
return {
|
||||
tableTitle: this.$t('asset.tableTitle'),
|
||||
tagTableTitle: this.$t('asset.tagTableTitle'),
|
||||
tableData: [],
|
||||
tagTableData: [
|
||||
{
|
||||
projectName: '2016-05-02',
|
||||
moduleName: '王小虎',
|
||||
endPoint: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
projectName: '2016-05-04',
|
||||
moduleName: '王小虎',
|
||||
endPoint: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
projectName: '2016-05-01',
|
||||
moduleName: '王小虎',
|
||||
endPoint: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
projectName: '2016-05-03',
|
||||
moduleName: '王小虎',
|
||||
endPoint: '上海市普陀区金沙江路 1516 弄'
|
||||
}, {
|
||||
projectName: '2016-05-02',
|
||||
moduleName: '王小虎',
|
||||
endPoint: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
],
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total:0
|
||||
},
|
||||
input: '',
|
||||
tabShow: false,
|
||||
tagType: 'add',
|
||||
form: {
|
||||
name: ''
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getListData() {
|
||||
new Promise((resolve, reject) => {
|
||||
this.$get('api/asset',this.pageObj).
|
||||
then(response => {
|
||||
if(response.code==200){
|
||||
this.tableData = response.data.list
|
||||
console.log(this.tableData)
|
||||
this.pageObj.total = response.data.total
|
||||
}
|
||||
resolve(response.data)
|
||||
}).catch(err => {
|
||||
reject(err.response)
|
||||
})
|
||||
})
|
||||
},
|
||||
tagShow(t) {
|
||||
this.tabShow = false
|
||||
if (t === 'showAdd') {
|
||||
this.tabShow = true
|
||||
this.tagType = 'add'
|
||||
}
|
||||
if (t === 'showEdit') {
|
||||
this.tabShow = true
|
||||
this.tagType = 'edit'
|
||||
}
|
||||
},
|
||||
pageNo(val) {
|
||||
this.pageObj.pageNo = val;
|
||||
this.getListData()
|
||||
},
|
||||
pageSize(val){
|
||||
this.pageObj.pageSize = val;
|
||||
this.getListData()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getListData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-table{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
<style scoped>
|
||||
.el-form-style .el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.el-form-style .el-form-item .el-form-item__content {
|
||||
height: 25px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.right-menu {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
z-index: 500;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 15px #ccc;
|
||||
background-color: white;
|
||||
padding: 0 20px;
|
||||
width: 580px;
|
||||
height: calc(100% - 60px);
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
|
||||
.right-box__top-btn {
|
||||
border-radius: 0 0 9px 9px;
|
||||
float: right;
|
||||
color: #656565;
|
||||
height: 35px;
|
||||
font-size: 12px;
|
||||
padding: 3px 8px 1px 8px;
|
||||
border: 1px solid #aaaaaa;
|
||||
border-top: none;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.right-box__top-btn_full {
|
||||
background-color: #656565;
|
||||
border: 1px solid #656565;
|
||||
border-top: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-form-style {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.tableSquare {
|
||||
border: 1px solid #000;
|
||||
height: 25px;
|
||||
width: 90px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -8,7 +8,7 @@ import Vue from 'vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
import axios from 'axios';
|
||||
import { post, get, patch, put, del } from './components/common/js/http.js'
|
||||
import { post, get} from './http.js'
|
||||
|
||||
import Pagination from "./components/common/pagination"; //引入全局分页组件
|
||||
Vue.component("Pagination", Pagination);
|
||||
@@ -16,13 +16,45 @@ Vue.component("Pagination", Pagination);
|
||||
Vue.prototype.$axios = axios
|
||||
Vue.prototype.$post = post;
|
||||
Vue.prototype.$get = get;
|
||||
Vue.prototype.$patch = patch;
|
||||
Vue.prototype.$put = put;
|
||||
Vue.prototype.$delete = del;
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI)
|
||||
|
||||
|
||||
const clickoutside = {
|
||||
// 初始化指令
|
||||
bind(el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
// 这里判断点击的元素是否是本身，是本身，则返回
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
// 判断指令中是否绑定了函数
|
||||
if (binding.expression) {
|
||||
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
|
||||
if (binding.arg) {
|
||||
binding.value(e, binding.arg);
|
||||
} else {
|
||||
binding.value(e);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
|
||||
el.__vueClickOutside__ = documentHandler;
|
||||
document.addEventListener('click', documentHandler);
|
||||
},
|
||||
unbind(el, binding) {
|
||||
// 解除事件监听
|
||||
document.removeEventListener('click', el.__vueClickOutside__);
|
||||
delete el.__vueClickOutside__;
|
||||
},
|
||||
};
|
||||
|
||||
Vue.directive('clickoutside',
|
||||
clickoutside
|
||||
)
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
|
||||
@@ -11,11 +11,11 @@ export default new Router({
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: resolve => require(['../components/common/Login.vue'], resolve),
|
||||
component: resolve => require(['../components/common/login.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: resolve => require(['../components/common/Home.vue'], resolve),
|
||||
component: resolve => require(['../components/common/home.vue'], resolve),
|
||||
children: [
|
||||
{
|
||||
path: '/dashboard',
|
||||
@@ -27,7 +27,11 @@ export default new Router({
|
||||
},
|
||||
{
|
||||
path: '/asset',
|
||||
component: resolve => require(['../components/page/project/project.vue'], resolve),
|
||||
component: resolve => require(['../components/page/asset/asset.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/alarm',
|
||||
component: resolve => require(['../components/page/config/account.vue'], resolve),
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user