初始提交
This commit is contained in:
46
src/pages/yyzx/zbbb/addZbbb.vue
Normal file
46
src/pages/yyzx/zbbb/addZbbb.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="container" style="padding-top: 13vw">
|
||||
<TopNav :navTitle="title" />
|
||||
<normalReport @setTitle="onSetTitle" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TopNav from "../../../components/topNav.vue";
|
||||
import normalReport from "../components/normalReport.vue";
|
||||
import { computed, ref, reactive, watch, onMounted } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { Toast } from "vant";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const title = ref("值班排班信息");
|
||||
const active = ref("a");
|
||||
//设置标题信息
|
||||
function onSetTitle(e) {
|
||||
title.value = e;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
margin-top: 2vw;
|
||||
}
|
||||
.nav_tab {
|
||||
padding: 2vw;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.tab {
|
||||
background: #a4aec8;
|
||||
color: #fff;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: 40vw;
|
||||
text-align: center;
|
||||
border-radius: 16px 16px 16px 0;
|
||||
}
|
||||
.tab.active {
|
||||
background: #517cea;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
455
src/pages/yyzx/zbbb/zbbbCalendar.vue
Normal file
455
src/pages/yyzx/zbbb/zbbbCalendar.vue
Normal file
@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<div style="padding-top: 13vw">
|
||||
<TopNav navTitle="我的值班清单" :showLeft="true" />
|
||||
<div class="calenderBox">
|
||||
<div class="calender-head">
|
||||
<div class="btn" @click="last">
|
||||
<van-icon name="arrow-left" color="#fff" />
|
||||
</div>
|
||||
<div class="text">{{ Year }}年{{ month }}月</div>
|
||||
<div class="btn" @click="next">
|
||||
<van-icon name="arrow" color="#fff" />
|
||||
</div>
|
||||
<div class="change" @click="isChange = !isChange">
|
||||
<van-icon name="exchange" size="16" color="#3e6ee8" />
|
||||
{{ isChange ? "切换表格" : "切换列表" }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 日历列表 -->
|
||||
<div v-if="!isChange" class="list">
|
||||
<ul class="week">
|
||||
<li class="days" v-for="(item, index) in week" :key="index">
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="wrap">
|
||||
<div class="item" v-for="(item, index) in calendarList" :key="index">
|
||||
<div class="num">
|
||||
{{ item.day }}<span v-show="item.list">日</span>
|
||||
</div>
|
||||
<div class="status" v-show="item.status">
|
||||
<span
|
||||
@click="routePush(evn, item)"
|
||||
v-for="(evn, index) in item.status"
|
||||
:key="index + 'evn'"
|
||||
v-show="evn.text"
|
||||
:style="{ background: evn.color }"
|
||||
>{{ evn.text }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日历列表 -->
|
||||
<div v-else class="list">
|
||||
<CalendarList :listData="listData"></CalendarList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TopNav from "../../../components/topNav.vue";
|
||||
import CalendarList from "../components/calendarListZb.vue";
|
||||
import router from "../../../router/index.js";
|
||||
import { getZbbbByMonth } from "@/api/calender";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { Toast } from "vant";
|
||||
const isChange = ref(false);
|
||||
const week = ref(["周日", "周一", "周二", "周三", "周四", "周五", "周六"]);
|
||||
const Year = ref(new Date().getFullYear()); //日历上的年份
|
||||
const month = ref(new Date().getMonth() + 1); //日历上的月份
|
||||
const Day = ref(new Date().getDate()); //日历上的天份
|
||||
|
||||
const nowYear = ref(new Date().getFullYear());
|
||||
const nowmonth = ref(new Date().getMonth() + 1);
|
||||
const nowDay = ref(new Date().getDate());
|
||||
|
||||
const starttime = ref("");
|
||||
const endtime = ref("");
|
||||
const nowtime = ref("");
|
||||
|
||||
const loading = ref(false);
|
||||
const listData = ref([]);
|
||||
|
||||
//状态字典
|
||||
const ztDict = [
|
||||
{
|
||||
label: "待值班",
|
||||
value: "01",
|
||||
color: "#7b7b7b",
|
||||
},
|
||||
{
|
||||
label: "值班中",
|
||||
value: "02",
|
||||
color: "",
|
||||
},
|
||||
{
|
||||
label: "已值班",
|
||||
value: "03",
|
||||
color: "#0084ff",
|
||||
},
|
||||
{
|
||||
label: "",
|
||||
value: "04",
|
||||
color: "",
|
||||
},
|
||||
];
|
||||
const calendarList = ref([]);
|
||||
//状态数据处理
|
||||
function checkZt(list = []) {
|
||||
var zt = [];
|
||||
if (list.length > 0) {
|
||||
zt = list.map((item) => {
|
||||
return {
|
||||
text: ztDict.filter((item2) => item2.value === item.zt)[0].label,
|
||||
color: ztDict.filter((item2) => item2.value === item.zt)[0].color,
|
||||
id: item.id,
|
||||
zt: item.zt,
|
||||
time: item.time,
|
||||
};
|
||||
});
|
||||
}
|
||||
return zt;
|
||||
}
|
||||
onMounted(() => {
|
||||
Toast.loading({
|
||||
message: "加载...",
|
||||
forbidClick: true,
|
||||
loadingType: "spinner",
|
||||
duration: 0,
|
||||
});
|
||||
Promise.all([
|
||||
getzbCalendar(Year.value, month.value),
|
||||
Draw(nowYear.value, nowmonth.value),
|
||||
])
|
||||
.then((res) => {
|
||||
Toast.clear();
|
||||
})
|
||||
.catch((err) => {
|
||||
Toast.clear();
|
||||
});
|
||||
let time_month = nowmonth.value; //现在的月份
|
||||
let time_day = nowDay.value; //现在的天数
|
||||
if (nowmonth.value < 10) {
|
||||
time_month = 0 + "" + nowmonth.value;
|
||||
}
|
||||
if (nowDay.value < 10) {
|
||||
time_day = 0 + "" + nowDay.value;
|
||||
}
|
||||
nowtime.value = nowYear.value + "" + time_month + "" + time_day;
|
||||
starttime.value = nowtime.value;
|
||||
endtime.value = nowtime.value;
|
||||
});
|
||||
//跳转报备
|
||||
function routePush(evn, item) {
|
||||
// router.push("/yyzx/views/addZbbb");
|
||||
let flag = 0;
|
||||
let currentTi = "";
|
||||
let y = Year.value; //现在的月份
|
||||
let m = month.value; //现在的天数
|
||||
if (y < 10) {
|
||||
y = 0 + "" + y;
|
||||
}
|
||||
if (m < 10) {
|
||||
m = 0 + "" + m;
|
||||
}
|
||||
currentTi = y + "" + m + "" + item.day;
|
||||
if (nowtime.value === currentTi) {
|
||||
flag = 1;
|
||||
}
|
||||
if (evn.zt !== "04") {
|
||||
router.push({
|
||||
path: "/yyzx/views/addZbbbInfo",
|
||||
query: {
|
||||
zt: evn.zt,
|
||||
id: evn.id,
|
||||
text: evn.text,
|
||||
color: evn.color,
|
||||
flag: flag,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
//初始化日历数据
|
||||
function Draw(Year, Month) {
|
||||
var calendar = [];
|
||||
//用当月第一天在一周中的日期值作为当月离第一天的天数(获取当月第一天是周几)
|
||||
for (
|
||||
var i = 1, firstDay = new Date(Year, Month - 1, 1).getDay();
|
||||
i <= firstDay;
|
||||
i++
|
||||
) {
|
||||
calendar.push("");
|
||||
}
|
||||
//用当月最后一天在一个月中的日期值作为当月的天数
|
||||
for (
|
||||
var i = 1, monthDay = new Date(Year, Month, 0).getDate();
|
||||
i <= monthDay;
|
||||
i++
|
||||
) {
|
||||
let time_month = Month;
|
||||
let time_day = i;
|
||||
if (Month < 10) {
|
||||
time_month = 0 + "" + Month;
|
||||
}
|
||||
if (i < 10) {
|
||||
time_day = 0 + "" + i;
|
||||
}
|
||||
calendar.push({
|
||||
value: i,
|
||||
kssj: "20:00", //假数据
|
||||
jssj: "23:59",
|
||||
status: "值班", //假的状态
|
||||
count: Year + "" + time_month + "" + time_day,
|
||||
});
|
||||
}
|
||||
calendar[10].status = "未报备";
|
||||
calendar[15].status = "未报备";
|
||||
calendar[20].status = "请假";
|
||||
calendar[21].status = "请假";
|
||||
calendar[20].time = "";
|
||||
calendar[21].time = "";
|
||||
calendarList.value = calendar;
|
||||
}
|
||||
// 上个月
|
||||
function last() {
|
||||
month.value--;
|
||||
if (month.value == 0) {
|
||||
month.value = 12;
|
||||
Year.value--;
|
||||
}
|
||||
Draw(Year.value, month.value);
|
||||
getzbCalendar(Year.value, month.value);
|
||||
}
|
||||
// 下个月
|
||||
function next() {
|
||||
month.value++;
|
||||
if (month.value == 13) {
|
||||
month.value = 1;
|
||||
Year.value++;
|
||||
}
|
||||
Draw(Year.value, month.value);
|
||||
getzbCalendar(Year.value, month.value);
|
||||
}
|
||||
|
||||
// 获取日历数据
|
||||
const getzbCalendar = (Year, Month) => {
|
||||
getZbbbByMonth({
|
||||
time: Year + "-" + Month,
|
||||
}).then((res) => {
|
||||
if (res && res.length > 0) {
|
||||
listData.value = [];
|
||||
res.map((item) => {
|
||||
if (item.list.length === 0) {
|
||||
listData.value.push({
|
||||
time: Year + "-" + Month + "-" + item.day,
|
||||
zqsj: "--",
|
||||
zqzt: "--",
|
||||
zt: "04",
|
||||
});
|
||||
} else {
|
||||
item.list.map((env) => {
|
||||
listData.value.push({
|
||||
time: Year + "-" + Month + "-" + item.day,
|
||||
zqsj: env.time,
|
||||
zqzt: ztDict.filter((item2) => item2.value === env.zt)[0].label,
|
||||
zt: env.zt,
|
||||
id: env.id,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
res.forEach((element) => {
|
||||
if (element.list.length > 0) {
|
||||
element.status = checkZt(element.list);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
calendarList.value = res;
|
||||
for (
|
||||
var i = 1, firstDay = new Date(Year, Month - 1, 1).getDay();
|
||||
i <= firstDay;
|
||||
i++
|
||||
) {
|
||||
calendarList.value.unshift("");
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../assets/styles/mixin.scss";
|
||||
.calenderBox {
|
||||
width: 100%;
|
||||
padding: 1vw;
|
||||
box-sizing: border-box;
|
||||
.calender-head {
|
||||
width: 100%;
|
||||
height: 15vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
position: relative;
|
||||
.change {
|
||||
position: absolute;
|
||||
right: 1vw;
|
||||
bottom: 2vw;
|
||||
cursor: pointer;
|
||||
color: #3e6ee8;
|
||||
@include font_size($font_medium_s);
|
||||
}
|
||||
.btn {
|
||||
width: 7vw;
|
||||
height: 7vw;
|
||||
line-height: 7vw;
|
||||
text-align: center;
|
||||
border-radius: 1vw;
|
||||
background: #3e6ee8;
|
||||
color: #fff;
|
||||
}
|
||||
.text {
|
||||
margin: 0 4vw;
|
||||
@include font_color($font-color-theme);
|
||||
}
|
||||
}
|
||||
.week {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
text-align: center;
|
||||
height: 10vw;
|
||||
line-height: 10vw;
|
||||
@include font_size($font_medium_s);
|
||||
background: #164acc;
|
||||
color: #fff;
|
||||
.days {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.wrap {
|
||||
width: 100%;
|
||||
// height: auto;
|
||||
// overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
width: calc((100% / 7) - 1.3px);
|
||||
border: 1px solid #3e6ee8;
|
||||
border-top: none;
|
||||
font-size: 10px;
|
||||
min-height: 17vw;
|
||||
.num {
|
||||
@include font_color($font-color-theme);
|
||||
text-align: right;
|
||||
height: 5vw;
|
||||
line-height: 5vw;
|
||||
padding-right: 1vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.status {
|
||||
text-align: center;
|
||||
// height: 5vw;
|
||||
line-height: 5vw;
|
||||
margin: 1vw 0;
|
||||
span {
|
||||
background: #3e6ee8;
|
||||
display: inline-block;
|
||||
padding: 1px 1vw;
|
||||
margin: 4px 0;
|
||||
color: #fff;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
.green {
|
||||
background: #1adb10;
|
||||
}
|
||||
.gray {
|
||||
background: #83868f;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
font-size: 10px;
|
||||
height: 5vw;
|
||||
// line-height: 7vw;
|
||||
color: #3e6ee8;
|
||||
text-align: center;
|
||||
}
|
||||
.greenColor {
|
||||
color: #1adb10;
|
||||
}
|
||||
.grayColr {
|
||||
color: #83868f;
|
||||
}
|
||||
.BlueColor {
|
||||
color: #3e6ee8;
|
||||
}
|
||||
}
|
||||
.item:nth-child(7n + 2) {
|
||||
border-left: none;
|
||||
}
|
||||
.item:nth-child(7n + 3) {
|
||||
border-left: none;
|
||||
}
|
||||
.item:nth-child(7n + 4) {
|
||||
border-left: none;
|
||||
}
|
||||
.item:nth-child(7n + 5) {
|
||||
border-left: none;
|
||||
}
|
||||
.item:nth-child(7n + 6) {
|
||||
border-left: none;
|
||||
}
|
||||
.item:nth-child(7n + 7) {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
max-height: calc(100vh - 35vw);
|
||||
// overflow: hidden;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
|
||||
@import "../../../assets/styles/mixin.scss";
|
||||
.box-rank {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 8vw;
|
||||
@include font_size($font_medium_s);
|
||||
@include font_color($font-color-theme);
|
||||
.text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.mc {
|
||||
color: #3e6ee8;
|
||||
}
|
||||
}
|
||||
.item:nth-child(2n + 1) {
|
||||
@include table_item_color($table-item-theme);
|
||||
}
|
||||
.item:nth-child(1) {
|
||||
background: #3e6ee8 !important;
|
||||
color: #fff;
|
||||
}
|
||||
.red {
|
||||
color: red !important;
|
||||
}
|
||||
.green {
|
||||
color: #88e9af;
|
||||
}
|
||||
.blue {
|
||||
color: #3e6ee8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user