| | |
| | | v-model="query.year" |
| | | type="year" |
| | | size="small" |
| | | format="yyyy" |
| | | placeholder="选择年" |
| | | @change="refreshTable()" |
| | | style="width: 140px;" |
| | | :clearable="false"> |
| | | </el-date-picker> |
| | |
| | | clearable |
| | | placeholder="选择月" |
| | | style="width: 140px;margin-left: 16px;" |
| | | size="small"> |
| | | size="small" |
| | | @change="refreshTable()"> |
| | | <el-option |
| | | v-for="item in monthOptions" |
| | | :key="item.value" |
| | |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-input v-model="query.userName" placeholder="请输入人员名称" size="small" style="width: 140px;margin: 0 16px;" clearable ></el-input> |
| | | <el-select v-model="query.laboratory" placeholder="请选择实验室" style="width: 140px;" size="small" clearable > |
| | | <el-input v-model="query.userName" placeholder="请输入人员名称" size="small" style="width: 140px;margin: 0 16px;" clearable @keyup.enter.native="refreshTable()"></el-input> |
| | | <el-select v-model="query.laboratory" placeholder="请选择实验室" style="width: 140px;" size="small" clearable @change="refreshTable()"> |
| | | <el-option |
| | | v-for="item in laboratory" |
| | | :key="item.value" |
| | |
| | | <el-button size="small" type="primary" @click="refreshTable()">查 询</el-button> |
| | | </div> |
| | | <div class="search_thing btns" style="padding-left: 30px;"> |
| | | <el-button size="small" type="primary">导 出</el-button> |
| | | <el-button size="small" type="primary" @click="schedulingVisible = true">排 班</el-button> |
| | | <el-button size="small" type="primary" v-if="downPower" @click="handleDown" :loading="downLoading">导 出</el-button> |
| | | <el-button size="small" type="primary" @click="schedulingVisible = true" v-if="addPower">排 班</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="center" v-loading="pageLoading"> |
| | | <scroll-pagination @load="init" :finishLoding="finishLoding"> |
| | | <scroll-pagination @load="init" :finishLoding="finishLoding" v-show="query.month&&list.length>0" style="height: 100%;" :key="'123'" :list="list"> |
| | | <div class="clearfix"> |
| | | <div class="fixed-left"> |
| | | <div class="content-title" style="padding-left: 16px;box-sizing: border-box;"> |
| | |
| | | <div class="user-pic">{{ item.name.charAt(0) }}</div> |
| | | <div class="user-info"> |
| | | <p style="font-size: 14px;color: #3A7BFA;line-height: 24px;">{{ item.name }}</p> |
| | | <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;overflow-x: show;">早: {{ item.day0 }}, 中: {{ item.day1 }}, 夜: {{ item.day2 }}, 休: {{ item.day3 }}, 假: {{ item.day4 }}</p> |
| | | <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;overflow-x: show;">早:{{ item.day0 }},中:{{ item.day1 }},夜:{{ item.day2 }},休:{{ item.day3 }},假:{{ item.day4 }},差:{{ item.day6 }}</p> |
| | | <p style="margin-top: 4px;"><span style="color: #999999;font-size: 12px;display: inline-block;transform: scale(0.8) translateX(-10px);">合计出勤: </span><span style="font-size: 16px; |
| | | color: #FF4902;">{{ item.totalAttendance }}天</span></p> |
| | | color: #FF4902;">{{ query.month?item.monthlyAttendance |
| | | .totalAttendance:item.sidebarAnnualAttendance |
| | | .totalAttendance }}天</span></p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="content"> |
| | | <div class="content-title content-title-right" style="border-bottom: 0;"> |
| | | <div class="content-title-item" v-for="(item,index) in weeks" :key="'b'+index"> |
| | | <span class="month">{{ item.weekNum }}周</span> |
| | | <span class="day">{{ item.day }}</span> |
| | | <span class="week">{{ item.week }}</span> |
| | | <span class="month" style="position: absolute;top: 4px;" v-if="item.week=='周日'">{{ item.weekNum }}周</span> |
| | | <p style="height: 26px;position: absolute;bottom: 12px;"> |
| | | <span class="day">{{ item.day }}</span> |
| | | <span class="week">{{ item.week.charAt(1) }}</span> |
| | | </p> |
| | | </div> |
| | | </div> |
| | | <div class="content-body" v-for="(item,index) in list" :key="'c'+index" |
| | | v-on:mouseenter="onMouseEnter(index)" |
| | | v-on:mouseleave="currentUserIndex=null"> |
| | | <div class="content-body-item" v-for="(m,i) in item.list" :key="'d'+i" :class="{hoverType:currentUserIndex==index}"> |
| | | <div class="work-box" :class="{type0:m.shift==='0',type1:m.shift==='1',type2:m.shift==='2',type3:m.shift==='3',type4:m.shift==='4',}"> |
| | | <div class="work-box-left"> |
| | | <span>{{ getShiftByDic(m.shift) }}</span> |
| | | <el-dropdown trigger="click" placement="bottom" @command="e=>handleCommand(e,m)" :disabled="!upPower" style="width: 100%;height: 100%;cursor: pointer;"> |
| | | <div class="work-box" :class="{type0:m.shift==='0',type1:m.shift==='1',type2:m.shift==='2',type3:m.shift==='3',type4:m.shift==='4',type5:m.shift==='5',type6:m.shift==='6'}"> |
| | | <span style="cursor: pointer;" :style="`opacity: ${getShiftByDic(m.shift)=='无'?0:1};`">{{ getShiftByDic(m.shift) }}</span> |
| | | </div> |
| | | <el-dropdown trigger="click" placement="bottom" @command="e=>handleCommand(e,m)"> |
| | | <i class="el-icon-arrow-down el-icon--right" style="font-size: 20px;color: #fff;cursor: pointer;"></i> |
| | | <el-dropdown-menu slot="dropdown"> |
| | | <el-dropdown-item v-for="(n,j) in classType" :key="'h'+j" :command="n.value">{{ n.label }}</el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </scroll-pagination> |
| | | <scroll-pagination @load="initYear" :finishLoding="finishLoding" v-show="!query.month&&yearList.length>0" style="width: 100%;" :key="'111'" :list="yearList"> |
| | | <div class="clearfix year-table"> |
| | | <div class="fixed-left"> |
| | | <div class="content-title" style="padding-left: 16px;box-sizing: border-box;"> |
| | | 人员名称 |
| | | </div> |
| | | <div class="content-user" :class="{hoverType:currentUserIndex==index}" v-for="(item,index) in yearList" :key="'e'+index" v-on:mouseenter="onMouseEnter(index)" |
| | | v-on:mouseleave="currentUserIndex=null"> |
| | | <div class="user-pic">{{ item.name.charAt(0) }}</div> |
| | | <div class="user-info"> |
| | | <p style="font-size: 14px;color: #3A7BFA;line-height: 24px;">{{ item.name }}</p> |
| | | <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;overflow-x: show;">早:{{ item.day0 }},中:{{ item.day1 }},夜:{{ item.day2 }},休:{{ item.day3 }},假:{{ item.day4 }},差:{{ item.day6 }}</p> |
| | | <p style="margin-top: 4px;"><span style="color: #999999;font-size: 12px;display: inline-block;transform: scale(0.8) translateX(-10px);">合计出勤: </span><span style="font-size: 16px; |
| | | color: #FF4902;">{{ item.work_time }}天</span></p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="scroll-right"> |
| | | <div class="content"> |
| | | <div> |
| | | <div class="content-title content-title-right" style="border-bottom: 0;height: 52px;" :style="`display: grid; |
| | | grid-template-columns: repeat(${monthList.length}, 1fr);`"> |
| | | <div class="content-title-item" v-for="(item,index) in monthList" :key="'b'+index" style="height: 52px;"> |
| | | <span class="month">{{ item }}月</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="content-body" |
| | | v-for="(item,index) in yearList" |
| | | :key="'c'+index" |
| | | v-on:mouseenter="onMouseEnter(index)" |
| | | v-on:mouseleave="currentUserIndex=null" |
| | | :style="`display: grid; |
| | | grid-template-columns: repeat(${monthList.length}, 1fr);`" |
| | | > |
| | | <div class="content-body-item" v-for="(m,i) in item.monthList" :key="'d'+i" :class="{hoverType:currentUserIndex==index}"> |
| | | <p style="color:rgb(153, 153, 153);font-size: 12px;">合计出勤:<span style="font-size: 14px;color:#000">{{ m.totalMonthAttendance }}</span></p> |
| | | <p style="color:rgb(153, 153, 153);font-size: 12px;"> |
| | | 早:{{ m.day0 }},中:{{ m.day1 }},夜:{{ m.day2 }},休:{{ m.day3 }},假:{{ m.day4 }},差:{{ m.day6 }} |
| | | </p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </scroll-pagination> |
| | | <span style="color:#909399;font-size:14px;position: absolute;left:50%;top: 50%;transform: translate(-59%,-50%);" v-if="(query.month&&list.length==0)||(!query.month&&yearList.length==0)">暂无数据</span> |
| | | </div> |
| | | <el-dialog title="排班" :visible.sync="schedulingVisible" width="400px"> |
| | | <div class="search_thing"> |
| | | <div class="search_label" style="width:90px">周次:</div> |
| | | <div class="search_input"> |
| | | <div class="search_label" style="width:90px"><span style="color: red;margin-right: 4px;">*</span>周次:</div> |
| | | <div class="search_input" style="width: calc(100% - 90px);"> |
| | | <el-date-picker |
| | | v-model="schedulingQuery.week" |
| | | type="week" |
| | | format="yyyy 第 WW 周" |
| | | placeholder="选择周次" style="width: 203px;"> |
| | | placeholder="选择周次" style="width: 100%"> |
| | | </el-date-picker> |
| | | </div> |
| | | </div> |
| | | <div class="search_thing"> |
| | | <div class="search_label" style="width:90px">人员名称:</div> |
| | | <div class="search_input"> |
| | | <div class="search_label" style="width:90px"><span style="color: red;margin-right: 4px;">*</span>人员名称:</div> |
| | | <div class="search_input" style="width: calc(100% - 90px);"> |
| | | <el-select v-model="schedulingQuery.userId" placeholder="请选择" style="width: 100%;" multiple clearable collapse-tags > |
| | | <el-option |
| | | v-for="item in personList" |
| | |
| | | </div> |
| | | </div> |
| | | <div class="search_thing"> |
| | | <div class="search_label" style="width:90px">班次:</div> |
| | | <div class="search_input"> |
| | | <div class="search_label" style="width:90px"><span style="color: red;margin-right: 4px;">*</span>班次:</div> |
| | | <div class="search_input" style="width: calc(100% - 90px);"> |
| | | <el-select v-model="schedulingQuery.shift" placeholder="请选择" style="width: 100%;"> |
| | | <el-option |
| | | v-for="item in classType" |
| | |
| | | }, |
| | | data () { |
| | | return{ |
| | | currentYear:new Date().getFullYear(), |
| | | currentMonth:new Date().getMonth()+1, |
| | | addPower:true, |
| | | upPower:true, |
| | | downPower:true, |
| | | query:{ |
| | | userName:'', |
| | | laboratory:'', |
| | | year:'', |
| | | month:'' |
| | | year:new Date(), |
| | | month:new Date().getMonth()+1 |
| | | // month:'' |
| | | }, |
| | | monthOptions:[ |
| | | { |
| | | value:'1', |
| | | value:1, |
| | | label:'1月' |
| | | }, |
| | | { |
| | | value:'2', |
| | | value:2, |
| | | label:'2月' |
| | | }, |
| | | { |
| | | value:'3', |
| | | value:3, |
| | | label:'3月' |
| | | }, |
| | | { |
| | | value:'4', |
| | | value:4, |
| | | label:'4月' |
| | | }, |
| | | { |
| | | value:'5', |
| | | value:5, |
| | | label:'5月' |
| | | }, |
| | | { |
| | | value:'6', |
| | | value:6, |
| | | label:'6月' |
| | | }, |
| | | { |
| | | value:'7', |
| | | value:7, |
| | | label:'7月' |
| | | }, |
| | | { |
| | | value:'8', |
| | | value:8, |
| | | label:'8月' |
| | | }, |
| | | { |
| | | value:'9', |
| | | value:9, |
| | | label:'9月' |
| | | }, |
| | | { |
| | | value:'10', |
| | | value:10, |
| | | label:'10月' |
| | | }, |
| | | { |
| | | value:'11', |
| | | value:11, |
| | | label:'11月' |
| | | }, |
| | | { |
| | | value:'12', |
| | | value:12, |
| | | label:'12月' |
| | | }, |
| | | ], |
| | | laboratory:[], |
| | | weeks:[], |
| | | workList:[ |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'中班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'夜班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | { |
| | | type:'早班', |
| | | time:'8:00-16:00', |
| | | }, |
| | | ], |
| | | classType:[], |
| | | currentUserIndex:null, |
| | | schedulingVisible:false, |
| | |
| | | currentPage: 1, // 当前页 |
| | | pageSize: 10, // 一页10条 |
| | | total: '', |
| | | pageLoading: true, // 组件loading的展示,默认为true |
| | | finishLoding: false // 加载完成,显示已经没有更多了 |
| | | pageLoading: false, // 组件loading的展示,默认为true |
| | | finishLoding: false, // 加载完成,显示已经没有更多了 |
| | | monthList:[], |
| | | yearList:[], |
| | | downLoading:false, |
| | | keyMap:{}, |
| | | } |
| | | }, |
| | | watch: { |
| | | // 'query.year'(val){ |
| | | // this.monthList = [] |
| | | // if(val.getFullYear()==new Date().getFullYear()){ |
| | | // for(let i=new Date().getMonth()+1;i>0;i--){ |
| | | // this.monthList.push(i) |
| | | // } |
| | | // }else{ |
| | | // for (let i=12;i>0;i--) { |
| | | // this.monthList.push(i) |
| | | // } |
| | | // } |
| | | // this.monthList.reverse() |
| | | // }, |
| | | // 'query.month'(val){ |
| | | // if(!val){ |
| | | // this.currentPage = 1; |
| | | // this.yearList = [] |
| | | // this.initYear() |
| | | // } |
| | | // } |
| | | }, |
| | | mounted(){ |
| | | this.selectEnumByCategory() |
| | | this.obtainItemParameterList() |
| | | this.getUsers() |
| | | this.init() |
| | | if(this.query.month){ |
| | | this.init() |
| | | }else{ |
| | | this.initYear() |
| | | } |
| | | this.monthList = [] |
| | | for(let i=12;i>0;i--){ |
| | | this.monthList.push(i) |
| | | } |
| | | this.monthList.reverse() |
| | | // this.getPower() |
| | | }, |
| | | methods: { |
| | | refresh(){ |
| | | this.list = []; |
| | | this.yearList = [] |
| | | this.keyMap = {}; |
| | | this.finishLoding = false; |
| | | this.currentPage = 1 |
| | | this.query = { |
| | | userName:'', |
| | | laboratory:'', |
| | | year:'', |
| | | month:'' |
| | | year:new Date(), |
| | | month:new Date().getMonth()+1 |
| | | } |
| | | this.init() |
| | | if(this.query.month){ |
| | | this.init() |
| | | }else{ |
| | | this.initYear() |
| | | } |
| | | }, |
| | | refreshTable(){ |
| | | this.list = []; |
| | | this.keyMap = {}; |
| | | this.currentPage = 1 |
| | | this.init() |
| | | this.finishLoding = false; |
| | | if(this.query.month){ |
| | | this.list = []; |
| | | this.init() |
| | | }else{ |
| | | this.yearList = [] |
| | | this.initYear() |
| | | } |
| | | }, |
| | | init(){ |
| | | const key = `_${this.currentPage}` |
| | | const value = this.keyMap[key] |
| | | // 如果value存在,表示缓存有值,那么阻止请求 |
| | | if(value) { |
| | | return |
| | | } |
| | | // value不存在,表示第一次请求,设置占位 |
| | | this.keyMap[key] = 'temp' |
| | | if(this.currentPage==1){ |
| | | this.pageLoading = true |
| | | } |
| | | let year = this.query.year.getFullYear() |
| | | let month0 = this.query.month?this.query.month:new Date().getMonth()+1 |
| | | let month = month0>9?month0:'0'+month0 |
| | | this.$axios.post(this.$api.performanceShift.page, { |
| | | size:this.pageSize, |
| | | current:this.currentPage, |
| | | time:this.query.month?this.query.year+'-'+this.query.month:this.query.year, |
| | | time:year+'-'+month+'-01 00:00:00', |
| | | userName:this.query.userName, |
| | | laboratory:this.query.laboratory, |
| | | }).then(res => { |
| | | this.pageLoading = false |
| | | if (res.code == 201) return |
| | | this.total = res.data.total |
| | | let list = res.data.records.map(item=>{ |
| | | for (let key in item) { |
| | | let list = res.data.page.records.map(item=>{ |
| | | for (let key in item.monthlyAttendance) { |
| | | let type = this.getDayByDic(key) |
| | | if(type!=undefined||type!=null){ |
| | | item[`day${type}`] = item[key] |
| | | item[`day${type}`] = item.monthlyAttendance[key] |
| | | } |
| | | } |
| | | return item |
| | | }); |
| | | // 右侧日期获取 |
| | | if(this.currentPage==1){ |
| | | if(list&&list.length>0){ |
| | | this.weeks = []; |
| | | list[0].list&&list[0].list.forEach(item=>{ |
| | | let obj = { |
| | | weekNum:item.weekly, |
| | | week:item.headerTime.split(' ')[1], |
| | | day:item.headerTime.split(' ')[0] |
| | | } |
| | | this.weeks.push(obj) |
| | | }) |
| | | let headerList = res.data.headerList; |
| | | this.weeks = []; |
| | | headerList.forEach(item=>{ |
| | | let obj = { |
| | | weekNum:item.weekly, |
| | | week:item.headerTime.split(' ')[1], |
| | | day:item.headerTime.split(' ')[0] |
| | | } |
| | | } |
| | | this.weeks.push(obj) |
| | | }) |
| | | if(list.length==0){ |
| | | this.finishLoding = true; |
| | | }else{ |
| | |
| | | this.currentPage++; |
| | | } |
| | | }) |
| | | }, |
| | | initYear(){ |
| | | const key = `_${this.currentPage}` |
| | | const value = this.keyMap[key] |
| | | // 如果value存在,表示缓存有值,那么阻止请求 |
| | | if(value) { |
| | | return |
| | | } |
| | | // value不存在,表示第一次请求,设置占位 |
| | | this.keyMap[key] = 'temp' |
| | | // pageYear |
| | | if(this.currentPage==1){ |
| | | this.pageLoading = true |
| | | } |
| | | let year = this.query.year.getFullYear() |
| | | this.$axios.post(this.$api.performanceShift.pageYear, { |
| | | size:this.pageSize, |
| | | current:this.currentPage, |
| | | time:year+'-01-01 00:00:00', |
| | | userName:this.query.userName, |
| | | laboratory:this.query.laboratory, |
| | | }).then(res => { |
| | | this.pageLoading = false |
| | | if (res.code == 201) return |
| | | this.total = res.data.total |
| | | let list = res.data.records.map(item=>{ |
| | | for (let key in item.year) { |
| | | let type = this.getDayByDic(key) |
| | | if(type!=undefined||type!=null){ |
| | | item[`day${type}`] = item.year[key] |
| | | } |
| | | } |
| | | item.monthList = [] |
| | | for (let m in item.month) { |
| | | let obj = {} |
| | | for (let key in item.month[m]) { |
| | | let type = this.getDayByDic(key) |
| | | if(type!=undefined||type!=null){ |
| | | obj[`day${type}`] = item.month[m][key] |
| | | } |
| | | } |
| | | obj.totalMonthAttendance = item.month[m].totalMonthAttendance |
| | | item.monthList.push(obj) |
| | | } |
| | | return item |
| | | }); |
| | | if(list.length==0){ |
| | | this.finishLoding = true; |
| | | }else{ |
| | | if(list.length<this.pageSize){ |
| | | this.finishLoding = true; |
| | | } |
| | | this.yearList = this.yearList.concat(list) |
| | | if(this.total==this.yearList.length){ |
| | | this.finishLoding = true; |
| | | } |
| | | this.currentPage++; |
| | | } |
| | | }) |
| | | }, |
| | | getPower() { |
| | | let power = JSON.parse(sessionStorage.getItem('power')) |
| | | let add = false |
| | | let up = false |
| | | let down = false |
| | | for (var i = 0; i < power.length; i++) { |
| | | if (power[i].menuMethod == 'update') { |
| | | up = true |
| | | } |
| | | if (power[i].menuMethod == 'delDeviceParameter') { |
| | | down = true |
| | | } |
| | | if (power[i].menuMethod == 'add') { |
| | | add = true |
| | | } |
| | | } |
| | | this.addPower = add |
| | | this.upPower = up |
| | | this.downPower = down |
| | | }, |
| | | onMouseEnter(index){ |
| | | this.currentUserIndex = index |
| | |
| | | this.refresh() |
| | | }) |
| | | }, |
| | | handleDown(){ |
| | | let year = this.query.year.getFullYear() |
| | | let time = ''; |
| | | if(this.query.month){ |
| | | let month = this.query.month>9?this.query.month:'0'+this.query.month |
| | | time = year+'-'+month+'-01 00:00:00' |
| | | }else{ |
| | | time = year+'-01-01 00:00:00' |
| | | } |
| | | this.downLoading = true |
| | | this.$axios.get(this.$api.performanceShift.export+`?time=${time}&userName=${this.query.userName}&laboratory=${this.query.laboratory}&isMonth=${this.query.month?true:false}`,{responseType: 'blob'}).then(res => { |
| | | this.$message.success('下载成功') |
| | | this.downLoading = false |
| | | const blob = new Blob([res], { |
| | | type: 'application/force-download' |
| | | }) |
| | | let fileName=""; |
| | | if(this.query.month){ |
| | | fileName = year +'-'+this.query.month+' 班次信息' |
| | | }else{ |
| | | fileName = year+' 班次汇总' |
| | | } |
| | | const filename = decodeURI(fileName+'.xlsx') |
| | | // 创建一个超链接,将文件流赋进去,然后实现这个超链接的单击事件 |
| | | const elink = document.createElement('a') |
| | | elink.download = filename |
| | | elink.style.display = 'none' |
| | | elink.href = URL.createObjectURL(blob) |
| | | document.body.appendChild(elink) |
| | | elink.click() |
| | | URL.revokeObjectURL(elink.href) // 释放URL 对象 |
| | | document.body.removeChild(elink) |
| | | }) |
| | | }, |
| | | selectEnumByCategory() { |
| | | this.$axios.post(this.$api.enums.selectEnumByCategory, { |
| | | category: "班次类型" |
| | |
| | | }, |
| | | handleCommand(e,m){ |
| | | if(e!=m.shift){ |
| | | this.$axios.put(this.$api.performanceShift.update+m.id, { |
| | | this.$axios.put(this.$api.performanceShift.update, { |
| | | id:m.id, |
| | | shift:e |
| | | }).then(res => { |
| | | }, { |
| | | headers: { |
| | | 'Content-Type': 'application/json' |
| | | } |
| | | }).then(res => { |
| | | if (res.code == 201) return |
| | | this.$message.success('操作成功') |
| | | m.shift = e |
| | |
| | | if(obj){ |
| | | return obj.label |
| | | } |
| | | return '未排班' |
| | | return '无' |
| | | }, |
| | | scrollInit() { |
| | | // 获取要绑定事件的元素 |
| | | const nav = document.getElementById("nav") |
| | | var flag; // 鼠标按下 |
| | | var downX; // 鼠标点击的x下标 |
| | | var scrollLeft; // 当前元素滚动条的偏移量 |
| | | nav.addEventListener("mousedown", function(event) { |
| | | flag = true; |
| | | downX = event.clientX; // 获取到点击的x下标 |
| | | scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量 |
| | | }); |
| | | nav.addEventListener("mousemove", function(event) { |
| | | if (flag) { // 判断是否是鼠标按下滚动元素区域 |
| | | var moveX = event.clientX; // 获取移动的x轴 |
| | | var scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离 |
| | | this.scrollLeft = scrollLeft - scrollX // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离 |
| | | } |
| | | }); |
| | | // 鼠标抬起停止拖动 |
| | | nav.addEventListener("mouseup", function() { |
| | | flag = false; |
| | | }); |
| | | // 鼠标离开元素停止拖动 |
| | | nav.addEventListener("mouseleave", function(event) { |
| | | flag = false; |
| | | }); |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | .center { |
| | | width: 100%; |
| | | height: calc(100% - 40px ); |
| | | height: calc(100% - 50px ); |
| | | background-color: #fff; |
| | | overflow-y: auto; |
| | | display: flex; |
| | | } |
| | | >>>.scroll-pagination{ |
| | | overflow-y: scroll; |
| | | scrollbar-width: none; /* 对于 Firefox 和 IE 的兼容写法 */ |
| | | scrollbar-width: none; |
| | | } |
| | | >>>.scroll-pagination::-webkit-scrollbar { |
| | | display: none; /* 对于 Chrome, Safari 和 Opera 的写法 */ |
| | | display: none; |
| | | } |
| | | .fixed-left { |
| | | float: left; |
| | |
| | | min-height: calc(100% - 10px); /* 视口高度 */ |
| | | margin-left: 220px; |
| | | overflow-x: scroll; |
| | | /* overflow-x: hidden; */ |
| | | } |
| | | |
| | | .content { |
| | |
| | | } |
| | | .content-title-item{ |
| | | height: 100%; |
| | | width: 100px; |
| | | width: 50px; |
| | | flex-shrink: 0; |
| | | border-bottom: 1px solid #EEEEEE; |
| | | box-sizing: border-box; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | flex-direction: column; |
| | | position: relative; |
| | | } |
| | | .content-title-item .month{ |
| | | font-size: 12px; |
| | | color: #3A7BFA; |
| | | box-sizing: border-box; |
| | | padding: 0 4px; |
| | | padding: 0 1px; |
| | | border-radius: 50%; |
| | | background: #D6E4FF; |
| | | line-height: 30px; |
| | | text-align: center; |
| | | margin-right: 6px; |
| | | line-height: 22px; |
| | | } |
| | | .content-title-item .day{ |
| | | font-size: 16px; |
| | | font-size: 14px; |
| | | color: #333333; |
| | | margin-right: 6px; |
| | | /* margin-right: 4px; */ |
| | | } |
| | | .content-title-item .week{ |
| | | font-size: 14px; |
| | | font-size: 12px; |
| | | color: #999999; |
| | | } |
| | | .content-body{ |
| | |
| | | align-items: center; |
| | | } |
| | | .content-body-item{ |
| | | height: 80px; |
| | | width: 100px; |
| | | height: 70px; |
| | | width: 50px; |
| | | flex-shrink: 0; |
| | | font-size: 12px; |
| | | box-sizing: border-box; |
| | | padding: 4px; |
| | | border-right: 1px solid #EEEEEE; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-around; |
| | | background: #F5F7FB; |
| | | background: #edeff2; |
| | | border-radius: 8px 8px 8px 8px; |
| | | color: #999; |
| | | font-size: 14px; |
| | | } |
| | | .work-box.type0{ |
| | | background: rgba(58,123,250,0.15); |
| | | color: #3A7BFA; |
| | | color: #3A7BFA !important; |
| | | } |
| | | .work-box.type0 span{ |
| | | color: #3A7BFA !important; |
| | | } |
| | | .work-box.type1{ |
| | | background: #E3DCFE; |
| | | color: #635998; |
| | | color: #635998 !important; |
| | | } |
| | | .work-box.type1 span{ |
| | | color: #635998 !important; |
| | | } |
| | | .work-box.type2{ |
| | | background: #FAE2CA; |
| | | color: #BC8D5E; |
| | | color: #BC8D5E !important; |
| | | } |
| | | .work-box.type2 span{ |
| | | color: #BC8D5E !important; |
| | | } |
| | | .work-box.type3{ |
| | | background: #E1F3D8; |
| | | color: #67C23A; |
| | | color: #67C23A !important; |
| | | } |
| | | .work-box.type3 span{ |
| | | color: #67C23A !important; |
| | | } |
| | | .work-box.type4{ |
| | | background: #FDE2E2; |
| | | color: #F56C6C; |
| | | color: #F56C6C !important; |
| | | } |
| | | .el-icon-arrow-down::before{ |
| | | .work-box.type4 span{ |
| | | color: #F56C6C !important; |
| | | } |
| | | .work-box.type5{ |
| | | background: #ff46c145; |
| | | color: #ff46c0 !important; |
| | | } |
| | | .work-box.type5 span{ |
| | | color: #ff46c0 !important; |
| | | } |
| | | .work-box.type6{ |
| | | background: #00036418; |
| | | color: #000464 !important; |
| | | } |
| | | .work-box.type6 span{ |
| | | color: #000464 !important; |
| | | } |
| | | /* .el-icon-arrow-down::before{ |
| | | color: #c6c4c4; |
| | | } |
| | | .type0 .el-icon-arrow-down::before{ |
| | | } */ |
| | | /* .type0 .el-icon-arrow-down::before{ |
| | | color: #fff; |
| | | } |
| | | .type1 .el-icon-arrow-down::before{ |
| | |
| | | } |
| | | .type4 .el-icon-arrow-down::before{ |
| | | color: #fff; |
| | | } |
| | | } */ |
| | | .work-box-left{ |
| | | display: flex; |
| | | justify-content: center; |
| | |
| | | } |
| | | .content-user{ |
| | | width: 100%; |
| | | height: 80px; |
| | | height: 70px; |
| | | box-sizing: border-box; |
| | | border-bottom: 1px solid #EEEEEE; |
| | | display: flex; |
| | |
| | | margin-left: 10px; |
| | | } |
| | | .hoverType{ |
| | | background: rgba(58,123,250,0.05); |
| | | background: rgba(58,123,250,0.03); |
| | | } |
| | | .year-table{ |
| | | width: 100%; |
| | | } |
| | | /* .year-table .scroll-right{ |
| | | width: calc(100% -220px); |
| | | } */ |
| | | .year-table .scroll-right{ |
| | | flex: 1; |
| | | } |
| | | .year-table .month{ |
| | | font-size: 14px; |
| | | color: #3A7BFA; |
| | | box-sizing: border-box; |
| | | padding: 0 4px; |
| | | border-radius: 50%; |
| | | background: #D6E4FF; |
| | | text-align: center; |
| | | line-height: 30px; |
| | | } |
| | | .year-table .content-title-item{ |
| | | width: 100%; |
| | | } |
| | | .year-table .content-body{ |
| | | /* width: calc(100% -220px) !important; */ |
| | | } |
| | | .year-table .content-body-item{ |
| | | width: 100%; |
| | | height: 70px; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | } |
| | | </style> |