| | |
| | | <div class="head_item"> |
| | | <div class="head_item_left"> |
| | | <span>待办工单</span> |
| | | <span>12</span> |
| | | <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>12</span> |
| | | <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>12</span> |
| | | <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 class="main_left_menu"> |
| | | <div class="main_left_menu_title"> |
| | | <span>常用功能</span> |
| | | <div class="main_left_menu_title_edit" @click="$refs.commonFunctions.open('常用功能管理', list)"> |
| | | <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"> |
| | | <div class="list_item" v-for="(item, index) in list" :key="index" @click="jump1(item.path)"> |
| | | <div class="list_item_left"> |
| | | <img :src="item.path" /> |
| | | <img :src="item.icoPath" /> |
| | | <span>{{item.name}}</span> |
| | | </div> |
| | | <i class="el-icon-arrow-right"></i> |
| | |
| | | <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-select v-model="nian" style="width: 150px; margin-right: 15px;" @change="getMonthNoticess" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | v-for="item in yearList" |
| | | :key="item.val" |
| | | :label="item.name" |
| | | :value="item.val"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-select v-model="value" style="width: 150px;" placeholder="请选择"> |
| | | <el-select v-model="yue" style="width: 150px;" @change="getMonthNoticess" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | 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"> |
| | | <el-calendar v-model="value"></el-calendar> |
| | | <Calendar |
| | | ref="Calendar" |
| | | v-on:choseDay="clickDay" |
| | | :markDateMore="markDateMore" |
| | | ></Calendar> |
| | | </div> |
| | | <div class="main_right_rc"> |
| | | <div class="main_right_rc_title">当日日程(3)</div> |
| | | <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 5" :key="index"> |
| | | <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">盘点通知</div> |
| | | <div class="top_left_title">{{item.title}}</div> |
| | | </div> |
| | | <div class="top_date">2024-12-13 12:53:12</div> |
| | | <div class="top_date">{{item.createDate}}</div> |
| | | </div> |
| | | <div class="bottom"> |
| | | 【盘点计划名称】将在【2024-12-1 |
| | | {{item.content}} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <CommonFunctions ref="commonFunctions" /> |
| | | <CommonFunctions ref="commonFunctions" @success="getYwQuickLists" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import CommonFunctions from '@/components/business/commonFunctions' |
| | | import { getYwQuickList } from '@/api/ywWorkDesk' |
| | | import { getYwQuickList, getMonthNotices, workDeskData } from '@/api/ywWorkDesk' |
| | | import Calendar from 'vue-calendar-component' |
| | | 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() |
| | | value: new Date(), |
| | | yearList: [], |
| | | markDateMore: [], |
| | | nian: '', |
| | | yue: '', |
| | | obj: {}, |
| | | dataList: [] |
| | | } |
| | | }, |
| | | components: { CommonFunctions }, |
| | | 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 => { |
| | | console.log(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%; |
| | | /*height: calc(100vh - 48px - 56px - 35px);*/ |
| | | padding: 15px; |
| | | box-sizing: border-box; |
| | | background: #F4F7FC; |
| | |
| | | font-weight: 400; |
| | | font-size: 13px; |
| | | color: #999999; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | .main_right_date { |
| | | width: 100%; |
| | | ::v-deep .el-calendar__header { |
| | | 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 .el-calendar-table tr td:first-child{ |
| | | border: none; |
| | | ::v-deep .wh_container { |
| | | max-width: 100%; |
| | | } |
| | | ::v-deep .el-calendar-table tr:first-child td{ |
| | | border: none; |
| | | ::v-deep .wh_content_item .wh_isToday { |
| | | background-color: #3E80EF; |
| | | color: #fff; |
| | | } |
| | | ::v-deep .el-calendar-table__row td{ |
| | | border: none; |
| | | ::v-deep .wh_item_date:hover { |
| | | background-color: #3E80EF; |
| | | border-radius: 50%; |
| | | color: #ffffff; |
| | | } |
| | | ::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 { |
| | | ::v-deep .wh_content_item .wh_chose_day { |
| | | background: #3E80EF; |
| | | color: #fff; |
| | | } |
| | | ::v-deep .el-calendar-table .el-calendar-day:hover { |
| | | background: none; |
| | | ::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); |
| | | } |
| | | } |
| | | } |