From 963a2313f4f8959715293d38f69894078150d508 Mon Sep 17 00:00:00 2001
From: lzhe <lzhe@example.com>
Date: 星期五, 14 六月 2024 11:29:47 +0800
Subject: [PATCH] Merge branch 'master' of http://www.beijingsoft.cn:9090/r/smart-web

---
 src/views/console/base/Shiftsystem.vue |  284 ++++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 files changed, 264 insertions(+), 20 deletions(-)

diff --git a/src/views/console/base/Shiftsystem.vue b/src/views/console/base/Shiftsystem.vue
index 554122f..4d50e5d 100644
--- a/src/views/console/base/Shiftsystem.vue
+++ b/src/views/console/base/Shiftsystem.vue
@@ -1,45 +1,289 @@
 <!--
  * @Date: 2024-04-09 20:19:46
  * @LastEditors: Sneed
- * @LastEditTime: 2024-04-09 20:38:18
+ * @LastEditTime: 2024-06-03 22:57:46
  * @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()
+            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
+                    }
+                ]
+            }
         }
     },
-    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 = 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/blade-cps/shift/${this.info.id}`).then(res => {
+                    if (res.code === 200) {
+                        this.$refs.table.reload(this.params)
+                    }
+                })
+            }).catch(() => {
+
+            })
+
         }
     },
 }

--
Gitblit v1.9.3