Merge branch 'master' of http://47.103.92.60:3003/skyversation/qp_onemap_ui.git

# Conflicts:
#	public/static/config/config.js

public/static/config/config.js

@@ -3,7 +3,8 @@ let systemConfig = {
     defaultAccount: {
         username: "user_yztmh_dev",
     },
-    touristUserId: "191",//默认游客id
+    touristUserId: "191",//默认游客用户（user002）id，Oauth中配置
+    adminRoleId: "1",//默认管理员角色id，Oauth中配置“系统管理员”角色
     baseServicerPath: "/oneMap",
     // oauth和DMS环境
     backServerPath: "http://121.43.55.7",

src/components/AppVue/Header.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="header">
     <div class="logo">青浦一张图</div>
+    <div class="userdropdown">
+        <User />
+    </div>
     <div class="menu">
       <ul class="menu_ul">
         <li
@@ -13,16 +16,27 @@
         </li>
       </ul>
     </div>
+    
+    <el-dialog v-model="dialogLoginVisible" width="500">
+      <Login :close="closeLoginDialog" />
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
+import User from "@/components/user/user.vue";
 export default {
+  components: {
+    User,
+  },
   data() {
-    return {};
+    return {
+    };
   },
   mounted() {},
-  methods: {},
+  methods: {
+  },
 };
 </script>
 
@@ -45,7 +59,6 @@ export default {
   .menu {
     display: inline-block;
     float: right;
-
     .menu_ul {
       li {
         display: inline-block;
@@ -69,4 +82,14 @@ export default {
     }
   }
 }
+.userdropdown {
+    float: right;
+    width: 150px;
+    display: flex;
+    align-items: center;
+    height: 70px;
+    justify-content: center;
+    cursor: pointer;
+    border: 0;
+}
 </style>

src/components/login/login.vue

@@ -0,0 +1,90 @@
+<template>
+    <div style="text-align: center;font-size: 30px;margin-top: 40px;">登&nbsp;&nbsp;录</div>
+    <div style="margin: 80px;">
+        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label="账号" prop="username">
+                <el-input type="text" v-model="ruleForm.username" autocomplete="off" placeholder="请输入账号"></el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="password">
+                <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
+            </el-form-item>
+            <div style="width: 100%;text-align: center;margin-top: 50px;">
+                <el-button type="primary" style="width: 100%;" @click="submitForm('ruleForm')">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
+            </div>
+            <!-- <el-form-item style="padding-top: 20px;">
+                <el-button type="primary" style="width: 100%;" @click="submitForm('ruleForm')">登录</el-button>
+                <el-button @click="resetForm('ruleForm')">重置</el-button>
+            </el-form-item> -->
+        </el-form>
+    </div>
+</template>
+
+<script>
+import encrypt‌ from "@/utils/encrypt‌";
+export default {
+  data() {
+    return {
+        ruleForm: {
+          username: '',
+          password: '',
+        },
+        rules: {
+          username: [
+            { required: true, message: '请输入账号', trigger: 'blur' },
+          ],
+          password: [
+            { required: true, message: '请输入密码', trigger: 'blur' },
+          ]
+        }
+    };
+  },
+  props: {
+    close: Function,
+  },
+  mounted() {},
+  methods: {
+    submitForm(formName) {
+        let that = this;
+        that.$refs[formName].validate((valid) => {
+            if (valid) {
+                // console.log('submit!');
+                encrypt‌(that.ruleForm).then((res) => {
+                    // console.log(res);
+                    that.$message({
+                        type: "success",
+                        message: "登录成功",
+                    });
+                    that.close();
+                 }).catch((err) => {
+                    that.$message({
+                        type: "error",
+                        message: err,
+                    });
+                });
+                
+            } else {
+                return false;
+            }
+        });
+    },
+    resetForm(formName) {
+        let that = this;
+        that.$refs[formName].resetFields();
+    },
+    handleCommand(command) {
+        let that = this;
+        that.$message({   
+            type: "info",
+            message: `Click on item ${command}`,
+        });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+    :deep(.el-form-item--label-right .el-form-item__label) {
+        justify-content: flex-end;
+        text-align: right;
+        width: auto !important;
+    }
+</style>

src/components/user/user.vue

@@ -0,0 +1,89 @@
+<template>
+  <div id="container">
+    <div>
+        <el-dropdown @command="handleCommand">
+          <span class="el-dropdown-link">
+            <el-icon :size="20" color="#fff">
+            <UserFilled />
+            </el-icon>
+            <span style="padding: 0 6px;">
+              {{ $store.state.userInfo.id == touristUserId ? "游客" : $store.state.userInfo.username}}
+            </span>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="login">登录</el-dropdown-item>
+              <el-dropdown-item command="register">注册用户</el-dropdown-item>
+              <el-dropdown-item command="upPassword">修改密码</el-dropdown-item>
+              <el-dropdown-item command="logout">退出</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+    </div>
+    <el-dialog v-model="dialogLoginVisible" width="500">
+      <Login :close="closeLoginDialog" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Login from "@/components/login/login.vue";
+import encrypt‌ from "@/utils/encrypt‌";
+export default {
+  components: {
+    Login,
+  },
+  data() {
+    return {
+      touristUserId:systemConfig.touristUserId,
+      dialogLoginVisible: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    closeLoginDialog() {
+      console.log("closeLoginDialog");
+      this.dialogLoginVisible = false;
+    },
+    handleCommand(command) {
+      if (command == "login") {
+        this.dialogLoginVisible = true;
+      } else if(command == "register"){
+        
+      } else if(command == "upPassword"){
+        
+      } else {
+        encrypt‌().then(() => {
+          this.$message({
+            type: "success",
+            message: "退出成功",
+          });
+        }).catch((err) => {
+          this.$message({
+            type: "error",
+            message: err,
+          });
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+    .container{
+        padding: 0;
+        margin: 0;
+    }
+    .el-dropdown-link {
+        cursor: pointer;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        border: 0;
+    }
+    .el-dropdown,.el-dropdown * {
+    outline: none !important; /* 确保下拉触发器没有轮廓 */
+    }
+
+</style>

src/main.js

@@ -27,6 +27,27 @@ initApp.config.globalProperties.$moment = moment;
 initApp.config.globalProperties.$getDmsTypes = (cName, index) => {
     return store.state.DmsTypesMap[cName] ? store.state.DmsTypesMap[cName][index + ''] : cName + "_" + index;
 };
+// 添加自定义方法，得到用户类型【1：游客；2：普通用户；3：管理员】
+initApp.config.globalProperties.$getUserType = () => {
+    // 得到用户id
+    let userId = store.state.userInfo.id;
+    // 得到角色ids
+    let roleIds = store.state.userInfo.roleId;
+    // 得到默认游客id
+    let touristUserId = systemConfig.touristUserId;
+    // 得到默认管理员角色id(roleId,在Oauth中配置)
+    let adminRoleId = systemConfig.adminRoleId;
+    if (!store.state.userInfo || !userId || !roleIds || userId == touristUserId) {
+        // 游客
+        return 1;
+    } else if (roleIds.split(',').includes(adminRoleId)) {
+        // 管理员
+        return 3;
+    } else {
+        // 普通用户
+        return 2;
+    }
+}
 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     initApp.component(key, component)

src/utils/encrypt‌.js

@@ -30,10 +30,10 @@ export default function encrypt(loginObj) {
                 reject(err);
             });
         } else {
-            if (loginObj.username != undefined || loginObj.username != "" || loginObj.username != null) {
+            if (loginObj.username == undefined || loginObj.username == "" || loginObj.username == null) {
                 reject("用户名为空")
             }
-            if (loginObj.password != undefined || loginObj.password != "" || loginObj.password != null) {
+            if (loginObj.password == undefined || loginObj.password == "" || loginObj.password == null) {
                 reject("密码为空")
             }
             return login(loginObj.username, AesEncryptUtil.getPassword(loginObj.password)).then(function (result) {

src/views/Yxgl.vue

@@ -18,10 +18,7 @@
           <template #title>信息反馈</template>
         </el-menu-item>
       </el-sub-menu>
-      <el-sub-menu
-        index="2"
-        v-if="$store.userInfo && $store.userInfo.id != touristUserId"
-      >
+      <el-sub-menu index="2" v-if="$getUserType() == 3">
         <template #title>
           <el-icon><Tools /></el-icon>
           <span>运行管理子系统</span>
@@ -57,7 +54,6 @@ export default {
   name: "yxgl",
   data() {
     return {
-      touristUserId: systemConfig.touristUserId,
       isCollapse: false,
       menuActive: "StatisticalAnalysis",
       iframeUrl: "",

src/views/yygl/appCenter.vue

@@ -1,30 +1,43 @@
 <template>
   <div class="app-center">
     <div class="container">
-        <!-- 左侧导航栏 -->
-        <div class="sidebar">
+      <!-- 左侧导航栏 -->
+      <div class="sidebar">
         <div class="sidebar-menu">
-            <div class="menu-item" :class="{'active': menuValue === 1}" @click="handleMenuClick(1)">
+          <div
+            class="menu-item"
+            :class="{ active: menuValue === 1 }"
+            @click="handleMenuClick(1)"
+          >
             <el-icon><Menu /></el-icon>
             <span>应用概览</span>
-            </div>
-            <div class="menu-item" v-if="userInfo.id != touristUserId" :class="{'active': menuValue === 2}" @click="handleMenuClick(2)">
+          </div>
+          <div
+            class="menu-item"
+            v-if="$getUserType() != 1"
+            :class="{ active: menuValue === 2 }"
+            @click="handleMenuClick(2)"
+          >
             <el-icon><Grid /></el-icon>
             <span>应用管理</span>
-            </div>
-            <div class="menu-item" :class="{'active': menuValue === 3}" @click="handleMenuClick(3)">
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: menuValue === 3 }"
+            @click="handleMenuClick(3)"
+          >
             <el-icon><Monitor /></el-icon>
             <span>应用监测</span>
-            </div>
-        </div>
+          </div>
         </div>
+      </div>
 
-        <!-- 右侧主内容区 -->
-        <div class="main-content">
-            <AppOverview v-if="menuValue === 1" />
-            <AppManagement v-if="menuValue === 2" />
-            <AppMonitoring v-if="menuValue === 3" />
-        </div>
+      <!-- 右侧主内容区 -->
+      <div class="main-content">
+        <AppOverview v-if="menuValue === 1" />
+        <AppManagement v-if="menuValue === 2" />
+        <AppMonitoring v-if="menuValue === 3" />
+      </div>
     </div>
   </div>
 </template>
@@ -42,25 +55,24 @@ export default {
   },
   data() {
     return {
-        touristUserId:systemConfig.touristUserId,
-        userInfo:this.$store.state.userInfo,
-        userState:this.$store.state.userState,
-        menuValue:1
-    }
+      userInfo: this.$store.state.userInfo,
+      userState: this.$store.state.userState,
+      menuValue: 1,
+    };
   },
   methods: {
     handleMenuClick(value) {
-      console.log(value)
+      console.log(value);
       this.menuValue = value;
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .app-center {
   width: 100%;
-//   min-height: 100vh;
+  //   min-height: 100vh;
   height: calc(100vh - 120px);
   background-color: #08224a;
   color: #ffffff;
@@ -79,10 +91,10 @@ export default {
   width: 200px;
   background-color: #0a2a5a;
   border-right: 1px solid rgba(255, 255, 255, 0.1);
-  
+
   .sidebar-menu {
     padding: 20px 0;
-    
+
     .menu-item {
       display: flex;
       align-items: center;
@@ -90,17 +102,17 @@ export default {
       cursor: pointer;
       transition: all 0.3s ease;
       color: rgba(255, 255, 255, 0.8);
-      
+
       i {
         margin-right: 12px;
         font-size: 18px;
       }
-      
+
       &:hover {
         background-color: rgba(24, 144, 255, 0.2);
         color: #ffffff;
       }
-      
+
       &.active {
         background-color: rgba(24, 144, 255, 0.3);
         color: #ffffff;
@@ -116,5 +128,4 @@ export default {
   padding: 20px 30px;
   overflow: auto;
 }
-
-</style>
+</style>