471 lines
14 KiB
Vue
471 lines
14 KiB
Vue
<template>
|
||
<div class="groupTeamScheduling">
|
||
<div class="operationArea">
|
||
<el-form :inline="true" class="demo-form-inline">
|
||
<span class="blue-block"></span>
|
||
<el-form-item label="月份选择">
|
||
<el-date-picker
|
||
v-model="startDay"
|
||
type="month"
|
||
placeholder="选择月"
|
||
size="small"
|
||
:disabled="showSetting"
|
||
@change="selectMonth"
|
||
:clearable="false"
|
||
style="width: 120px">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<span class="separateStyle"></span>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" :disabled="showSetting || settingBtnDis" @click="settingMsg">设置</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" v-show="showSetting && autoScheduling" @click="schedulingBtn">自动排班</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<span class="separateStyle" v-show="showSetting"></span>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" v-show="showSetting" @click="confirmSetting">确认</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" plain v-show="showSetting" @click="cancelSetting">取消</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="请先选择查询的班组" class="rightItem">
|
||
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('1')">班组上下片查询</el-button>
|
||
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('2')">班组能源查询</el-button>
|
||
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('3')">班组检测查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<!-- 日历区域 -->
|
||
<div class="calenderArea">
|
||
<div style="font-size: 24px;font-weight: 500">{{ this.month }} {{ this.year }}</div>
|
||
<el-calendar v-model="startDay">
|
||
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
|
||
<template
|
||
slot="dateCell"
|
||
slot-scope="{date, data}">
|
||
<div v-if="data.type === 'current-month'">
|
||
<!-- 日期 -->
|
||
<div class="dateStyle">
|
||
{{ Number(data.day.split('-')[2]) }}
|
||
</div>
|
||
<!-- 班次班组 -->
|
||
<!-- class有两个样式，一个是类似class1，还有个是选中红框显示 -->
|
||
<el-row :gutter="2" :class="'class' + (index+1) + (chooseTip === (item.startDay+item.classesId) ? ' team-active' : '')" v-for="(item, index) in list[Number(data.day.split('-')[2])]" :key='index'>
|
||
<el-col :span="12">
|
||
<div class="selectDiv">
|
||
<!-- 选择班组图标 -->
|
||
<div class="toggle-icon" v-show="showSetting && (new Date(data.day).valueOf() < new Date().valueOf() ? false: true)">
|
||
<svg-icon icon-class="toggle"/>
|
||
</div>
|
||
<!-- 不能选择班组 -->
|
||
<div class="toggle-icon-hide" v-show="!(showSetting && (new Date(data.day).valueOf() < new Date().valueOf() ? false: true))"></div>
|
||
<el-select v-model="item.teamId" size='small' :disabled="!showSetting || (new Date(data.day).valueOf() > new Date().valueOf() ? false: true)">
|
||
<el-option
|
||
v-for="i in teamList"
|
||
:key="i.id"
|
||
:label="i.name"
|
||
:value="i.id">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-button class="labelClass" @click="chooseTeam(item)">{{ item.classesName }}</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
</el-calendar>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getPreset, createOrUpdateList, autoSet } from "@/api/base/groupTeamScheduling";
|
||
import { listEnabled } from "@/api/base/groupTeam";
|
||
import moment from 'moment';
|
||
|
||
export default {
|
||
name: "GroupTeamScheduling",
|
||
data() {
|
||
return {
|
||
startDay: '',// 查询参数
|
||
year: '',// 2023
|
||
month: '',// 九月
|
||
monthList: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
|
||
list: {},
|
||
teamList: [],// 班组下拉
|
||
showSetting: false,// 设置模式。自动排班，确认，取消按钮显示
|
||
settingBtnDis: false,
|
||
jumpDisabled: true,// 操作按钮控制
|
||
chooseObj: {}, //当前选中的数据，查询按钮用
|
||
chooseTip: '',// 当前选中数据的唯一值，显示红框
|
||
autoScheduling: false // 只有在当前日期后的月份才生效
|
||
};
|
||
},
|
||
created() {
|
||
this.startDay = new Date()
|
||
// 设置按钮是否置灰
|
||
this.settingBtn()
|
||
this.getTeamList()
|
||
this.toggleMonth()
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
// 切换月份
|
||
selectMonth() {
|
||
if (this.startDay) {
|
||
this.settingBtn() // 设置按钮状态,需在getlist前面
|
||
this.toggleMonth()
|
||
this.getList()
|
||
this.clearChoose()
|
||
if ( moment(this.startDay).valueOf() > moment().endOf('month').valueOf()) {
|
||
this.autoScheduling = true
|
||
} else {
|
||
this.autoScheduling = false
|
||
}
|
||
}
|
||
},
|
||
// 获取班组列表
|
||
getTeamList() {
|
||
listEnabled().then(res => {
|
||
this.teamList = res.data || []
|
||
})
|
||
},
|
||
// 获取日历数据
|
||
getList() {
|
||
let year = moment(this.startDay).format('YYYY')
|
||
let month = moment(this.startDay).format('M')
|
||
getPreset({
|
||
year: year,
|
||
month: month
|
||
}).then(res => {
|
||
let obj = res.data || {}
|
||
if (obj) {
|
||
for (let item in obj) {
|
||
for (let i = 0; i < obj[item].length; i++) {
|
||
if (!obj[item][i].teamId) {
|
||
obj[item][i].teamId = ''
|
||
}
|
||
}
|
||
}
|
||
}
|
||
this.list = obj
|
||
}).catch(() => {
|
||
this.list = {}
|
||
this.settingBtnDis = true // 禁用设置按钮
|
||
})
|
||
},
|
||
// 设置
|
||
settingMsg() {
|
||
this.showSetting = !this.showSetting
|
||
this.clearChoose()
|
||
},
|
||
// 取消
|
||
cancelSetting() {
|
||
this.showSetting = !this.showSetting
|
||
this.getList() // 数据还原
|
||
},
|
||
// 确认
|
||
confirmSetting() {
|
||
let num = 0
|
||
// 当月数据的话，今天及今天之前的不传
|
||
if (moment(this.startDay).format('YYYY-MM') === moment().format('YYYY-MM')) {
|
||
num = Number(moment().format('DD'))
|
||
} else {
|
||
num = 0
|
||
}
|
||
// 下月数据全部都传
|
||
// 打平数据
|
||
let tempArr = Object.values(this.list)
|
||
let arr = []
|
||
for (let i = num; i < tempArr.length; i++) {
|
||
for (let j = 0; j < tempArr[i].length; j++) {
|
||
arr.push(tempArr[i][j])
|
||
}
|
||
}
|
||
createOrUpdateList(arr).then(res => {
|
||
if (res.code === 0) {
|
||
this.showSetting = !this.showSetting
|
||
this.$modal.msgSuccess("操作成功")
|
||
this.getList() // 数据更新
|
||
}
|
||
})
|
||
},
|
||
// 点击班次红框选中当前数据
|
||
chooseTeam(value) {
|
||
if (this.showSetting) {
|
||
this.$modal.msgWarning("当前处于设置模式")
|
||
return false
|
||
}
|
||
this.chooseObj = value
|
||
this.chooseTip = value.startDay + value.classesId // 匹配当前的样式
|
||
this.jumpDisabled = false //查询按钮不禁用
|
||
},
|
||
// 自动排班
|
||
schedulingBtn() {
|
||
let tempData = this.list
|
||
// 次月1号有值前端排班
|
||
if (this.list[1][0].teamId) {
|
||
let tempArr = Object.values(this.list)
|
||
let arr = []
|
||
let n = 0
|
||
for (let i = 0; i < tempArr.length; i++) {
|
||
if (n > 0) {
|
||
break;
|
||
}
|
||
for (let j = 0; j < tempArr[i].length; j++) {
|
||
if (tempArr[i][j].teamId) {
|
||
arr.push(tempArr[i][j].teamId)
|
||
} else {
|
||
n++
|
||
}
|
||
}
|
||
}
|
||
let tempNum = 0
|
||
for (let k = 0; k < tempArr.length; k++) {
|
||
for (let v = 0; v < tempArr[k].length; v++) {
|
||
let t = tempNum % arr.length
|
||
if (arr.length === 1) {
|
||
tempData[k+1][v].teamId = arr[0]
|
||
} else {
|
||
tempData[k+1][v].teamId = arr[t]
|
||
}
|
||
tempNum++
|
||
}
|
||
}
|
||
this.list = []
|
||
this.list = tempData
|
||
} else {
|
||
// 次月1号没有值,接口排班
|
||
// console.log(moment(this.startDay).format("YYYY-MM-DD"))
|
||
autoSet({
|
||
year: this.year,
|
||
month: moment(this.startDay).month() + 1
|
||
}).then(res => {
|
||
this.list = res.data || {}
|
||
})
|
||
}
|
||
},
|
||
// 设置按钮如果是上个月或者今天是本月最后一天，设置按钮置灰
|
||
settingBtn() {
|
||
let nowMonth = moment().startOf('month').valueOf()
|
||
let startMonth = moment(this.startDay).valueOf()
|
||
let nowDate = moment(new Date()).date()
|
||
let sumDate = moment().daysInMonth()
|
||
if (nowMonth > startMonth) { // 之前月
|
||
this.settingBtnDis = true
|
||
} else {
|
||
if (nowDate < sumDate) {
|
||
this.settingBtnDis = false
|
||
} else {
|
||
this.settingBtnDis = true
|
||
}
|
||
}
|
||
},
|
||
// 清除红框选中数据
|
||
clearChoose() {
|
||
this.chooseObj = {}
|
||
this.chooseTip = ""
|
||
this.jumpDisabled = true
|
||
},
|
||
// 切换月份显示
|
||
toggleMonth() {
|
||
this.year = moment(this.startDay).format("YYYY")
|
||
let month = Number(moment(this.startDay).format("MM"))
|
||
this.month = this.monthList[month - 1]
|
||
},
|
||
// 3个跳转按钮
|
||
toOtherPage(val) {
|
||
switch (val) {
|
||
case '1':
|
||
this.$router.push({
|
||
// path: '/core/monitoring/production-line-data',
|
||
name: 'ProductionLineData',
|
||
params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
|
||
})
|
||
break;
|
||
case '2': // 能源
|
||
this.$router.push({
|
||
name: 'EnergyReportSearch',
|
||
params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
|
||
})
|
||
break;
|
||
default:
|
||
this.$router.push({
|
||
// path: '/quality/monitoring/quality-statistics',
|
||
name: 'QualityStatistics',
|
||
params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang='scss'>
|
||
.groupTeamScheduling {
|
||
background-color: #F2F4F9;
|
||
.operationArea {
|
||
padding: 14px 10px 0 16px;
|
||
margin-bottom: 8px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
.blue-block {
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 16px;
|
||
background-color: #0B58FF;
|
||
border-radius: 1px;
|
||
margin-right: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
.separateStyle {
|
||
display: inline-block;
|
||
width: 1px;
|
||
height: 24px;
|
||
background: #E8E8E8;
|
||
vertical-align: middle;
|
||
}
|
||
.el-form-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
.rightItem {
|
||
float: right;
|
||
}
|
||
}
|
||
// 日历
|
||
.calenderArea {
|
||
padding: 14px 10px 0 20px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
.el-calendar__body {
|
||
padding: 10px 16px 16px 0;
|
||
}
|
||
.el-calendar__header {
|
||
display: none;
|
||
}
|
||
.el-calendar-table > thead {
|
||
height: 48px;
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
background-color: rgba(242, 244, 249, 1);
|
||
}
|
||
.el-calendar-table__row {
|
||
height: 133px;
|
||
.prev, .next {
|
||
pointer-events: none;
|
||
}
|
||
.el-calendar-day {
|
||
padding: 0 10px;
|
||
height: 100%;
|
||
.dateStyle {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
text-align: right;
|
||
height: 32px;
|
||
line-height: 28px;
|
||
padding-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
.team-active {// 选中班组
|
||
border:2px solid red
|
||
}
|
||
.class1, .class2, .class3 {
|
||
padding: 0;
|
||
font-weight: 600;
|
||
margin-bottom: 2px;
|
||
.selectDiv {
|
||
position: relative;
|
||
.toggle-icon {
|
||
position: absolute;
|
||
width: 26px;
|
||
height: 26px;
|
||
line-height: 26px;
|
||
font-size: 14px;
|
||
z-index: 1;
|
||
text-align: center;
|
||
}
|
||
.toggle-icon-hide {
|
||
position: absolute;
|
||
width: 2px;
|
||
height: 28px;
|
||
z-index: 1;
|
||
}
|
||
.el-input__suffix {
|
||
display: none;
|
||
}
|
||
.el-input--suffix .el-input__inner {
|
||
padding: 0 4px 0 28px;
|
||
}
|
||
.el-input--small .el-input__inner {
|
||
height: 28px;
|
||
border: none;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.labelClass {
|
||
width: 100%;
|
||
height: 28px;
|
||
border: none;
|
||
padding: 0;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.class1 {
|
||
.selectDiv {
|
||
.toggle-icon, .toggle-icon-hide {
|
||
background-color: #FACE00;
|
||
}
|
||
.el-input--small .el-input__inner {
|
||
color: #E7A200;
|
||
background-color: #FFEFC0;
|
||
}
|
||
}
|
||
.labelClass {
|
||
color: #E7A200;
|
||
background-color: #FFEFC0;
|
||
}
|
||
}
|
||
.class2 {
|
||
.selectDiv {
|
||
.toggle-icon, .toggle-icon-hide {
|
||
background-color: #3984FF;
|
||
}
|
||
.el-input--small .el-input__inner {
|
||
color: #2D7BFF;
|
||
background-color: #BEEAFF;
|
||
}
|
||
}
|
||
.labelClass {
|
||
color: #2D7BFF;
|
||
background-color: #BEEAFF;
|
||
}
|
||
}
|
||
.class3 {
|
||
.selectDiv {
|
||
.toggle-icon, .toggle-icon-hide {
|
||
background-color: #37D97F;
|
||
}
|
||
.el-input--small .el-input__inner {
|
||
color: #129F51;
|
||
background-color: #E0FFEE;
|
||
}
|
||
}
|
||
.labelClass {
|
||
color: #129F51;
|
||
background-color: #E0FFEE;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|