临时计划，涉网计划等页面搭建
This commit is contained in:
BianLzhaoMin
parent
6ff00770fc
commit
dccf64980d
|
|
@ -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 v-if="day.customContent" class="custom-content">
|
||||
{{ day.customContent }}
|
||||
</view> -->
|
||||
</view>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue