diff --git a/pages.json b/pages.json index ea058a1..84ee6f9 100644 --- a/pages.json +++ b/pages.json @@ -761,6 +761,12 @@ "navigationStyle": "custom" } }, + { + "path": "pages/workPlan/custody/index", + "style": { + "navigationStyle": "custom" + } + }, { "path": "pages/workPlan/dayPlan/index", "style": { diff --git a/pages/workPlan/custody/index.vue b/pages/workPlan/custody/index.vue new file mode 100644 index 0000000..e02e498 --- /dev/null +++ b/pages/workPlan/custody/index.vue @@ -0,0 +1,245 @@ + + + + + diff --git a/pages/workPlan/index/components/calendar.vue b/pages/workPlan/index/components/calendar.vue index ae77e2f..a843e71 100644 --- a/pages/workPlan/index/components/calendar.vue +++ b/pages/workPlan/index/components/calendar.vue @@ -5,26 +5,97 @@ {{ currentYear }}年{{ currentMonth + 1 }}月 》 --> - - {{ day }} + + + + + {{ currentYear }}-{{ currentMonth + 1 }} + + + + + {{ weekStart }}~{{ weekEnd }} + + + + + {{ currentDay }} + + + + + + + - - - {{ day.day }} - - 中:9 - 低:30 - 可接受:4 + + + + + {{ day }} + + + + {{ day.day }} + + 中:9 + 低:30 + 可接受:4 + + + + + + + + + + {{ item.title }} + {{ weekTimeChange(index) }} + + + + + + {{ item.name }} + + + 高：{{ i.height }} + 中：{{ i.height }} + 低：{{ i.kjs }} + 可接受：{{ i.height }} + + + + + + + + 工程名称 + 作业人数 + + {{ currentWeekDay }} + {{ currentDays }} + + + + + 10kv换东线10kv换东线10kv换东线10kv换东线10kv换东线 + + 3 + + + 中 + 高 + 低 + 可接受 + 特高 - - @@ -34,15 +105,109 @@ export default { data() { return { + activeType: 1, currentYear: new Date().getFullYear(), currentMonth: new Date().getMonth(), weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], + weekList: [ + { title: '分公司', time: '' }, + { title: '周一', time: this.$moment().week(this.$moment().week()).startOf('week').format('MM-DD') }, + { + title: '周二', + time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD')) + .add(1, 'days') + .format('MM-DD') + }, + { + title: '周三', + time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD')) + .add(2, 'days') + .format('MM-DD') + }, + { + title: '周四', + time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD')) + .add(3, 'days') + .format('MM-DD') + }, + { + title: '周五', + time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD')) + .add(4, 'days') + .format('MM-DD') + }, + { + title: '周六', + time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD')) + .add(5, 'days') + .format('MM-DD') + }, + { title: '周日', time: this.$moment().week(this.$moment().week()).endOf('week').format('MM-DD') } + ], + weekStart: this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'), + weekEnd: this.$moment().week(this.$moment().week()).endOf('week').format('YYYY-MM-DD'), + currentDay: this.$moment().format('YYYY-MM-DD'), + weekCompanyList: [ + { + name: '全部', + weekList: [ + { + height: 3, + kjs: 6 + }, + { + height: 3, + kjs: 6 + } + ] + }, + { + name: '分公司一', + weekList: [ + { + height: 3, + kjs: 6 + }, + { + height: 3, + kjs: 6 + } + ] + }, + { + name: '分公司二', + weekList: [ + { + height: 3, + kjs: 6 + }, + { + height: 3, + kjs: 6 + } + ] + } + ], days: [], + // currentWeekDay: this.$moment().day(), + currentDays: this.$moment().format('MM-DD'), customDates: { '2023-06-15': '自定义内容' } } }, + computed: { + weekTimeChange() { + return index => { + return this.$moment(this.weekStart) + .add(index - 1, 'days') + .format('MM-DD') + } + }, + currentWeekDay() { + return this.onTransWeek(this.$moment(this.currentDay).day()) + } + }, mounted() { this.generateCalendar() }, @@ -98,9 +263,58 @@ export default { } this.generateCalendar() }, + changeDay(delta) { + if (delta > 0) { + this.currentDay = this.$moment(this.currentDay).add(1, 'days').format('YYYY-MM-DD') + this.currentDays = this.$moment(this.currentDays).add(1, 'days').format('MM-DD') + } else { + this.currentDay = this.$moment(this.currentDay).subtract(1, 'days').format('YYYY-MM-DD') + this.currentDays = this.$moment(this.currentDays).subtract(1, 'days').format('MM-DD') + } + }, + changeWeek(delta) { + if (delta > 0) { + this.weekStart = this.$moment(this.weekStart).add(7, 'days').format('YYYY-MM-DD') + this.weekEnd = this.$moment(this.weekEnd).add(7, 'days').format('YYYY-MM-DD') + } else { + this.weekStart = this.$moment(this.weekStart).subtract(7, 'days').format('YYYY-MM-DD') + this.weekEnd = this.$moment(this.weekEnd).subtract(7, 'days').format('YYYY-MM-DD') + } + }, selectDate(day) { console.log('选择的日期', day.date) // 在这里可以添加选择日期后的逻辑 + }, + onTransWeek(num) { + let weekStr = '' + switch (num) { + case 0: + weekStr = '周日' + break + case 1: + weekStr = '周一' + break + case 2: + weekStr = '周二' + break + case 3: + weekStr = '周三' + break + case 4: + weekStr = '周四' + break + case 5: + weekStr = '周五' + break + case 6: + weekStr = '周六' + break + } + + return weekStr + }, + onCheckTime(type) { + this.activeType = type } } } @@ -113,10 +327,61 @@ export default { /* padding: 20rpx; */ } .header { + width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; + + view { + flex: 1; + height: 80rpx; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 36rpx; + font-weight: bold; + } + + .week-container { + font-size: 24rpx !important; + font-weight: normal !important; + } +} + +.header view:last-child { + width: 45%; + margin-right: 20rpx; + background-color: #f8f8f8; + border-radius: 40rpx; + + button { + flex: 1; + height: 80rpx; + color: #000; + line-height: 80rpx; + font-weight: normal; + font-size: 36rpx; + cursor: pointer; + transition: all 0.3s ease; + } + + button:last-child { + border-radius: 40rpx; + } + button:first-child { + border-radius: 40rpx; + } + + .active-button { + border-radius: 40rpx; + background-color: #21a1f4; + color: #fff; + } + + button::after { + border: none; + } } .weekdays { display: flex; @@ -139,7 +404,7 @@ export default { margin-bottom: 3rpx; padding-left: 3rpx; text-align: left; - font-size: 22rpx; + font-size: 24rpx; } } .risk-container text:first-child { @@ -148,6 +413,12 @@ export default { } .risk-container text:nth-child(2) { + background-color: #cff2ec; + border-left: 2px solid #1db691; + } + .risk-container text:nth-child(3) { + background-color: #d8fbff; + border-left: 2px solid #45e6ed; } } .days view { @@ -171,4 +442,88 @@ export default { font-size: 20rpx; color: #007aff; } + +.week-th, +.week-td { + width: 100%; + display: flex; + + view { + width: 12.5%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } +} + +.week-td view text { + width: 100%; + margin-bottom: 3rpx; + padding-left: 2rpx; + display: inline-block; + font-size: 22rpx; + // font-weight: bold; +} + +.style_1 { + background-color: #ffd5d6; + border-left: 2px solid #f6322a; +} +.style_2 { + background-color: #fee9ca; + border-left: 2px solid #f58b07; +} +.style_3 { + background-color: #d1f1ec; + border-left: 2px solid #14bb91; +} +.style_4 { + background-color: #d8fbfc; + border-left: 2px solid #3eebf7; +} + +.day-th, +.day-td { + display: flex; + align-items: center; + + view { + width: 33.33%; + display: flex; + flex-direction: column; + // align-items: center; + justify-content: center; + + text { + width: 100%; + text-align: center; + } + } +} + +.day-td { + // height: 180rpx; + + view { + height: 100%; + padding: 30rpx 0; + } +} + +.day-th view:nth-child(2) { + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; +} +.day-td view:nth-child(2) { + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; +} + +.day-td view:last-child text { + width: 100%; + margin-left: 10rpx; + margin-bottom: 3rpx; + text-align: left; +} diff --git a/pages/workPlan/index/index.vue b/pages/workPlan/index/index.vue index 0c7864c..d536595 100644 --- a/pages/workPlan/index/index.vue +++ b/pages/workPlan/index/index.vue @@ -10,7 +10,7 @@ :titleStyle="{ color: '#FFF', fontSize: '32rpx' }" /> - + @@ -28,7 +28,7 @@ import TabbarConfig from '../util/tabbar' import DayRiskView from './components/day-risk-view' import HomeNoticeBar from './components/home-notice-bar' -import RiskCalendar from './components/risk-calendar.vue' +import RiskCalendar from './components/calendar.vue' export default { components: { DayRiskView, @@ -66,7 +66,7 @@ export default { } .page { width: 100vw; - height: 100vh; + // height: 100vh; // background-color: #efefef; background: #fff; box-sizing: border-box; diff --git a/pages/workPlan/workbench/components/custody-model.vue b/pages/workPlan/workbench/components/custody-model.vue index 6af5b72..53546ed 100644 --- a/pages/workPlan/workbench/components/custody-model.vue +++ b/pages/workPlan/workbench/components/custody-model.vue @@ -3,7 +3,7 @@

现场监护

- + 现场监护 @@ -12,7 +12,13 @@