<!--
|
* @Date: 2024-04-09 20:19:46
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-06-15 23:34:34
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/base/Shiftsystem.vue
|
-->
|
<template>
|
<el-container>
|
<el-aside width="320px">
|
<scTable style="width: 100%;" ref="table" row-key="id" border :params="params" :apiObj="apiObj" stripe
|
:hideDo="true" paginationLayout="total, prev, pager, next" @dataChange="dataChange"
|
@row-click="rowClick" highlight-current-row>
|
<el-table-column prop="code" label="班制编号" width="100px" />
|
<el-table-column prop="name" label="班制名称" />
|
</scTable>
|
</el-aside>
|
<el-container>
|
<el-header>
|
<el-button style="margin-left: auto;" size="small" @click="table_add" type="primary"
|
icon="el-icon-plus"></el-button>
|
<el-button @click="table_edit" type="primary" size="small">编辑</el-button>
|
<el-button type="danger" plain icon="el-icon-delete" size="small" @click="del"></el-button>
|
</el-header>
|
<el-main>
|
<el-row>
|
<el-col :span="2">
|
班制编号
|
</el-col>
|
<el-col :span="6">
|
{{ info.code }}
|
</el-col>
|
<el-col :span="2">
|
班制颜色
|
</el-col>
|
<el-col :span="6">
|
<el-color-picker size="small" v-model="info.colour" />
|
</el-col>
|
<el-col :span="2">
|
开始-结束时间
|
</el-col>
|
<el-col :span="6">
|
{{ dateFormat(info.startTime) }} - {{ dateFormat(info.endTime | dateFormat) }}
|
</el-col>
|
</el-row>
|
<el-row style="margin-top: 20px;">
|
<el-timeline style="max-width: 600px">
|
<el-timeline-item v-for="(activity, index) in activities" :key="index"
|
:timestamp="activity.time">
|
{{ activity.title }}
|
</el-timeline-item>
|
</el-timeline>
|
</el-row>
|
<el-row style="margin-top: 20px;">
|
<scEcharts style="width:100%" height="300px" :option="dayCharts">
|
</scEcharts>
|
</el-row>
|
</el-main>
|
</el-container>
|
<Dialog ref="dialog" :option="{ types, status, group }" :detail="detail" @success="success"></Dialog>
|
</el-container>
|
</template>
|
|
<script>
|
import Dialog from './Dialog.vue'
|
import moment from 'moment';
|
import scEcharts from '@/components/scEcharts';
|
import * as echarts from 'echarts'
|
export default {
|
components: {
|
Dialog,
|
scEcharts
|
},
|
computed: {
|
dateFormat: () => {
|
return value => {
|
if (isNaN(value)) return ''
|
let pre = '当日'
|
let add = value / (24 * 60)
|
if (add < 0) {
|
pre = '上日'
|
} else if (add >= 1) {
|
pre = '次日'
|
}
|
let base = moment().format('YYYY-MM-DD') + ' 00:00'
|
let current = moment(base).add(value, 'm')
|
return pre + moment(current).format('HH:mm');
|
}
|
},
|
activities() {
|
if (!this.info?.shiftDetailVOList?.length) return []
|
return this.info.shiftDetailVOList.map(item => {
|
return {
|
title: `班次名称：${item.indexName}`,
|
time: `${this.dateFormat(item.shiftStartTime)}-${this.dateFormat(item.shiftEndTime)}`
|
}
|
})
|
},
|
|
dayCharts() {
|
let { data = [], categories = [], startTime, end } = this.getData1()
|
console.log(data, startTime, '?????')
|
return {
|
title: {
|
text: '班制概览'
|
},
|
tooltip: {
|
formatter: function (params) {
|
return params.name + ': ' + params.value[3];
|
}
|
},
|
legend: {},
|
xAxis: {
|
min: startTime,
|
max: end,
|
scale: true,
|
interval: 2 * 60 * 60,
|
axisLabel: {
|
formatter: function (val, index) {
|
console.log('>>>>>>', val)
|
let str = ''
|
let now = moment()
|
let current = now.format('YYYY-MM-DD')
|
let pre = now.subtract(1, 'd').format('YYYY-MM-DD')
|
let next = now.add(2, 'd').format('YYYY-MM-DD')
|
let nowDate = moment.unix(val).format('YYYY-MM-DD')
|
if (nowDate === current) {
|
str = '当日'
|
} else if (nowDate === pre) {
|
str = '上日'
|
} else if (nowDate === next) {
|
str = '次日'
|
}
|
return `${str}${moment.unix(val).format('HH:mm')}`
|
}
|
}
|
},
|
yAxis: {
|
type: 'category',
|
data: categories
|
},
|
series: [
|
{
|
type: 'custom',
|
renderItem: (params, api) => {
|
var categoryIndex = api.value(0);
|
var start = api.coord([api.value(1), categoryIndex]);
|
var end = api.coord([api.value(2), categoryIndex]);
|
var height = api.size([0, 1])[1] * 0.6;
|
var rectShape = echarts.graphic.clipRectByRect(
|
{
|
x: start[0],
|
y: start[1] - height / 2,
|
width: end[0] - start[0],
|
height: height
|
},
|
{
|
x: params.coordSys.x,
|
y: params.coordSys.y,
|
width: params.coordSys.width,
|
height: params.coordSys.height
|
}
|
);
|
return (
|
rectShape && {
|
type: 'rect',
|
transition: ['shape'],
|
shape: rectShape,
|
style: api.style()
|
}
|
);
|
},
|
itemStyle: {
|
opacity: 0.8
|
},
|
encode: {
|
x: [1, 2],
|
y: 0
|
},
|
data
|
}
|
]
|
}
|
}
|
},
|
data() {
|
return {
|
apiObj: this.$API.calender.getShiftsystemList,
|
params: {
|
statusList: [1],
|
code: '',
|
name: ''
|
},
|
info: {
|
code: ''
|
},
|
detail: {
|
|
}
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
success() {
|
this.$refs.table.reload(this.params)
|
},
|
init() {
|
this.$HTTP.get('/api/blade-system/param/detail?paramKey=system.shift.max').then(res => {
|
if (res.code === 200) {
|
this.detail = res.data
|
}
|
})
|
},
|
getData1() {
|
if (!this?.info?.shiftDetailVOList?.length) return { data: [], categories: [], startTime: 0 }
|
let categories = this.info.shiftDetailVOList.map(item => {
|
return item.indexName
|
})
|
let base = null
|
this.info.shiftDetailVOList.forEach(item => {
|
base === null && (base = item.shiftStartTime)
|
if (base > item.shiftStartTime) {
|
base = item.shiftStartTime
|
}
|
})
|
console.log('.....')
|
let startTime = moment(moment().format('YYYY-MM-DD') + ' 00:00:00').add(base, 'm').unix()
|
let end = moment.unix(startTime).add(24, 'h').unix()
|
let data = [];
|
this.info.shiftDetailVOList.forEach((item, index) => {
|
let desc = `排班情况：${moment.unix(startTime + (item.shiftStartTime - base) * 60).format('HH:mm')} - ${moment.unix(startTime + (item.shiftEndTime - base) * 60).format('HH:mm')}`
|
data.push({
|
name: item.indexName,
|
value: [index, startTime + (item.shiftStartTime - base) * 60, startTime + (item.shiftEndTime - base) * 60, desc],
|
itemStyle: {
|
normal: {
|
color: this.info.colour
|
}
|
}
|
})
|
item?.shiftRestTimeVOList?.forEach(v => {
|
let desc = `休息时段: ${moment.unix(startTime + (v.restStartTime - base) * 60).format('HH:mm')} - ${moment.unix(startTime + (v.restEndTime - base) * 60).format('HH:mm')}`
|
data.push({
|
name: v.indexName,
|
value: [index, startTime + (v.restStartTime - base) * 60, startTime + (v.restEndTime - base) * 60, desc],
|
itemStyle: {
|
normal: {
|
color: 'yellow'
|
}
|
}
|
})
|
})
|
})
|
return { data, categories, startTime, end }
|
},
|
dataChange(res, tableData) {
|
let current = tableData?.[0] || {}
|
current.id && this.rowClick(current)
|
},
|
rowClick(row) {
|
this.$API.calender.getShiftsystemInfo.get({ id: row.id }).then(res => {
|
this.info = res.data
|
})
|
},
|
table_add() {
|
this.$refs.dialog.open('add', {
|
|
})
|
},
|
table_edit() {
|
this.$refs.dialog.open('edit', this.info)
|
},
|
del() {
|
this.$confirm(`确定删除数据?`, '', {
|
type: 'warning'
|
}).then(() => {
|
this.$HTTP.delete(`/api/smis/shift/${this.info.id}`).then(res => {
|
if (res.code === 200) {
|
this.$refs.table.reload(this.params)
|
}
|
})
|
}).catch(() => {
|
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
