monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Committed by 鲁尚清
Commit 88233d465af89fa51b62671c9bfe1e64630f7727 1 parent 267ef8a4

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

Inline Side-by-side
Showing 6 changed files with 87 additions and 156 deletions
<title>登录配置</title>
<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99%!important;"/>
<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
... ... @@ -3,7 +3,6 @@
height: 100%;
overflow: auto;
background: #ffffff;
box-sizing: border-box;
}
.logoConfig-item{
padding:0 20px;
... ... @@ -14,11 +13,12 @@
}
.logoConfig-item-content{
margin-bottom:10px;
padding-bottom: 20px;
}
.config-login{
display: flex;
align-items: center;
justify-content: center;
justify-content: space-around;
}
.config-name{
width:110px;
... ... @@ -29,25 +29,10 @@
margin-left:6px;
width:200px;
}
.upload-demo-logoConfig{
.upload-demo{
margin-left:20px;
width:93px;
}
.logo-img{
width:400px;
padding:10px;
border:1px solid #dddddd;
}
.logo-img img{
width:100%;
}
.config-upload{
margin-top:10px;
justify-content: center;
display: flex;
}
.config-upload-left{
width: 533px;
display: flex;
justify-content: flex-end;
/*flex:1;*/
}
\ No newline at end of file
... ...
... ... @@ -143,12 +143,6 @@ const routes = [{
name: 'logoConfig',
component: () => myImport('views/logoConfig/index')
},
//忙时配置
{
path: '/vue3/busyConfig',
name: 'busyConfig',
component: () => myImport('views/busyConfig/index')
},
];
// hash模式： createWebHashHistory
... ...
<div class="logoConfig-container" :style="'height: '+height+'px'">
<div class="logoConfig-container" >
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane v-for="(item,index) in skinData" :key="index" :label="item.name+'布局'" :name="item.name">
<el-row class="logoConfig-item" v-if="hasRefresh" >
<el-row class="logoConfig-item" >
<!--<el-col :span="4" >
个性化布局-{{item.name}}
</el-col>-->
... ... @@ -10,31 +10,20 @@
<el-col :span="24">
<div class="config-login">
<span class="config-name">登录logo：</span>
<div class="logo-img">
<img :src="domainName+item.imageUrl" alt="">
</div>
</div>
</el-col>
<el-col :span="24" class="config-upload">
<div class="config-upload-left">
<el-tooltip>
<template #content>
<dev class="config-tip" >
(备注说明：登录表单上方展示的logo,
{{item.name=='default'?'1200x126':item.name=='skin1'?'1314x236':item.name=='skin2'?'621x113':''}})
</dev>
</template>
<el-upload
class="upload-demo-logoConfig"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item.imageUrl"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
</el-tooltip>
<img :src="item.imageUrl" class="logo-img" alt="">
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明：登录表单上方展示的logo)
</dev>
</div>
</el-col>
... ... @@ -43,30 +32,20 @@
<el-col :span="24">
<div class="config-login">
<span class="config-name">登录背景：</span>
<div class="logo-img">
<img :src="domainName+item.imageUrlBg" alt="">
</div>
</div>
</el-col>
<el-col :span="24" class="config-upload">
<div class="config-upload-left">
<el-tooltip>
<template #content>
<dev class="config-tip">
(备注说明：登录表单下的背景图片,1920x576)
</dev>
</template>
<el-upload
class="upload-demo-logoConfig"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item.imageUrlBg"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
</el-tooltip>
<img :src="item.imageUrlBg" class="logo-img" alt="">
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明：登录表单下的背景图片)
</dev>
</div>
</el-col>
</el-row>
... ... @@ -74,61 +53,41 @@
<el-col :span="24">
<div class="config-login">
<span class="config-name">登录皮肤：</span>
<div class="logo-img">
<img :src="domainName+item.imageUrlSkin" alt="">
</div>
</div>
</el-col>
<el-col :span="24" class="config-upload">
<div class="config-upload-left">
<el-tooltip>
<template #content>
<dev class="config-tip">
(备注说明：登录页面的皮肤图片,1920x1080)
</dev>
</template>
<el-upload
class="upload-demo-logoConfig"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item.imageUrlSkin"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
</el-tooltip>
<img :src="item.imageUrlSkin" class="logo-img" alt="">
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明：登录页面的皮肤图片)
</dev>
</div>
</el-col>
</el-row>
<el-row class="logoConfig-item-content" v-if="item.imageUrlIndex">
<el-col :span="24" v-if="item.imageUrlIndex">
<el-col :span="24">
<div class="config-login">
<span class="config-name">{{item.name}}logo：</span>
<div class="logo-img">
<img :src="domainName+item.imageUrlIndex" alt="">
</div>
</div>
</el-col>
<el-col :span="24" class="config-upload" v-if="item.imageUrlIndex">
<div class="config-upload-left">
<el-tooltip>
<template #content>
<dev class="config-tip">
(备注说明：首页上方展示的logo,{{item.imageUrlIndex=='home1-logo'?'1200x126':'507x126'}})
</dev>
</template>
<el-upload
class="upload-demo-logoConfig"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item.imageUrlIndex"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
</el-tooltip>
<span class="config-name">首页logo：</span>
<img :src="item.imageUrlIndex" class="logo-img" alt="">
<el-upload
class="upload-demo"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="item"
:multiple="false"
:http-request="getFile"
:auto-upload="true">
<el-button size="mini" type="primary">上传照片</el-button>
</el-upload>
<dev class="config-tip">
(备注说明：首页上方展示的logo)
</dev>
</div>
</el-col>
</el-row>
... ... @@ -136,4 +95,6 @@
</el-row>
</el-tab-pane>
</el-tabs>
</div>
... ...
... ... @@ -9,23 +9,21 @@ export default {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let activeName=Vue.ref('default');
//刷新页面
let hasRefresh=Vue.ref(true);
//ip地址
let domainName=Vue.ref(sessionStorage.getItem('domainName')+"/api-u/sysConf/preview?code=");
//imageUrl:登录logo，imageUrlSkin：登录皮肤，imageUrlBg：登录背景，imageUrlIndex：首页logo
let skinData=Vue.ref([
{name:"default",imageUrl:'default-login-logo',imageUrlBg:'default-login-backGround'},
{name:"skin1",imageUrl:'skin1-login-logo',imageUrlSkin:'skin1-login-skin'},
{name:"skin2",imageUrl:'skin2-login-logo',imageUrlSkin:'skin2-login-skin'},
{name:"首页1",imageUrlIndex:'home1-logo'},
{name:"首页2",imageUrlIndex:'home2-logo'}
{name:"default",imageUrl:'/src/style/img/logo.png',imageUrlSkin:'',
imageUrlBg:'/src/style/img/login-form.png',imageUrlIndex:'/src/style/img/logo.png'},
{name:"skin1",imageUrl:'/src/style/img/login/skin/1/mingcheng.png',imageUrlSkin:'/src/style/img/login/skin/1/beijing.png',
imageUrlBg:'',imageUrlIndex:'/src/style/img/logo.png'},
{name:"skin2",imageUrl:'/src/style/img/login/skin/2/mingcheng2.png',imageUrlSkin:'/src/style/img/login/skin/2/beijng.png',
imageUrlBg:'',imageUrlIndex:'/src/style/img/logo.png'}
])
//上传完后的图片预览
let imageUrl=Vue.ref('');
let imageUrl=Vue.ref('/src/style/img/logo.png');
let imageUrlSkin=Vue.ref('/src/style/img/login/skin/1/beijing.png');
let imageUrlBg=Vue.ref('/src/style/img/login-form.png');
let imageUrlIndex=Vue.ref('/src/style/img/logo.png');
let fit='contain';
let beforeAvatarUpload = (file) => {
const isJPG = file.type.indexOf('image/') != -1
if (!isJPG) {
... ... @@ -35,19 +33,17 @@ export default {
}
let getFile = (param) => {
let fileObj = param.file
console.log("param.data",param.data)
let params = {
file: fileObj,
code: param.data
id: props.parentNode.id
}
// 上传文件
proxy.$http.uploadFile("/api-u/sysConf/uploadFile", params, function (res) {
hasRefresh.value=false;
proxy.$http.uploadFile("/api-web/bOpsPerson/uploadFile", params, function (res) {
if (res && res.success) {
proxy.$global.showMsg("上传成功！");
}
setTimeout(function (){
hasRefresh.value=true;
},200)
})
imageUrl.value = URL.createObjectURL(fileObj);
}
... ... @@ -57,15 +53,16 @@ export default {
Vue.onMounted(() => {
})
return {
hasRefresh,
height,
activeName,
handleClick,
fit,
imageUrlSkin,
imageUrlIndex,
imageUrlBg,
beforeAvatarUpload,
imageUrl,
getFile,
skinData,
domainName
skinData
}
}
}
... ...
... ... @@ -238,12 +238,6 @@ const routes = [{
name: 'logoConfig',
component: () => myImport('views/logoConfig/index')
},
//忙时配置
{
path: '/vue3/busyConfig',
name: 'busyConfig',
component: () => myImport('views/busyConfig/index')
},
];
// hash模式： createWebHashHistory
... ...