下发任务 修改任务处理
This commit is contained in:
maojiacai
97
src/pages/clockInPage/components/Timeline.vue
Normal file
97
src/pages/clockInPage/components/Timeline.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="info-container">
|
||||
<div class="item" v-for="(item, index) in data" :key="index">
|
||||
<div class="point"></div>
|
||||
<div class="line" v-if="index + 1 != data.length"></div>
|
||||
<div class="info-right">
|
||||
<div class="name">{{item.name}}</div>
|
||||
<div class="time">打卡时间：<text>{{ item.time }}</text></div>
|
||||
|
||||
<div class="image">
|
||||
<img src="../../../assets/home/bddcj.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="address">
|
||||
<van-icon name="location-o" color="#1DB1FF" />
|
||||
<div class="name">四川省成都市</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.info-container {
|
||||
padding: 0 2.67vw;
|
||||
margin-top: 4vw;
|
||||
|
||||
.item {
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
position: relative;
|
||||
height: auto;
|
||||
border-left: 0.53vw dashed #1DB1FF;
|
||||
max-height: 46.93vw;
|
||||
padding-bottom: 2.67vw;
|
||||
|
||||
.point {
|
||||
position: absolute;
|
||||
width: 3.2vw;
|
||||
height: 3.2vw;
|
||||
background: #1DB1FF;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
left: -1.665vw;
|
||||
}
|
||||
|
||||
.info-right {
|
||||
margin-left: 5.33vw;
|
||||
font-family: PingFang HK, PingFang HK;
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: 3.73vw;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.image {
|
||||
margin-top: 2.13vw;
|
||||
width: 33.87vw;
|
||||
height: 18.67vw;
|
||||
}
|
||||
|
||||
.time {
|
||||
margin-top: 2.13vw;
|
||||
|
||||
text {
|
||||
color: #0386FB;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-top: 2.13vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #75787F;
|
||||
|
||||
div {
|
||||
font-size: 2.67vw;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 1.33vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
305
src/pages/clockInPage/index.vue
Normal file
305
src/pages/clockInPage/index.vue
Normal file
@ -0,0 +1,305 @@
|
||||
<script setup>
|
||||
import TopNav from "@/components/topNav.vue";
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import Timeline from "@/pages/clockInPage/components/Timeline.vue";
|
||||
import {fetchSelectListByBddxlrwId} from "@/api/patrolList";
|
||||
|
||||
const route = useRoute();
|
||||
const activeName = ref("0")
|
||||
const baseUrl = ref("")
|
||||
|
||||
const data = reactive({
|
||||
tabsList: [],
|
||||
info: []
|
||||
})
|
||||
const timeList = [
|
||||
{
|
||||
time:'09:24:34',
|
||||
name: '第一次打卡 开始',
|
||||
person:'李小明',
|
||||
content:'签收订单, 订单状态变更为待回单, 签收备注为\'无\'',
|
||||
},
|
||||
{
|
||||
time:'2020-03-26 12:30:12',
|
||||
name: '吾悦广场',
|
||||
person:'李小明',
|
||||
content:'创建了订单, 并添加了跟踪方式, 电子设备或快递单号: 854654875',
|
||||
},
|
||||
{
|
||||
time:'2020-03-26 12:30:12',
|
||||
name: '吾悦广场',
|
||||
person:'李小明',
|
||||
content:'签收订单, 订单状态变更为待回单, 签收备注为\'无\'',
|
||||
}
|
||||
]
|
||||
const clearImage = () => {}
|
||||
|
||||
const onClickImg = () => {}
|
||||
|
||||
const photoFn = () => {}
|
||||
|
||||
const count = (item) => {
|
||||
if (!item || !item.dkSx) return undefined;
|
||||
|
||||
const numbers = ['一', '二', '三', '四'];
|
||||
const index = item.dkSx - 1; // 假设 dkSx 是从1开始的数字
|
||||
|
||||
return numbers[index];
|
||||
};
|
||||
|
||||
const getData = async (bddxlrwId = '') => {
|
||||
const res = await fetchSelectListByBddxlrwId({ bddxlrwId })
|
||||
if (res) {
|
||||
data.info = res
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query.item) {
|
||||
data.tabsList = JSON.parse(route.query.item)
|
||||
console.log(data.tabsList)
|
||||
}
|
||||
|
||||
getData(data.tabsList[0]?.id)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<top-nav navTitle="打卡" :showLeft="true" />
|
||||
|
||||
<div class="clockInWrapper">
|
||||
<van-tabs v-model="activeName">
|
||||
<template v-for="(item, index) in data.tabsList" :key="item?.id">
|
||||
<van-tab :name="index" :title="item?.bddMc" />
|
||||
</template>
|
||||
</van-tabs>
|
||||
|
||||
<div class="clockInList">
|
||||
<template v-for="(item, index) in data.info" :key="index">
|
||||
<div class="clockInList_item">
|
||||
<div class="label">{{ `第${count(item)}次打卡` }}</div>
|
||||
<div class="dec">开始</div>
|
||||
<div class="dec">离开</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <div class="clockInList_item">-->
|
||||
<!-- <div class="label">第一次打卡</div>-->
|
||||
<!-- <div class="dec">开始</div>-->
|
||||
<!-- <div class="dec">离开</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="clockInList_item">-->
|
||||
<!-- <div class="label">第一次打卡</div>-->
|
||||
<!-- <div class="dec">开始</div>-->
|
||||
<!-- <div class="dec">离开</div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<div class="upload_box">
|
||||
<div class="image_box" v-if="baseUrl">
|
||||
<van-icon name="close" class="close_icon" @click="clearImage" color="#000" size="24px" />
|
||||
<van-image :src="baseUrl" @click="onClickImg(baseUrl)" style="flex: 1">
|
||||
<template v-slot:loading>
|
||||
<van-loading type="spinner" size="20" />
|
||||
</template>
|
||||
</van-image>
|
||||
</div>
|
||||
<div class="upload_icon_box" v-else>
|
||||
<van-icon @click="photoFn" color="#1DB1FF" name="plus" />
|
||||
<span>点击拍照</span>
|
||||
</div>
|
||||
<!-- <van-uploader v-model="clockList" :max-count="1" :after-read="afterRead" capture="camera"
|
||||
:before-read="beforeRead" accept="image/*" /> -->
|
||||
<div class="upload_tip"><span style="color: red;">*</span>须拍摄实景图才可进行打卡</div>
|
||||
</div>
|
||||
|
||||
<div class="clockWrapper">
|
||||
<div class="circleWrapper">
|
||||
<div class="time">10：00：00后</div>
|
||||
<div class="title">开始</div>
|
||||
<div class="info">第一次打卡</div>
|
||||
</div>
|
||||
<div class="circleWrapperTip">
|
||||
<van-icon name="success" color="#FFFFFF" />
|
||||
<div>已进入考勤范围：打卡点1德阳市某某某</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<timeline :data="timeList" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.clockInWrapper {
|
||||
margin-top: 13vw;
|
||||
padding: 2vw;
|
||||
|
||||
.clockWrapper {
|
||||
margin-top: 23.47vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.circleWrapperTip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 7.2vw;
|
||||
font-family: PingFang HK, PingFang HK;
|
||||
font-weight: 400;
|
||||
font-size: 3.73vw;
|
||||
color: #707070;
|
||||
|
||||
::v-deep {
|
||||
.van-icon-success {
|
||||
margin-right: 1.33vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 3.73vw;
|
||||
height: 3.73vw;
|
||||
background: #11AA66;
|
||||
border-radius: 13.33vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.circleWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 42.67vw;
|
||||
height: 42.67vw;
|
||||
background: linear-gradient( 180deg, #1DB1FF 0%, #007DE9 100%);
|
||||
border-radius: 26.67vw;
|
||||
color: #fff;
|
||||
font-family: PingFang HK, PingFang HK;
|
||||
|
||||
.time {
|
||||
font-weight: 400;
|
||||
font-size: 4.8vw;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 400;
|
||||
font-size: 4.8vw;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-weight: 400;
|
||||
font-size: 3.73vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload_box {
|
||||
margin-top: 4vw;
|
||||
display: flex;
|
||||
padding-bottom: 4vw;
|
||||
border-bottom: 0.27vw solid #D9D9D9;
|
||||
|
||||
.upload_tip {
|
||||
color: #999999;
|
||||
font-size: 2.67vw;
|
||||
margin-left: 2.67vw;
|
||||
}
|
||||
|
||||
.image_box {
|
||||
position: relative;
|
||||
width: 42.67vw;
|
||||
height: 26.67vw;
|
||||
|
||||
.close_icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
::v-deep .van-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_icon_box {
|
||||
font-size: 3.2vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1DB1FF;
|
||||
border: 0.27vw dashed #1DB1FF;
|
||||
text-align: center;
|
||||
width: 29.33vw;
|
||||
height: 16.53vw;
|
||||
border-radius: 2.67vw;
|
||||
}
|
||||
}
|
||||
|
||||
.clockInList {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 4vw;
|
||||
|
||||
.clockInList_item {
|
||||
padding: 4vw 2vw;
|
||||
width: 43vw;
|
||||
height: 18vw;
|
||||
background: #EDEDED;
|
||||
border-radius: 2.67vw;
|
||||
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: 4.27vw;
|
||||
}
|
||||
|
||||
.dec {
|
||||
color: #75787F;
|
||||
font-size: 3.73vw;
|
||||
margin-top: 1.33vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.van-tabs__nav--line {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.van-tabs__wrap {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.van-tabs__line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.van-tab {
|
||||
flex: initial;
|
||||
font-size: 4vw;
|
||||
width: auto !important;
|
||||
height: 9.33vw;
|
||||
padding: 0 2.67vw;
|
||||
border: 0.27vw solid #EDEDED;
|
||||
color: #75787F;
|
||||
flex-shrink: 0;
|
||||
border-radius: 2vw;
|
||||
margin-right: 2vw;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.van-tab--active {
|
||||
background: rgba(62,110,232,0.2);
|
||||
border: 0.27vw solid #3E6EE8;
|
||||
color: #3E6EE8 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user