369 lines
12 KiB
Vue
369 lines
12 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<div>
|
||
<div class="searchBox whiteBlock">
|
||
<el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline">
|
||
<el-form-item label="车辆/人员名称">
|
||
<el-select v-model="queryInfo.devSn" placeholder="请选择">
|
||
<el-option v-for="(item, index) in nameOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="设备序号">
|
||
<el-select v-model="queryInfo.devSn" placeholder="请选择">
|
||
<el-option v-for="(item, index) in numOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="时间">
|
||
<el-date-picker
|
||
v-model="daterange"
|
||
@change="changeDate"
|
||
type="daterange"
|
||
:range-separator="$t('message.energyManage.to')"
|
||
:start-placeholder="$t('message.energyManage.start')"
|
||
:end-placeholder="$t('message.energyManage.end')"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" plain @click="getProgressListData">查询</el-button>
|
||
<el-button type="warning" plain @click="refreshBtn">刷新</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="table_wrap whiteBlock">
|
||
<vue-scroll>
|
||
<el-table height="650" class="tables" :data="listData" lazy row-key="id">
|
||
<el-table-column align="center" prop="id" label="车辆/人员名称">
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.type === 1">
|
||
{{ scope.row.numberPlate }}
|
||
</div>
|
||
<div v-else>
|
||
{{ scope.row.personName }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="devSn" label="设备序号"> </el-table-column>
|
||
<el-table-column align="center" prop="id" label="当前位置">
|
||
<template slot-scope="scope">
|
||
<div style="white-space: nowrap;">
|
||
{{ scope.row.longitude + '，' + scope.row.latitude }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="batteryPercentage" label="电量百分比"></el-table-column>
|
||
<el-table-column align="center" prop="cumulativeOperatingFuelConsumptionDay" label="当日累计油耗(L)"></el-table-column>
|
||
<el-table-column align="center" prop="totalSleepTimeDay" label="当日累计休眠时长(H)"></el-table-column>
|
||
<el-table-column align="center" prop="totalFuelConsumptionDay" label="当日累计作业油耗(L)"></el-table-column>
|
||
<el-table-column align="center" prop="totalWorkTimeDay" label="当日累计作业时长(H)"></el-table-column>
|
||
<el-table-column align="center" prop="createTime" label="上传时间"></el-table-column>
|
||
<!--
|
||
<el-table-column prop="endWarning" align="center" label="结束预警">
|
||
<template slot-scope="scope">
|
||
<div style="color: #fe6565;" v-if="scope.row.endWarning === 3">
|
||
{{ scope.row.endWarning == 1 ? '提前' : scope.row.endWarning == 2 ? '正常' : '逾期' }}
|
||
</div>
|
||
<div v-else>
|
||
{{ scope.row.endWarning == 1 ? '提前' : scope.row.endWarning == 2 ? '正常' : '逾期' }}
|
||
</div>
|
||
</template>
|
||
</el-table-column> -->
|
||
</el-table>
|
||
</vue-scroll>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
style="position: absolute; top: 85%; left: 40%"
|
||
@size-change="SizeChange"
|
||
@current-change="CurrentChange"
|
||
:current-page="pagInfo.pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pagInfo.pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(pagInfo.total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getRealtimeRecordInfo, getCarDevOption } from '@/assets/js/api/carManage'
|
||
export default {
|
||
components: {},
|
||
mounted() {},
|
||
data() {
|
||
return {
|
||
rowData: {},
|
||
parentTaskName: '', // 用于存储父级taskName
|
||
nameOptions: [
|
||
{
|
||
label: '未开始',
|
||
value: 0
|
||
},
|
||
{
|
||
label: '进行中',
|
||
value: 1
|
||
},
|
||
{
|
||
label: '已完成',
|
||
value: 2
|
||
}
|
||
],
|
||
numOptions: [
|
||
{
|
||
label: '未开始',
|
||
value: 0
|
||
},
|
||
{
|
||
label: '进行中',
|
||
value: 1
|
||
},
|
||
{
|
||
label: '已完成',
|
||
value: 2
|
||
}
|
||
],
|
||
pagInfo: {
|
||
pageNo: 1, //页数
|
||
pageSize: 10, //条数
|
||
total: 0 //总条数
|
||
},
|
||
radio: 1,
|
||
title: '',
|
||
daterange: [],
|
||
projectSn: '',
|
||
createUserId: '',
|
||
listData: [],
|
||
uploadUrl: '',
|
||
fileUrl: '',
|
||
dialogVisible: false, //新增弹窗
|
||
workerInfo: {
|
||
taskName: '',
|
||
startDate: '',
|
||
finishDate: '',
|
||
actualStartDate: '',
|
||
actualFinishDate: '',
|
||
dutyUserId: '',
|
||
progressRatio: '',
|
||
remark: '',
|
||
parentId: 0,
|
||
status: 0
|
||
},
|
||
principalLsit: [], //负责人
|
||
seedId: '',
|
||
showTime: false, //工期
|
||
queryInfo: {
|
||
taskName: '',
|
||
status: '',
|
||
actualStartDate: '',
|
||
actualFinishDate: '',
|
||
devSn: ''
|
||
},
|
||
dialogImageUrl: '',
|
||
showBigImg: false,
|
||
times: '',
|
||
fileName: ''
|
||
}
|
||
},
|
||
computed: {
|
||
headers() {
|
||
return { Authorization: this.$store.state.userInfo.token }
|
||
},
|
||
dateAfter() {
|
||
// 动态起始时间
|
||
const startTimestamp = Date.now() * 1 - 24 * 60 * 60 * 1000
|
||
const endTimestamp = Date.parse(this.workerInfo.finishDate) * 1 - 24 * 60 * 60 * 1000
|
||
return {
|
||
disabledDate(time) {
|
||
const timestamp = time.getTime()
|
||
if (endTimestamp) {
|
||
if (timestamp >= startTimestamp && timestamp <= endTimestamp) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
} else {
|
||
return timestamp <= startTimestamp
|
||
}
|
||
}
|
||
}
|
||
},
|
||
dateBefore() {
|
||
// 动态起始时间
|
||
// const startTimestamp = Date.parse(this.workerInfo.startDate)
|
||
const specifiedDate = new Date(this.workerInfo.startDate) // 指定的日期
|
||
const prevDay = new Date(specifiedDate) // 创建一个新的 Date 对象，使用同样的日期
|
||
prevDay.setDate(specifiedDate.getDate() - 1) // 将日期设置为前一天的日期
|
||
|
||
const lastTime = prevDay.getTime() // 获取前一天的时间戳
|
||
// const startTimestamp = new Date(this.workerInfo.startDate)
|
||
return {
|
||
disabledDate(time) {
|
||
const timestamp = time.getTime()
|
||
if (timestamp > lastTime) {
|
||
// console.log("计划结束时间",startTimestamp,timestamp)
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
}
|
||
},
|
||
actualDateBefore() {
|
||
// 动态起始时间
|
||
// const startTimestamp = Date.parse(this.workerInfo.startDate)
|
||
const specifiedDate = new Date(this.workerInfo.actualStartDate) // 指定的日期
|
||
const prevDay = new Date(specifiedDate) // 创建一个新的 Date 对象，使用同样的日期
|
||
prevDay.setDate(specifiedDate.getDate() - 1) // 将日期设置为前一天的日期
|
||
|
||
const lastTime = prevDay.getTime() // 获取前一天的时间戳
|
||
// const startTimestamp = new Date(this.workerInfo.startDate)
|
||
return {
|
||
disabledDate(time) {
|
||
const timestamp = time.getTime()
|
||
if (timestamp > lastTime) {
|
||
// console.log("计划结束时间",startTimestamp,timestamp)
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn
|
||
this.createUserId = this.$store.state.userInfo.userId
|
||
this.uploadUrl = this.$store.state.UPLOADURL
|
||
this.fileUrl = this.$store.state.FILEURL
|
||
this.getProgressListData()
|
||
this.getCrewListData()
|
||
},
|
||
methods: {
|
||
//获取列表数据
|
||
getProgressListData() {
|
||
let data = {
|
||
pageNo: this.pagInfo.pageNo,
|
||
pageSize: this.pagInfo.pageSize,
|
||
devSn: this.queryInfo.devSn,
|
||
createTime_begin: this.queryInfo.actualStartDate,
|
||
createTime_end: this.queryInfo.actualFinishDate
|
||
}
|
||
getRealtimeRecordInfo(data).then(res => {
|
||
if (res.code == 200) {
|
||
this.listData = res.result.records
|
||
this.pagInfo.total = res.result.total
|
||
}
|
||
})
|
||
},
|
||
//获取查询下拉
|
||
getCrewListData() {
|
||
let data = {
|
||
projectSn: this.projectSn
|
||
}
|
||
getCarDevOption(data).then(res => {
|
||
if (res.code == 200) {
|
||
const filterArray = res.result.filter(item => item.numberPlate == "").map(item => ({ devSn: item.devSn, personName: item.personName }));
|
||
let nameOption = filterArray.map(item => {
|
||
return {
|
||
label: item.personName,
|
||
value: item.devSn
|
||
}
|
||
})
|
||
const filteredArray = res.result.filter(item => item.personName == null).map(item => ({ devSn: item.devSn, numberPlate: item.numberPlate }));
|
||
let carOption = filteredArray.map(item => {
|
||
return {
|
||
label: item.numberPlate,
|
||
value: item.devSn
|
||
}
|
||
})
|
||
this.nameOptions = nameOption.concat(carOption)
|
||
console.log('车牌号/名字下拉', nameOption,carOption)
|
||
this.numOptions = res.result.map( (item)=> {
|
||
return {
|
||
label: item.devSn,
|
||
value: item.devSn
|
||
}
|
||
} )
|
||
console.log('设备devSn', this.numOptions)
|
||
|
||
} else {
|
||
this.$message.error(res.message)
|
||
}
|
||
})
|
||
},
|
||
//刷新
|
||
refreshBtn() {
|
||
this.daterange = []
|
||
this.pagInfo.pageNo = 1
|
||
this.pagInfo.pageSize = 10
|
||
this.queryInfo = {
|
||
status: '',
|
||
actualStartDate: '',
|
||
actualFinishDate: '',
|
||
taskName: ''
|
||
}
|
||
this.getProgressListData()
|
||
},
|
||
SizeChange(val) {
|
||
this.pagInfo.pageSize = val
|
||
this.getProgressListData()
|
||
},
|
||
CurrentChange(val) {
|
||
this.pagInfo.pageNo = val
|
||
this.getProgressListData()
|
||
},
|
||
//---------------
|
||
//关闭详请组件
|
||
changeDate() {
|
||
if (this.daterange) {
|
||
this.queryInfo.actualStartDate = this.daterange[0]
|
||
this.queryInfo.actualFinishDate = this.daterange[1]
|
||
} else {
|
||
this.queryInfo.actualStartDate = ''
|
||
this.queryInfo.actualFinishDate = ''
|
||
}
|
||
},
|
||
validateInput() {
|
||
let value = parseInt(this.workerInfo.progressRatio, 10)
|
||
if (isNaN(value) || value < 0 || value > 100 || Math.floor(value) !== value) {
|
||
this.workerInfo.progressRatio = ''
|
||
}
|
||
},
|
||
time1(val) {
|
||
console.log('开始时间', val)
|
||
this.times = val
|
||
},
|
||
time2(val) {
|
||
console.log('结束时间', val)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.down {
|
||
text-decoration: none;
|
||
color: #fff;
|
||
}
|
||
.expintBtn {
|
||
display: inline-block !important;
|
||
margin-right: 10px;
|
||
}
|
||
.table_wrap {
|
||
margin-top: 15px;
|
||
height: 700px;
|
||
overflow: auto;
|
||
}
|
||
.delete-btn {
|
||
color: #fe6565;
|
||
}
|
||
.dialogUplod {
|
||
height: 100px;
|
||
margin-left: 70px;
|
||
margin-top: 40px;
|
||
div {
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
</style>
|