添加后台管理页面

- 设备表格
- 项目表格
- 传感器表格
- 解决刷新后token无效问题

src/components/Login.vue

@@ -134,9 +134,6 @@ export default {
       this.form.utel = "";
       this.form.upass = "";
       this.form.checkcode = "";
-    },
-    checkDingding() {
-
     },
     createCode() {
       let code = "";

src/components/Main.vue

@@ -1,7 +1,14 @@
 <template>
   <a-layout>
-    <a-layout-header style="height: 110px;background:#04888A;">
+    <a-layout-header style="height: 110px;">
-      <a-row style="color:white"> 标题？ </a-row>
+      <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'
+      })
     }
   }
 };

src/components/admin/Index.vue

@@ -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>

src/components/admin/tables/DeviceTable.vue

@@ -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>

src/components/admin/tables/ProjectTable.vue

@@ -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>

src/components/admin/tables/SensorTable.vue

@@ -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>

src/utils/http.js

@@ -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
 }
 

src/utils/router.js

@@ -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")) {
-    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 (sessionStorage.getItem("store")) {
+    console.log(sessionStorage.getItem("store"))
+    store.replaceState(Object.assign({}, store.state, JSON.parse(sessionStorage.getItem("store"))))
+    if (store.state.token) {
+        setAuth(store.state.token);
+    }
+}
 
 const router = new Router({
     base: process.env.BASE_URL,

src/utils/store.js

@@ -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]

src/utils/utils.js

@@ -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)
+    
+}