You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

968 lines
18 KiB

<template>
<view class="page">
<view class="top">
<view class="pure_top">
</view>
<view class="calendar">
<view class="date_year">
<view class="blueblock">
</view>
<view class="year">
<picker :value="dates.year" mode="date" fields="year" @change="dateYear($event)">
<text style="margin-right: 12rpx;">{{dates.year}}</text>
</picker>
<image src="../../static/down.png" mode=""></image>
</view>
<view class="blackblock">
</view>
<text>{{today.month}}.{{dates.day}}</text>
</view>
<view class="monthbox">
<view :class="{month_color : item==dates.month,month_color2 : item>month&&today.year<=dates.year}"
class="month_class" v-for="(item,key) in months" :key="key" @tap="dateMonth(item)">
<text>{{item}}</text>
</view>
</view>
</view>
</view>
<view class="taskbox">
<view class="itembox" v-for="(item,key) in user" :key="key">
<view class="top">
<view class="left">
<img src="@/static/4412.png" alt="">
<view class="">
<text>{{item.name}}</text>
</view>
</view>
<view class="right">
</view>
</view>
<view class="charts-box" style="display: flex;">
<img src="@/static/dadui/10.png" alt="">
<view style="width: 40%;">
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" v-if="index3"/>
</view>
<view
style="width: 60%; display: flex;justify-content: center;align-items: center;flex-direction: column;">
<view class="tagbox" v-for="(item,key) in chartData.series[0].data" :key="key">
<view class="tag" :style="'background:'+opts.color[key]+';'">
</view>
<text>{{item.name}}----{{item.value}}个</text>
</view>
</view>
</view>
<view style="width: 100rpx; margin-top: 10rpx;">
<button @tap="index=true">新增</button>
</view>
</view>
</view>
<view class="listbox">
<view class="item" v-for="(item,key) in list" :key="key">
<view class="typebox">
<view
style="width: 12rpx; height: 34rpx; margin-top: 6rpx; background-color: #9D80FF; color: #9D80FF ;">
1
</view>
<view class="type">
{{item.taskType}}
</view>
</view>
<view class="namebox">
<view class="name">
{{item.company.companyName}}
</view>
<view style=" width: 40%;">
<view v-if="item.company.useNature=='重点单位'" class="tag" style=" float: right;">
{{item.company.useNature}}
</view>
<view v-else class="tag2" style=" float: right;">
{{item.company.useNature}}
</view>
</view>
</view>
<view class="staffbox">
<view class="staff" style="flex: 1;">
<view>主负责人:</view>
<view class="zhu">{{item.organization.name}}</view>
</view>
<view v-if="item.approvalStatus=='通过'||item.approvalStatus=='驳回'" class="jiancha"
:class="{jiancha_color:item.approvalStatus=='通过'}">
已{{item.approvalStatus}}
</view>
<view v-else class="jiancha" style="color: #FFBA19;">
{{item.approvalStatus}}
</view>
</view>
<view style="width: 70%;">
<view>
<view class="staffbox">
<view class="staff2">
<view>协助人员:</view>
<view class="staff_namebox">
<text v-for="(i,k) in item.supervisors" :key="k" style="">{{i.name}}</text>
</view>
</view>
<!-- <view class="implement">
<button>执行</button>
</view> -->
</view>
<view class="staffbox">
<view class="staff">
<view>申请时间:</view>
<view>{{item.creationTime}}</view>
<view style="color: #317AFF;" @tap="chakan(item)">
查看
</view>
</view>
<!-- -->
</view>
</view>
<view class="implement">
<!-- <view class="button">
<button @tap="start(item)">执行</button>
</view> -->
</view>
</view>
</view>
</view>
<view class="taskadd" v-if="index">
<view class="itembox">
<view class="item_top">
<view class="">
任务申领
</view>
<view class="" @tap="indexs()">
x
</view>
</view>
<view class="item_content" v-if="index">
<TaskAdd @apply="apply"></TaskAdd>
</view>
<view class="item_content" v-if="index2">
<TaskDet @apply="apply"></TaskDet>
</view>
</view>
</view>
<view class="taskadd" v-if="index2">
<view class="itembox2">
<view class="item_top">
<view class="">
详情
</view>
<view class="" @tap="indexs()">
x
</view>
</view>
<view class="item_content" v-if="index2">
<TaskDet :cid="Cid"></TaskDet>
</view>
</view>
</view>
<tabbar :selected="1"></tabbar>
</view>
</template>
<script>
import TaskAdd from "../../components/task/add.vue"
import TaskDet from "../../components/task/details.vue"
import tabbar from '../../components/tabbar.vue'
export default {
components: {
TaskAdd,
TaskDet,
tabbar
},
data() {
return {
title: 'Hello',
identity: 0,
progressNub: 60,
chartData: {
series: [{
data: [{
name: "已接任务",
value: 0
}, {
name: "未接任务",
value: 0
}, {
name: "拒绝任务",
value: 0
}, ]
}]
},
dates: {
year: 2022,
month: 0,
day: 0,
},
today: {
month: 0,
},
opts: {
rotate: false,
rotateLock: false,
color: ["#FACE15", "#04F1C9", "#3990F1"],
padding: [5, 5, 5, 5],
dataLabel: false,
legend: {
show: false,
fontColor: "#fff",
position: "right",
lineHeight: 20
},
title: {
name: "任务总数",
fontSize: 15,
color: "#fff"
},
subtitle: {
name: "0",
fontSize: 25,
color: "#fff"
},
extra: {
ring: {
width: 50,
height: 50,
ringWidth: 10,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: false,
customRadius: 50,
borderWidth: 3,
borderColor: "#FFFFFF",
centerColor: "#57B5FF",
linearType: "none"
}
}
},
user: [{
tasknub: 0
}],
isSupervisor: false,
list: [],
nub: 0,
index: false,
index2: false,
index3:false,
Cid: "",
month: 0,
xuanchuan: false,
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
}
},
created() {
let date = new Date()
this.dates.month = date.getMonth() + 1
this.today.month = date.getMonth() + 1
this.month = date.getMonth() + 1
this.dates.year = date.getFullYear()
this.today.year = date.getFullYear()
this.dates.day = date.getDate()
this.getTargetCount()
this.getOrganizations()
},
onReady() {
},
methods: {
getTargetCount(){
let selectedTime = this.dates.year + '-' + this.dates.month + '-' + '01'
this.$request.get('/api/TaskTargets/GetTargetCount/'+selectedTime,null,(data,res)=>{
console.log(res);
this.week=res
})
},
getOrganizations() {
const that = this
let selectedTime = this.dates.year + '-' + this.dates.month + '-' + '01'
let userId = uni.getStorageSync("user").id
let roles = uni.getStorageSync("user").roles
console.log(uni.getStorageSync("user"));
let isSupervisor = roles.find(item => {
return item.name.indexOf('检查') != -1
})
isSupervisor ? this.isSupervisor = true : this.isSupervisor = false
let params = {
ContainsChildren: true,
pageSize: 9999
}
this.$request.get("/api/Organizations", params, (data, res) => {
console.log(res);
if (!this.isSupervisor) {
this.user = res.items
for (let i = 0; i < this.user.length; i++) {
this.user[i]["tasknub"] = 0
this.user[i]["rate"] = 0
}
} else {
this.getSupervisor()
}
this.getTaskListOfStation(userId)
})
},
getSupervisor() {
this.$request.get("/api/Users/Inspectors", {}, (data, res) => {
console.log(uni.getStorageSync("user").roles, 8800);
let userName = uni.getStorageSync("user").name;
// console.log(uni.getStorageSync("user").roles);
for (let i = 0; i < res.length; i++) {
if (res[i].name = userName) {
this.user = [res[i]]
console.log(this.user, 8070);
for (let i = 0; i < this.user.length; i++) {
this.user[i]["tasknub"] = 0
this.user[i]["rate"] = 0
}
}
}
})
},
getTaskListOfStation(item) {
console.log(item);
let organizationId = uni.getStorageSync("user").organizationId
const that = this
let selectedTime = this.dates.year + '-' + this.dates.month + '-' + '01'
let params = {
Month: selectedTime,
// SupervisorId: item,
OrganizationId: organizationId,
CreatorId: item,
PageNumber: 1,
approvalStatus: '通过',
PageSize: 9999
}
this.$request.get("/api/PlanTasks", params, (data, res) => {
console.log(res);
this.list = res.items
this.list["tasknub"] = 0
for (let e = 0; e < this.user.length; e++) {
for (let i = 0; i < that.list.length; i++) {
for (let k = 0; k < that.list[i].supervisors.length; k++) {
// that.list[i].supervisors[k].name=that.list[i].supervisors[k].name.slice(0,3)+"..."
}
if (that.list[i].creationTime) {
let text = that.list[i].creationTime.substring(0, 10)
that.list[i].creationTime = text
}
if (that.list[i].inspectionResult != '待检查') {
this.user[e].tasknub += 1
}
}
}
console.log(this.list);
this.getServerData();
})
},
getServerData() {
//模拟从服务器获取数据时的延时
this.nub = 0
this.chartData = {
series: [{
data: [{
name: "已接任务",
value: 0
}, {
name: "未接任务",
value: 0
}, {
name: "拒绝任务",
value: 0
}, ]
}]
}
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].approvalStatus == "待处理") {
this.chartData.series[0].data[1].value += 1
this.nub += 1
} else if (this.list[i].approvalStatus == "驳回") {
this.chartData.series[0].data[2].value += 1
this.nub += 1
} else {
this.chartData.series[0].data[0].value += 1
this.nub += 1
}
}
this.opts.subtitle.name = JSON.stringify(this.nub)
this.index3 = true
},
dateYear(e) {
console.log(e);
this.dates.year = e.detail.value
this.getOrganizations()
},
dateMonth(e) {
let date = new Date()
let year = date.getFullYear()
if (e > this.month && this.dates.year >= year) {
return
}
this.dates.month = e
this.getOrganizations()
},
apply() {
let that = this;
this.index = false
this.getOrganizations()
},
indexs() {
this.index = false
this.index2 = false
},
chakan(e) {
this.Cid = e
this.index2 = true
},
start(item) {
uni.navigateTo({
url: '/pages/task/details?id=' + item.company.id,
})
}
}
}
</script>
<style lang="scss">
.page {
box-sizing: border-box;
padding-bottom: 100rpx;
}
.top {
position: relative;
top: 0;
left: 0;
}
.taskadd {
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background: rgba(49, 49, 51, 0.2);
z-index: 10;
.itembox {
// background: #fff;
position: absolute;
bottom: 230rpx;
left: 0;
width: 100%;
height: 600rpx;
.item_top {
height: 60rpx;
background: #F5F7FA;
border-radius: 40rpx 40rpx 0 0;
padding: 10rpx 40rpx 0 40rpx;
display: flex;
view:nth-child(1) {
flex: 1;
}
}
.item_content {
background-color: #fff;
height: 100%;
}
}
.itembox2 {
// background: #fff;
position: absolute;
bottom: 100rpx;
left: 0;
width: 100%;
height: 400rpx;
.item_top {
height: 60rpx;
background: #F5F7FA;
border-radius: 40rpx 40rpx 0 0;
padding: 10rpx 40rpx 0 40rpx;
display: flex;
view:nth-child(1) {
flex: 1;
}
}
.item_content {
background-color: #fff;
height: 100%;
}
}
}
.pure_top {
width: 100%;
height: 220rpx;
position: absolute;
z-index: 0;
overflow: hidden;
}
.pure_top::after {
content: "";
width: 100%;
height: 220rpx;
position: absolute;
left: 0;
top: 0;
z-index: -1;
border-radius: 0 0 100% 100%;
background: linear-gradient(180deg, #57B5FF 0%, #616DFD 100%);
}
.month_color {
border-radius: 48rpx;
background-color: #317AFF;
color: #fff;
}
.month_color2 {
color: #B5B5B5;
}
.calendar {
z-index: 1;
position: relative;
left: 4%;
top: 20rpx;
width: 92%;
height: 130rpx;
border-radius: 10rpx;
box-shadow: 0px 0px 20px 1px #C1D7FF;
background: #fff;
view {
height: 60rpx;
}
.date_year {
display: flex;
align-items: center;
background-color: #fff;
box-sizing: border-box;
padding: 0 32rpx;
font-weight: 600;
border-radius: 10rpx;
.year {
display: flex;
align-items: center;
image {
width: 26rpx;
height: 26rpx;
}
}
.blueblock {
width: 6rpx;
height: 30rpx;
margin-right: 12rpx;
background: #50B2FF;
}
.blackblock {
width: 4rpx;
height: 30rpx;
margin: 0 16rpx;
background: #000;
}
}
.monthbox {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
box-sizing: border-box;
padding: 0 8rpx;
.month_class {
width: 48rpx;
height: 48rpx;
line-height: 48rpx;
text-align: center;
}
}
}
button {
margin-top: 10rpx;
width: 120rpx;
height: 60rpx;
color: #fff;
border-radius: 30rpx;
line-height: 60rpx;
font-size: 24rpx;
background-color: #327AFE;
}
.taskbox {
width: 92%;
margin: 40rpx auto;
border-radius: 20rpx;
background-color: #fff;
box-sizing: border-box;
padding: 20rpx;
position: relative;
left: 0;
z-index: 10;
.itembox {
.top {
margin-top: 20rpx;
height: 60rpx;
display: flex;
.left {
display: flex;
flex: 1;
img {
width: 50rpx;
height: 50rpx;
}
text {
font-weight: 600;
margin-right: 10rpx;
}
}
.right {
color: #909090;
display: flex;
.progress {
margin-top: 6rpx;
margin-right: 10rpx;
height: 34rpx;
flex: 1;
background: #E4E7EC;
.color {
height: 100%;
background-color: #14B389;
}
}
}
}
}
}
.charts-box {
// background-color: #5687fd;
height: 250rpx;
position: relative;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
display: flex;
justify-content: center;
align-items: center;
.tagbox {
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
margin: 10rpx 0;
font-size: 32rpx;
.tag {
width: 20rpx;
height: 20rpx;
border-radius: 20rpx;
}
}
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.login-box {
display: flex;
background: #8f8f94;
width: 100%;
height: 120rpx;
position: fixed;
bottom: 0;
left: 0;
.login-text {
color: #fff;
width: 60%;
display: flex;
font-size: 36rpx;
padding-left: 40rpx;
align-items: center;
}
.login-button {
flex: 1;
text-align: center;
margin-top: 20rpx;
}
}
.listbox {
width: 92%;
margin: -10rpx auto 0 auto;
.item {
background-color: #fff;
margin: 20rpx 0;
padding: 20rpx;
.namebox {
display: flex;
margin-bottom: 10rpx;
.name {
font-weight: 600;
font-size: 36rpx;
width: 100%;
height: 60rpx;
line-height: 60rpx;
white-space: nowrap;
/*内容超宽后禁止换行显示*/
overflow: hidden;
/*超出部分隐藏*/
text-overflow: ellipsis;
/*文字超出部分以省略号显示*/
}
.tag {
text-align: center;
font-size: 26rpx;
width: 120rpx;
height: 50rpx;
line-height: 50rpx;
color: #FF6F51;
border: 1px solid #FF6F51;
background: rgba(255, 111, 81, 0.2400);
border-radius: 40rpx 40rpx 40rpx 40rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tag2 {
text-align: center;
font-size: 26rpx;
width: 120rpx;
height: 50rpx;
line-height: 50rpx;
color: #14B488;
border: 1px solid rgba(30, 232, 177, 0.8);
background: rgba(30, 232, 177, 0.24);
border-radius: 40rpx 40rpx 40rpx 40rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.typebox {
display: flex;
margin: 14rpx 0;
.type {
width: 50%;
// border-left: #327AFE 6rpx solid;
font-size: 32rpx;
font-weight: 600;
padding-left: 10rpx;
}
.result {
width: 50%;
text-align: right;
color: #FF6F51;
}
}
.staffbox {
display: flex;
margin: 6rpx 0;
font-size: 30rpx;
white-space: nowrap;
/*内容超宽后禁止换行显示*/
overflow: hidden;
/*超出部分隐藏*/
text-overflow: ellipsis;
.staff {
display: flex;
color: rgba(16, 15, 25, 0.48);
.zhu {
color: #100F19;
}
view {
margin-right: 20rpx;
}
img {
width: 40rpx;
height: 40rpx;
min-width: 40rpx;
min-height: 40rpx;
}
}
.staff2 {
display: flex;
color: rgba(16, 15, 25, 0.48);
// width: 70%;
white-space: nowrap;
/*内容超宽后禁止换行显示*/
overflow: hidden;
/*超出部分隐藏*/
text-overflow: ellipsis;
.staff_namebox {
white-space: nowrap;
/*内容超宽后禁止换行显示*/
overflow: hidden;
/*超出部分隐藏*/
text-overflow: ellipsis;
}
.zhu {
color: #100F19;
}
view {
margin-right: 20rpx;
}
img {
width: 40rpx;
height: 40rpx;
min-width: 40rpx;
min-height: 40rpx;
}
}
.jiancha {
color: #100F19;
margin-right: 10rpx;
}
.jiancha_color {
color: #14B488;
}
}
.implement {
margin-bottom: 10rpx;
.buttons {
width: 100%;
height: 100%;
padding-top: 20rpx;
}
// button {
// float: right;
// width: 80rpx;
// height: 40rpx;
// line-height: 40rpx;
// margin-top: 20rpx;
// }
}
</style>