1

lzhe

2024-05-12 f00e6c3b881c67ef3651d4f812230188af01faca

 src/views/console/base/Shiftsystem.vue

@@ -1,45 +1,283 @@
<!--
 * @Date: 2024-04-09 20:19:46
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-09 20:38:18
 * @LastEditTime: 2024-05-03 00:11:11
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/base/Shiftsystem.vue
-->
<template>
    <el-container>
        <el-aside width="320px">
            <el-table :data="tableData" stripe style="width: 100%" @row-click="rowClick">
                <el-table-column prop="code" label="班制编号" />
            <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="班制名称" />
            </el-table>
            </scTable>
        </el-aside>
        <el-container>
            456
            <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 {
    data () {
        return {
            tableData: []
    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()
            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) {

                            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
                    }
                ]
            }
        }
    },
    created () {
        this.$API.calender.getShiftsystemList.post({params: {current:1,size: 15},data: {
            code: "",name: "",statusList: [1]
        }}).then(res => {
            this.tableData = res?.data?.records || []
            let current = this.tableData?.[0] || ''
            current.id && this.rowClick(current)
        })
    data() {
        return {
            apiObj: this.$API.calender.getShiftsystemList,
            params: {
                statusList: [1],
                code: '',
                name: ''
            },
            info: {
                code: ''
            },
            detail: {

            }
        }
    },
    created() {
        this.init()
    },
    methods: {
        rowClick(row) {
            console.log(row)
            this.$API.calender.getShiftsystemInfo.get({id: row.id}).then(res => {
                console.log(res.data)
        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
            this.info.shiftDetailVOList.forEach(item => {
                !base && (base = item.shiftStartTime)
                if (base > item.shiftStartTime) {
                    base = item.shiftStartTime
                }
            })
            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 = [];
            var types = [
                { name: 1, color: '#7b9ce1' },
                { name: 2, color: '#bd6d6c' },
                { name: 3, color: '#75d874' },
                { name: 4, color: '#e0bc78' },
                { name: 5, color: '#dc77dc' },
                { name: 6, color: '#72b362' }
            ];
            this.info.shiftDetailVOList.forEach((item, index) => {
                let desc = `${moment.unix(startTime + item.shiftStartTime * 60).format('HH:mm')} - ${moment.unix(startTime + item.shiftEndTime * 60).format('HH:mm')}`
                data.push({
                    name: item.indexName,
                    value: [index, startTime + item.shiftStartTime * 60, startTime + item.shiftEndTime * 60, desc],
                    itemStyle: {
                        normal: {
                            color: this.info.colour
                        }
                    }
                })
            })
            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/blade-cps/shift/${this.info.id}`).then(res => {
                    if (res.code === 200) {
                        this.$refs.table.reload(this.params)
                    }
                })
            }).catch(() => {

            })

        }
    },
}