From fd7586c8d91473d2850af1e48b12f1a289e6b8d1 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期四, 13 六月 2024 00:10:43 +0800
Subject: [PATCH] 新增文件
---
src/views/console/base/Shiftsystem.vue | 296 +++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 257 insertions(+), 39 deletions(-)
diff --git a/src/views/console/base/Shiftsystem.vue b/src/views/console/base/Shiftsystem.vue
index c8d8412..4d50e5d 100644
--- a/src/views/console/base/Shiftsystem.vue
+++ b/src/views/console/base/Shiftsystem.vue
@@ -1,71 +1,289 @@
<!--
* @Date: 2024-04-09 20:19:46
* @LastEditors: Sneed
- * @LastEditTime: 2024-04-09 21:57:50
+ * @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-button type="primary" @click="add">鏂板缓鐝埗</el-button>
- <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>
- <ul>
- <li>
- <span>鐝埗缂栧彿</span>
- {{ info.code }}
- </li>
- <li>
- <span>鐝埗棰滆壊</span>
- {{ info.code }}
- </li>
- <li>
- <span>寮�濮�-缁撴潫鏃堕棿</span>
- {{ info.code }}
- </li>
- </ul>
+ <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}"></Dialog>
+ <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
+ Dialog,
+ scEcharts
},
- data () {
- return {
- tableData: [],
- info: {
- code: ''
+ 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: {
+ 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) {
- console.log(row)
- this.$API.calender.getShiftsystemInfo.get({id: row.id}).then(res => {
- console.log(res.data)
+ this.$API.calender.getShiftsystemInfo.get({ id: row.id }).then(res => {
this.info = res.data
})
},
- add () {
- this.$refs.dialog.open()
+ 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