<template>
|
<div class="main">
|
<div class="main_left">
|
<div class="main_left_head">
|
<div class="head_item">
|
<div class="head_item_left">
|
<span>待办工单</span>
|
<span>12</span>
|
<span>查看更多</span>
|
</div>
|
<img class="head_item_icon" src="@/assets/indexIcon/ic_daibangongdan@2x.png" />
|
</div>
|
<div class="head_item">
|
<div class="head_item_left">
|
<span>待巡检</span>
|
<span>12</span>
|
<span>查看更多</span>
|
</div>
|
<img class="head_item_icon" src="@/assets/indexIcon/ic_daixuncha@2x.png" />
|
</div>
|
<div class="head_item">
|
<div class="head_item_left">
|
<span>待盘点</span>
|
<span>12</span>
|
<span>查看更多</span>
|
</div>
|
<img class="head_item_icon" src="@/assets/indexIcon/ic_daipandian@2x.png" />
|
</div>
|
</div>
|
<div class="main_left_menu">
|
<div class="main_left_menu_title">
|
<span>常用功能</span>
|
<div class="main_left_menu_title_edit" @click="$refs.commonFunctions.open('常用功能管理', list)">
|
<img src="@/assets/indexIcon/ic_daibangongdan@2x.png" />
|
<span>自定义功能</span>
|
</div>
|
</div>
|
<div class="main_left_menu_list">
|
<div class="list_item" v-for="(item, index) in list" :key="index">
|
<div class="list_item_left">
|
<img :src="item.path" />
|
<span>{{item.name}}</span>
|
</div>
|
<i class="el-icon-arrow-right"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="main_right">
|
<div class="main_right_title">日程</div>
|
<div class="main_right_search">
|
<el-select v-model="value" style="width: 150px; margin-right: 15px;" placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-select v-model="value" style="width: 150px;" placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="main_right_date">
|
<el-calendar v-model="value"></el-calendar>
|
</div>
|
<div class="main_right_rc">
|
<div class="main_right_rc_title">当日日程（3）</div>
|
<div class="main_right_rc_list">
|
<div class="main_right_rc_list_row" v-for="(item, index) in 5" :key="index">
|
<div class="top">
|
<div class="top_left">
|
<div class="top_left_dian"></div>
|
<div class="top_left_title">盘点通知</div>
|
</div>
|
<div class="top_date">2024-12-13 12:53:12</div>
|
</div>
|
<div class="bottom">
|
【盘点计划名称】将在【2024-12-1
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<CommonFunctions ref="commonFunctions" />
|
</div>
|
</template>
|
|
<script>
|
import CommonFunctions from '@/components/business/commonFunctions'
|
import { getYwQuickList } from '@/api/ywWorkDesk'
|
export default {
|
data() {
|
return {
|
menu: [
|
{ name: '房态管理', icon: require('@/assets/indexIcon/ic_fangtaiguanli@2x.png') },
|
{ name: '工单列表', icon: require('@/assets/indexIcon/ic_gongdanliebiao@2x.png') },
|
{ name: '问题上报', icon: require('@/assets/indexIcon/ic_wentishangbao@2x.png') },
|
{ name: '新建工单', icon: require('@/assets/indexIcon/ic_xinjiangongdan@2x.png') },
|
{ name: '设备管理', icon: require('@/assets/indexIcon/ic_shebeiguanli@2x.png') },
|
{ name: '巡检任务', icon: require('@/assets/indexIcon/ic_xunjianrenwu@2x.png') },
|
{ name: '合同列表', icon: require('@/assets/indexIcon/ic_hetongliebiao@2x.png') },
|
{ name: '库存查询', icon: require('@/assets/indexIcon/ic_kucunchaxun@2x.png') },
|
{ name: '账单列表', icon: require('@/assets/indexIcon/ic_zhangdanliebiao@2x.png') },
|
{ name: '新增入库单', icon: require('@/assets/indexIcon/ic_xinzengruku@2x.png') },
|
{ name: '新增出库单', icon: require('@/assets/indexIcon/ic_xinzengchuku@2x.png') },
|
{ name: '物料清单', icon: require('@/assets/indexIcon/ic_zichan@2x.png') },
|
],
|
list: [],
|
value: new Date()
|
}
|
},
|
components: { CommonFunctions },
|
created () {
|
this.getYwQuickLists()
|
},
|
methods: {
|
getYwQuickLists() {
|
getYwQuickList({})
|
.then(res => {
|
console.log(res)
|
this.list = res
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.main {
|
width: 100%;
|
/*height: calc(100vh - 48px - 56px - 35px);*/
|
padding: 15px;
|
box-sizing: border-box;
|
background: #F4F7FC;
|
display: flex;
|
align-items: self-start;
|
justify-content: space-between;
|
.main_left {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.main_left_head {
|
width: 100%;
|
height: 199px;
|
background: #FFFFFF;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
padding: 20px;
|
box-sizing: border-box;
|
.head_item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background: #F1F5FF;
|
border-radius: 8px;
|
margin-right: 15px;
|
padding: 28px 20px;
|
box-sizing: border-box;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.head_item_left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
span {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 17px;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 600;
|
font-size: 30px;
|
color: #111111;
|
margin-top: 6px;
|
margin-bottom: 14px;
|
}
|
&:nth-child(3) {
|
font-weight: 400;
|
font-size: 13px;
|
color: #999999;
|
}
|
}
|
}
|
.head_item_icon {
|
width: 60px;
|
height: 60px;
|
}
|
}
|
}
|
.main_left_menu {
|
width: 100%;
|
height: calc(100% - 214px);
|
background: #FFFFFF;
|
border-radius: 8px;
|
margin-top: 15px;
|
padding: 20px;
|
box-sizing: border-box;
|
.main_left_menu_title {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
span {
|
font-weight: 600;
|
font-size: 18px;
|
color: #222222;
|
}
|
.main_left_menu_title_edit {
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
img {
|
width: 15px;
|
height: 15px;
|
}
|
span {
|
font-weight: 400;
|
font-size: 14px;
|
color: #3E80EF;
|
margin-left: 5px;
|
}
|
}
|
}
|
.main_left_menu_list {
|
width: 100%;
|
margin-top: 20px;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.list_item {
|
cursor: pointer;
|
width: 24%;
|
height: 70px;
|
background: #FFFFFF;
|
border-radius: 8px;
|
border: 1px solid #EEEEEE;
|
padding: 0 16px;
|
box-sizing: border-box;
|
margin-bottom: 15px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.list_item_left {
|
display: flex;
|
align-items: center;
|
img {
|
width: 40px;
|
height: 40px;
|
margin-right: 5px;
|
}
|
span {
|
font-weight: 500;
|
font-size: 15px;
|
color: #222222;
|
}
|
}
|
}
|
}
|
}
|
}
|
.main_right {
|
flex-shrink: 0;
|
width: 500px;
|
height: 100%;
|
margin-left: 15px;
|
background: #FEFEFF;
|
border-radius: 8px;
|
padding: 20px;
|
box-sizing: border-box;
|
.main_right_title {
|
font-weight: 600;
|
font-size: 18px;
|
color: #222222;
|
margin-bottom: 12px;
|
}
|
.main_right_rc {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.main_right_rc_title {
|
font-weight: 500;
|
font-size: 16px;
|
color: #222222;
|
margin-bottom: 15px;
|
}
|
.main_right_rc_list {
|
width: 100%;
|
height: 300px;
|
overflow-y: scroll;
|
.main_right_rc_list_row {
|
width: 100%;
|
padding: 15px;
|
box-sizing: border-box;
|
background: #F4F7FC;
|
border-radius: 2px;
|
margin-bottom: 10px;
|
.top {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.top_left {
|
display: flex;
|
align-items: center;
|
.top_left_dian {
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
background: #FF9E00;
|
margin-right: 10px;
|
}
|
.top_left_title {
|
font-weight: 500;
|
font-size: 15px;
|
color: #222222;
|
}
|
}
|
.top_date {
|
font-weight: 400;
|
font-size: 12px;
|
color: #999999;
|
}
|
}
|
.bottom {
|
font-weight: 400;
|
font-size: 13px;
|
color: #666666;
|
margin-top: 8px;
|
}
|
}
|
}
|
}
|
.main_right_date {
|
width: 100%;
|
::v-deep .el-calendar__header {
|
display: none;
|
}
|
::v-deep .el-calendar-table tr td:first-child{
|
border: none;
|
}
|
::v-deep .el-calendar-table tr:first-child td{
|
border: none;
|
}
|
::v-deep .el-calendar-table__row td{
|
border: none;
|
}
|
::v-deep .el-calendar-table .el-calendar-day {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
::v-deep thead th {
|
height: 20px;
|
border-bottom: 1px solid #DFE2E8;
|
}
|
::v-deep.el-calendar-table .el-calendar-day{
|
width: 100%;
|
height: 50px;
|
text-align: center;
|
}
|
::v-deep .el-calendar-table td.is-selected {
|
background: #3E80EF;
|
}
|
::v-deep .el-calendar-table .el-calendar-day:hover {
|
background: none;
|
}
|
}
|
}
|
}
|
</style>
|
