<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>{{obj.waitDealWorkOrderSize || 0}}</span>
|
<span @click="jump(1)">查看更多</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>{{obj.waitTaskSize || 0}}</span>
|
<span @click="jump(2)">查看更多</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>{{obj.stocktakingSize || 0}}</span>
|
<span @click="jump(3)">查看更多</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('常用功能管理')">
|
<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" @click="jump1(item.path)">
|
<div class="list_item_left">
|
<img :src="item.icoPath" />
|
<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="nian" style="width: 150px; margin-right: 15px;" @change="getMonthNoticess" placeholder="请选择">
|
<el-option
|
v-for="item in yearList"
|
:key="item.val"
|
:label="item.name"
|
:value="item.val">
|
</el-option>
|
</el-select>
|
<el-select v-model="yue" style="width: 150px;" @change="getMonthNoticess" placeholder="请选择">
|
<el-option
|
v-for="(item, index) in 12"
|
:key="index"
|
:label="item + '月'"
|
:value="item > 9 ? item : `0${item}`">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="main_right_date">
|
<Calendar
|
ref="Calendar"
|
v-on:choseDay="clickDay"
|
:markDateMore="markDateMore"
|
></Calendar>
|
</div>
|
<div class="main_right_rc">
|
<div class="main_right_rc_title">当日日程（{{dataList.length}}）</div>
|
<div class="main_right_rc_list">
|
<div class="main_right_rc_list_row" v-for="(item, index) in dataList" :key="index">
|
<div class="top">
|
<div class="top_left">
|
<div class="top_left_dian"></div>
|
<div class="top_left_title">{{item.title}}</div>
|
</div>
|
<div class="top_date">{{item.createDate}}</div>
|
</div>
|
<div class="bottom">
|
{{item.content}}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<CommonFunctions ref="commonFunctions" @success="getYwQuickLists" />
|
</div>
|
</template>
|
|
<script>
|
import CommonFunctions from '@/components/business/commonFunctions'
|
import { getYwQuickList, getMonthNotices, workDeskData } from '@/api/ywWorkDesk'
|
import Calendar from 'vue-calendar-component'
|
export default {
|
data() {
|
return {
|
list: [],
|
value: new Date(),
|
yearList: [],
|
markDateMore: [],
|
nian: '',
|
yue: '',
|
obj: {},
|
dataList: []
|
}
|
},
|
components: { CommonFunctions, Calendar },
|
created () {
|
this.getWorkDeskData()
|
this.getYwQuickLists()
|
this.getYear()
|
},
|
methods: {
|
getYear() {
|
let currentYear = new Date().getFullYear();
|
let currentMonth = new Date().getMonth() + 1;
|
this.nian = currentYear
|
this.yue = currentMonth > 9 ? currentMonth : `0${currentMonth}`
|
for (let i = currentYear - 10; i <= currentYear; i++) {
|
this.yearList.unshift({ name: i + '年', val: i })
|
}
|
this.getMonthNoticess()
|
},
|
// 获取代办
|
getWorkDeskData() {
|
workDeskData({})
|
.then(res => {
|
this.obj = res
|
})
|
},
|
clickDay(e) {
|
let date = e.replace("/\\//g", "-")
|
let arr = this.markDateMore.filter(item => {
|
if (item.date === date) {
|
return item
|
}
|
})
|
if (arr.length > 0) {
|
this.dataList = arr[0].noticeList
|
} else {
|
this.dataList = []
|
}
|
},
|
// 获取日程
|
getMonthNoticess() {
|
getMonthNotices(this.nian + '-' + this.yue).then(res => {
|
let arr = res.filter(item => {
|
if (item.noticeList && item.noticeList.length > 0) {
|
return item
|
}
|
})
|
this.markDateMore = arr.map(item => {
|
return { date: item.monthDate.replace("/-0/g", "-"), className: 'markRed', noticeList: item.noticeList }
|
})
|
let toDay = this.getDay()
|
this.markDateMore.forEach(item => {
|
if (item.date === toDay) {
|
this.dataList = item.noticeList
|
}
|
})
|
this.$refs.Calendar.ChoseMonth(`${this.nian}-${this.yue}`, false)
|
})
|
},
|
getYwQuickLists() {
|
getYwQuickList({})
|
.then(res => {
|
this.list = res
|
})
|
},
|
getDay() {
|
let date = new Date();
|
let year = date.getFullYear(); // 获取年份
|
let month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，并补零
|
let day = String(date.getDate()).padStart(2, '0'); // 获取日期，并补零
|
|
return `${year}-${month}-${day}`;
|
},
|
jump(type) {
|
if (type === 1) {
|
this.$router.push({ path: '/workorder/workorderList' })
|
} else if (type === 2) {
|
this.$router.push({ path: '/Inspection/task' })
|
} else if (type === 3) {
|
this.$router.push({ path: '/stock/check' })
|
}
|
},
|
jump1(path) {
|
this.$router.push({ path })
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.main {
|
width: 100%;
|
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;
|
cursor: pointer;
|
}
|
}
|
}
|
.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%;
|
padding-top: 15px;
|
box-sizing: border-box;
|
::v-deep .wh_content_item {
|
height: 50px;
|
color: #222222;
|
font-weight: 400;
|
font-size: 15px;
|
}
|
::v-deep .wh_item_date {
|
width: 30px;
|
height: 30px;
|
font-size: 15px;
|
}
|
::v-deep .wh_content_all {
|
background-color: #ffffff;
|
}
|
::v-deep .wh_top_changge {
|
display: none;
|
}
|
::v-deep .wh_container {
|
max-width: 100%;
|
}
|
::v-deep .wh_content_item .wh_isToday {
|
background-color: #3E80EF;
|
color: #fff;
|
}
|
::v-deep .wh_item_date:hover {
|
background-color: #3E80EF;
|
border-radius: 50%;
|
color: #ffffff;
|
}
|
::v-deep .wh_content_item .wh_chose_day {
|
background: #3E80EF;
|
color: #fff;
|
}
|
::v-deep .markRed {
|
position: relative;
|
}
|
::v-deep .markRed::after {
|
content: '●';
|
color: #FF9E00;
|
font-size: 11px;
|
position: absolute;
|
bottom: -30px;
|
left: 50%;
|
transform: translate(-50%, 0);
|
}
|
}
|
}
|
}
|
</style>
|
