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
1 <title>登录配置</title> 1 <title>登录配置</title>
2 -<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99%!important;"/> 2 +<iframe src="/vue3/index.html#/vue3/logoConfig" class="layadmin-iframe" style="height: 99.5%!important;"/>
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 height: 100%; 3 height: 100%;
4 overflow: auto; 4 overflow: auto;
5 background: #ffffff; 5 background: #ffffff;
6 - box-sizing: border-box;  
7 } 6 }
8 .logoConfig-item{ 7 .logoConfig-item{
9 padding:0 20px; 8 padding:0 20px;
@@ -14,11 +13,12 @@ @@ -14,11 +13,12 @@
14 } 13 }
15 .logoConfig-item-content{ 14 .logoConfig-item-content{
16 margin-bottom:10px; 15 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: center; 21 + justify-content: space-around;
22 } 22 }
23 .config-name{ 23 .config-name{
24 width:110px; 24 width:110px;
@@ -29,25 +29,10 @@ @@ -29,25 +29,10 @@
29 margin-left:6px; 29 margin-left:6px;
30 width:200px; 30 width:200px;
31 } 31 }
32 -.upload-demo-logoConfig{ 32 +.upload-demo{
33 margin-left:20px; 33 margin-left:20px;
34 - width:93px;  
35 } 34 }
36 .logo-img{ 35 .logo-img{
37 width:400px; 36 width:400px;
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; 37 + /*flex:1;*/
53 } 38 }
@@ -143,12 +143,6 @@ const routes = [{ @@ -143,12 +143,6 @@ const routes = [{
143 name: 'logoConfig', 143 name: 'logoConfig',
144 component: () => myImport('views/logoConfig/index') 144 component: () => myImport('views/logoConfig/index')
145 }, 145 },
146 - //忙时配置  
147 - {  
148 - path: '/vue3/busyConfig',  
149 - name: 'busyConfig',  
150 - component: () => myImport('views/busyConfig/index')  
151 - },  
152 ]; 146 ];
153 147
154 // hash模式： createWebHashHistory 148 // hash模式： createWebHashHistory
1 -<div class="logoConfig-container" :style="'height: '+height+'px'"> 1 +<div class="logoConfig-container" >
2 <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> 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"> 3 <el-tab-pane v-for="(item,index) in skinData" :key="index" :label="item.name+'布局'" :name="item.name">
4 - <el-row class="logoConfig-item" v-if="hasRefresh" > 4 + <el-row class="logoConfig-item" >
5 <!--<el-col :span="4" > 5 <!--<el-col :span="4" >
6 个性化布局-{{item.name}} 6 个性化布局-{{item.name}}
7 </el-col>--> 7 </el-col>-->
@@ -10,31 +10,20 @@ @@ -10,31 +10,20 @@
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 - <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>  
27 - <el-upload  
28 - class="upload-demo-logoConfig"  
29 - :show-file-list="false"  
30 - :before-upload="beforeAvatarUpload"  
31 - :data="item.imageUrl"  
32 - :multiple="false"  
33 - :http-request="getFile"  
34 - :auto-upload="true">  
35 - <el-button size="mini" type="primary">上传照片</el-button>  
36 - </el-upload>  
37 - </el-tooltip> 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>
38 </div> 27 </div>
39 </el-col> 28 </el-col>
40 29
@@ -43,30 +32,20 @@ @@ -43,30 +32,20 @@
43 <el-col :span="24"> 32 <el-col :span="24">
44 <div class="config-login"> 33 <div class="config-login">
45 <span class="config-name">登录背景：</span> 34 <span class="config-name">登录背景：</span>
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>  
59 - <el-upload  
60 - class="upload-demo-logoConfig"  
61 - :show-file-list="false"  
62 - :before-upload="beforeAvatarUpload"  
63 - :data="item.imageUrlBg"  
64 - :multiple="false"  
65 - :http-request="getFile"  
66 - :auto-upload="true">  
67 - <el-button size="mini" type="primary">上传照片</el-button>  
68 - </el-upload>  
69 - </el-tooltip> 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>
70 </div> 49 </div>
71 </el-col> 50 </el-col>
72 </el-row> 51 </el-row>
@@ -74,61 +53,41 @@ @@ -74,61 +53,41 @@
74 <el-col :span="24"> 53 <el-col :span="24">
75 <div class="config-login"> 54 <div class="config-login">
76 <span class="config-name">登录皮肤：</span> 55 <span class="config-name">登录皮肤：</span>
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>  
90 - <el-upload  
91 - class="upload-demo-logoConfig"  
92 - :show-file-list="false"  
93 - :before-upload="beforeAvatarUpload"  
94 - :data="item.imageUrlSkin"  
95 - :multiple="false"  
96 - :http-request="getFile"  
97 - :auto-upload="true">  
98 - <el-button size="mini" type="primary">上传照片</el-button>  
99 - </el-upload>  
100 - </el-tooltip> 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>
101 </div> 70 </div>
102 </el-col> 71 </el-col>
103 </el-row> 72 </el-row>
104 <el-row class="logoConfig-item-content" v-if="item.imageUrlIndex"> 73 <el-row class="logoConfig-item-content" v-if="item.imageUrlIndex">
105 - <el-col :span="24" v-if="item.imageUrlIndex"> 74 + <el-col :span="24">
106 <div class="config-login"> 75 <div class="config-login">
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>  
121 - <el-upload  
122 - class="upload-demo-logoConfig"  
123 - :show-file-list="false"  
124 - :before-upload="beforeAvatarUpload"  
125 - :data="item.imageUrlIndex"  
126 - :multiple="false"  
127 - :http-request="getFile"  
128 - :auto-upload="true">  
129 - <el-button size="mini" type="primary">上传照片</el-button>  
130 - </el-upload>  
131 - </el-tooltip> 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>
132 </div> 91 </div>
133 </el-col> 92 </el-col>
134 </el-row> 93 </el-row>
@@ -136,4 +95,6 @@ @@ -136,4 +95,6 @@
136 </el-row> 95 </el-row>
137 </el-tab-pane> 96 </el-tab-pane>
138 </el-tabs> 97 </el-tabs>
  98 +
  99 +
139 </div> 100 </div>
@@ -9,23 +9,21 @@ export default { @@ -9,23 +9,21 @@ 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);  
13 let activeName=Vue.ref('default'); 12 let activeName=Vue.ref('default');
14 - //刷新页面  
15 - let hasRefresh=Vue.ref(true);  
16 - //ip地址  
17 - let domainName=Vue.ref(sessionStorage.getItem('domainName')+"/api-u/sysConf/preview?code=");  
18 //imageUrl:登录logo，imageUrlSkin：登录皮肤，imageUrlBg：登录背景，imageUrlIndex：首页logo 13 //imageUrl:登录logo，imageUrlSkin：登录皮肤，imageUrlBg：登录背景，imageUrlIndex：首页logo
19 let skinData=Vue.ref([ 14 let skinData=Vue.ref([
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'} 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'}
25 ]) 21 ])
26 - //上传完后的图片预览  
27 - let imageUrl=Vue.ref('');  
28 - 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';
29 let beforeAvatarUpload = (file) => { 27 let beforeAvatarUpload = (file) => {
30 const isJPG = file.type.indexOf('image/') != -1 28 const isJPG = file.type.indexOf('image/') != -1
31 if (!isJPG) { 29 if (!isJPG) {
@@ -35,19 +33,17 @@ export default { @@ -35,19 +33,17 @@ export default {
35 } 33 }
36 let getFile = (param) => { 34 let getFile = (param) => {
37 let fileObj = param.file 35 let fileObj = param.file
  36 + console.log("param.data",param.data)
  37 +
38 let params = { 38 let params = {
39 file: fileObj, 39 file: fileObj,
40 - code: param.data 40 + id: props.parentNode.id
41 } 41 }
42 // 上传文件 42 // 上传文件
43 - proxy.$http.uploadFile("/api-u/sysConf/uploadFile", params, function (res) {  
44 - hasRefresh.value=false; 43 + proxy.$http.uploadFile("/api-web/bOpsPerson/uploadFile", params, function (res) {
45 if (res && res.success) { 44 if (res && res.success) {
46 proxy.$global.showMsg("上传成功！"); 45 proxy.$global.showMsg("上传成功！");
47 } 46 }
48 - setTimeout(function (){  
49 - hasRefresh.value=true;  
50 - },200)  
51 }) 47 })
52 imageUrl.value = URL.createObjectURL(fileObj); 48 imageUrl.value = URL.createObjectURL(fileObj);
53 } 49 }
@@ -57,15 +53,16 @@ export default { @@ -57,15 +53,16 @@ export default {
57 Vue.onMounted(() => { 53 Vue.onMounted(() => {
58 }) 54 })
59 return { 55 return {
60 - hasRefresh,  
61 - height,  
62 activeName, 56 activeName,
63 handleClick, 57 handleClick,
  58 + fit,
  59 + imageUrlSkin,
  60 + imageUrlIndex,
  61 + imageUrlBg,
64 beforeAvatarUpload, 62 beforeAvatarUpload,
65 imageUrl, 63 imageUrl,
66 getFile, 64 getFile,
67 - skinData,  
68 - domainName 65 + skinData
69 } 66 }
70 } 67 }
71 } 68 }
@@ -238,12 +238,6 @@ const routes = [{ @@ -238,12 +238,6 @@ const routes = [{
238 name: 'logoConfig', 238 name: 'logoConfig',
239 component: () => myImport('views/logoConfig/index') 239 component: () => myImport('views/logoConfig/index')
240 }, 240 },
241 - //忙时配置  
242 - {  
243 - path: '/vue3/busyConfig',  
244 - name: 'busyConfig',  
245 - component: () => myImport('views/busyConfig/index')  
246 - },  
247 ]; 241 ];
248 242
249 // hash模式： createWebHashHistory 243 // hash模式： createWebHashHistory