<template>
|
<view class="pages-task-log-list">
|
<view class="list-content" v-if="list.length > 0">
|
<view class="header">
|
<view class="item">
|
<view class="title">{{accumulatedDuration}}<text class="text">min</text></view>
|
<view class="text">累计时长</view>
|
</view>
|
<!-- <view class="item">
|
<view class="title">{{accumulatedMileage}}<text class="text">m</text></view>
|
<view class="text">累计里程</view>
|
</view> -->
|
<view class="item">
|
<view class="title">{{cumulativeCount}}</view>
|
<view class="text">累计次数</view>
|
</view>
|
</view>
|
<view class="list">
|
<view class="task-header" v-if="fixedList.length > 0">固定任务</view>
|
<template v-for="(group) in fixedList" :key="group.date">
|
<view class="task-header">{{group.date}}</view>
|
<view class="task-list-view">
|
<TaskLogItemView v-for="(item,index) in group.list" :key="index" :taskData="item">
|
</TaskLogItemView>
|
</view>
|
</template>
|
<view class="task-header" v-if="tempList.length > 0">临时任务</view>
|
<template v-for="(group) in tempList" :key="group.date">
|
<view class="task-header">{{group.date}}</view>
|
<view class="task-list-view">
|
<TaskLogItemView v-for="(item,index) in group.list" :key="index" :taskData="item">
|
|
</TaskLogItemView>
|
</view>
|
</template>
|
</view>
|
</view>
|
<view class="list-no-content" v-else>
|
<!-- <image class="img" src="/images/icon-park-outline_attention.svg" alt=" 图片" mode="aspectFit" />-->
|
<uni-icons color="#ccc" type="info" size="128"></uni-icons>
|
<view class="space">没有找到符合条件的任务记录</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
showToast,
|
showModal
|
} from "@/comm/utils.js"
|
import TaskLogItemView from "./infos/task-log-item.vue"
|
import {
|
getTaskLog
|
} from "@/api/vehicle.js"
|
export default {
|
name: "PagesTaskLogList",
|
components: {
|
TaskLogItemView
|
},
|
data() {
|
return {
|
sceneId: "",
|
list: [],
|
}
|
},
|
computed: {
|
fixedList() {
|
let list = this.list.filter((a) => a.tasktype == 1)
|
let group
|
const listRes = []
|
list.sort((a, b) => {
|
return a.date > b.date
|
});
|
list.forEach((item) => {
|
if (group) {
|
if (item.date != group.date) {
|
group = {
|
date: item.date,
|
list: []
|
}
|
listRes.push(group)
|
}
|
} else {
|
group = {
|
date: item.date,
|
list: []
|
}
|
listRes.push(group)
|
}
|
group.list.push(item)
|
})
|
return listRes
|
},
|
tempList() {
|
let list = this.list.filter((a) => a.tasktype == 2)
|
let group
|
const listRes = []
|
list.sort((a, b) => {
|
return a.date > b.date
|
});
|
list.forEach((item) => {
|
if (group) {
|
if (item.date != group.date) {
|
group = {
|
date: item.date,
|
list: []
|
}
|
listRes.push(group)
|
}
|
} else {
|
group = {
|
date: item.date,
|
list: []
|
}
|
listRes.push(group)
|
}
|
group.list.push(item)
|
})
|
return listRes
|
},
|
accumulatedDuration() {
|
let res = 0
|
this.list.forEach((item) => {
|
res += item.duration || 0
|
})
|
return res
|
},
|
accumulatedMileage() {
|
let res = 0
|
this.list.forEach((item) => {
|
res += item.accumulated_mileage || 0
|
})
|
return res
|
},
|
cumulativeCount() {
|
let res = 0
|
this.list.forEach((item) => {
|
res += item.cycleNumber || 0
|
})
|
return res
|
},
|
},
|
onLoad(option) {
|
this.ip = option.ip || ""
|
this.sceneId = option.sceneId || ""
|
this.loadData()
|
},
|
methods: {
|
setData(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
async loadData() {
|
try {
|
/*this.list = [{
|
type: 0,
|
taskButton: 1,
|
name: "1号站点到2号站点",
|
date: "5-18",
|
accumulated_duration: 5693,
|
accumulated_mileage: 6421,
|
cumulative_number: 55,
|
status: 1,
|
}, {
|
type: 0,
|
taskButton: 2,
|
name: "2号站点到1号站点",
|
date: "5-08",
|
accumulated_duration: 888,
|
accumulated_mileage: 642,
|
cumulative_number: 31,
|
status: 2,
|
}, {
|
type: 0,
|
taskButton: 1,
|
name: "1号站点到2号站点",
|
date: "4-28",
|
accumulated_duration: 998,
|
accumulated_mileage: 2421,
|
cumulative_number: 85,
|
status: 2,
|
}, {
|
type: 0,
|
taskButton: 2,
|
name: "2号站点到1号站点",
|
date: "4-28",
|
accumulated_duration: 688,
|
accumulated_mileage: 1421,
|
cumulative_number: 65,
|
status: 4,
|
}, {
|
type: 1,
|
taskButton: 3,
|
name: "1号站点到2号站点",
|
date: "5-18",
|
accumulated_duration: 5693,
|
accumulated_mileage: 6421,
|
cumulative_number: 55,
|
status: 2,
|
}, {
|
type: 1,
|
taskButton: 4,
|
name: "2号站点到1号站点",
|
date: "5-08",
|
accumulated_duration: 888,
|
accumulated_mileage: 642,
|
cumulative_number: 31,
|
status: 2,
|
}, {
|
type: 1,
|
taskButton: 3,
|
name: "1号站点到2号站点",
|
date: "4-28",
|
accumulated_duration: 998,
|
accumulated_mileage: 2421,
|
cumulative_number: 85,
|
status: 2,
|
}, {
|
type: 1,
|
taskButton: 4,
|
name: "2号站点到1号站点",
|
date: "4-28",
|
accumulated_duration: 688,
|
accumulated_mileage: 1421,
|
cumulative_number: 65,
|
status: 2,
|
|
}]*/
|
this.list = await this.loadTaskLog()
|
} catch (ex) {
|
show.showError(ex)
|
}
|
},
|
async loadTaskLog() {
|
try {
|
const now = new Date();
|
const oneWeekAgo = new Date();
|
const endTimeStamp = `${now.getTime()}`
|
oneWeekAgo.setDate(now.getDate() - 7);
|
const startTimeStamp = `${oneWeekAgo.getTime()}`
|
const res = await getTaskLog(this.ip, startTimeStamp, endTimeStamp)
|
|
const list = res?.task_info || []
|
console.log(list)
|
list.forEach((ele) => {
|
|
console.log(ele)
|
const dateStart = new Date()
|
dateStart.setTime(Number(ele.taskStartTimeStamp))
|
ele.date = `${dateStart.getMonth()}-${dateStart.getDay()}`;
|
let taskList = ele.taskList || []
|
taskList.sort((a, b) => {
|
return a.lastUpdateTimeStamp > b.lastUpdateTimeStamp
|
});
|
console.log(taskList)
|
ele.startTime = `${dateStart.getHours()}:${dateStart.getMinutes()}`;
|
ele.endTime = ele.startTime
|
ele.duration = 0;
|
ele.status = 0
|
// console.log(ele)
|
if (taskList.length > 0) {
|
const dateEnd = new Date()
|
dateEnd.setTime(Number(taskList[taskList.length - 1].lastUpdateTimeStamp))
|
for (let i in taskList) {
|
const ele2 = taskList[i]
|
if (ele2.status == 1) {
|
ele.status = 1
|
break;
|
} else if (ele2.status == 2 || ele2.status == 4 || ele2.status == 5) {
|
ele.status = 2
|
break;
|
}
|
}
|
if (!ele.status) {
|
if (taskList.filter((a) => a.status != 3).length == 0) {
|
ele.status = 3
|
}
|
}
|
const diffInMs = dateEnd - dateStart; // 或者 Math.abs(date1 - date2)
|
ele.endTime = `${dateEnd.getHours()}:${dateEnd.getMinutes()}`;
|
ele.duration = Math.round(diffInMs / (1000 * 60))
|
console.log(ele)
|
}
|
})
|
console.log(list)
|
return list
|
} catch (ex) {
|
show.showError(ex)
|
return []
|
}
|
},
|
|
clickTask(item) {
|
// uni.navigateTo({
|
// url: "/pages/task/index"
|
// })
|
},
|
showError(ex) {
|
let exStr = JSON.stringify(ex)
|
if (exStr == "{}")
|
exStr = ex
|
let tip = typeof ex.msg == "string" ? ex.msg : exStr
|
showModal(tip, "错误", false)
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pages-task-log-list {
|
display: flex;
|
width: 750rpx;
|
height: 100vh;
|
flex-direction: column;
|
background-color: #F5F5F5;
|
|
.list-content {
|
display: flex;
|
width: 100%;
|
padding: 0 10px;
|
flex: 1;
|
flex-direction: column;
|
overflow-y: auto;
|
overflow-x: hidden;
|
|
|
.header {
|
width: calc(100% - 40rpx);
|
padding: 20rpx;
|
display: flex;
|
flex-direction: row;
|
|
.item {
|
padding: 0 20rpx;
|
display: flex;
|
width: calc(100% - 40rpx);
|
flex-direction: column;
|
flex: 1;
|
|
.title {
|
font-size: 40rpx;
|
font-weight: 700;
|
}
|
|
.text {
|
font-size: 30rpx;
|
color: #888;
|
}
|
}
|
}
|
|
.list {
|
width: calc(100% - 20rpx);
|
margin: 10rpx;
|
padding: 0 10rpx;
|
display: flex;
|
flex-direction: column;
|
flex: 1;
|
overflow: auto;
|
|
.task-header {
|
width: 100% ;
|
padding: 10rpx;
|
font-size: 32rpx;
|
}
|
|
.task-list-view {
|
width: 100% ;
|
border-radius: 10rpx;
|
padding: 0 10rpx;
|
background-color: #fff;
|
}
|
|
|
}
|
}
|
|
.list-no-content {
|
margin-top: 50px;
|
padding: 20rpx 40rpx;
|
align-items: center;
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
font-size: 30rpx;
|
font-weight: 400;
|
|
.img {
|
width: 212rpx;
|
height: 212rpx;
|
color: #ddd;
|
}
|
|
.space {
|
margin-top: 20rpx;
|
}
|
|
}
|
|
|
}
|
</style>
|
