增加控制台组件及布局
This commit is contained in:
龙运模
@@ -1,29 +1,194 @@
|
||||
<template>
|
||||
<div class="consoleView">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="10" :md="10" :sm="10" :xs="24">8990</el-col>
|
||||
<el-col :span="10">8990</el-col>
|
||||
<el-col :span="4">8990</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="9">8990</el-col>
|
||||
<el-col :span="9">8990</el-col>
|
||||
<el-col :span="6">8990</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="9">8990</el-col>
|
||||
<el-col :span="9">8990</el-col>
|
||||
<el-col :span="6">8990</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-scrollbar class="scrollbar">
|
||||
<div class="consoleView">
|
||||
<div class="headerBox">
|
||||
<el-row class="colRow" :gutter="20">
|
||||
<el-col :span="10" :md="10" :sm="24" :xs="24">
|
||||
<div class="cardBox">
|
||||
<div class="cardTitle">快捷功能入口</div>
|
||||
<div class="cardBody inletView">
|
||||
<el-scrollbar class="boxScrollbar">
|
||||
<div class="leftBox">
|
||||
<div class="item" v-for="(item,index) in inletList" :key="index">
|
||||
<el-image class="img" :src="item.url"></el-image>
|
||||
<text class="text">{{item.name}}</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="item add">
|
||||
<i class="icon"></i>
|
||||
<text class="text">添加</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10" :md="10" :sm="24" :xs="24">
|
||||
<div class="cardBox">
|
||||
<div class="cardTitle">待办消息</div>
|
||||
<div class="cardBody">
|
||||
<el-scrollbar>
|
||||
<div class="newBell">
|
||||
<div class="item" v-for="(item,index) in newList" :key="index">
|
||||
<div class="title text">
|
||||
<text class="status" v-if="item.status">{{item.status}}</text>
|
||||
{{item.title}}
|
||||
</div>
|
||||
<div class="com text">{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4" :md="4" :sm="24" :xs="24">
|
||||
<div class="cardBox">
|
||||
<div class="cardTitle">不良率</div>
|
||||
<div class="cardBody">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="middleBox">
|
||||
<el-row class="colRow" :gutter="20">
|
||||
<el-col :span="16" :md="16" :sm="24" :xs="24">
|
||||
<div class="cardBox">
|
||||
<div class="cardTitle">数据简报</div>
|
||||
<div class="cardBody briefing">
|
||||
<div class="item" v-for="(item,index) in briefing" :key="index">
|
||||
<div class="comMain">
|
||||
<div class="num">
|
||||
{{item.num}}
|
||||
<text class="unit">条</text>
|
||||
</div>
|
||||
<div class="name">{{item.name}}</div>
|
||||
</div>
|
||||
<div class="comChart">
|
||||
<el-icon class="icon"><component :is="item.icon" /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" :md="8" :sm="24" :xs="24">
|
||||
<div class="cardBox">
|
||||
<div class="cardTitle">占位</div>
|
||||
<div class="cardBody">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="footerBox">
|
||||
<el-row class="colRow" :gutter="20">
|
||||
<el-col :span="8" :md="8" :sm="24" :xs="24">
|
||||
<div class="cardBox">
|
||||
<div class="cardTitle">实时数据</div>
|
||||
<div class="cardBody">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" :md="8" :sm="24" :xs="24">
|
||||
<div class="cardBox">
|
||||
<div class="cardTitle">占位</div>
|
||||
<div class="cardBody">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" :md="8" :sm="24" :xs="24">
|
||||
<div class="cardBox">
|
||||
<div class="cardTitle">占位</div>
|
||||
<div class="cardBody">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index"
|
||||
name: "index",
|
||||
data(){
|
||||
return{
|
||||
inletList:[
|
||||
{name:'日报',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home1.png'},
|
||||
{name:'销售订单',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home2.png'},
|
||||
{name:'库存列表',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home3.png'},
|
||||
{name:'统计',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home4.png'},
|
||||
{name:'维修订单',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home4.png'},
|
||||
],
|
||||
briefing:[
|
||||
{num:189376,name:'数据采集条数',icon:'sc-icon-Gather'},
|
||||
{num:12496,name:'维保待维修',icon:'sc-icon-HomeSetup'},
|
||||
{num:756,name:'已维修工单',icon:'sc-icon-Repaired'},
|
||||
{num:97662,name:'预警工单',icon:'sc-icon-EarlyWarn'},
|
||||
{num:3553,name:'个人中心',icon:'sc-icon-HomeUser'},
|
||||
{num:253,name:'个人中心',icon:'sc-icon-HomeChart'},
|
||||
],
|
||||
newList:[
|
||||
{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审',status:'紧急'},
|
||||
{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审，在今晚九点之前一定操作，配合财务打款。',status:'紧急'},
|
||||
{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审 在今晚九点之前一定操作，配合财务打款。',status:'紧急'},
|
||||
{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
|
||||
{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
|
||||
{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
|
||||
{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
|
||||
{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
|
||||
{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
|
||||
{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
|
||||
{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.consoleView{
|
||||
height: calc(100vh - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.headerBox{
|
||||
flex: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.middleBox{
|
||||
flex: 3;
|
||||
}
|
||||
.footerBox{
|
||||
flex: 5;
|
||||
}
|
||||
}
|
||||
.colRow{
|
||||
height: 100%;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
.el-col{
|
||||
padding: 7px !important;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 992px){
|
||||
.consoleView{
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user