Skip to content

A
apaas-ui
Commit fe6d03df authored by 张俊's avatar 张俊
Browse files
Options

修改工作台首页样式

parent 4ba509a8
Hide whitespace changes
Inline Side-by-side
Showing with 218 additions and 95 deletions
src/components/e-charts/dashboard.vue
View file @ fe6d03df
......@@ -35,11 +35,11 @@ export default {
text: self.data.data + "{a|%}",
show: !self.is_word,
x: "center",
y: "center",
y: "30%",
textStyle: {
fontSize: 36,
fontWeight: "lighter",
color: ["#67828c"],
color: self.dangerousValue == "workplace"?["#0d1847"]:["#67828c"],
rich: {
a: {
fontSize: 14,
......@@ -205,7 +205,7 @@ export default {
barMaxWidth: 10,
name: "C",
roundCap: true,
color: "#ddd",
color: "#f4f4f5",
barGap: "-100%"
},
{
......
src/components/menu.vue
View file @ fe6d03df
......@@ -22,11 +22,13 @@
<div
v-for="(item, index) in user_arr"
:key="index + 700"
@mouseleave.stop="change_now_hover(-1)"
@mouseenter.stop="change_now_hover(index)"
@click="gotopage(item.visit_url)"
>{{ item.menu_name }}</div>
<div @click="gotopage('logout')">退出登录</div>
</div>
<div v-if="userInfo.user_name && userInfo.user_name != ''" class="sj"></div>
<div v-if="userInfo.user_name && userInfo.user_name != ''" class="sj" :style="now_hover==0?{backgroundColor:'#e56600'}:{}"></div>
</div>
<div
v-if="show_shop_menu"
......@@ -85,10 +87,12 @@
<div
v-for="(v, indexs) in item.Child"
:key="indexs + 700"
@mouseleave.stop="change_now_hover(-1)"
@mouseenter.stop="change_now_hover(indexs)"
@click.stop="gotoChildPage(v, item.visit_url)"
>{{ v.menu_name }}</div>
</div>
<div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></div>
<div class="sj" v-if="item.Child && item.Child.length" :style="now_hover==0?{backgroundColor:'#e56600',left: '60px'}:{left: '60px'}"></div>
<div class="bottom_show" v-if="now_menu == item.visit_url"></div>
</div>
</div>
......@@ -110,6 +114,7 @@ export default {
],
shopping_list: [],
menuCartNum: 0,
now_hover:-1,
show_shop_menu: false
};
},
......@@ -131,6 +136,9 @@ export default {
}
},
methods: {
change_now_hover(n){
this.now_hover = n
},
gotopage(n) {
if (n == "logout") {
window.location.href = "/iam/api/logout";
......@@ -306,7 +314,7 @@ export default {
box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
border-radius: 8px;
position: absolute;
top: 80px;
top: 70px;
left: -20px;
overflow: hidden;
font-size: 14px;
......@@ -356,9 +364,9 @@ export default {
.sj {
width: 16px;
height: 16px;
background-color: #e56600;
background-color: #fff;
position: absolute;
top: 72px;
top: 62px;
transform: rotate(45deg);
display: none;
}
......
src/pages/authority/user/organizationuser.vue
View file @ fe6d03df
......@@ -206,12 +206,12 @@ export default {
}, 1000);
};
var user_name_pass = (rule, value, callback) => {
var reg = /^[a-z0-9|\-|_|\.]+$/;
var reg = /^[a-z0-9]+$/;
setTimeout(() => {
if (reg.test(value)) {
callback();
} else {
callback(new Error("只支持小写字母、数字、-、_、."));
callback(new Error("只支持小写字母、数字"));
}
}, 100);
};
......
src/pages/workbench/workPlace.vue
View file @ fe6d03df
......@@ -43,7 +43,7 @@
<p
:style="{ color: item.color }"
>
<span style="font-size:36px">{{ helper.numberFormat(item.num, 2) }}</span>
<span style="font-size:40px;font-family: Arial-BoldMT;font-weight:600;">{{ helper.numberFormat(item.num, 2) }}</span>
<span v-if="item.num > 10000">万</span>
</p>
</div>
......@@ -55,11 +55,11 @@
<div class="case_box" v-if="now_user == 0||now_user == 4">
<div class="data_asy">
<p
style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
>
<span style="cursor:pointer;" @click="$router.push('/data_analysis')">
<span style="display: inline-block;vertical-align:middle;">数据分析中心</span>
<img style="vertical-align:middle;" src="@/assets/imgs/home_btn_enter.png" />
<div class="enter_btn"></div>
</span>
</p>
<div class="data_charts">
......@@ -81,22 +81,22 @@
<div class="health" style="width:calc(100%);margin-top:20px;">
<div style="width:142px;float:left;height:180px;margin-right:30px;">
<dash-board :data="cpu_data" dangerousValue='workplace' style="height:140px;"></dash-board>
<p><span>物理总量</span><span>{{cpu_data.all}}核</span></p>
<p style="margin-bottom:8px;"><span>物理总量</span><span>{{cpu_data.all}}核</span></p>
<p v-if="cpu_data.remaining||cpu_data.remaining==0"><span>剩余量</span><span>{{cpu_data.remaining.toFixed(2)}}核</span></p>
</div>
<div style="width:142px;float:left;height:180px;margin-right:30px;">
<dash-board :data="memory_data" dangerousValue='workplace' style="height:140px;"></dash-board>
<p><span>物理总量</span><span>{{memory_data.all}}GB</span></p>
<p style="margin-bottom:8px;"><span>物理总量</span><span>{{memory_data.all}}GB</span></p>
<p v-if="memory_data.remaining||memory_data.remaining==0"><span>剩余量</span><span>{{memory_data.remaining.toFixed(2)}}GB</span></p>
</div>
<div style="width:142px;float:left;height:180px;margin-right:30px;">
<dash-board :data="pan_data" dangerousValue='workplace' style="height:140px;"></dash-board>
<p><span>物理总量</span><span>{{pan_data.all}}GB</span></p>
<p style="margin-bottom:8px;"><span>物理总量</span><span>{{pan_data.all}}GB</span></p>
<p><span>剩余量</span><span v-if="pan_data.remaining!==-1">{{pan_data.remaining}}GB</span><span v-if="pan_data.remaining==-1">未知</span></p>
</div>
<div style="width:142px;float:left;height:180px;">
<dash-board :data="pod_data" dangerousValue='workplace' style="height:140px;"></dash-board>
<p><span>物理总量</span><span>{{pod_data.all}}</span></p>
<p style="margin-bottom:8px;"><span>物理总量</span><span>{{pod_data.all}}</span></p>
<p><span>剩余量</span><span>{{pod_data.remaining}}</span></p>
</div>
</div>
......@@ -119,7 +119,7 @@
</div>
<div class="online_tool">
<p
style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;height:28px;padding-left:20px;"
style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;height:28px;padding-left:20px;"
>在线组件工具</p>
<div class="online_contain">
<div
......@@ -138,8 +138,10 @@
v-for="(it,idx) in item.children"
:key="idx+59000"
@click.stop="goto_online_page(it.url,index,idx)"
@mouseleave.stop="change_now_online()"
@mouseenter.stop="change_now_online(index,idx)"
class="online_box online_child"
:style="{ backgroundColor: it.bg }"
:style="now_online_box.length&&now_online_box[0]==index&&now_online_box[1]==idx?{backgroundColor:it.h_bg}:{ backgroundColor: it.bg }"
>
<img :src="it.pic" alt />
<span :style="{ color: it.color }">{{ it.text }}</span>
......@@ -154,11 +156,11 @@
<div class="case_box" v-if="now_user == 1">
<div class="data_asy" style="width:100%;">
<p
style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
>
<span style="cursor:pointer;" @click="$router.push('/data_analysis')">
<span style="display: inline-block;vertical-align:middle;">数据分析中心</span>
<img style="vertical-align:middle;" src="@/assets/imgs/home_btn_enter.png" />
<div class="enter_btn"></div>
</span>
</p>
<div class="data_charts" style="width:100%;">
......@@ -197,11 +199,11 @@
<div class="case_box" v-if="now_user == 2">
<div class="data_asy" style="width:100%;">
<p
style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
>
<span style="cursor:pointer;" @click="$router.push('/data_analysis')">
<span style="display: inline-block;vertical-align:middle;">数据分析中心</span>
<img style="vertical-align:middle;" src="@/assets/imgs/home_btn_enter.png" />
<div class="enter_btn"></div>
</span>
</p>
<div class="data_charts" style="width:100%;">
......@@ -231,11 +233,11 @@
<div class="case_box">
<div class="data_asy" :style="now_user == 0||now_user == 4 ? {} : { width: '590px' }">
<p
style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
style="margin-top:10px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
>
<span style="cursor:pointer;" @click="gotofw">
<span style="display: inline-block;vertical-align:middle;"> {{ now_user == 0||now_user == 4 ? "我的服务" : "服务管理" }}</span>
<img style="vertical-align:middle;" src="@/assets/imgs/home_btn_enter.png" />
<div class="enter_btn"></div>
</span>
</p>
<div class="myservice">
......@@ -277,11 +279,11 @@
</div>
<div class="online_tool" :style="now_user == 0||now_user == 4 ? {} : { width: '590px' }">
<p
style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
style="margin-top:10px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
>
<span style="cursor:pointer;" @click="gotoyy">
<span style="display: inline-block;vertical-align:middle;">{{ now_user == 0||now_user == 4 ? "我的应用" : "平台应用" }}</span>
<img style="vertical-align:middle;" src="@/assets/imgs/home_btn_enter.png" />
<div class="enter_btn"></div>
</span>
</p>
<div class="myapp">
......@@ -313,12 +315,14 @@
<table-um
:headers="app_head[now_user][now_app]"
v-show="now_user !== 0&&now_user !== 4"
:datas="app_data"
:stripe="true"
:detailsUrl="detailsUrl1[now_user][now_app]"
height="285"
></table-um>
<list-pagination
v-show="now_user !== 0&&now_user !== 4"
:total="listTotal1"
:page-size="pageSize"
:page-sizes="[]"
......@@ -360,6 +364,7 @@ export default {
pageSize: 5,
person: "",
login_time: "",
now_online_box:[],
detailsUrl: [
["/fwgl/0/0/servicedetail/", "/fwgl/0/1/applyserviceedit/"],
["/fwgl/1/0/servicedetail/", "/fwgl/1/1/approvalserviceedit/"],
......@@ -875,7 +880,7 @@ export default {
},
{
text: "应用总数",
pic: require("@/assets/imgs/ic_yingyongzs.png"),
pic: require("../../assets/imgs/ic_yingyongzs_blue.png"),
bg: "#e5f4fe",
color: "#38aef9",
type: "app_count",
......@@ -1017,13 +1022,15 @@ export default {
bg: "#e7fdfc",
color: "#25bdb1",
url:'/app_build',
h_bg:'#d3f6f4'
},
{
text: "代码形式",
pic: require("@/assets/imgs/home_tool_ic_dmxs.png"),
bg: "#d3f6f4",
bg: "#e7fdfc",
color: "#25bdb1",
url:'',
h_bg:'#d3f6f4'
},
]
},
......@@ -1096,6 +1103,15 @@ export default {
}
},
methods: {
//鼠标所在在线工具位置
change_now_online(n,m){
if((n||n==0)&&(m||m==0)){
this.$set(this.now_online_box,0,n)
this.$set(this.now_online_box,1,m)
}else{
this.now_online_box = []
}
},
enter_online_tool(index){
this.now_online = index
},
......@@ -1449,16 +1465,23 @@ export default {
},
init_health(num) {
var options = {
color:['#e56600','#c9cedd'],
title: {
text: num + "%",
text: num + "{a|%}",
textStyle: {
color: "#000",
fontSize: 40,
fontWeight: 200
fontWeight: 200,
rich: {
a: {
fontSize: 14,
padding: [0, 0, 10, 0]
}
}
},
subtext: "健康占比",
subtextStyle: {
color: "#c9cedd"
color: "#707693"
},
itemGap: -10, // 主副标题距离
left: "center",
......@@ -1504,48 +1527,78 @@ export default {
},
series: [
{
type: "bar",
silent: true,
data: [
{
name: "作文得分",
value: num,
itemStyle: {
normal: {
color: "#e56600",
shadowColor: "rgba(0, 0, 0, 0.2)",
shadowBlur: 20
}
}
}
],
coordinateSystem: "polar",
roundCap: true,
barWidth: 10,
barGap: "-100%", // 两环重叠
z: 2
},
type: 'pie',
z:5,
center:['50%','50%'],
radius:['68%','72%'],
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
tooltip: {
show: false
},
data:[{
name:'',
value:num
},{
name:'',
value:100 - num
}]
},
{
// 灰色环
type: "bar",
silent: true,
data: [
{
value: 100,
itemStyle: {
color: "#c9cedd",
shadowColor: "rgba(0, 0, 0, 0.2)",
shadowBlur: 20
}
}
],
coordinateSystem: "polar",
roundCap: true,
barWidth: 10,
barGap: "-100%", // 两环重叠
z: 1
}
type:'pie',
z:4,
center:['50%','50%'],
radius:['60%','80%'],
hoverAnimation:false,
avoidLabelOverlap: false,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
tooltip: {
show: false
},
itemStyle: {
normal: {
color:'#f6f7fc'
}
},
emphasis:{
show:false,
itemStyle:{
color:'#f6f7fc'
}
},
data: [{
value: 1,
}],
}
]
};
window[this.health] = echarts.init(document.getElementById(this.health));
......@@ -1674,7 +1727,7 @@ export default {
return options;
},
init_yy(xarr, service, app, get) {
var colors = ["#e56600", "#c9cedd", "#515fe7"];
var colors = ["#e56600", "#f2f2f2", "#515fe7"];
var options = {
color: colors,
......@@ -1687,7 +1740,7 @@ export default {
},
grid: {
top: "20",
bottom: "45"
bottom: "45",
},
legend: {
data: ["服务调用总数", "应用部署总数", "收益总额"],
......@@ -1702,7 +1755,16 @@ export default {
axisTick: {
alignWithLabel: true
},
data: xarr
data: xarr,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
color:'#0d1847'
}
}
],
yAxis: [
......@@ -1711,10 +1773,20 @@ export default {
name: "",
min: 0,
position: "right",
axisLine: {
splitLine: {
lineStyle: {
color: colors[1]
}
type: "solid",
color: colors[1]
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color:'#a9aec0'
}
},
{
......@@ -1722,14 +1794,34 @@ export default {
name: "",
min: 0,
position: "left",
axisLine: {
splitLine: {
lineStyle: {
color: colors[1]
}
type: "solid",
color: colors[1]
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color:'#a9aec0'
}
}
],
series: [
{
name: "收益总额",
type: "line",
yAxisIndex: 0,
data: get,
itemStyle: {
color: colors[0]
},
symbol: "circle"
},
{
name: "服务调用总数",
type: "bar",
......@@ -1752,16 +1844,7 @@ export default {
},
barWidth: 12
},
{
name: "收益总额",
type: "line",
yAxisIndex: 0,
data: get,
itemStyle: {
color: colors[0]
},
symbol: "circle"
}
]
};
window[this.yy_asy] = echarts.init(document.getElementById(this.yy_asy));
......@@ -1892,11 +1975,19 @@ export default {
.person_text {
float: left;
padding: 0 10px;
margin-top: -8px;
}
.person_text span{
vertical-align: 4px;
font-size: 16px;
color: #58617a;
}
.person_text img {
border-radius: 18px;
margin-right: 10px;
vertical-align: -10px;
border: 2px solid #e3e5ef;
}
.person_menu {
float: right;
......@@ -1908,7 +1999,6 @@ export default {
border-radius: 8px;
color: #fff;
cursor: pointer;
margin-top: 10px;
position: relative;
}
.person_manage_pic {
......@@ -1950,15 +2040,24 @@ export default {
.menu .menu_text {
float: right;
margin-top: 15px;
margin-right: 29px;
margin-right: 70px;
}
.menu_text p {
text-align: right;
font-size: 16px;
color: #242c43;
}
.case_box {
width: 100%;
overflow: hidden;
padding-bottom: 5px;
}
.case_box:after,.case_box:before{
content: "";
display: table;
}
.case_box:after{
clear: both;
}
.data_asy {
width: 720px;
......@@ -2145,6 +2244,10 @@ export default {
text-align: center;
cursor: pointer;
}
.myapp_box img{
border-radius: 8px;
border: solid 3px #f6f7fb;
}
.myapp_contain .myapp_box:nth-of-type(3n) {
margin-right: 0;
}
......@@ -2205,4 +2308,16 @@ export default {
width: 1440px;
transition: all 0.2s;
}
.enter_btn{
display: inline-block;
background-image: url('../../assets/imgs/home_btn_enter.png');
width: 28px;
height: 28px;
background-size: 100%;
vertical-align: -9px;
margin-left: 5px;
}
.enter_btn:hover{
background-image: url('../../assets/imgs/home_btn_enter_hov.png');
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment