80%
This commit is contained in:
@ -1,6 +1,75 @@
|
||||
<template>
|
||||
<view>
|
||||
<h1>考勤管理</h1>
|
||||
<view class="page-top">
|
||||
<u-navbar title="考勤管理" placeholder bgColor="transparent" :leftIcon="null" titleStyle="color:white">
|
||||
</u-navbar>
|
||||
<view class="search-bar">
|
||||
<u--input placeholder="请输入项目名称" prefixIcon="search" prefixIconStyle="font-size: 32px;color: #909399">
|
||||
</u--input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sized-box" style="height: 184rpx;"></view>
|
||||
<view class="sized-box" style="height:var(--status-bar-height);"></view>
|
||||
|
||||
<view class="project-list">
|
||||
<navigator class="project-item" url="/pages/attendance/attendance_detail/attendance_detail"
|
||||
v-for="(item,index) in projectList" :key="index">
|
||||
<view>
|
||||
<view class="title">{{item.name}}</view>
|
||||
<view class="desc">
|
||||
<view class="desc-item">
|
||||
<text class="key">
|
||||
本周应出勤人：
|
||||
</text>
|
||||
<text class="value">
|
||||
{{item.shouldAttendance}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">
|
||||
本周实际出勤人：
|
||||
</text>
|
||||
<text class="value">
|
||||
{{item.shouldAttendance}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">
|
||||
本周请假人数：
|
||||
</text>
|
||||
<text class="value">
|
||||
{{item.shouldAttendance}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">
|
||||
本周旷工人数：
|
||||
</text>
|
||||
<text class="value">
|
||||
{{item.shouldAttendance}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">
|
||||
本周迟到人数：
|
||||
</text>
|
||||
<text class="value">
|
||||
{{item.shouldAttendance}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">
|
||||
本周早退人数：
|
||||
</text>
|
||||
<text class="value">
|
||||
{{item.shouldAttendance}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -8,15 +77,101 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
projectList: [{
|
||||
name: '项目1',
|
||||
actualAttendance: 233,
|
||||
shouldAttendance: 234
|
||||
}, {
|
||||
name: '项目2',
|
||||
actualAttendance: 233,
|
||||
shouldAttendance: 234
|
||||
}, {
|
||||
name: '项目3',
|
||||
actualAttendance: 233,
|
||||
shouldAttendance: 234
|
||||
}, {
|
||||
name: '项目4',
|
||||
actualAttendance: 233,
|
||||
shouldAttendance: 234
|
||||
}, {
|
||||
name: '项目5',
|
||||
actualAttendance: 233,
|
||||
shouldAttendance: 234
|
||||
}, ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
page {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.page-top {
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
background: linear-gradient(to top right, #496df6, #2e9ee8);
|
||||
}
|
||||
|
||||
|
||||
.search-bar {
|
||||
margin: 0 32rpx 0;
|
||||
height: 80rpx;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.u-input {
|
||||
height: 48rpx;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.project-list {
|
||||
margin: 28rpx 20rpx 0;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.project-item {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
padding: 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
color: #232930;
|
||||
line-height: 48rpx;
|
||||
font-weight: 400;
|
||||
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 20rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-gap: 28rpx;
|
||||
|
||||
.key {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 28rpx;
|
||||
color: #8F959E;
|
||||
line-height: 44rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 44rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
85
pages/attendance/attendance_detail/attendance_detail.vue
Normal file
85
pages/attendance/attendance_detail/attendance_detail.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-top">
|
||||
<u-navbar title="考勤管理" placeholder bgColor="transparent" autoBack leftIconColor="#fff"
|
||||
titleStyle="color:white">
|
||||
</u-navbar>
|
||||
|
||||
</view>
|
||||
<view class="sizedbox" style="height: 88rpx;">
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<view :class="`tab-item ${activeIndex==0?'active':''}`" @tap="switchTab(0)">考勤统计</view>
|
||||
<view :class="`tab-item ${activeIndex==1?'active':''}`" @tap="switchTab(1)">考勤记录</view>
|
||||
<view :class="`tab-item ${activeIndex==2?'active':''}`" @tap="switchTab(2)">出入记录</view>
|
||||
</view>
|
||||
<view class="sizedbox" style="height: 80rpx;">
|
||||
</view>
|
||||
<view class="sized-box" style="height:var(--status-bar-height);"></view>
|
||||
<Statistics v-if="activeIndex==0"></Statistics>
|
||||
<Record v-else-if="activeIndex==1"></Record>
|
||||
<IoRecord v-else-if="activeIndex==2"></IoRecord>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Statistics from './statistics/statistics.vue'
|
||||
import Record from './record/record.vue'
|
||||
import IoRecord from './io_record/io_record.vue'
|
||||
export default {
|
||||
name: 'AttendanceDetail',
|
||||
components: {
|
||||
Record,
|
||||
IoRecord,
|
||||
Statistics
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
this.activeIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.page-top {
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
background: linear-gradient(to top right, #496df6, #2e9ee8);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 100rpx 0;
|
||||
height: 80rpx;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 99;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.tab-item {
|
||||
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 30rpx;
|
||||
color: #8F959E;
|
||||
font-weight: 400;
|
||||
|
||||
&.active {
|
||||
color: #0F40F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
195
pages/attendance/attendance_detail/io_record/io_record.vue
Normal file
195
pages/attendance/attendance_detail/io_record/io_record.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-datetime-picker :show="showDatePicker" v-model="date" mode="date" @cancel="showDatePicker=false"
|
||||
@confirm="showDatePicker=false" @change="dateChanged">
|
||||
</u-datetime-picker>
|
||||
<view class="date-picker-btn" @tap="showDatePicker=true">
|
||||
{{new Date(date).getFullYear()}}-{{new Date(date).getMonth()+1}}-{{new Date(date).getDate()}}
|
||||
<u-icon name="calendar" color="#2979ff" size="24"></u-icon>
|
||||
</view>
|
||||
<view class="record-list">
|
||||
<view class="record-item" v-for="(item ,index) in recordList" :key="index">
|
||||
<!-- <view class="record-status"
|
||||
:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
|
||||
<text>{{statusDict[item.status].name}}</text>
|
||||
</view> -->
|
||||
<image class="photo" src="../../../../attendance_photo_example.png" mode=""></image>
|
||||
<view class="desc">
|
||||
<view class="desc-item">
|
||||
<text class="key">姓名：</text>
|
||||
<text class="value">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">年龄：</text>
|
||||
<text class="value">{{item.age}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">联系方式：</text>
|
||||
<text class="value">{{item.phone}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">身份证号：</text>
|
||||
<text class="value">{{item.idCard}}</text>
|
||||
</view>
|
||||
|
||||
<view class="desc-item-row">
|
||||
<view class="desc-item">
|
||||
<text class="key">进门时间：</text>
|
||||
<text class="value">{{item.time}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">出门时间：</text>
|
||||
<text class="value">{{item.time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Record',
|
||||
data() {
|
||||
return {
|
||||
statusDict: {
|
||||
0: {
|
||||
name: '正常',
|
||||
color1: '#39DAAA',
|
||||
color2: '#02C489'
|
||||
},
|
||||
1: {
|
||||
name: '异常',
|
||||
color1: '#FD934E',
|
||||
color2: '#FF7442'
|
||||
},
|
||||
|
||||
},
|
||||
date: new Date().getTime(),
|
||||
showDatePicker: false,
|
||||
recordList: [{
|
||||
name: '张十八',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '12:32:43',
|
||||
status: 0,
|
||||
|
||||
}, {
|
||||
name: '张十九',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '12:32:43',
|
||||
status: 1,
|
||||
}, {
|
||||
name: '张三十七',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '12:32:43',
|
||||
status: 0,
|
||||
}, {
|
||||
name: '张五十六',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '12:32:43',
|
||||
status: 1,
|
||||
}, {
|
||||
name: '张九十三',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '12:32:43',
|
||||
status: 0,
|
||||
}, ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmDatePicker(date) {
|
||||
this.showDatePicker = false
|
||||
// this.date = date.value
|
||||
},
|
||||
dateChanged(date) {
|
||||
console.log(date);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.date-picker-btn {
|
||||
width: 300rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid #ccc;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
padding: 0 20rpx 20rpx;
|
||||
|
||||
.record-item {
|
||||
position: relative;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 112rpx;
|
||||
height: 48rpx;
|
||||
background-image: linear-gradient(219deg, #FD934E 0%, #FF7442 99%);
|
||||
border-radius: 0 8rpx 0 32rpx;
|
||||
|
||||
text {
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 164rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-left: 20rpx;
|
||||
|
||||
.desc-item {
|
||||
.key {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24rpx;
|
||||
color: #8F959E;
|
||||
line-height: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
187
pages/attendance/attendance_detail/record/record.vue
Normal file
187
pages/attendance/attendance_detail/record/record.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-datetime-picker :show="showDatePicker" v-model="date" mode="date" @cancel="showDatePicker=false"
|
||||
@confirm="showDatePicker=false" @change="dateChanged">
|
||||
</u-datetime-picker>
|
||||
<view class="date-picker-btn" @tap="showDatePicker=true">
|
||||
{{new Date(date).getFullYear()}}-{{new Date(date).getMonth()+1}}-{{new Date(date).getDate()}}
|
||||
<u-icon name="calendar" color="#2979ff" size="24"></u-icon>
|
||||
</view>
|
||||
<view class="record-list">
|
||||
<view class="record-item" v-for="(item ,index) in recordList" :key="index">
|
||||
<view class="record-status"
|
||||
:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
|
||||
<text>{{statusDict[item.status].name}}</text>
|
||||
</view>
|
||||
<image class="photo" src="../../../../attendance_photo_example.png" mode=""></image>
|
||||
<view class="desc">
|
||||
<view class="desc-item">
|
||||
<text class="key">姓名：</text>
|
||||
<text class="value">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">年龄：</text>
|
||||
<text class="value">{{item.age}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">联系方式：</text>
|
||||
<text class="value">{{item.phone}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">身份证号：</text>
|
||||
<text class="value">{{item.idCard}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">打卡时间：</text>
|
||||
<text class="value">{{item.time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Record',
|
||||
data() {
|
||||
return {
|
||||
statusDict: {
|
||||
0: {
|
||||
name: '正常',
|
||||
color1: '#39DAAA',
|
||||
color2: '#02C489'
|
||||
},
|
||||
1: {
|
||||
name: '异常',
|
||||
color1: '#FD934E',
|
||||
color2: '#FF7442'
|
||||
},
|
||||
|
||||
},
|
||||
date: new Date().getTime(),
|
||||
showDatePicker: false,
|
||||
recordList: [{
|
||||
name: '张三',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '2020-12-43 12:32:43',
|
||||
status: 0,
|
||||
|
||||
}, {
|
||||
name: '张四',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '2020-12-43 12:32:43',
|
||||
status: 1,
|
||||
}, {
|
||||
name: '张七',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '2020-12-43 12:32:43',
|
||||
status: 0,
|
||||
}, {
|
||||
name: '张十一',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '2020-12-43 12:32:43',
|
||||
status: 1,
|
||||
}, {
|
||||
name: '张十八',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '2020-12-43 12:32:43',
|
||||
status: 0,
|
||||
}, ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmDatePicker(date) {
|
||||
this.showDatePicker = false
|
||||
// this.date = date.value
|
||||
},
|
||||
dateChanged(date) {
|
||||
console.log(date);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.date-picker-btn {
|
||||
width: 300rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid #ccc;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
padding: 0 20rpx 20rpx;
|
||||
|
||||
.record-item {
|
||||
position: relative;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 112rpx;
|
||||
height: 48rpx;
|
||||
background-image: linear-gradient(219deg, #FD934E 0%, #FF7442 99%);
|
||||
border-radius: 0 8rpx 0 32rpx;
|
||||
|
||||
text {
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 164rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-left: 20rpx;
|
||||
|
||||
.desc-item {
|
||||
.key {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24rpx;
|
||||
color: #8F959E;
|
||||
line-height: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
160
pages/attendance/attendance_detail/statistics/statistics.vue
Normal file
160
pages/attendance/attendance_detail/statistics/statistics.vue
Normal file
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="tabs">
|
||||
<view :class="`tab-item ${type==0?'active':''}`" @tap="switchTab(0)">日</view>
|
||||
<view :class="`tab-item ${type==1?'active':''}`" @tap="switchTab(1)">周</view>
|
||||
<view :class="`tab-item ${type==2?'active':''}`" @tap="switchTab(2)">月</view>
|
||||
</view>
|
||||
<view class="sizedbox" style="height: 60rpx;"></view>
|
||||
<view class="attendance-list">
|
||||
<view class="attendance-item" v-for="(item ,index) in statisticsList" :key="index">
|
||||
<view class="time" v-if="type==0">
|
||||
20220708
|
||||
</view>
|
||||
<view class="time" v-if="type==1">
|
||||
2022七月第一周
|
||||
</view>
|
||||
<view class="time" v-if="type==2">
|
||||
2022年1月
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<view class="key">应出勤人数：</view>
|
||||
<view class="value">{{item.should}}</view>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<view class="key">实际出勤人数：</view>
|
||||
<view class="value">{{item.actu}}</view>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<view class="key">出勤率：</view>
|
||||
<view class="value">{{item.ratio}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 0, // 0：日，1：周，2：月
|
||||
statisticsList: [{
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
this.type = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabs {
|
||||
position: fixed;
|
||||
width: 750rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 200rpx 0;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.tab-item {
|
||||
font-size: 28rpx;
|
||||
color: #8F959E;
|
||||
font-weight: 400;
|
||||
|
||||
&.active {
|
||||
color: #0F40F5;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.attendance-list {
|
||||
padding: 20rpx;
|
||||
|
||||
.attendance-item {
|
||||
border-radius: 8rpx;
|
||||
padding: 28rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.desc-item {
|
||||
display: flex;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.key {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26rpx;
|
||||
color: #8F959E;
|
||||
line-height: 30rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
line-height: 30rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +1,18 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="search-bar">
|
||||
<input type="text">
|
||||
<view class="page-top">
|
||||
<u-navbar title="视频监控" placeholder bgColor="transparent" :leftIcon="null" titleStyle="color:white">
|
||||
</u-navbar>
|
||||
<view class="search-bar">
|
||||
<u--input placeholder="请输入摄像头名称" prefixIcon="search" prefixIconStyle="font-size: 32px;color: #909399">
|
||||
</u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sized-box" style="height: 194rpx;"></view>
|
||||
<view class="sized-box" style="height:var(--status-bar-height);"></view>
|
||||
<view class="site-list">
|
||||
<view class="site-item" v-for="item in siteList" :key="item.id">
|
||||
<!-- <navigator url="/pages/monitor/site-detail/site-detail"> -->
|
||||
<view class="site-item" v-for="item in siteList" :key="item.id" @tap="routerGo">
|
||||
<view class="site-title">
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
@ -20,6 +28,8 @@
|
||||
<text>{{item.time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- </navigator> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -146,44 +156,75 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
routerGo() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/monitor/site-detail/site-detail'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.page-top {
|
||||
z-index: 99;
|
||||
background: linear-gradient(to top right, #496df6, #2e9ee8);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
|
||||
.search-bar {
|
||||
margin: 0 32rpx 0;
|
||||
height: 80rpx;
|
||||
padding-bottom: 16rpx;
|
||||
|
||||
.u-input {
|
||||
height: 48rpx;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-list {
|
||||
.site-item {
|
||||
box-shadow: 0 6rpx 0 rgba(0, 0, 0, 0.4);
|
||||
// box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.4);
|
||||
margin-left: 16rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-bottom: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.site-title {
|
||||
background-color: rgb(153, 153, 153);
|
||||
background-color: #949494;
|
||||
width: 92px;
|
||||
height: 30px;
|
||||
line-height: 20px;
|
||||
border-radius: 20rpx 0rpx 18rpx 0rpx;
|
||||
border-radius: 8rpx 0rpx 18rpx 0rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
uni-text {
|
||||
text {
|
||||
font-family: YSBiaoTiHei-regular;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.camera-list {
|
||||
padding: 0 20rpx 0;
|
||||
margin-top: 12rpx;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.camera-item {
|
||||
background-color: aquamarine;
|
||||
// margin-right: 20rpx;
|
||||
// background-color: aquamarine;
|
||||
|
||||
.camera-image {
|
||||
width: 200rpx;
|
||||
@ -198,10 +239,12 @@
|
||||
}
|
||||
|
||||
.site-time {
|
||||
padding-right: 20rpx;
|
||||
margin-top: 26rpx;
|
||||
border-radius: 0 0 8rpx 8rpx;
|
||||
text-align: right;
|
||||
height: 30rpx;
|
||||
font-size: 28rpx;
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
background-color: #d7d7d7;
|
||||
}
|
||||
|
||||
99
pages/monitor/site-detail/site-detail.vue
Normal file
99
pages/monitor/site-detail/site-detail.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="camera-list">
|
||||
<view class="camera-item" v-for="(item ,index) in cameraList" :key="index">
|
||||
<view class="camera-name">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<image class='camera-thumb' src="../../../monitor_detail_example.png" mode=""></image>
|
||||
<view class="overlay">
|
||||
<u-icon name="play-circle" size='48'></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cameraList: [{
|
||||
name: 'CAMERA01'
|
||||
},
|
||||
{
|
||||
name: 'CAMERA02'
|
||||
},
|
||||
{
|
||||
name: 'CAMERA03'
|
||||
},
|
||||
{
|
||||
name: 'CAMERA04'
|
||||
},
|
||||
{
|
||||
name: 'CAMERA06'
|
||||
},
|
||||
{
|
||||
name: 'CAMERA07'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.camera-list {
|
||||
padding: 0rpx 20rpx 0rpx;
|
||||
|
||||
.camera-item {
|
||||
// height: 300rpx;
|
||||
background-color: white;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
|
||||
.camera-name {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
background-color: #c6c6c6;
|
||||
border-radius: 10rpx 0 10rpx 0;
|
||||
color: white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 20rpx;
|
||||
height: 50rpx;
|
||||
width: 160rpx;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.camera-thumb {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 99;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-top">
|
||||
<u-navbar title="个人中心" placeholder bgColor="transparent" :leftIcon="null" titleStyle="color:white">
|
||||
</u-navbar>
|
||||
</view>
|
||||
<view class="sizedbox" style="height: 88rpx;"></view>
|
||||
<view class="avatar_name">
|
||||
<view class="avatar">
|
||||
<image src="../../static/personal/avatar_sample.png" mode=""></image>
|
||||
@ -92,8 +97,16 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-top {
|
||||
z-index: 99;
|
||||
background: linear-gradient(to top right, #496df6, #2e9ee8);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.avatar_name {
|
||||
border: 1px solid rgb(186, 186, 186);
|
||||
border-bottom: 2rpx solid #f4f4f4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 180rpx;
|
||||
@ -119,8 +132,9 @@
|
||||
.user-info-item {
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
padding-left: 20rpx;
|
||||
align-items: center;
|
||||
border: 1px solid #bbb;
|
||||
border-bottom: 2rpx solid #f4f4f4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="quality-issue-item">
|
||||
<image class="banner" src="@/static/quality_manage_example.png"></image>
|
||||
<view class="issue-title">
|
||||
<text>电缆</text>
|
||||
<view class="issue-level">
|
||||
三级
|
||||
</view>
|
||||
</view>
|
||||
<view class="issue-content">
|
||||
<view class="issue-item" v-for="item in Object.keys(fields)" :key="item">
|
||||
<text class="key">
|
||||
{{fields[item]}}
|
||||
</text>
|
||||
<text class="value">
|
||||
{{data && data[item]}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
fields: {
|
||||
type: Object
|
||||
},
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .quality-issues {
|
||||
// padding: 20rpx;
|
||||
|
||||
.quality-issue-item:not(:last-child) {
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.quality-issue-item {
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 454rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
|
||||
.issue-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 28rpx;
|
||||
|
||||
text {
|
||||
margin-left: 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #232930;
|
||||
line-height: 48rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.issue-level {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
width: 120rpx;
|
||||
height: 48rpx;
|
||||
background-image: linear-gradient(219deg, #39DAAA 0%, #02C489 99%);
|
||||
border-radius: 0px 8px 0px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.issue-content {
|
||||
padding: 14rpx 20rpx 11rpx;
|
||||
|
||||
.issue-item {
|
||||
display: flex;
|
||||
margin-bottom: 28rpx;
|
||||
|
||||
.key {
|
||||
width: 120rpx;
|
||||
display: block;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #8F959E;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 540rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 44rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
</style>
|
||||
@ -5,6 +5,7 @@
|
||||
<ProjectDetailHome v-if="activedIndex==0"></ProjectDetailHome>
|
||||
<ProjectProgress v-else-if="activedIndex==1"> </ProjectProgress>
|
||||
<QualityManage v-else-if="activedIndex==2"> </QualityManage>
|
||||
<SecurityManage v-else-if="activedIndex==3"> </SecurityManage>
|
||||
<view v-else>
|
||||
<text>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit dolor similique molestiae, nostrum
|
||||
ducimus provident aperiam consequuntur adipisci id in impedit rem officiis ipsam alias error! Ipsam
|
||||
@ -17,16 +18,18 @@
|
||||
import ProjectDetailHome from './project_detail_home/project_detail_home.vue'
|
||||
import ProjectProgress from './project_progress/project_progress.vue'
|
||||
import QualityManage from './quality_manage/quality_manage.vue'
|
||||
import SecurityManage from './security_manage/security_manage.vue'
|
||||
export default {
|
||||
name: 'ProjectHome',
|
||||
components: {
|
||||
ProjectDetailHome,
|
||||
ProjectProgress,
|
||||
QualityManage
|
||||
QualityManage,
|
||||
SecurityManage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activedIndex: 2,
|
||||
activedIndex: 0,
|
||||
tabList: [{
|
||||
name: '主页'
|
||||
}, {
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<view>
|
||||
质量巡检
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="quality-issue-item">
|
||||
<image class="banner" src="@/static/quality_manage_example.png"></image>
|
||||
<view class="issue-title">
|
||||
<text>电缆</text>
|
||||
<view class="issue-level">
|
||||
三级
|
||||
</view>
|
||||
</view>
|
||||
<view class="issue-content">
|
||||
<view class="issue-item" v-for="item in Object.keys(fields)" :key="item">
|
||||
<text class="key">
|
||||
{{fields[item]}}
|
||||
</text>
|
||||
<text class="value">
|
||||
{{data && data[item]}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
fields: {
|
||||
type: Object
|
||||
},
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .quality-issues {
|
||||
// padding: 20rpx;
|
||||
|
||||
.quality-issue-item:not(:last-child) {
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.quality-issue-item {
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 454rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
|
||||
.issue-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 28rpx;
|
||||
|
||||
text {
|
||||
margin-left: 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #232930;
|
||||
line-height: 48rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.issue-level {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
width: 120rpx;
|
||||
height: 48rpx;
|
||||
background-image: linear-gradient(219deg, #39DAAA 0%, #02C489 99%);
|
||||
border-radius: 0px 8px 0px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.issue-content {
|
||||
padding: 14rpx 20rpx 11rpx;
|
||||
|
||||
.issue-item {
|
||||
display: flex;
|
||||
margin-bottom: 28rpx;
|
||||
|
||||
.key {
|
||||
width: 120rpx;
|
||||
display: block;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #8F959E;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 540rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 44rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
</style>
|
||||
@ -1,44 +1,119 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="quality-issues">
|
||||
<view class="quality-issue-item">
|
||||
<image class="banner" src="@/static/quality_manage_example.png"></image>
|
||||
<view class="issue-title"></view>
|
||||
<view class="filter-bar">
|
||||
<view :class="`inspection left-btn ${activedIndex==0? 'active':''}`" @tap="switchTab(0)">
|
||||
质量巡检
|
||||
</view>
|
||||
<view :class="`rectification left-btn ${activedIndex==1? 'active':''}`" @tap="switchTab(1)">
|
||||
质量整改
|
||||
</view>
|
||||
<u-button class='filter-btn' icon="map" text="筛选"></u-button>
|
||||
</view>
|
||||
<view class="quality-inspection" v-if="activedIndex==0">
|
||||
<IssueItems :fields="{inspectDate:'巡检日期',person:'填报人员',content:'检查情况',prevention:'纠正预防措施',remark:'备注',}"
|
||||
:data="{
|
||||
inspectDate:'2022/07/03',person:'离散多',content:'墙体是否水平线垂直',remark:'无',prevention:'无'
|
||||
}">
|
||||
</IssueItems>
|
||||
<IssueItems :fields="{inspectDate:'巡检日期',person:'填报人员',content:'检查情况',prevention:'纠正预防措施',remark:'备注',}"
|
||||
:data="{
|
||||
inspectDate:'2022/07/03',person:'离散多',content:'墙体是否水平线垂直',remark:'无',prevention:'无'
|
||||
}">
|
||||
</IssueItems>
|
||||
<IssueItems :fields="{inspectDate:'巡检日期',person:'填报人员',content:'检查情况',prevention:'纠正预防措施',remark:'备注',}"
|
||||
:data="{
|
||||
inspectDate:'2022/07/03',person:'离散多',content:'墙体是否水平线垂直',remark:'无',prevention:'无'
|
||||
}">
|
||||
</IssueItems>
|
||||
</view>
|
||||
<view class="quality-inspection" v-if="activedIndex==1">
|
||||
<IssueItems
|
||||
:fields="{issuesName:'质量问题',person:'填报人员',submitDate:'填报日期',content:'整改内容',assignDate:'指派日期',feedback:'整改反馈',rectificationDate:'整改日期'}"
|
||||
:data="{
|
||||
issuesName:'采购电缆发现存在残次品',person:'离散多',submitDate:'2022/07/03',content:'发现800捆电缆中66捆存在残次品，需联系供应商进行全面更换',assignDate:'2022/07/03',
|
||||
feedback:'已联系供应商进行全面更换，等待更换',rectificationDate:'2022/07/03',assignDate:'2020/11/32'
|
||||
}">
|
||||
</IssueItems>
|
||||
<IssueItems
|
||||
:fields="{issuesName:'质量问题',person:'填报人员',submitDate:'填报日期',content:'整改内容',assignDate:'指派日期',feedback:'整改反馈',rectificationDate:'整改日期'}"
|
||||
:data="{
|
||||
issuesName:'采购电缆发现存在残次品',person:'离散多',submitDate:'2022/07/03',content:'发现800捆电缆中66捆存在残次品，需联系供应商进行全面更换',assignDate:'2022/07/03',
|
||||
feedback:'已联系供应商进行全面更换，等待更换',rectificationDate:'2022/07/03',assignDate:'2020/11/32'
|
||||
}">
|
||||
</IssueItems>
|
||||
<IssueItems
|
||||
:fields="{issuesName:'质量问题',person:'填报人员',submitDate:'填报日期',content:'整改内容',assignDate:'指派日期',feedback:'整改反馈',rectificationDate:'整改日期'}"
|
||||
:data="{
|
||||
issuesName:'采购电缆发现存在残次品',person:'离散多',submitDate:'2022/07/03',content:'发现800捆电缆中66捆存在残次品，需联系供应商进行全面更换',assignDate:'2022/07/03',
|
||||
feedback:'已联系供应商进行全面更换，等待更换',rectificationDate:'2022/07/03',assignDate:'2020/11/32'
|
||||
}">
|
||||
</IssueItems>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IssueItems from './issue-item/issue-item.vue'
|
||||
import Inspection from './inspection/inspection.vue'
|
||||
export default {
|
||||
components: {
|
||||
IssueItems,
|
||||
Inspection
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
activedIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
switchTab(index) {
|
||||
this.activedIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.quality-issues {
|
||||
.quality-inspection {
|
||||
// margin-top: 88rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.quality-issue-item:not(:last-child) {
|
||||
margin-bottom: 36rpx;
|
||||
.filter-bar {
|
||||
// position: fixed;
|
||||
width: 750rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
// z-index: 99;
|
||||
|
||||
.left-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 187rpx;
|
||||
height: 88rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24rpx;
|
||||
color: #8F959E;
|
||||
letter-spacing: 0;
|
||||
line-height: 24rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.quality-issue-item {
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 454rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
.active {
|
||||
color: #466DF6;
|
||||
}
|
||||
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
.inspection {}
|
||||
|
||||
.rectification {}
|
||||
|
||||
.filter-btn {
|
||||
width: 122rpx;
|
||||
height: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,22 +1,86 @@
|
||||
<template>
|
||||
<view>
|
||||
安全管理
|
||||
<view class="filter-bar">
|
||||
<view :class="`inspection left-btn ${activedIndex==0? 'active':''}`" @tap="switchTab(0)">
|
||||
安全管理日志
|
||||
</view>
|
||||
<view :class="`rectification left-btn ${activedIndex==1? 'active':''}`" @tap="switchTab(1)">
|
||||
安全检查记录
|
||||
</view>
|
||||
<u-button class='filter-btn' icon="map" text="筛选"></u-button>
|
||||
</view>
|
||||
<view class="quality-issues">
|
||||
<IssueItems
|
||||
:fields="{issuesName:'质量问题',person:'填报人员',submitDate:'填报日期',content:'整改内容',assignDate:'指派日期',feedback:'整改反馈',rectificationDate:'整改日期'}"
|
||||
:data="{
|
||||
issuesName:'采购电缆发现存在残次品',person:'离散多',submitDate:'2022/07/03',content:'发现800捆电缆中66捆存在残次品，需联系供应商进行全面更换',assignDate:'2022/07/03',
|
||||
feedback:'已联系供应商进行全面更换，等待更换',rectificationDate:'2022/07/03',assignDate:'2020/11/32'
|
||||
}">
|
||||
</IssueItems>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IssueItems from '../issue-item/issue-item.vue'
|
||||
// import Inspection from './inspection/inspection.vue'
|
||||
export default {
|
||||
components: {
|
||||
IssueItems,
|
||||
// Inspection
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
activedIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
switchTab(index) {
|
||||
this.activedIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.quality-issues {
|
||||
// margin-top: 88rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
width: 750rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
.left-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 187rpx;
|
||||
height: 88rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24rpx;
|
||||
color: #8F959E;
|
||||
letter-spacing: 0;
|
||||
line-height: 24rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #466DF6;
|
||||
}
|
||||
|
||||
.inspection {}
|
||||
|
||||
.rectification {}
|
||||
|
||||
.filter-btn {
|
||||
width: 122rpx;
|
||||
height: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-top" style="background-color: aqua">
|
||||
<view class="page-top">
|
||||
<u-navbar title="个人中心" placeholder bgColor="transparent" :leftIcon="null" titleStyle="color:white">
|
||||
</u-navbar>
|
||||
<view class="search-bar">
|
||||
@ -10,9 +10,9 @@
|
||||
|
||||
<u-tabs :list="tabList" itemStyle="width:18%;height:80rpx" activeStyle="color:white"
|
||||
inactiveStyle="color:white"></u-tabs>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="sized-box" style="height: 248rpx;"></view>
|
||||
<view class="sized-box" style="height:var(--status-bar-height);"></view>
|
||||
<view class="filter-bar">
|
||||
<view class="filter-item">
|
||||
<text>时间</text>
|
||||
@ -31,91 +31,91 @@
|
||||
<u-icon name="arrow-down-fill" color="#8F959E" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scroll-y">
|
||||
<u-swipe-action class="swiper-item" v-for="item in projectList" :key="item.id">
|
||||
<u-swipe-action-item :options="options">
|
||||
<view class="project-item" @tap="goDetail">
|
||||
<view class="project-status"
|
||||
:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
|
||||
<text>{{statusDict[item.status].name}}</text>
|
||||
</view>
|
||||
<text>{{item.name}}</text>
|
||||
<view class="project-desc">
|
||||
|
||||
<view class="project-desc-item">
|
||||
<text class="project-desc-key">
|
||||
建设性质
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.type}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item" style="text-align: end;">
|
||||
<text class="project-desc-key">
|
||||
施工单位
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.unit}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item">
|
||||
<text class="project-desc-key">
|
||||
监理单位
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.supervisorUnit}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item" style="text-align: end;">
|
||||
<text class="project-desc-key">
|
||||
总面积
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.area}}平方
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item">
|
||||
<text class="project-desc-key">
|
||||
总投资
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.invest}}万元
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item" style="text-align: end;">
|
||||
<text class="project-desc-key">
|
||||
建设性质
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.responsible}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<!-- <divider></divider> -->
|
||||
<view class="project-desc-item">
|
||||
<text class="project-desc-key">
|
||||
项目编号
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.id}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item" style="text-align: end;">
|
||||
<text class="project-desc-key">
|
||||
立项时间
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.createTime}}
|
||||
</text>
|
||||
</view>
|
||||
<u-swipe-action class="swiper-item" v-for="item in projectList" :key="item.id">
|
||||
<u-swipe-action-item :options="options">
|
||||
<view class="project-item" @tap="goDetail">
|
||||
<view class="project-status"
|
||||
:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
|
||||
<text>{{statusDict[item.status].name}}</text>
|
||||
</view>
|
||||
<text>{{item.name}}</text>
|
||||
<view class="project-desc">
|
||||
|
||||
<view class="project-desc-item">
|
||||
<text class="project-desc-key">
|
||||
建设性质
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.type}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item" style="text-align: end;">
|
||||
<text class="project-desc-key">
|
||||
施工单位
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.unit}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item">
|
||||
<text class="project-desc-key">
|
||||
监理单位
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.supervisorUnit}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item" style="text-align: end;">
|
||||
<text class="project-desc-key">
|
||||
总面积
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.area}}平方
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item">
|
||||
<text class="project-desc-key">
|
||||
总投资
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.invest}}万元
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item" style="text-align: end;">
|
||||
<text class="project-desc-key">
|
||||
建设性质
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.responsible}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<!-- <divider></divider> -->
|
||||
<view class="project-desc-item">
|
||||
<text class="project-desc-key">
|
||||
项目编号
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.id}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="project-desc-item" style="text-align: end;">
|
||||
<text class="project-desc-key">
|
||||
立项时间
|
||||
</text>
|
||||
<text class="project-desc-value">
|
||||
{{item.createTime}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- </navigator> -->
|
||||
</u-swipe-action-item>
|
||||
</u-swipe-action>
|
||||
|
||||
<!-- </navigator> -->
|
||||
</u-swipe-action-item>
|
||||
</u-swipe-action>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -259,11 +259,15 @@
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.page-top {
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
background: linear-gradient(to top right, #496df6, #2e9ee8);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
margin: 0 32rpx 0;
|
||||
height: 80rpx;
|
||||
|
||||
.u-input {
|
||||
height: 48rpx;
|
||||
|
||||
Reference in New Issue
Block a user