Skip to content

W
WX_h5
Commit ff6834b6 authored by godwithdh's avatar godwithdh
Browse files
Options

boss

parent 24d6b0b1
Show whitespace changes
Inline Side-by-side
Showing with 70 additions and 26 deletions
src/view/tiip/kanban/Finance.vue
View file @ ff6834b6
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
>div.num{ >div.num{
flex-grow:1; flex-grow:1;
>div{ >div{
font-size:15px;
&:not(:last-child){padding-bottom:4px;} &:not(:last-child){padding-bottom:4px;}
>span:first-child{ >span:first-child{
color:#777; color:#777;
...@@ -48,7 +49,7 @@ ...@@ -48,7 +49,7 @@
<div><span>余额</span><span style="color:#FF6633;">{{v.nCloseAmount||0}}</span></div> <div><span>余额</span><span style="color:#FF6633;">{{v.nCloseAmount||0}}</span></div>
</div> </div>
<XCircle <XCircle
style="width: 60px;height: 60px;" style="width: 70px;height: 70px;"
:percent="Number(v.nPercent)||0" :percent="Number(v.nPercent)||0"
:stroke-width="7" :stroke-width="7"
:stroke-color="color[k%4]" :stroke-color="color[k%4]"
...@@ -99,7 +100,7 @@ export default { ...@@ -99,7 +100,7 @@ export default {
begin_date:util.dateFormat(this.start,"yyyy-MM-dd"), begin_date:util.dateFormat(this.start,"yyyy-MM-dd"),
end_date:(this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"))+' 23:59', end_date:(this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"))+' 23:59',
}, },
},true,{}) },"加载中",{})
if(typeof value=='object'&&value.length>0){ if(typeof value=='object'&&value.length>0){
this.list=value this.list=value
}else{ }else{
......
src/view/tiip/kanban/abnormal.vue
View file @ ff6834b6
...@@ -10,6 +10,10 @@ ...@@ -10,6 +10,10 @@
>td{ >td{
padding:10px 0; padding:10px 0;
>div{ >div{
height:45px;
display:flex;
justify-content: center;
align-items: center;
background:#fff; background:#fff;
padding:5px 0; padding:5px 0;
} }
...@@ -140,7 +144,7 @@ export default { ...@@ -140,7 +144,7 @@ export default {
begin_date:util.dateFormat(this.start,"yyyy-MM-dd"), begin_date:util.dateFormat(this.start,"yyyy-MM-dd"),
end_date:(this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"))+' 23:59', end_date:(this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"))+' 23:59',
}, },
},true,{}) },"加载中",{})
if(typeof value=="object"&&value.length>0){ if(typeof value=="object"&&value.length>0){
this.value=value[0] this.value=value[0]
}else{ }else{
......
src/view/tiip/kanban/capital.vue
View file @ ff6834b6
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.capital{ .capital{
>div.card{ >div.card{
margin: 15px; margin: 15px;
background: rgb(94,154,254); background: linear-gradient(25deg, var(--color,#5180D4,#5180D4));
padding:15px; padding:15px;
border-radius: 5px; border-radius: 5px;
box-shadow: 2px 2px 3px rgba(94,154,254,0.5); box-shadow: 2px 2px 3px rgba(94,154,254,0.5);
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</style> </style>
<template> <template>
<div class="capital" :style="list.length==0&&'background:#fff;height:100%;'"> <div class="capital" :style="list.length==0&&'background:#fff;height:100%;'">
<div class="card" v-if="list.length>0" v-for="(v,i) in list" :key="i"> <div class="card" v-if="list.length>0" v-for="(v,i) in list" :key="i" :style="{'--color':color[i%6]}">
<div> <div>
<div style="font-size:13px;margin-bottom:14px;">{{v.sName}}</div> <div style="font-size:13px;margin-bottom:14px;">{{v.sName}}</div>
<div style="font-size: 28px;font-weight: 600;">{{Number(v.sValue)||0}}</div> <div style="font-size: 28px;font-weight: 600;">{{Number(v.sValue)||0}}</div>
...@@ -42,6 +42,14 @@ export default{ ...@@ -42,6 +42,14 @@ export default{
data(){ data(){
return{ return{
list:[], list:[],
color:[
"#ff9700, #fe777c",
"#0081ff, #1cbbb4",
"#fe5a9f,#ff5c40",
"#ca2af4,#8850ff",
"#ffd65b,#ff9833",
"#3b83f6, #24c2dd",
],
} }
}, },
watch:{ watch:{
...@@ -66,7 +74,7 @@ export default{ ...@@ -66,7 +74,7 @@ export default{
begin_date:util.dateFormat(this.start,"yyyy-MM-dd"), begin_date:util.dateFormat(this.start,"yyyy-MM-dd"),
end_date:(this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"))+' 23:59', end_date:(this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"))+' 23:59',
} }
},true,{}) },"加载中",{})
if(typeof value=='object'&&value.length>0){ if(typeof value=='object'&&value.length>0){
this.list=value.map(v=>{ this.list=value.map(v=>{
if(v.sValued==0){ if(v.sValued==0){
......
src/view/tiip/kanban/index.vue
View file @ ff6834b6
...@@ -11,8 +11,9 @@ ...@@ -11,8 +11,9 @@
>span{ >span{
width:calc(100%/5); width:calc(100%/5);
text-align: center; text-align: center;
padding: 10px 0;
position:relative; position:relative;
height: 35px;
line-height: 35px;
&:after{ &:after{
content:" "; content:" ";
left:50%; left:50%;
...@@ -23,39 +24,62 @@ ...@@ -23,39 +24,62 @@
border-radius: 20px; border-radius: 20px;
transition: all 0.3s; transition: all 0.3s;
} }
&.active:after{ &.active{
font-size:15px;
&:after{
width:100%; width:100%;
left:0; left:0;
} }
} }
} }
}
>.date{ >.date{
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
padding:7px 0; height: 30px;
>div{ >div{
flex-grow:1; flex-grow:1;
display:flex; display:flex;
justify-content: space-around; justify-content: center;
align-items: center; align-items: center;
font-size: 10px; font-size: 14px;
>.line{ >.line{
width: 20px; width: 15px;
background: #43B884; background: #815EFF;
height: 3px; height: 3px;
border-radius: 50px; border-radius: 50px;
margin: 0 -20px; margin: 0 5px;
} }
} }
>span{ >button{
flex-shrink: 0; flex-shrink: 0;
padding: 0 10px; padding: 0 10px;
position:relative;
overflow:hidden;
color:#815EFF;
&:after{
content:" ";
width:0;
height:0;
left:50%;
top:50%;
position:absolute;
background:rgba(50, 125, 255, 0.4);
border-radius: 50%;
transform:translate(-50%,-50%);
}
&:active:after{
transition: all 0.4s;
width:100px;
height:100px;
}
} }
} }
>.list{ >.list{
flex-shrink: 0; flex-shrink: 0;
display:flex; display:flex;
background: #f2f2f2; background: #f2f2f2;
color:#679FFE;
>span{ >span{
width: calc(100%/5); width: calc(100%/5);
text-align: center; text-align: center;
...@@ -87,13 +111,13 @@ ...@@ -87,13 +111,13 @@
<span :class="{active:dateMode==5}" @click="dateSelect(5)">自定义</span> <span :class="{active:dateMode==5}" @click="dateSelect(5)">自定义</span>
</div> </div>
<div class="date"> <div class="date">
<span v-if="dateMode<5" @click="preDate">前一{{dateMode==1&&'天'||dateMode==2&&'周'||dateMode==3&&'月'||dateMode==4&&'年'}}</span> <button v-if="dateMode<5" @click="preDate">上一{{dateMode==1&&'天'||dateMode==2&&'周'||dateMode==3&&'月'||dateMode==4&&'年'}}</button>
<div> <div>
<span>{{startDate}}</span> <span>{{startDate}}</span>
<span v-show="dateMode>1" class="line" /> <span v-show="dateMode>1" class="line" />
<span v-show="dateMode>1">{{endDate}}</span> <span v-show="dateMode>1">{{endDate}}</span>
</div> </div>
<span v-if="dateMode<5" @click="nextDate">后一{{dateMode==1&&'天'||dateMode==2&&'周'||dateMode==3&&'月'||dateMode==4&&'年'}}</span> <button v-if="dateMode<5" @click="nextDate">下一{{dateMode==1&&'天'||dateMode==2&&'周'||dateMode==3&&'月'||dateMode==4&&'年'}}</button>
</div> </div>
<div class="list"> <div class="list">
<span :class="{active:situation=='operate'}" @click="situation='operate'">运营概况</span> <span :class="{active:situation=='operate'}" @click="situation='operate'">运营概况</span>
...@@ -208,10 +232,10 @@ export default { ...@@ -208,10 +232,10 @@ export default {
}, },
computed:{ computed:{
startDate(val){ startDate(val){
return util.dateFormat(this.DateValue[0],"yyyy-MM-dd") return util.dateFormat(this.DateValue[0],"yyyy年MM月dd日")
}, },
endDate(val){ endDate(val){
return util.dateFormat(this.DateValue[1],"yyyy-MM-dd"); return util.dateFormat(this.DateValue[1],"yyyy年MM月dd日");
} }
}, },
watch:{ watch:{
......
src/view/tiip/kanban/operate.vue
View file @ ff6834b6
...@@ -8,14 +8,20 @@ ...@@ -8,14 +8,20 @@
text-align: center; text-align: center;
tr:first-child{ tr:first-child{
font-size: 13px; font-size: 13px;
font-weight: bold; >td{
height:30px;
}
} }
tr:not(:first-child){ tr:not(:first-child){
>td{ >td{
padding:5px 0; padding-bottom:18px;
>div{ >div{
background:#fff; height: 45px;
padding:6px 0; background: #fff;
padding: 6px 0;
display: flex;
justify-content: center;
align-items: center;
} }
&:first-child{ &:first-child{
>div{ >div{
...@@ -30,6 +36,7 @@ ...@@ -30,6 +36,7 @@
} }
} }
} }
tr:last-child>td{ padding-bottom:30px; }
} }
} }
</style> </style>
...@@ -94,7 +101,7 @@ export default { ...@@ -94,7 +101,7 @@ export default {
begin_date:util.dateFormat(this.start,"yyyy-MM-dd"), begin_date:util.dateFormat(this.start,"yyyy-MM-dd"),
end_date:(this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"))+' 23:59', end_date:(this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"))+' 23:59',
}, },
},true,{}) },"加载中",{})
if(typeof value=='object'&&value.length>0){ if(typeof value=='object'&&value.length>0){
this.list=value this.list=value
}else{ }else{
......
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