增加客户端在线用户数弹框 修改标题

chuanyi-admin/src/api/dashboard.js

@@ -39,3 +39,11 @@ export function getReportFormrNum() {
     method: 'get'
   })
 }
+
+/** 清空用户登录信息 */
+export function clearLoginSession(userId) {
+  return request({
+    url: '/user/clearLoginSession?userId=' + userId,
+    method: 'post'
+  })
+}

chuanyi-admin/src/settings.js

@@ -1,5 +1,5 @@
 module.exports = {
-  title: 'READ OPC后台管理系统',
+  title: 'Easy Industrial Report管理系统',
 
   /**
    * @type {boolean} true | false

chuanyi-admin/src/utils/get-page-title.js

@@ -1,6 +1,6 @@
 import defaultSettings from '@/settings'
 
-const title = defaultSettings.title || 'READ OPC后台管理系统'
+const title = defaultSettings.title || 'Easy Industrial Report管理系统'
 
 export default function getPageTitle(pageTitle) {
   if (pageTitle) {

chuanyi-admin/src/views/dashboard/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="sy-content">
-<!--    <div class="statistics">-->
-<!--      <div v-for="(item, index) in statData" :key="index" class="stat-item">-->
-<!--        <span class="stat-top">{{ item.title }}</span>-->
-<!--        <span class="stat-bottom">{{ item.num }}</span>-->
-<!--      </div>-->
-<!--    </div>-->
+    <!--    <div class="statistics">-->
+    <!--      <div v-for="(item, index) in statData" :key="index" class="stat-item">-->
+    <!--        <span class="stat-top">{{ item.title }}</span>-->
+    <!--        <span class="stat-bottom">{{ item.num }}</span>-->
+    <!--      </div>-->
+    <!--    </div>-->
     <el-row :gutter="40" class="panel-group">
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel">
@@ -14,7 +14,12 @@
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">管理端用户数量</div>
-            <count-to :start-val="startVal" :end-val="statistics.managerUserNum" :duration="countDuration" class="card-panel-num" />
+            <count-to
+              :start-val="startVal"
+              :end-val="statistics.managerUserNum"
+              :duration="countDuration"
+              class="card-panel-num"
+            />
           </div>
         </div>
       </el-col>
@@ -25,7 +30,12 @@
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">客户端用户数量</div>
-            <count-to :start-val="startVal" :end-val="statistics.clientUserNum" :duration="countDuration" class="card-panel-num" />
+            <count-to
+              :start-val="startVal"
+              :end-val="statistics.clientUserNum"
+              :duration="countDuration"
+              class="card-panel-num"
+            />
           </div>
         </div>
       </el-col>
@@ -36,7 +46,12 @@
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">角色数量</div>
-            <count-to :start-val="startVal" :end-val="statistics.roleNum" :duration="countDuration" class="card-panel-num" />
+            <count-to
+              :start-val="startVal"
+              :end-val="statistics.roleNum"
+              :duration="countDuration"
+              class="card-panel-num"
+            />
           </div>
         </div>
       </el-col>
@@ -47,22 +62,35 @@
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">报表数量</div>
-            <count-to :start-val="startVal" :end-val="statistics.reportNum" :duration="countDuration" class="card-panel-num" />
+            <count-to
+              :start-val="startVal"
+              :end-val="statistics.reportNum"
+              :duration="countDuration"
+              class="card-panel-num"
+            />
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-        <div class="card-panel">
+        <div class="card-panel" @click="onlineUsers">
           <div class="card-panel-icon-wrapper icon-money">
             <svg-icon icon-class="user-online" class-name="card-panel-icon" />
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">客户端在线用户数</div>
-            <count-to :start-val="startVal" :end-val="statistics.onlineClientUserNum" :duration="countDuration" class="card-panel-num" />
+            <count-to
+              :start-val="startVal"
+              :end-val="statistics.onlineClientUserNum"
+              :duration="countDuration"
+              class="card-panel-num"
+            />
           </div>
         </div>
       </el-col>
     </el-row>
+
+    <!-- 客户端在线用户数弹框 -->
+    <onlineUsers ref="onUsers" :table-data="onlineUsersTable" />
   </div>
 </template>
 
@@ -73,13 +101,16 @@ import {
   getManagerUserNum,
   getCustomerUserNum,
   getRoleNum,
-  getReportFormrNum, getOnlineUser
+  getReportFormrNum,
+  getOnlineUser
 } from '@/api/dashboard'
+import onlineUsers from './onlineUsers.vue'
 
 export default {
   name: 'Dashboard',
   components: {
-    CountTo
+    CountTo,
+    onlineUsers
   },
   data() {
     return {
@@ -92,7 +123,8 @@ export default {
         clientUserNum: 0,
         onlineClientUserNum: 0,
         reportNum: 0
-      }
+      },
+      onlineUsersTable: []
     }
   },
   computed: {
@@ -125,9 +157,14 @@ export default {
       })
       getOnlineUser('front').then((res) => {
         if (res.code === 200) {
-          this.statistics.onlineClientUserNum = res.data
+          this.statistics.onlineClientUserNum = res.data.count
+          this.onlineUsersTable = res.data.frontLoginList
         }
       })
+    },
+    // 点击客户端在线用户数
+    onlineUsers() {
+      this.$refs.onUsers.show()
     }
   }
 }
@@ -159,6 +196,7 @@ export default {
 
   .card-panel-col {
     margin-bottom: 32px;
+    cursor: pointer;
   }
 
   .card-panel {
@@ -169,8 +207,8 @@ export default {
     overflow: hidden;
     color: #666;
     background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.05);
 
     .icon-people {
       color: #40c9c6;
@@ -185,7 +223,7 @@ export default {
     }
 
     .icon-shopping {
-      color: #34bfa3
+      color: #34bfa3;
     }
 
     .card-panel-icon-wrapper {
@@ -222,7 +260,7 @@ export default {
   }
 }
 
-@media (max-width:550px) {
+@media (max-width: 550px) {
   .card-panel-description {
     display: none;
   }

chuanyi-admin/src/views/dashboard/onlineUsers.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-dialog title="客户端在线用户" :visible.sync="dialogVisible" width="50%">
+    <el-table
+      :data="tableData"
+      stripe
+      border
+      header-row-class-name="headBackground"
+    >
+      <el-table-column prop="userName" label="用户名" />
+      <el-table-column prop="createTime" label="创建时间" />
+      <el-table-column
+        prop="lastLoginTime"
+        label="最后登录时间"
+      />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handelClick(scope.row)"
+          >清空用户登录信息</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { clearLoginSession } from '@/api/dashboard'
+export default {
+  props: {
+    tableData: Array
+  },
+  data() {
+    return {
+      // 控制弹框
+      dialogVisible: false
+    }
+  },
+  methods: {
+    // 打开弹框
+    show() {
+      this.dialogVisible = true
+    },
+    // 清空用户登录信息
+    handelClick({ userId }) {
+      this.$confirm('是否清空用户登录信息?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        cancelButtonClass: 'btn_custom_cancel',
+        closeOnClickModal: false,
+        type: 'warning'
+      })
+        .then(() => {
+          clearLoginSession(userId).then((res) => {
+            if (res.code === 200) {
+              this.$message({
+                message: res.data,
+                type: 'success'
+              })
+            }
+          })
+        })
+        .catch(() => {})
+    }
+  }
+}
+</script>
+
+<style>
+</style>

chuanyi-admin/vue.config.js

@@ -6,7 +6,7 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const name = defaultSettings.title || 'READ OPC后台管理系统' // page title
+const name = defaultSettings.title || 'Easy Industrial Report管理系统' // page title
 
 // If your port is set to 80,
 // use administrator privileges to execute the command line.

reado-app/manifest.json

@@ -1,5 +1,5 @@
 {
-    "name" : "reado-app",
+    "name" : "Easy Industrial Report",
     "appid" : "__UNI__DB6E9BF",
     "description" : "",
     "versionName" : "1.0.0",
@@ -7,6 +7,9 @@
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {
+        "statusbar" : {
+            "immersed" : false
+        },
         "usingComponents" : true,
         "nvueStyleCompiler" : "uni-app",
         "compilerVersion" : 3,
@@ -87,6 +90,7 @@
         "router" : {
             "base" : "./",
             "mode" : "hash"
-        }
+        },
+        "title" : "Easy Industrial Report"
     }
 }

reado-app/pages.json

@@ -69,7 +69,7 @@
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
-		"navigationBarTitleText": "uni-app",
+		"navigationBarTitleText": "Easy Industrial Report",
 		"navigationBarBackgroundColor": "#2c3e50",
 		"navigationStyle": "custom",
 		"backgroundColor": "#2c3e50"

reado-app/pages/login/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="content">
 		<view class="text-area">
-			<h3 class="title">READ&nbsp;&nbsp;OPC</h3>
+			<h3 class="title">Easy Industrial Report</h3>
 			<view calss="loginForm">
 				<u--form ref="loginForm" :model="loginForm" :rules="rules" labelWidth="80" errorType="toast">
 					<u-form-item label="账号" prop="userName" borderBottom class="form-item">