monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 2b511525698b82954a842171803853c621820e80 1 parent cde6943f

【596】登录logo 支持配置-接口联调-图片上传接口联调，页面样式调整 #2

Inline Side-by-side
Showing 4 changed files with 111 additions and 50 deletions
1 <title>登录配置</title> 1 <title>登录配置</title>
2 -<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99.5%!important;"/> 2 +<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99%!important;"/>
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 height: 100%; 3 height: 100%;
4 overflow: auto; 4 overflow: auto;
5 background: #ffffff; 5 background: #ffffff;
  6 + box-sizing: border-box;
6 } 7 }
7 .logoConfig-item{ 8 .logoConfig-item{
8 padding:0 20px; 9 padding:0 20px;
@@ -13,12 +14,11 @@ @@ -13,12 +14,11 @@
13 } 14 }
14 .logoConfig-item-content{ 15 .logoConfig-item-content{
15 margin-bottom:10px; 16 margin-bottom:10px;
16 - padding-bottom: 20px;  
17 } 17 }
18 .config-login{ 18 .config-login{
19 display: flex; 19 display: flex;
20 align-items: center; 20 align-items: center;
21 - justify-content: space-around; 21 + justify-content: center;
22 } 22 }
23 .config-name{ 23 .config-name{
24 width:110px; 24 width:110px;
@@ -31,8 +31,23 @@ @@ -31,8 +31,23 @@
31 } 31 }
32 .upload-demo{ 32 .upload-demo{
33 margin-left:20px; 33 margin-left:20px;
  34 + width:93px;
34 } 35 }
35 .logo-img{ 36 .logo-img{
36 width:400px; 37 width:400px;
37 - /*flex:1;*/ 38 + padding:10px;
  39 + border:1px solid #dddddd;
  40 +}
  41 +.logo-img img{
  42 + width:100%;
  43 +}
  44 +.config-upload{
  45 + margin-top:10px;
  46 + justify-content: center;
  47 + display: flex;
  48 +}
  49 +.config-upload-left{
  50 + width: 533px;
  51 + display: flex;
  52 + justify-content: flex-end;
38 } 53 }
1 -<div class="logoConfig-container" >  
2 - <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> 1 +<div class="logoConfig-container" :style="'height: '+height+'px'">
  2 + <el-tabs v-if="hasRefresh" 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"> 3 <el-tab-pane v-for="(item,index) in skinData" :key="index" :label="item.name+'布局'" :name="item.name">
4 <el-row class="logoConfig-item" > 4 <el-row class="logoConfig-item" >
5 <!--<el-col :span="4" > 5 <!--<el-col :span="4" >
@@ -10,20 +10,31 @@ @@ -10,20 +10,31 @@
10 <el-col :span="24"> 10 <el-col :span="24">
11 <div class="config-login"> 11 <div class="config-login">
12 <span class="config-name">登录logo：</span> 12 <span class="config-name">登录logo：</span>
13 - <img :src="item.imageUrl" class="logo-img" alt=""> 13 + <div class="logo-img">
  14 + <img :src="domainName+item.imageUrl" alt="">
  15 + </div>
  16 + </div>
  17 + </el-col>
  18 + <el-col :span="24" class="config-upload">
  19 + <div class="config-upload-left">
  20 + <el-tooltip>
  21 + <template #content>
  22 + <dev class="config-tip" >
  23 + (备注说明：登录表单上方展示的logo,
  24 + {{item.name=='default'?'1200x126':item.name=='skin1'?'1314x236':item.name=='skin2'?'621x113':''}})
  25 + </dev>
  26 + </template>
14 <el-upload 27 <el-upload
15 class="upload-demo" 28 class="upload-demo"
16 :show-file-list="false" 29 :show-file-list="false"
17 :before-upload="beforeAvatarUpload" 30 :before-upload="beforeAvatarUpload"
18 - :data="item" 31 + :data="item.imageUrl"
19 :multiple="false" 32 :multiple="false"
20 :http-request="getFile" 33 :http-request="getFile"
21 :auto-upload="true"> 34 :auto-upload="true">
22 <el-button size="mini" type="primary">上传照片</el-button> 35 <el-button size="mini" type="primary">上传照片</el-button>
23 </el-upload> 36 </el-upload>
24 - <dev class="config-tip">  
25 - (备注说明：登录表单上方展示的logo)  
26 - </dev> 37 + </el-tooltip>
27 </div> 38 </div>
28 </el-col> 39 </el-col>
29 40
@@ -32,20 +43,30 @@ @@ -32,20 +43,30 @@
32 <el-col :span="24"> 43 <el-col :span="24">
33 <div class="config-login"> 44 <div class="config-login">
34 <span class="config-name">登录背景：</span> 45 <span class="config-name">登录背景：</span>
35 - <img :src="item.imageUrlBg" class="logo-img" alt=""> 46 + <div class="logo-img">
  47 + <img :src="domainName+item.imageUrlBg" alt="">
  48 + </div>
  49 + </div>
  50 + </el-col>
  51 + <el-col :span="24" class="config-upload">
  52 + <div class="config-upload-left">
  53 + <el-tooltip>
  54 + <template #content>
  55 + <dev class="config-tip">
  56 + (备注说明：登录表单下的背景图片,1920x576)
  57 + </dev>
  58 + </template>
36 <el-upload 59 <el-upload
37 class="upload-demo" 60 class="upload-demo"
38 :show-file-list="false" 61 :show-file-list="false"
39 :before-upload="beforeAvatarUpload" 62 :before-upload="beforeAvatarUpload"
40 - :data="item" 63 + :data="item.imageUrlBg"
41 :multiple="false" 64 :multiple="false"
42 :http-request="getFile" 65 :http-request="getFile"
43 :auto-upload="true"> 66 :auto-upload="true">
44 <el-button size="mini" type="primary">上传照片</el-button> 67 <el-button size="mini" type="primary">上传照片</el-button>
45 </el-upload> 68 </el-upload>
46 - <dev class="config-tip">  
47 - (备注说明：登录表单下的背景图片)  
48 - </dev> 69 + </el-tooltip>
49 </div> 70 </div>
50 </el-col> 71 </el-col>
51 </el-row> 72 </el-row>
@@ -53,41 +74,61 @@ @@ -53,41 +74,61 @@
53 <el-col :span="24"> 74 <el-col :span="24">
54 <div class="config-login"> 75 <div class="config-login">
55 <span class="config-name">登录皮肤：</span> 76 <span class="config-name">登录皮肤：</span>
56 - <img :src="item.imageUrlSkin" class="logo-img" alt=""> 77 + <div class="logo-img">
  78 + <img :src="domainName+item.imageUrlSkin" alt="">
  79 + </div>
  80 + </div>
  81 + </el-col>
  82 + <el-col :span="24" class="config-upload">
  83 + <div class="config-upload-left">
  84 + <el-tooltip>
  85 + <template #content>
  86 + <dev class="config-tip">
  87 + (备注说明：登录页面的皮肤图片,1920x1080)
  88 + </dev>
  89 + </template>
57 <el-upload 90 <el-upload
58 class="upload-demo" 91 class="upload-demo"
59 :show-file-list="false" 92 :show-file-list="false"
60 :before-upload="beforeAvatarUpload" 93 :before-upload="beforeAvatarUpload"
61 - :data="item" 94 + :data="item.imageUrlSkin"
62 :multiple="false" 95 :multiple="false"
63 :http-request="getFile" 96 :http-request="getFile"
64 :auto-upload="true"> 97 :auto-upload="true">
65 <el-button size="mini" type="primary">上传照片</el-button> 98 <el-button size="mini" type="primary">上传照片</el-button>
66 </el-upload> 99 </el-upload>
67 - <dev class="config-tip">  
68 - (备注说明：登录页面的皮肤图片)  
69 - </dev> 100 + </el-tooltip>
70 </div> 101 </div>
71 </el-col> 102 </el-col>
72 </el-row> 103 </el-row>
73 <el-row class="logoConfig-item-content" v-if="item.imageUrlIndex"> 104 <el-row class="logoConfig-item-content" v-if="item.imageUrlIndex">
74 - <el-col :span="24"> 105 + <el-col :span="24" v-if="item.imageUrlIndex">
75 <div class="config-login"> 106 <div class="config-login">
76 - <span class="config-name">首页logo：</span>  
77 - <img :src="item.imageUrlIndex" class="logo-img" alt=""> 107 + <span class="config-name">{{item.name}}logo：</span>
  108 + <div class="logo-img">
  109 + <img :src="domainName+item.imageUrlIndex" alt="">
  110 + </div>
  111 + </div>
  112 + </el-col>
  113 + <el-col :span="24" class="config-upload" v-if="item.imageUrlIndex">
  114 + <div class="config-upload-left">
  115 + <el-tooltip>
  116 + <template #content>
  117 + <dev class="config-tip">
  118 + (备注说明：首页上方展示的logo,{{item.imageUrlIndex=='home1-logo'?'1200x126':'507x126'}})
  119 + </dev>
  120 + </template>
78 <el-upload 121 <el-upload
79 class="upload-demo" 122 class="upload-demo"
80 :show-file-list="false" 123 :show-file-list="false"
81 :before-upload="beforeAvatarUpload" 124 :before-upload="beforeAvatarUpload"
82 - :data="item" 125 + :data="item.imageUrlIndex"
83 :multiple="false" 126 :multiple="false"
84 :http-request="getFile" 127 :http-request="getFile"
85 :auto-upload="true"> 128 :auto-upload="true">
86 <el-button size="mini" type="primary">上传照片</el-button> 129 <el-button size="mini" type="primary">上传照片</el-button>
87 </el-upload> 130 </el-upload>
88 - <dev class="config-tip">  
89 - (备注说明：首页上方展示的logo)  
90 - </dev> 131 + </el-tooltip>
91 </div> 132 </div>
92 </el-col> 133 </el-col>
93 </el-row> 134 </el-row>
@@ -95,6 +136,4 @@ @@ -95,6 +136,4 @@
95 </el-row> 136 </el-row>
96 </el-tab-pane> 137 </el-tab-pane>
97 </el-tabs> 138 </el-tabs>
98 -  
99 -  
100 </div> 139 </div>
@@ -9,21 +9,27 @@ export default { @@ -9,21 +9,27 @@ export default {
9 }, 9 },
10 setup: function (props, {attrs, slots, emit}) { 10 setup: function (props, {attrs, slots, emit}) {
11 const {proxy} = Vue.getCurrentInstance(); 11 const {proxy} = Vue.getCurrentInstance();
  12 + let height = Vue.ref(window.innerHeight);
12 let activeName=Vue.ref('default'); 13 let activeName=Vue.ref('default');
  14 + //刷新页面
  15 + let hasRefresh=Vue.ref(true);
  16 + //ip地址
  17 + let domainName=Vue.ref(sessionStorage.getItem('domainName')+"/api-auth/validata/code/");
13 //imageUrl:登录logo，imageUrlSkin：登录皮肤，imageUrlBg：登录背景，imageUrlIndex：首页logo 18 //imageUrl:登录logo，imageUrlSkin：登录皮肤，imageUrlBg：登录背景，imageUrlIndex：首页logo
14 let skinData=Vue.ref([ 19 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'} 20 + {name:"default",imageUrl:'default-login-logo',imageUrlBg:'default-login-backGround'},
  21 + {name:"skin1",imageUrl:'skin1-login-logo',imageUrlSkin:'skin1-login-skin'},
  22 + {name:"skin2",imageUrl:'skin2-login-logo',imageUrlSkin:'skin2-login-skin'},
  23 + {name:"首页1",imageUrlIndex:'home1-logo'},
  24 + {name:"首页2",imageUrlIndex:'home2-logo'}
21 ]) 25 ])
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'; 26 + let layoutIndexData=Vue.ref([
  27 + {name:'首页logo1',imageUrlIndex:'home1-logo'},
  28 + {name:'首页logo2',imageUrlIndex:'home2-logo'}
  29 + ])
  30 + //上传完后的图片预览
  31 + let imageUrl=Vue.ref('');
  32 +
27 let beforeAvatarUpload = (file) => { 33 let beforeAvatarUpload = (file) => {
28 const isJPG = file.type.indexOf('image/') != -1 34 const isJPG = file.type.indexOf('image/') != -1
29 if (!isJPG) { 35 if (!isJPG) {
@@ -33,17 +39,18 @@ export default { @@ -33,17 +39,18 @@ export default {
33 } 39 }
34 let getFile = (param) => { 40 let getFile = (param) => {
35 let fileObj = param.file 41 let fileObj = param.file
36 - console.log("param.data",param.data)  
37 -  
38 let params = { 42 let params = {
39 file: fileObj, 43 file: fileObj,
40 - id: props.parentNode.id 44 + code: param.data
41 } 45 }
42 // 上传文件 46 // 上传文件
43 - proxy.$http.uploadFile("/api-web/bOpsPerson/uploadFile", params, function (res) { 47 + proxy.$http.uploadFile("/api-u/sysConf/uploadFile", params, function (res) {
  48 + hasRefresh.value=false;
44 if (res && res.success) { 49 if (res && res.success) {
45 proxy.$global.showMsg("上传成功！"); 50 proxy.$global.showMsg("上传成功！");
46 } 51 }
  52 + hasRefresh.value=true;
  53 +
47 }) 54 })
48 imageUrl.value = URL.createObjectURL(fileObj); 55 imageUrl.value = URL.createObjectURL(fileObj);
49 } 56 }
@@ -53,16 +60,16 @@ export default { @@ -53,16 +60,16 @@ export default {
53 Vue.onMounted(() => { 60 Vue.onMounted(() => {
54 }) 61 })
55 return { 62 return {
  63 + hasRefresh,
  64 + height,
56 activeName, 65 activeName,
57 handleClick, 66 handleClick,
58 - fit,  
59 - imageUrlSkin,  
60 - imageUrlIndex,  
61 - imageUrlBg,  
62 beforeAvatarUpload, 67 beforeAvatarUpload,
63 imageUrl, 68 imageUrl,
64 getFile, 69 getFile,
65 - skinData 70 + skinData,
  71 + layoutIndexData,
  72 + domainName
66 } 73 }
67 } 74 }
68 } 75 }