添加后台管理页面
- 设备表格 - 项目表格 - 传感器表格 - 解决刷新后token无效问题
This commit is contained in:
parent
0f5fdd6391
commit
40149cb58c
@ -134,9 +134,6 @@ export default {
|
||||
this.form.utel = "";
|
||||
this.form.upass = "";
|
||||
this.form.checkcode = "";
|
||||
},
|
||||
checkDingding() {
|
||||
|
||||
},
|
||||
createCode() {
|
||||
let code = "";
|
||||
|
||||
@ -1,7 +1,14 @@
|
||||
<template>
|
||||
<a-layout>
|
||||
<a-layout-header style="height: 110px;background:#04888A;">
|
||||
<a-row style="color:white"> 标题？ </a-row>
|
||||
<a-layout-header style="height: 110px;">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
水质监测平台
|
||||
</a-col>
|
||||
<a-col :span="2" :offset="10">
|
||||
<a-button icon="logout" @click="logout" >登出</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-menu v-model="current" mode="horizontal" theme="dark" @click="handleMenuClick">
|
||||
<a-menu-item key="map">
|
||||
@ -31,7 +38,9 @@
|
||||
</a-row>
|
||||
</a-layout-header>
|
||||
<a-layout-content>
|
||||
<keep-alive >
|
||||
<component :is="currentComp"/>
|
||||
</keep-alive>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</template>
|
||||
@ -43,14 +52,14 @@ import MapLayout from '@/components/map/Index'
|
||||
import Search from '@/components/search/Index'
|
||||
import Logs from '@/components/logs/Index'
|
||||
import Admin from '@/components/admin/Index'
|
||||
|
||||
import { logout } from '@/utils/http'
|
||||
export default {
|
||||
components: {
|
||||
'icon-font':IconFont,
|
||||
'map-layout':MapLayout,
|
||||
'search':Search,
|
||||
// 'logs':Logs,
|
||||
// 'admin':Admin
|
||||
'admin':Admin
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -66,6 +75,14 @@ export default {
|
||||
methods: {
|
||||
handleMenuClick({item, key, keyPath}) {
|
||||
this.currentComp = key
|
||||
},
|
||||
logout() {
|
||||
logout()
|
||||
sessionStorage.clear()
|
||||
this.$store.commit('logout')
|
||||
this.$router.push({
|
||||
path: '/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,13 +1,68 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div>
|
||||
<a-layout>
|
||||
<a-layout-sider>
|
||||
<a-menu
|
||||
:default-selected-keys="[current]"
|
||||
mode="vertical"
|
||||
@click="handleClick"
|
||||
theme="dark"
|
||||
>
|
||||
<a-menu-item key="sensor-table">
|
||||
<a-icon type="pie-chart" />
|
||||
<span>传感器</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="device-table">
|
||||
<a-icon type="desktop" />
|
||||
<span>设备</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="project-table">
|
||||
<a-icon type="inbox" />
|
||||
<span>项目</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
<a-layout>
|
||||
<a-layout-content>
|
||||
<component :is="current" />
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import SensorTable from "./tables/SensorTable";
|
||||
import DeviceTable from './tables/DeviceTable';
|
||||
import ProjectTable from './tables/ProjectTable';
|
||||
|
||||
}
|
||||
import { getData, URL_MAP } from "@/utils/http";
|
||||
export default {
|
||||
components: {
|
||||
'sensor-table':SensorTable,
|
||||
'device-table':DeviceTable,
|
||||
'project-table':ProjectTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: 'sensor-table'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick({ item, key, keyPath }) {
|
||||
this.current = key;
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
// let data = []
|
||||
// data.push(getData(URL_MAP.DEVICE_LIST))
|
||||
// data.push(getData(URL_MAP.SENSOR_LIST))
|
||||
// data.push(getData(URL_MAP.PROJECT_LIST))
|
||||
// let results = await Promise.all(data)
|
||||
// console.log(results)
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
115
src/components/admin/tables/DeviceTable.vue
Normal file
115
src/components/admin/tables/DeviceTable.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-table
|
||||
:columns="tableCols"
|
||||
:data-source="tableRows"
|
||||
:loading="loading"
|
||||
:rowKey="idName"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<span slot="anyone" slot-scope="isanyone">
|
||||
<a-tag v-if="isanyone">
|
||||
是
|
||||
</a-tag>
|
||||
<a-tag v-else>
|
||||
否
|
||||
</a-tag>
|
||||
</span>
|
||||
<span slot="project" slot-scope="project">
|
||||
<a-tag v-if="project !== null">
|
||||
{{ project.name}}
|
||||
</a-tag>
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a-button size="small" type="link" @click="() => handleDetail(record)" >查看</a-button>
|
||||
<a-divider type="vertical" />
|
||||
<a-button type="danger" size="small" @click="() => handleDelete(record)" >删除</a-button>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getData, URL_MAP } from '@/utils/http'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableRows: [],
|
||||
tableCols: [
|
||||
{
|
||||
dataIndex: '_id',
|
||||
key: '_id',
|
||||
title: '设备ID'
|
||||
},
|
||||
{
|
||||
dataIndex: 'device_name',
|
||||
key: 'device_name',
|
||||
title: '设备名称'
|
||||
},
|
||||
{
|
||||
dataIndex: 'device_uint',
|
||||
key: 'device_uint',
|
||||
title: '设备型号'
|
||||
},
|
||||
{
|
||||
dataIndex: 'isanyone',
|
||||
key: 'isanyone',
|
||||
title: '是否公开',
|
||||
scopedSlots: { customRender: 'anyone' },
|
||||
},
|
||||
{
|
||||
dataIndex: 'project',
|
||||
key: 'project',
|
||||
title: '所属项目',
|
||||
scopedSlots: { customRender: 'project' }
|
||||
},
|
||||
{
|
||||
key: 'action',
|
||||
title: '操作',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
pages: {},
|
||||
loading: false,
|
||||
listUrl: URL_MAP.DEVICE_LIST,
|
||||
detailUrl: URL_MAP.DEVICE_DETAIL,
|
||||
idName: '_id'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
console.log(pagination)
|
||||
},
|
||||
async fetch(params) {
|
||||
this.loading = true
|
||||
try{
|
||||
let results = await getData(this.listUrl, params)
|
||||
let data = results.data
|
||||
const pagination = { ...this.pages }
|
||||
pagination.total = data.length
|
||||
this.tableRows = data
|
||||
this.pages = pagination
|
||||
}catch(e)
|
||||
{
|
||||
console.log(e)
|
||||
}finally{
|
||||
this.loading = false
|
||||
}
|
||||
|
||||
},
|
||||
handleDetail(record) {
|
||||
console.log(record)
|
||||
},
|
||||
handleDelete(record) {
|
||||
console.log(record)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetch({})
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
103
src/components/admin/tables/ProjectTable.vue
Normal file
103
src/components/admin/tables/ProjectTable.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-table
|
||||
:columns="tableCols"
|
||||
:data-source="tableRows"
|
||||
:loading="loading"
|
||||
:rowKey="idName"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
|
||||
<span slot="managers" slot-scope="managers">
|
||||
<a-tag v-for="item in managers" :key="item._id">
|
||||
{{ item.name}}
|
||||
</a-tag>
|
||||
</span>
|
||||
<span slot="normals" slot-scope="normals">
|
||||
<a-tag v-for="item in normals" :key="item._id">
|
||||
{{ item.name}}
|
||||
</a-tag>
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a-button size="small" type="link" @click="() => handleDetail(record)" >查看</a-button>
|
||||
<a-divider type="vertical" />
|
||||
<a-button type="danger" size="small" @click="() => handleDelete(record)" >删除</a-button>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getData, URL_MAP } from '@/utils/http'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableRows: [],
|
||||
tableCols: [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
title: '名称'
|
||||
},
|
||||
{
|
||||
dataIndex: 'managers',
|
||||
key: 'managers',
|
||||
title: '管理员',
|
||||
scopedSlots: { customRender: 'managers' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'normals',
|
||||
key: 'normals',
|
||||
title: '普通用户',
|
||||
scopedSlots: { customRender: 'normals' }
|
||||
},
|
||||
{
|
||||
key: 'action',
|
||||
title: '操作',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
pages: {},
|
||||
loading: false,
|
||||
listUrl: URL_MAP.PROJECT_LIST,
|
||||
detailUrl: URL_MAP.PROJECT_DETAIL,
|
||||
idName: '_id'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
console.log(pagination)
|
||||
},
|
||||
async fetch(params) {
|
||||
this.loading = true
|
||||
try{
|
||||
let results = await getData(this.listUrl, params)
|
||||
let data = results.data
|
||||
const pagination = { ...this.pages }
|
||||
pagination.total = data.length
|
||||
this.tableRows = data
|
||||
this.pages = pagination
|
||||
}catch(e)
|
||||
{
|
||||
console.log(e)
|
||||
}finally{
|
||||
this.loading = false
|
||||
}
|
||||
|
||||
},
|
||||
handleDetail(record) {
|
||||
console.log(record)
|
||||
},
|
||||
handleDelete(record) {
|
||||
console.log(record)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetch({})
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
90
src/components/admin/tables/SensorTable.vue
Normal file
90
src/components/admin/tables/SensorTable.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-table
|
||||
:columns="tableCols"
|
||||
:data-source="tableRows"
|
||||
:loading="loading"
|
||||
:rowKey="idName"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a-button size="small" type="link" @click="() => handleDetail(record)" >查看</a-button>
|
||||
<a-divider type="vertical" />
|
||||
<a-button type="danger" size="small" @click="() => handleDelete(record)" >删除</a-button>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getData, URL_MAP } from '@/utils/http'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableRows: [],
|
||||
tableCols: [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
title: '名称'
|
||||
},
|
||||
{
|
||||
dataIndex: 'param_name',
|
||||
key: 'param_name',
|
||||
title: '传感器参数'
|
||||
},
|
||||
{
|
||||
dataIndex: 'param_key',
|
||||
key: 'param_key',
|
||||
title: '参数key'
|
||||
},
|
||||
{
|
||||
key: 'action',
|
||||
title: '操作',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
pages: {},
|
||||
loading: false,
|
||||
listUrl: URL_MAP.SENSOR_LIST,
|
||||
detailUrl: URL_MAP.SENSOR_DETAIL,
|
||||
idName: '_id'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
console.log(pagination)
|
||||
},
|
||||
async fetch(params) {
|
||||
this.loading = true
|
||||
try{
|
||||
let results = await getData(this.listUrl, params)
|
||||
let data = results.data
|
||||
const pagination = { ...this.pages }
|
||||
pagination.total = data.length
|
||||
this.tableRows = data
|
||||
this.pages = pagination
|
||||
}catch(e)
|
||||
{
|
||||
console.log(e)
|
||||
}finally{
|
||||
this.loading = false
|
||||
}
|
||||
|
||||
},
|
||||
handleDetail(record) {
|
||||
console.log(record)
|
||||
},
|
||||
handleDelete(record) {
|
||||
console.log(record)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetch({})
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -31,6 +31,7 @@ export async function login(username, passwd, uuid, capthe)
|
||||
|
||||
response = await instance.get('current/')
|
||||
data = await response.data
|
||||
data.token = token
|
||||
return data
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import Router from 'vue-router'
|
||||
import Index from '@/components/Main'
|
||||
import Login from '@/components/Login'
|
||||
import store from './store'
|
||||
|
||||
import { setAuth } from './http'
|
||||
Vue.use(Router)
|
||||
|
||||
const routes = [
|
||||
@ -26,15 +26,14 @@ const routes = [
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
if (sessionStorage.getItem("store")) {
|
||||
console.log(sessionStorage.getItem("store"))
|
||||
store.replaceState(Object.assign({}, store.state, JSON.parse(sessionStorage.getItem("store"))))
|
||||
if (store.state.login) {
|
||||
if (store.state.uinfo) {
|
||||
setAuth(store.state.uinfo.token);
|
||||
}
|
||||
if (store.state.token) {
|
||||
setAuth(store.state.token);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const router = new Router({
|
||||
base: process.env.BASE_URL,
|
||||
|
||||
@ -9,7 +9,6 @@ const storeToSession = store => {
|
||||
if (sessionStorage.getItem('store')){
|
||||
sessionStorage.removeItem('store')
|
||||
}
|
||||
console.log(store)
|
||||
sessionStorage.setItem('store', JSON.stringify(state))
|
||||
})
|
||||
}
|
||||
@ -18,13 +17,17 @@ const store = new Vuex.Store({
|
||||
state: {
|
||||
userInfo:null,
|
||||
phone: document.body.clientWidth < 800,
|
||||
token: '',
|
||||
login:false,
|
||||
loginTime:0,
|
||||
second: 60 * 60 * 2,
|
||||
second: 60 * 60 * 24,
|
||||
logs:'',
|
||||
data:{},
|
||||
currentComp: 'map',
|
||||
cacheData:{}
|
||||
cacheData:{},
|
||||
deviceList:[],
|
||||
projectList:[],
|
||||
sensorList:[]
|
||||
},
|
||||
mutations: {
|
||||
phone(state, o) {
|
||||
@ -34,12 +37,22 @@ const store = new Vuex.Store({
|
||||
state.userInfo = o
|
||||
state.login = true
|
||||
state.loginTime = new Date().getTime()
|
||||
state.token = o.token
|
||||
},
|
||||
logout(state)
|
||||
{
|
||||
state.userInfo=null
|
||||
state.login = false
|
||||
},
|
||||
deviceList(state, o) {
|
||||
state.deviceList = o
|
||||
},
|
||||
projectList(state, o) {
|
||||
state.projectList = o
|
||||
},
|
||||
sensorList(state, o) {
|
||||
state.sensorList = o
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
phone(state) {
|
||||
@ -97,6 +110,15 @@ const store = new Vuex.Store({
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
deviceList(state) {
|
||||
return state.deviceList
|
||||
},
|
||||
projectList(state) {
|
||||
return state.projectList
|
||||
},
|
||||
sensorList(state) {
|
||||
return state.sensorList
|
||||
}
|
||||
},
|
||||
plugins: [storeToSession]
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
import { getData } from './http'
|
||||
|
||||
function processDevice(store)
|
||||
{
|
||||
const { deviceList, projectList, sensorList } = store.state
|
||||
|
||||
let deviceIdName = {}
|
||||
let projectIdName = {}
|
||||
let sensorIdName = {}
|
||||
|
||||
deviceList.forEach(d => deviceIdName[d._id] = d.device_name)
|
||||
projectList.forEach(p => projectIdName[p._id.$oid] = p.name)
|
||||
sensorList.forEach(s => sensorIdName[s._id.$oid] = s.name)
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user