临时计划，涉网计划等页面搭建

pages/workPlan/index/components/calendar.vue

@@ -5,6 +5,32 @@
       <text>{{ currentYear }}年{{ currentMonth + 1 }}月</text>
       <text @click="changeMonth(1)">》</text>
     </view> -->
+
+    <view class="header">
+      <view v-show="activeType === 1">
+        <uni-icons type="left" size="16" @click="changeMonth(-1)"></uni-icons>
+        <text>{{ currentYear }}-{{ currentMonth + 1 }}</text>
+        <uni-icons type="right" size="16" @click="changeMonth(1)"></uni-icons>
+      </view>
+      <view v-show="activeType === 2">
+        <uni-icons type="left" size="16" @click="changeWeek(-1)"></uni-icons>
+        <text class="week-container">{{ weekStart }}~{{ weekEnd }}</text>
+        <uni-icons type="right" size="16" @click="changeWeek(1)"></uni-icons>
+      </view>
+      <view v-show="activeType === 3">
+        <uni-icons type="left" size="16" @click="changeDay(-1)"></uni-icons>
+        <text>{{ currentDay }}</text>
+        <uni-icons type="right" size="16" @click="changeDay(1)"></uni-icons>
+      </view>
+      <view>
+        <button :class="{ 'active-button ': activeType === 1 }" @tap="onCheckTime(1)">月</button>
+        <button :class="{ 'active-button ': activeType === 2 }" @tap="onCheckTime(2)">周</button>
+        <button :class="{ 'active-button ': activeType === 3 }" @tap="onCheckTime(3)">日</button>
+      </view>
+    </view>
+
+    <!-- 选择月的时候的日历 -->
+    <view v-show="activeType === 1">
       <view class="weekdays">
         <text v-for="day in weekdays" :key="day">{{ day }}</text>
       </view>
@@ -21,10 +47,55 @@
             <text>低:30</text>
             <text>可接受:4</text>
           </view>
-        <!-- <view>999</view> -->
+        </view>
-        <!-- <view v-if="day.customContent" class="custom-content">
+      </view>
-          {{ day.customContent }}
+    </view>
-        </view> -->
+
+    <!-- 选择周的时候日历 -->
+    <view v-show="activeType === 2">
+      <view class="week-th">
+        <view v-for="item in weekList" :key="item">
+          <text>{{ item.title }}</text>
+          <text v-if="item !== '分公司'" style="margin-top: 6rpx">{{ item.time }}</text>
+        </view>
+      </view>
+
+      <view class="week-td" v-for="(item, index) in weekCompanyList" :key="index">
+        <view>
+          <text style="font-size: 26rpx">{{ item.name }}</text>
+        </view>
+        <view v-for="(i, j) in item.weekList" :key="j">
+          <text class="style_1">高：{{ i.height }}</text>
+          <text class="style_2">中：{{ i.height }}</text>
+          <text class="style_3">低：{{ i.kjs }}</text>
+          <text style="margin-bottom: 60rpx" class="style_4">可接受：{{ i.height }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 选择天的时候日历 -->
+    <view v-show="activeType === 3">
+      <view class="day-th">
+        <view>工程名称</view>
+        <view>作业人数</view>
+        <view>
+          <text>周二</text>
+          <text>10/22</text>
+        </view>
+      </view>
+
+      <view class="day-td">
+        <view>10kv换东线10kv换东线10kv换东线10kv换东线10kv换东线</view>
+        <view>
+          <text>3</text>
+        </view>
+        <view>
+          <text class="style_1">中</text>
+          <text class="style_2">高</text>
+          <text class="style_3">低</text>
+          <text class="style_4">可接受</text>
+          <text class="style_4">特高</text>
+        </view>
       </view>
     </view>
   </view>
@@ -34,9 +105,89 @@
 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: [],
       customDates: {
         '2023-06-15': '自定义内容'
@@ -98,9 +249,28 @@ export default {
       }
       this.generateCalendar()
     },
+    changeDay(delta) {
+      if (delta > 0) {
+        this.currentDay = this.$moment(this.currentDay).add(1, 'days').format('YYYY-MM-DD')
+      } else {
+        this.currentDay = this.$moment(this.currentDay).subtract(1, 'days').format('YYYY-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)
       // 在这里可以添加选择日期后的逻辑
+    },
+    onCheckTime(type) {
+      this.activeType = type
     }
   }
 }
@@ -113,10 +283,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 +360,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 +369,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 +398,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;
+}
 </style>

pages/workPlan/index/index.vue

@@ -10,7 +10,7 @@
       :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
     />
 
-    <scroll-view :scroll-top="scrollTop" scroll-y="true">
+    <scroll-view scroll-y="true">
       <!-- 日风险概况 -->
       <DayRiskView />
       <!-- 滚动提示 -->
@@ -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;