feat: 功能组件添加
新增vuex插件实现跨组件通信,调整国际化实现方式,调整路由参数,登录页面调整
This commit is contained in:
wanghaoyu
@@ -1,4 +1,3 @@
|
||||
'use strict'
|
||||
// Template version: 1.3.1
|
||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
|
||||
@@ -11,7 +10,8 @@ module.exports = {
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8088/nz-admin', //设置调用接口域名和端口号别忘了加http
|
||||
target: 'http://192.168.40.247:8080/nz-admin', //设置调用接口域名和端口号别忘了加http
|
||||
// target: 'http://192.168.40.247:8080/nz-admin', //设置调用接口域名和端口号别忘了加http
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
|
||||
|
||||
10
nezha-fronted/package-lock.json
generated
10
nezha-fronted/package-lock.json
generated
@@ -11037,11 +11037,6 @@
|
||||
"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",
|
||||
@@ -11138,6 +11133,11 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
|
||||
"integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
"element-ui": "^2.13.0",
|
||||
"vue": "^2.5.2",
|
||||
"vue-i18n": "^8.15.1",
|
||||
"vue-infinite-scroll": "^2.0.2",
|
||||
"vue-router": "^3.0.1"
|
||||
"vue-router": "^3.0.1",
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
|
||||
@@ -7,27 +7,33 @@
|
||||
background-color="#ffffff"
|
||||
unique-opened
|
||||
>
|
||||
<el-menu-item index="1" @click="jumpTo('dashboard')"><div>
|
||||
{{$t('overall.dashboard')}}</div></el-menu-item>
|
||||
<el-menu-item index="1" @click="jumpTo('dashboard')">
|
||||
<div>
|
||||
{{$t('overall.dashboard')}}
|
||||
</div>
|
||||
</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title"><div @click="jumpTo('project')">{{$t('overall.project')}}</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>
|
||||
<template slot="title">
|
||||
<div @click="jumpTo('project')">{{$t('overall.project')}}</div>
|
||||
</template>
|
||||
</el-submenu>
|
||||
<el-submenu index="3">
|
||||
<template slot="title"><div @click="jumpTo('asset')">{{$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>
|
||||
<template slot="title">
|
||||
<div @click="jumpTo('asset')">{{$t('overall.asset')}}</div>
|
||||
</template>
|
||||
<template v-for="(item, index) in assetData">
|
||||
<el-menu-item :index="index.toString()">
|
||||
<div @click="jumpTo('asset',item.id)">{{item.name}}</div>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</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>
|
||||
<template slot="title">
|
||||
<div @click="jumpTo('alarm')">{{$t('overall.alarm')}}</div>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="header-user-con">
|
||||
@@ -43,10 +49,10 @@
|
||||
<div :style="language!='en'?'color:#a6a6a6':''" @click="changeLocal('en')">
|
||||
<p>English</p>
|
||||
</div>
|
||||
<div :style="language=='cn'?'':'color:#a6a6a6'" @click="changeLocal('cn')" >
|
||||
<div :style="language=='cn'?'':'color:#a6a6a6'" @click="changeLocal('cn')">
|
||||
<p>简体</p>
|
||||
</div>
|
||||
<div style="cursor:no-drop;color:#a6a6a6" >
|
||||
<div style="cursor:no-drop;color:#a6a6a6">
|
||||
<p>русский</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,17 +72,19 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "Header",
|
||||
data(){
|
||||
return{
|
||||
language:localStorage.getItem("language"),
|
||||
data() {
|
||||
return {
|
||||
language: localStorage.getItem("language"),
|
||||
assetData: []
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
jumpTo(data){
|
||||
methods: {
|
||||
jumpTo(data,id) {
|
||||
this.$store.state.assetSelect = id
|
||||
this.$router.push({
|
||||
path: "/"+data,
|
||||
path: "/" + data,
|
||||
query: {
|
||||
t: +new Date() // 保证每次点击路由的query项都是不一样的，确保会重新刷新view
|
||||
t: +new Date()
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -84,22 +92,39 @@ export default {
|
||||
localStorage.setItem("language", lang);
|
||||
window.location.reload();
|
||||
},
|
||||
getAssetData() {
|
||||
this.$get('idc', this.pageObj).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.assetData = response.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getAssetData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-submenu__title .el-submenu__icon-arrow{
|
||||
.el-submenu__title .el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
.el-menu--horizontal>.el-menu-item.is-active{
|
||||
border-bottom:0px
|
||||
}
|
||||
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
|
||||
border-bottom:0px
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.submenu{
|
||||
.submenu {
|
||||
padding-left: 50%;
|
||||
width: 400px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
@@ -110,29 +135,35 @@ export default {
|
||||
z-index: 500;
|
||||
box-shadow: 0px 20px 13px -19px #5E5E5E;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
float: right;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.header-user-con {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-avator {
|
||||
padding: 0 5px 3px 0 ;
|
||||
padding: 0 5px 3px 0;
|
||||
margin-left: 20px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.user-avator:hover{
|
||||
|
||||
.user-avator:hover {
|
||||
border-radius: 2px;
|
||||
background: rgba(255,255,255,.3);
|
||||
background: rgba(255, 255, 255, .3);
|
||||
}
|
||||
|
||||
.user-avator span {
|
||||
font-size: 16px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.user-avator i.iconfont {
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
@@ -140,18 +171,21 @@ export default {
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
}
|
||||
.userout{
|
||||
|
||||
.userout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.userout>div{
|
||||
|
||||
.userout > div {
|
||||
width: 33.3%;
|
||||
color: rgba(51, 137, 185, 1);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.SignOut{
|
||||
|
||||
.SignOut {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
@@ -161,10 +195,12 @@ export default {
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.SignOut:hover{
|
||||
|
||||
.SignOut:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
.header-name-jiantou{
|
||||
|
||||
.header-name-jiantou {
|
||||
position: static !important;
|
||||
}
|
||||
</style>
|
||||
@@ -24,7 +24,7 @@ export default {
|
||||
|
||||
.content-box {
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
left: 370px;
|
||||
right: 30px;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
|
||||
@@ -1,89 +1,34 @@
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包
|
||||
const cn = {
|
||||
overall:{
|
||||
dashboard:'仪表盘',
|
||||
project:'工程',
|
||||
asset:'资产'
|
||||
overall: {
|
||||
dashboard: '仪表盘',
|
||||
project: '工程',
|
||||
asset: '资产',
|
||||
alarm: '警告'
|
||||
},
|
||||
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,
|
||||
asset: {
|
||||
tableTitle: {
|
||||
id: 'ID',
|
||||
assetType: '资产类型',
|
||||
Device: 'Device SN',
|
||||
IP: 'IP',
|
||||
assetState: '资产状态',
|
||||
Module: 'Module',
|
||||
Alarm: 'Alarm',
|
||||
dataCenter: '数据中心',
|
||||
cabinet: '机柜',
|
||||
model: '型号',
|
||||
manufacturer: '厂商',
|
||||
procurementDate: '采购日期',
|
||||
warrantyDate: '保修截止期',
|
||||
deviceDuty: '设备责任人',
|
||||
},
|
||||
tagTableTitle: {
|
||||
projectName: '项目名称',
|
||||
moduleName: 'Module Name',
|
||||
endPoint: 'EndPoint',
|
||||
alarm: 'Alarm',
|
||||
},
|
||||
]
|
||||
},
|
||||
...zhLocale
|
||||
}
|
||||
|
||||
@@ -6,84 +6,28 @@ const en = {
|
||||
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,
|
||||
tableTitle: {
|
||||
id: 'ID',
|
||||
assetType: 'assetType',
|
||||
Device: 'Device SN',
|
||||
IP: 'IP',
|
||||
assetState: 'assetState',
|
||||
Module: 'Module',
|
||||
Alarm: 'Alarm',
|
||||
dataCenter: 'dataCenter',
|
||||
cabinet: 'cabinet',
|
||||
model: 'model',
|
||||
manufacturer: 'manufacturer',
|
||||
procurementDate: '采购日期',
|
||||
warrantyDate: '保修截止期',
|
||||
deviceDuty: '设备责任人',
|
||||
},
|
||||
tagTableTitle: {
|
||||
projectName: '项目名称',
|
||||
moduleName: 'Module Name',
|
||||
endPoint: 'EndPoint',
|
||||
alarm: 'Alarm',
|
||||
},
|
||||
]
|
||||
},
|
||||
...enLocale
|
||||
}
|
||||
|
||||
@@ -1,10 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>登录</div>
|
||||
<el-input v-model="loginData.username" placeholder="请输入内容"></el-input>
|
||||
<el-input v-model="loginData.password" placeholder="请输入内容"></el-input>
|
||||
<div class='login-right'>
|
||||
<div class="login-content">
|
||||
<div class="login-title">
|
||||
<h1>NeZha</h1>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="login-input" style="margin-top: 20px;">
|
||||
<input v-model="loginData.username" class="inputL" placeholder="username" ></input>
|
||||
</div>
|
||||
|
||||
<div class="login-input">
|
||||
<input v-model="loginData.password" class="inputL" @keyup.enter="login" placeholder="password" ></input>
|
||||
</div>
|
||||
<div class="login-button">
|
||||
<button @click="login">登录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -20,11 +34,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
this.$post('api/sys/login', (this.loginData)).then(res => {
|
||||
this.$post('sys/login', (this.loginData)).then(res => {
|
||||
if (res.code == 200) {
|
||||
sessionStorage.setItem("token", res.data.token);
|
||||
this.$router.push({
|
||||
path: "/asset",
|
||||
path: "/dashboard",
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
@@ -37,5 +51,76 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
width:180px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 12px;
|
||||
background: #17558e !important;
|
||||
border-radius: 5px;
|
||||
font-size: 18px;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.login-right {
|
||||
width: 400px;
|
||||
height: 330px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-60%);
|
||||
right: 42%;
|
||||
background: #356b9d;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
}
|
||||
.login-input {
|
||||
height: 40px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.login-input input {
|
||||
outline: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.login-content .login-title{
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.login-content .login-title h1{
|
||||
color: rgb(23, 85, 142);
|
||||
font-size: 26px;
|
||||
}
|
||||
.login-content .login-title div{
|
||||
width: 260px;
|
||||
margin: 0 auto;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 20px;
|
||||
height: 1px;
|
||||
background: #507faa;
|
||||
}
|
||||
.login-content .login-content{
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.login-input{
|
||||
border: 2px solid #507faa;
|
||||
width: 70%;
|
||||
margin-left: 10%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +1,88 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<div class="cartTitle">
|
||||
<div class="sidebar-title">
|
||||
<div>Project</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-header">ALL</div>
|
||||
<div class="sidebar-info-footer">
|
||||
<el-checkbox-group v-model="checkList" size="small">
|
||||
<el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>{{item.name}}
|
||||
<div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SiderBar",
|
||||
data(){
|
||||
return{
|
||||
// arr:[12,3,4,5,6,7,8,98,54]
|
||||
data() {
|
||||
return {
|
||||
checkList: [0],
|
||||
checkListData: [],
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getData(){
|
||||
return this.$store.state.assetSelect
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
getData(newVal,oldVal){
|
||||
this.checkList.splice(1,1,newVal)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// gett: function (index) {
|
||||
// return "sdf" + index
|
||||
// },
|
||||
// loadMore() {
|
||||
// this.busy = true
|
||||
// setTimeout(() => {
|
||||
// this.page++
|
||||
// }, 1000)
|
||||
// this.arr.push('1')
|
||||
// }
|
||||
edit(data) {
|
||||
console.log(data)
|
||||
},
|
||||
getAssetData() {
|
||||
this.$get('idc', this.pageObj).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.checkListData = response.data.list
|
||||
console.log(this.checkListData)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAssetData()
|
||||
function aa() {
|
||||
console.log(this.$router.query)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cartTitle{
|
||||
padding-left: 30px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.projectCard{
|
||||
margin-left: 30px;
|
||||
<style>
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 0px;
|
||||
margin-top: 20px;
|
||||
width: 80%;
|
||||
height: 100px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
border-top:10px solid #777777
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
width: 370px;
|
||||
left: 0;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
@@ -58,4 +90,39 @@ export default {
|
||||
overflow-y: scroll;
|
||||
background: rgba(242, 242, 242, 0.94);
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
padding-left: 30px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.sidebar-info {
|
||||
margin-top: 20px;
|
||||
border: 1px solid #acacac;
|
||||
border-radius: 8px;
|
||||
height: calc(90vh - 55px);
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.sidebar-info-header {
|
||||
background: #acacac;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-info-footer {
|
||||
padding-top: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.checkbox-edit {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 230px;
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -198,7 +198,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <Pagination :pageobj="pageObj" ref="Pagination"></Pagination>-->
|
||||
<!-- <Pagination :pageobj="pageObj" ref="Pagination"></Pagination>-->
|
||||
<el-divider></el-divider>
|
||||
<span>默认CLI账户</span>
|
||||
<div style="padding-top: 10px">
|
||||
@@ -239,8 +239,83 @@ export default {
|
||||
name: "asset",
|
||||
data() {
|
||||
return {
|
||||
tableTitle: this.$t('asset.tableTitle'),
|
||||
tagTableTitle: this.$t('asset.tagTableTitle'),
|
||||
tableTitle: [
|
||||
{
|
||||
label: this.$t("asset.tableTitle.id"),
|
||||
prop: 'ID',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.assetType"),
|
||||
prop: '资产类型',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.Device"),
|
||||
prop: 'Device SN',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.IP"),
|
||||
prop: 'IP',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.assetState"),
|
||||
prop: '资产状态',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.Module"),
|
||||
prop: 'Module',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.Alarm"),
|
||||
prop: 'Alarm',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.dataCenter"),
|
||||
prop: '数据中心',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.cabinet"),
|
||||
prop: '机柜',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.model"),
|
||||
prop: '型号',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.manufacturer"),
|
||||
prop: '厂商',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.procurementDate"),
|
||||
prop: '采购日期',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.warrantyDate"),
|
||||
prop: '保修截止期',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.deviceDuty"),
|
||||
prop: '设备责任人',
|
||||
show: true,
|
||||
}],
|
||||
tagTableTitle: [
|
||||
{
|
||||
label: this.$t("asset.tagTableTitle.projectName"),
|
||||
prop: 'projectName',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tagTableTitle.moduleName"),
|
||||
prop: 'moduleName',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tagTableTitle.endPoint"),
|
||||
prop: 'endPoint',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tagTableTitle.alarm"),
|
||||
prop: 'alarm',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
tagTableData: [
|
||||
{
|
||||
@@ -263,12 +338,12 @@ export default {
|
||||
projectName: '2016-05-02',
|
||||
moduleName: '王小虎',
|
||||
endPoint: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
}
|
||||
],
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total:0
|
||||
total: 0
|
||||
},
|
||||
input: '',
|
||||
tabShow: false,
|
||||
@@ -280,18 +355,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getListData() {
|
||||
new Promise((resolve, reject) => {
|
||||
this.$get('api/asset',this.pageObj).
|
||||
then(response => {
|
||||
if(response.code==200){
|
||||
this.$get('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) {
|
||||
@@ -309,7 +377,7 @@ export default {
|
||||
this.pageObj.pageNo = val;
|
||||
this.getListData()
|
||||
},
|
||||
pageSize(val){
|
||||
pageSize(val) {
|
||||
this.pageObj.pageSize = val;
|
||||
this.getListData()
|
||||
}
|
||||
@@ -320,7 +388,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-table{
|
||||
.el-table {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@@ -353,7 +421,6 @@ export default {
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
|
||||
.right-box__top-btn {
|
||||
border-radius: 0 0 9px 9px;
|
||||
float: right;
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<iframe src="http://192.168.40.247:3000/" height="630" width="1200"></iframe>
|
||||
<div>
|
||||
<iframe src="http://192.168.40.247:3000/" class="dashboard"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,5 +13,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.dashboard{
|
||||
height: calc(90vh);
|
||||
width: calc(100%);
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,14 @@
|
||||
import axios from 'axios'
|
||||
import qs from 'qs' //引入数据格式化
|
||||
|
||||
axios.defaults.baseURL = 'http://192.168.40.247:8080/nz-admin' //远程服务器地址
|
||||
|
||||
axios.interceptors.request.use(config => {
|
||||
config.headers = {
|
||||
"Content-Type": 'application/x-www-form-urlencoded',
|
||||
}
|
||||
};
|
||||
config.data = qs.stringify(config.data);
|
||||
let token = sessionStorage.getItem('token')
|
||||
let token = sessionStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers['Authorization'] = token //请求头token
|
||||
}
|
||||
|
||||
@@ -5,10 +5,14 @@ import ElementUI from 'element-ui';
|
||||
import i18n from './components/common/i18n'
|
||||
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import store from './store/index';
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
|
||||
|
||||
import axios from 'axios';
|
||||
import { post, get} from './http.js'
|
||||
import {post, get} from './http.js'
|
||||
|
||||
import Pagination from "./components/common/pagination"; //引入全局分页组件
|
||||
Vue.component("Pagination", Pagination);
|
||||
@@ -19,6 +23,7 @@ Vue.prototype.$get = get;
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(Vuex)
|
||||
|
||||
|
||||
const clickoutside = {
|
||||
@@ -40,6 +45,7 @@ const clickoutside = {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
|
||||
el.__vueClickOutside__ = documentHandler;
|
||||
document.addEventListener('click', documentHandler);
|
||||
@@ -60,6 +66,7 @@ new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
i18n,
|
||||
components: { App },
|
||||
store,
|
||||
components: {App},
|
||||
template: '<App/>'
|
||||
})
|
||||
|
||||
17
nezha-fronted/src/store/index.js
Normal file
17
nezha-fronted/src/store/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
assetSelect:''
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
}
|
||||
});
|
||||
|
||||
export default store;
|
||||
Reference in New Issue
Block a user