monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 06a2d247a908832ac12c12dfa4d1e5d1e0be771c 1 parent 7a70ee0e

【596】登录logo 支持配置-静态页面搭建完成 #1

Inline Side-by-side
Showing 7 changed files with 223 additions and 1 deletions
  1 +<title>登录配置</title>
  2 +<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99.5%!important;"/>
@@ -9,6 +9,8 @@ @@ -9,6 +9,8 @@
9 @import "../css/esData.css"; 9 @import "../css/esData.css";
10 /*cmdb数据同步*/ 10 /*cmdb数据同步*/
11 @import "../css/cmdbdatasync.css"; 11 @import "../css/cmdbdatasync.css";
  12 +/*登录logo配置*/
  13 +@import "../css/logoConfig.css";
12 14
13 .d-flex { 15 .d-flex {
14 display: flex; 16 display: flex;
  1 +.logoConfig-container{
  2 + padding:10px;
  3 + height: 100%;
  4 + overflow: auto;
  5 + background: #ffffff;
  6 +}
  7 +.logoConfig-item{
  8 + padding:0 20px;
  9 + margin-bottom: 10px;
  10 + display: flex;
  11 + align-items: center;
  12 +
  13 +}
  14 +.logoConfig-item-content{
  15 + margin-bottom:10px;
  16 + padding-bottom: 20px;
  17 +}
  18 +.config-login{
  19 + display: flex;
  20 + align-items: center;
  21 + justify-content: space-around;
  22 +}
  23 +.config-name{
  24 + width:110px;
  25 +}
  26 +.config-tip{
  27 + text-align: left;
  28 + font-size: 12px;
  29 + margin-left:6px;
  30 + width:200px;
  31 +}
  32 +.upload-demo{
  33 + margin-left:20px;
  34 +}
  35 +.logo-img{
  36 + width:400px;
  37 + /*flex:1;*/
  38 +}
@@ -137,6 +137,12 @@ const routes = [{ @@ -137,6 +137,12 @@ const routes = [{
137 name: 'orgBustype', 137 name: 'orgBustype',
138 component: () => myImport('views/orgBustype/index') 138 component: () => myImport('views/orgBustype/index')
139 }, 139 },
  140 + //登录logo配置
  141 + {
  142 + path: '/vue3/logoConfig',
  143 + name: 'logoConfig',
  144 + component: () => myImport('views/logoConfig/index')
  145 + },
140 ]; 146 ];
141 147
142 // hash模式： createWebHashHistory 148 // hash模式： createWebHashHistory
  1 +<div class="logoConfig-container" >
  2 + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  3 + <el-tab-pane v-for="(item,index) in skinData" :key="index" :label="item.name+'布局'" :name="item.name">
  4 + <el-row class="logoConfig-item" >
  5 + <!--<el-col :span="4" >
  6 + 个性化布局-{{item.name}}
  7 + </el-col>-->
  8 + <el-col :span="24">
  9 + <el-row class="logoConfig-item-content" v-if="item.imageUrl">
  10 + <el-col :span="24">
  11 + <div class="config-login">
  12 + <span class="config-name">登录logo：</span>
  13 + <img :src="item.imageUrl" class="logo-img" alt="">
  14 + <el-upload
  15 + class="upload-demo"
  16 + :show-file-list="false"
  17 + :before-upload="beforeAvatarUpload"
  18 + :data="item"
  19 + :multiple="false"
  20 + :http-request="getFile"
  21 + :auto-upload="true">
  22 + <el-button size="mini" type="primary">上传照片</el-button>
  23 + </el-upload>
  24 + <dev class="config-tip">
  25 + (备注说明：登录表单上方展示的logo)
  26 + </dev>
  27 + </div>
  28 + </el-col>
  29 +
  30 + </el-row>
  31 + <el-row class="logoConfig-item-content" v-if="item.imageUrlBg">
  32 + <el-col :span="24">
  33 + <div class="config-login">
  34 + <span class="config-name">登录背景：</span>
  35 + <img :src="item.imageUrlBg" class="logo-img" alt="">
  36 + <el-upload
  37 + class="upload-demo"
  38 + :show-file-list="false"
  39 + :before-upload="beforeAvatarUpload"
  40 + :data="item"
  41 + :multiple="false"
  42 + :http-request="getFile"
  43 + :auto-upload="true">
  44 + <el-button size="mini" type="primary">上传照片</el-button>
  45 + </el-upload>
  46 + <dev class="config-tip">
  47 + (备注说明：登录表单下的背景图片)
  48 + </dev>
  49 + </div>
  50 + </el-col>
  51 + </el-row>
  52 + <el-row class="logoConfig-item-content" v-if="item.imageUrlSkin">
  53 + <el-col :span="24">
  54 + <div class="config-login">
  55 + <span class="config-name">登录皮肤：</span>
  56 + <img :src="item.imageUrlSkin" class="logo-img" alt="">
  57 + <el-upload
  58 + class="upload-demo"
  59 + :show-file-list="false"
  60 + :before-upload="beforeAvatarUpload"
  61 + :data="item"
  62 + :multiple="false"
  63 + :http-request="getFile"
  64 + :auto-upload="true">
  65 + <el-button size="mini" type="primary">上传照片</el-button>
  66 + </el-upload>
  67 + <dev class="config-tip">
  68 + (备注说明：登录页面的皮肤图片)
  69 + </dev>
  70 + </div>
  71 + </el-col>
  72 + </el-row>
  73 + <el-row class="logoConfig-item-content" v-if="item.imageUrlIndex">
  74 + <el-col :span="24">
  75 + <div class="config-login">
  76 + <span class="config-name">首页logo：</span>
  77 + <img :src="item.imageUrlIndex" class="logo-img" alt="">
  78 + <el-upload
  79 + class="upload-demo"
  80 + :show-file-list="false"
  81 + :before-upload="beforeAvatarUpload"
  82 + :data="item"
  83 + :multiple="false"
  84 + :http-request="getFile"
  85 + :auto-upload="true">
  86 + <el-button size="mini" type="primary">上传照片</el-button>
  87 + </el-upload>
  88 + <dev class="config-tip">
  89 + (备注说明：首页上方展示的logo)
  90 + </dev>
  91 + </div>
  92 + </el-col>
  93 + </el-row>
  94 + </el-col>
  95 + </el-row>
  96 + </el-tab-pane>
  97 + </el-tabs>
  98 +
  99 +
  100 +</div>
  1 +export default {
  2 + name: 'logoConfig',
  3 + template: '',
  4 + components: {
  5 + },
  6 + data() {
  7 + },
  8 + props: {
  9 + },
  10 + setup: function (props, {attrs, slots, emit}) {
  11 + const {proxy} = Vue.getCurrentInstance();
  12 + let activeName=Vue.ref('default');
  13 + //imageUrl:登录logo，imageUrlSkin：登录皮肤，imageUrlBg：登录背景，imageUrlIndex：首页logo
  14 + let skinData=Vue.ref([
  15 + {name:"default",imageUrl:'/src/style/img/logo.png',imageUrlSkin:'',
  16 + imageUrlBg:'/src/style/img/login-form.png',imageUrlIndex:'/src/style/img/logo.png'},
  17 + {name:"skin1",imageUrl:'/src/style/img/login/skin/1/mingcheng.png',imageUrlSkin:'/src/style/img/login/skin/1/beijing.png',
  18 + imageUrlBg:'',imageUrlIndex:'/src/style/img/logo.png'},
  19 + {name:"skin2",imageUrl:'/src/style/img/login/skin/2/mingcheng2.png',imageUrlSkin:'/src/style/img/login/skin/2/beijng.png',
  20 + imageUrlBg:'',imageUrlIndex:'/src/style/img/logo.png'}
  21 + ])
  22 + let imageUrl=Vue.ref('/src/style/img/logo.png');
  23 + let imageUrlSkin=Vue.ref('/src/style/img/login/skin/1/beijing.png');
  24 + let imageUrlBg=Vue.ref('/src/style/img/login-form.png');
  25 + let imageUrlIndex=Vue.ref('/src/style/img/logo.png');
  26 + let fit='contain';
  27 + let beforeAvatarUpload = (file) => {
  28 + const isJPG = file.type.indexOf('image/') != -1
  29 + if (!isJPG) {
  30 + proxy.$global.showMsg('您上传的不是图片文件,请选择图片！', 'error');
  31 + }
  32 + return isJPG
  33 + }
  34 + let getFile = (param) => {
  35 + let fileObj = param.file
  36 + console.log("param.data",param.data)
  37 +
  38 + let params = {
  39 + file: fileObj,
  40 + id: props.parentNode.id
  41 + }
  42 + // 上传文件
  43 + proxy.$http.uploadFile("/api-web/bOpsPerson/uploadFile", params, function (res) {
  44 + if (res && res.success) {
  45 + proxy.$global.showMsg("上传成功！");
  46 + }
  47 + })
  48 + imageUrl.value = URL.createObjectURL(fileObj);
  49 + }
  50 + //tabs标签点击事件
  51 + let handleClick=(tab,event)=>{}
  52 + // 挂载完
  53 + Vue.onMounted(() => {
  54 + })
  55 + return {
  56 + activeName,
  57 + handleClick,
  58 + fit,
  59 + imageUrlSkin,
  60 + imageUrlIndex,
  61 + imageUrlBg,
  62 + beforeAvatarUpload,
  63 + imageUrl,
  64 + getFile,
  65 + skinData
  66 + }
  67 + }
  68 +}
@@ -231,7 +231,13 @@ const routes = [{ @@ -231,7 +231,13 @@ const routes = [{
231 path: '/vue3/batchChangeLeaders', 231 path: '/vue3/batchChangeLeaders',
232 name: 'batchChangeLeaders', 232 name: 'batchChangeLeaders',
233 component: () => myImport('views/batchChangeLeaders/index') 233 component: () => myImport('views/batchChangeLeaders/index')
234 - } 234 + },
  235 + //登录logo配置
  236 + {
  237 + path: '/vue3/logoConfig',
  238 + name: 'logoConfig',
  239 + component: () => myImport('views/logoConfig/index')
  240 + },
235 ]; 241 ];
236 242
237 // hash模式： createWebHashHistory 243 // hash模式： createWebHashHistory