monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Committed by 鲁尚清
Commit b2bda7bb0296ae3d0b61d72c84a65e1ff05dc966 1 parent 3392c6d5

【596】登录logo 支持配置-图片预览接口联调，登录页相关图片地址更改，两种布局下首页logo地址更改 #3

Inline Side-by-side
Showing 7 changed files with 276 additions and 16 deletions
... ... @@ -383,5 +383,35 @@ layui.define(['sessions', 'form', 'common'],function (exports) {
return false; //阻止表单跳转
}
//start lsq 设置登录配置的图片 2022-06-16
$.ajax({
url: '/config/getConfig',
data: {
configName: 'login'
},
async: false,
success(response) {
let loginSkin = response.skin;
let domainName=sessionStorage.getItem('domainName')+"/api-u/sysConf/preview?code=";
if(loginSkin =='default'){
let srcLogo=domainName+'default-login-logo';
let srcBg=domainName+'default-login-backGround';
$('.layadmin-user-login-header img').attr('src',srcLogo);
$('.layadmin-user-login-main').css('background-image','url('+srcBg+')');
}else if(loginSkin =='skin1'){
let srcLogo=domainName+'skin1-login-logo';
let srcSkin=domainName+'skin1-login-skin';
$('.layadmin-user-login-header img').attr('src',srcLogo);
$('.layadmin-user-login').css('background-image','url('+srcSkin+')');
}else if(loginSkin =='skin2'){
let srcLogo=domainName+'skin2-login-logo';
let srcSkin=domainName+'skin2-login-skin';
$('.layadmin-user-login-header img').attr('src',srcLogo);
$('.layadmin-user-login').css('background-image','url('+srcSkin+')')
}
}
});
//end lsq 2022-06-16
});
});
... ...
... ... @@ -12,6 +12,13 @@
localStorage.setItem("editFlag",val);
}
}
layui.use(['jquery'], function () {
var $ = layui.jquery;
$(function (){
let domainName=sessionStorage.getItem('domainName')+"/api-u/sysConf/preview?code=";
$('.logo').attr('src',domainName+'home2-logo')
})
});
</script>
<div class="layui-header">
<!-- 头部区域 -->
... ...
... ... @@ -31,6 +31,10 @@
}
}
});
$(function (){
let domainName=sessionStorage.getItem('domainName')+"/api-u/sysConf/preview?code=";
$('.logo').attr('src',domainName+'home1-logo')
})
});
... ...
<div class="logoConfig-container" :style="'height: '+height+'px'">
<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-col :span="4" >
个性化布局-{{item.name}}
</el-col>-->
<el-col :span="24">
<el-row class="logoConfig-item-content" v-if="item.imageUrl">
<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"
: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>
</div>
</el-col>
</el-row>
<el-row class="logoConfig-item-content" v-if="item.imageUrlBg">
<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"
: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>
</div>
</el-col>
</el-row>
<el-row class="logoConfig-item-content" v-if="item.imageUrlSkin">
<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"
: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>
</div>
</el-col>
</el-row>
<el-row class="logoConfig-item-content" v-if="item.imageUrlIndex">
<el-col :span="24" v-if="item.imageUrlIndex">
<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"
: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>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</div>
... ...
export default {
name: 'logoConfig',
template: '',
components: {
},
data() {
},
props: {
},
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'}
])
//上传完后的图片预览
let imageUrl=Vue.ref('');
let beforeAvatarUpload = (file) => {
const isJPG = file.type.indexOf('image/') != -1
if (!isJPG) {
proxy.$global.showMsg('您上传的不是图片文件,请选择图片！', 'error');
}
return isJPG
}
let getFile = (param) => {
let fileObj = param.file
let params = {
file: fileObj,
code: param.data
}
// 上传文件
proxy.$http.uploadFile("/api-u/sysConf/uploadFile", params, function (res) {
hasRefresh.value=false;
if (res && res.success) {
proxy.$global.showMsg("上传成功！");
}
setTimeout(function (){
hasRefresh.value=true;
},200)
})
imageUrl.value = URL.createObjectURL(fileObj);
}
//tabs标签点击事件
let handleClick=(tab,event)=>{}
// 挂载完
Vue.onMounted(() => {
})
return {
hasRefresh,
height,
activeName,
handleClick,
beforeAvatarUpload,
imageUrl,
getFile,
skinData,
domainName
}
}
}
... ...
... ... @@ -275,14 +275,13 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
// start lsq 个人信息修改 扩展中的登录皮肤输入框改为下拉选择 2022-03-12
let str='';
if(v.ddicCode=="loginSkin"){
var selectOption=' <option value="default">默认布局</option>'+
' <option value="skin1">skin1</option>'+
' <option value="skin2">skin2</option>';
str='<select data-property="'+v.ddicCode+'" placeholder="'+v.ddicDesc+'" data-id="" data-username="" data-sort="" data-remark="" class="select layui-select select-input-my" name="' + v.ddicCode + '" autocomplete="off">'+
' <option value="" style="display:none;"></option>'+ selectOption +
'</select>';
}else if(v.ddicCode=="userLayout"){
rowHead = '';
rowTail = '';
}else{
rowHead = '<div class="layui-form-item">';
rowTail = '</div>';
}
if(v.ddicCode=="userLayout"){
var selectOption=' <option value="layout">默认布局</option>'+
' <option value="layout-nx">layout-nx</option>';
... ... @@ -294,17 +293,22 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
}
var property = ' <div class="layui-inline ">' +
' <label class="layui-form-label">' + v.ddicName + '</label>' +
' <div class="layui-input-inline">' +
str+
' </div>' +
' </div>';
var property = '' ;
if(v.ddicCode!="loginSkin"){
property+=' <div class="layui-inline ">'+
' <label class="layui-form-label">' + v.ddicName + '</label>';
property+= ' <div class="layui-input-inline">' +
str+
' </div>' +
' </div>';
}
//end lsq 2022-03-12
if (i % 2 == 0 && i != 0) {
content += rowTail;
}
if (i % 2 == 0) {//需要添加表头
//lsq (|| i==1)注释掉了登录皮肤，所有第一个要占一行 2022-06-07
if (i % 2 == 0 || i==1) {//需要添加表头
content += rowHead + property;
} else {//
content += property;
... ...
... ... @@ -31,6 +31,10 @@
}
}
});
$(function (){
let domainName=sessionStorage.getItem('domainName')+"/api-u/sysConf/preview?code=";
$('.logo').attr('src',domainName+'home1-logo')
})
});
... ... @@ -73,6 +77,7 @@
</li>
</ul>
<img src="/src/style/img/logo.png" class="logo">
<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
<!--搜索框检索-->
... ... @@ -1023,4 +1028,4 @@
<!--cup个数-->
<script type="text/html" id="cpuNumTpl">
<div>{{d.cpuNum?(d.cpuNum+"个"):""}}</div>
</script>
</script>
\ No newline at end of file
... ...