Skip to content

N
NewTruckTerminalSyetem
Commit ee7c4d0c authored by xxx's avatar xxx
Browse files
Options

1

parent d378b781
Hide whitespace changes
Inline Side-by-side
Showing with 382 additions and 160 deletions
src/views/MLargeScreen/components/performanceStatistics/index.vue
View file @ ee7c4d0c
...@@ -7,15 +7,15 @@ ...@@ -7,15 +7,15 @@
<el-radio v-model="from.selectModel" label="司机日派单" border>司机日派单</el-radio> <el-radio v-model="from.selectModel" label="司机日派单" border>司机日派单</el-radio>
<el-radio v-model="from.selectModel" label="司机产量报表" border>司机产量报表</el-radio> <el-radio v-model="from.selectModel" label="司机产量报表" border>司机产量报表</el-radio>
</div> --> </div> -->
<div style="display: flex;justify-content: space-between;margin-top:10px;"> <div class="achievementContent_inputs">
<el-date-picker v-model="startTime" type="date" placeholder="选择开始日期" style="width:19vw;"></el-date-picker> <el-date-picker v-model="startTime" type="date" placeholder="选择开始日期" style="width:19vw;"></el-date-picker>
<div style="color: rgb(24,228,240);line-height:40px;font-weight:600;">——</div> <div class="achievementContent_inputs_HengXian">——</div>
<el-date-picker v-model="endTime" type="date" placeholder="选择结束日期" style="width:19vw;"></el-date-picker> <el-date-picker v-model="endTime" type="date" placeholder="选择结束日期" style="width:19vw;"></el-date-picker>
<el-button type="primary" round style="width:7vw;font-size:18px;" @click="toSearch()">查询</el-button> <el-button type="primary" round class="achievementContent_inputs_btn" @click="toSearch()">查询</el-button>
</div> </div>
<div style="margin-top:5px;"> <div class="sijikaoheTitle">
<img src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png"> <img src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
<span class="failureDeContent_left_title">司机考核：</span> <span>司机考核：</span>
</div> </div>
<div class="checkViews"> <div class="checkViews">
<div class="checkFrom_content"> <div class="checkFrom_content">
...@@ -59,9 +59,9 @@ ...@@ -59,9 +59,9 @@
<div class="checkFrom_input">{{checkFromData.adr}}</div> <div class="checkFrom_input">{{checkFromData.adr}}</div>
</div> </div>
</div> </div>
<div style="margin-bottom:5px;"> <div class="sijikaoheTitle">
<img src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png"> <img src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
<span class="failureDeContent_left_title">智能派单：</span> <span>智能派单：</span>
</div> </div>
<div class="co-table"> <div class="co-table">
<div class="rolling"> <div class="rolling">
...@@ -102,7 +102,6 @@ export default { ...@@ -102,7 +102,6 @@ export default {
carNumber:'', carNumber:'',
} }
}, },
mounted() { },
methods: { methods: {
loadData(value,chepaihao) { loadData(value,chepaihao) {
this.showDecide = true; this.showDecide = true;
...@@ -179,158 +178,381 @@ export default { ...@@ -179,158 +178,381 @@ export default {
</script> </script>
<style scope> <style scope>
.achievementMainViews{
z-index: 2; @media screen and (max-width:901px){
position: absolute; .sijikaoheTitle{
top: 50%; margin-top:0.5vh;
left: 50%; }
height: 85vh; .sijikaoheTitle>img{
width: 65vw; width: 3vw;
background:no-repeat center center url('~@/assets/images/truckTuPian/jixiaotongjikuang1.png'); }
background-size:100% 100%; .sijikaoheTitle>span{
transform: translate(-50%,-50%); font-size: 14px;
padding: 12px 30px 0px; color: rgb(24,228,240);
box-sizing: border-box; font-weight: 600;
} }
.achievementSmallTitle{ .achievementContent_inputs{
color: white; display: flex;
font-size: 18px; justify-content: space-between;
text-align: center; margin-top:1vh;
line-height: 4.5vh; }
width: 9vw; .achievementContent_inputs_btn{
height: 4.5vh; width:7vw;
background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png'); font-size:13px;
background-size:100% 100%; }
} .achievementContent_inputs_HengXian{
.achievementClose{ color: rgb(24,228,240);
position: absolute; line-height:6vh;
top: 4vh; font-weight:600;
right: 1vw; }
cursor: pointer; .achievementMainViews{
} z-index: 2;
.achievementContent{ position: absolute;
width: 100%; top: 50%;
} left: 50%;
/* 未选中样式 */ height: 85vh;
.is-bordered .el-radio__label{ width: 65vw;
font-size: 20px; background:no-repeat center center url('~@/assets/images/truckTuPian/jixiaotongjikuang1.png');
color: wheat; background-size:100% 100%;
} transform: translate(-50%,-50%);
.is-bordered { padding: 12px 30px 0px;
border: wheat 2px solid; box-sizing: border-box;
height: 40px; }
width: 200px; .achievementSmallTitle{
line-height: 22px; color: white;
} font-size: 12px;
.is-bordered .el-radio__inner{ text-align: center;
height: 18px; line-height: 6vh;
width: 18px; width: 11vw;
} height: 6vh;
/* 选中样式 */ background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
.el-radio__input.is-checked+.el-radio__label{ background-size:100% 100%;
color: rgb(24,228,240); }
} .achievementClose{
.el-radio.is-bordered.is-checked{ position: absolute;
border-color: rgb(24,228,240); top: 4vh;
} right: 1vw;
.el-radio__input.is-checked .el-radio__inner{ cursor: pointer;
border-color: rgb(24,228,240); }
background: rgb(24,228,240); .achievementContent{
} width: 100%;
.el-radio{ }
margin: 0; .achievementContent .el-input__inner{
} height: 7vh;
.el-input--small .el-input__inner { line-height: 7vh;
height:40px; font-size: 13px;
} }
.checkViews{ .achievementContent .el-input__icon{
display: flex; line-height: 0px;
justify-content: space-between; }
margin-top:7px; .achievementContent .el-button.is-round{
flex-wrap: wrap; height: 7vh;
} padding: 0;
.checkFrom_content{ }
width: 48%; /* 未选中样式 */
height: 4vh; .is-bordered .el-radio__label{
line-height: 4vh; font-size: 20px;
margin-bottom: 15px; color: wheat;
color: rgb(23,249,250); }
font-size: 17px; .is-bordered {
font-weight: 500; border: wheat 2px solid;
letter-spacing: 1px; height: 40px;
display: flex; width: 200px;
justify-content: space-between; line-height: 22px;
} }
.checkFrom_input{ .is-bordered .el-radio__inner{
width: 15vw; height: 18px;
border: 2px solid rgb(23,249,250); width: 18px;
border-radius: 5px; }
padding:0px 10px; /* 选中样式 */
box-sizing: border-box; .el-radio__input.is-checked+.el-radio__label{
white-space: nowrap; color: rgb(24,228,240);
text-overflow: ellipsis; }
overflow: hidden; .el-radio.is-bordered.is-checked{
word-break: break-all; border-color: rgb(24,228,240);
} }
.co-table{ .el-radio__input.is-checked .el-radio__inner{
text-align: center; border-color: rgb(24,228,240);
} background: rgb(24,228,240);
.table-box{ }
margin-top: 0px; .el-radio{
} margin: 0;
dl{ }
display:table; .el-input--small .el-input__inner {
width:100%; height:40px;
} }
dt{ .checkViews{
margin-top: 20px; display: flex;
display:table-row; justify-content: space-between;
background-color: #274088; margin-top:0.5vh;
} flex-wrap: wrap;
dt>div{ }
display:table-cell; .checkFrom_content{
padding:4px 3px; width: 48%;
font-size: 18px; height: 4vh;
font-weight: 500; line-height: 4vh;
color: rgb(24,228,240); margin-bottom: 1vh;
} color: rgb(23,249,250);
dd{ font-size: 13px;
display:table-row; font-weight: 500;
} letter-spacing: 1px;
dd>div{ display: flex;
display:table-cell; justify-content: space-between;
padding:4px 3px; }
font-size: 18px; .checkFrom_input{
color: rgb(24,228,240); width: 15vw;
} border: 2px solid rgb(23,249,250);
.rolling{ border-radius: 5px;
height: 36vh; padding:0px 10px;
overflow-y:auto; box-sizing: border-box;
} white-space: nowrap;
.rolling::-webkit-scrollbar { text-overflow: ellipsis;
/*滚动条整体样式*/ overflow: hidden;
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/ word-break: break-all;
height: 1px; }
.co-table{
text-align: center;
}
.table-box{
margin-top: 0px;
}
dl{
display:table;
width:100%;
}
dt{
margin-top: 20px;
display:table-row;
background-color: #274088;
}
dt>div{
display:table-cell;
padding: 1px;
font-size: 13px;
font-weight: 500;
color: rgb(24,228,240);
}
dd{
display:table-row;
}
dd>div{
display:table-cell;
padding: 1px;
font-size: 13px;
color: rgb(24,228,240);
}
.rolling{
height: 29vh;
overflow-y:auto;
}
.rolling::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.rolling::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: #274088;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.rolling::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
} }
.rolling::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/ @media screen and (min-width:901px){
border-radius : 10px; .sijikaoheTitle{
background-color: #274088; margin-top:0.5vh;
background-image: -webkit-linear-gradient( }
45deg, .sijikaoheTitle>img{
rgba(255, 255, 255, 0.2) 25%, width: 2vw;
transparent 25%, }
transparent 50%, .sijikaoheTitle>span{
rgba(255, 255, 255, 0.2) 50%, font-size: 22px;
rgba(255, 255, 255, 0.2) 75%, color: rgb(24,228,240);
transparent 75%, font-weight: 600;
transparent }
); .achievementContent_inputs{
display: flex;
justify-content: space-between;
margin-top:10px;
}
.achievementContent_inputs_btn{
width:7vw;
font-size:18px;
}
.achievementContent_inputs_HengXian{
color: rgb(24,228,240);
line-height:40px;
font-weight:600;
}
.achievementMainViews{
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
height: 85vh;
width: 65vw;
background:no-repeat center center url('~@/assets/images/truckTuPian/jixiaotongjikuang1.png');
background-size:100% 100%;
transform: translate(-50%,-50%);
padding: 12px 30px 0px;
box-sizing: border-box;
}
.achievementSmallTitle{
color: white;
font-size: 18px;
text-align: center;
line-height: 4.5vh;
width: 9vw;
height: 4.5vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
background-size:100% 100%;
}
.achievementClose{
position: absolute;
top: 4vh;
right: 1vw;
cursor: pointer;
}
.achievementContent{
width: 100%;
}
/* 未选中样式 */
.is-bordered .el-radio__label{
font-size: 20px;
color: wheat;
}
.is-bordered {
border: wheat 2px solid;
height: 40px;
width: 200px;
line-height: 22px;
}
.is-bordered .el-radio__inner{
height: 18px;
width: 18px;
}
/* 选中样式 */
.el-radio__input.is-checked+.el-radio__label{
color: rgb(24,228,240);
}
.el-radio.is-bordered.is-checked{
border-color: rgb(24,228,240);
}
.el-radio__input.is-checked .el-radio__inner{
border-color: rgb(24,228,240);
background: rgb(24,228,240);
}
.el-radio{
margin: 0;
}
.el-input--small .el-input__inner {
height:40px;
}
.checkViews{
display: flex;
justify-content: space-between;
margin-top:7px;
flex-wrap: wrap;
}
.checkFrom_content{
width: 48%;
height: 4vh;
line-height: 4vh;
margin-bottom: 15px;
color: rgb(23,249,250);
font-size: 17px;
font-weight: 500;
letter-spacing: 1px;
display: flex;
justify-content: space-between;
}
.checkFrom_input{
width: 15vw;
border: 2px solid rgb(23,249,250);
border-radius: 5px;
padding:0px 10px;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.co-table{
text-align: center;
}
.table-box{
margin-top: 0px;
}
dl{
display:table;
width:100%;
}
dt{
margin-top: 20px;
display:table-row;
background-color: #274088;
}
dt>div{
display:table-cell;
padding:4px 3px;
font-size: 18px;
font-weight: 500;
color: rgb(24,228,240);
}
dd{
display:table-row;
}
dd>div{
display:table-cell;
padding:4px 3px;
font-size: 18px;
color: rgb(24,228,240);
}
.rolling{
height: 36vh;
overflow-y:auto;
}
.rolling::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.rolling::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: #274088;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.rolling::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
} }
.rolling::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
</style> </style>
\ No newline at end of file
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