653 lines
22 KiB
Vue
653 lines
22 KiB
Vue
<template>
|
||
<div class="content">
|
||
<div class="search-box">
|
||
<div class="search-item">
|
||
<!-- 设备名称 -->
|
||
<span>{{ $t('message.towerCrane.equipmentName') }}：</span>
|
||
<el-select
|
||
style="margin-right: 20px"
|
||
v-model="devSn"
|
||
clearable
|
||
size="medium"
|
||
:placeholder="$t('message.towerCrane.pleaseSelect')"
|
||
>
|
||
<el-option
|
||
v-for="item in devList"
|
||
:key="item.id"
|
||
:label="item.devName"
|
||
:value="item.devSn"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
<el-date-picker
|
||
class="serarch_picker"
|
||
size="medium"
|
||
v-model="valueTime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
type="datetimerange"
|
||
range-separator="-"
|
||
:start-placeholder="$t('message.towerCrane.startDate')"
|
||
:end-placeholder="$t('message.towerCrane.endDate')"
|
||
>
|
||
</el-date-picker>
|
||
</div>
|
||
<el-button size="medium" @click="quertData">
|
||
<!-- 查询 -->
|
||
{{ $t('message.towerCrane.query') }}
|
||
</el-button>
|
||
<el-button size="medium" @click="refresh">
|
||
<!-- 刷新 -->
|
||
{{ $t('message.towerCrane.refresh') }}
|
||
</el-button>
|
||
<el-button size="medium" @click="exportExcel">
|
||
<!-- 导出 -->
|
||
{{ $t('message.towerCrane.export') }}
|
||
</el-button>
|
||
</div>
|
||
<div class="table-box">
|
||
<el-table
|
||
:data="tableData"
|
||
class="tables"
|
||
height="700"
|
||
style="width: 100%"
|
||
>
|
||
<!-- 设备司机信息 -->
|
||
<el-table-column
|
||
:label="$t('message.towerCrane.equipmentDriverInfo')"
|
||
width="400"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div class="table-list">
|
||
<div class="table-item">
|
||
<!-- 设备名称 -->
|
||
{{ $t('message.towerCrane.equipmentName') }}：{{
|
||
scope.row.devName
|
||
}}
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 设备编号 -->
|
||
{{ $t('message.towerCrane.equipmentNumber') }}：{{
|
||
scope.row.devSn
|
||
}}
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 司机姓名 -->
|
||
{{ $t('message.towerCrane.driverName') }}：{{
|
||
scope.row.driverName
|
||
}}
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 司机身份证号 -->
|
||
{{ $t('message.towerCrane.driverIdNumber') }}：{{
|
||
scope.row.driverIdCard
|
||
}}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 工作循环数据 -->
|
||
<el-table-column :label="$t('message.towerCrane.dutyCycleData')">
|
||
<template slot-scope="scope">
|
||
<div class="table-list f-2">
|
||
<div class="table-item">
|
||
<!-- 工作循环开始时间 -->
|
||
{{ $t('message.towerCrane.dutyCycleStartTime') }}：{{
|
||
scope.row.startTime
|
||
}}
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环结束时间 -->
|
||
{{ $t('message.towerCrane.dutyCycleEndTime') }}：{{
|
||
scope.row.endTime
|
||
}}
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环持续时长 -->
|
||
{{ $t('message.towerCrane.dutyCycleDuration') }}：{{
|
||
scope.row.workTime
|
||
}}s
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环最大载重 -->
|
||
{{ $t('message.towerCrane.maxDutyCycleLoad') }}：{{
|
||
scope.row.loading
|
||
}}kg
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环最大角度 -->
|
||
{{ $t('message.towerCrane.maxAngleDutyCycle') }}：{{
|
||
scope.row.maxAngle
|
||
}}°
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环最小角度 -->
|
||
{{ $t('message.towerCrane.minAngleDutyCycle') }}：{{
|
||
scope.row.minAngle
|
||
}}°
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环最大高度 -->
|
||
{{ $t('message.towerCrane.maxHeightDutyCycle') }}：{{
|
||
scope.row.maxHeight
|
||
}}m
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环最小高度 -->
|
||
{{ $t('message.towerCrane.minHeightDutyCycle') }}：{{
|
||
scope.row.minHeight
|
||
}}m
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环最大幅度 -->
|
||
{{ $t('message.towerCrane.maxAmpDutyCycle') }}：{{
|
||
scope.row.maxRange
|
||
}}m
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环最小幅度 -->
|
||
{{ $t('message.towerCrane.minAmpDutyCycle') }}：{{
|
||
scope.row.minRange
|
||
}}m
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环开始高度 -->
|
||
{{ $t('message.towerCrane.cycleStartHeight') }}：{{
|
||
scope.row.slingStartHeight
|
||
}}m
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环结束高度 -->
|
||
{{ $t('message.towerCrane.cycleEndHeight') }}：{{
|
||
scope.row.slingEndHeight
|
||
}}m
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环开始幅度 -->
|
||
{{ $t('message.towerCrane.startRange') }}：{{
|
||
scope.row.slingStartRange
|
||
}}m
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环结束幅度 -->
|
||
{{ $t('message.towerCrane.endRange') }}：{{
|
||
scope.row.slingEndRange
|
||
}}m
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环开始角度 -->
|
||
{{ $t('message.towerCrane.startAngle') }}：{{
|
||
scope.row.slingStartRotation
|
||
}}°
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环结束角度 -->
|
||
{{ $t('message.towerCrane.endAngle') }}：{{
|
||
scope.row.slingEndRotation
|
||
}}°
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环最大载重比 -->
|
||
{{ $t('message.towerCrane.maxLoadRatio') }}：{{
|
||
scope.row.peakLoad
|
||
}}
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环最大风速 -->
|
||
{{ $t('message.towerCrane.maxWindSpeed') }}：{{
|
||
scope.row.maxWindSpeed
|
||
}}m/s
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环中最大力矩 -->
|
||
{{ $t('message.towerCrane.maxMoment') }}：{{
|
||
scope.row.workMaxForce
|
||
}}kg·m
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环最大力矩百分比 -->
|
||
{{ $t('message.towerCrane.maxMomentPercentage') }}：{{
|
||
scope.row.workMaxTorque
|
||
}}%
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环最大力矩时的幅度 -->
|
||
{{ $t('message.towerCrane.maxRange') }}：{{
|
||
scope.row.workMaxTorqueRange
|
||
}}m
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环倍率 -->
|
||
{{ $t('message.towerCrane.dutyCycleRatio') }}：{{
|
||
scope.row.workMultiple
|
||
}}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 工作循环报警信息 -->
|
||
<el-table-column
|
||
:label="$t('message.towerCrane.DutyCycleAlarmInfo')"
|
||
width="350"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div class="table-list">
|
||
<div class="table-item">
|
||
<!-- 防碰撞报警 -->
|
||
<!-- '报警':'正常' -->
|
||
{{ $t('message.towerCrane.antiCollisionAlarm') }}：
|
||
<span
|
||
:style="{
|
||
color: scope.row.workEnvironmentAlarm ? '#F56C6C' : '',
|
||
}"
|
||
>{{
|
||
scope.row.workEnvironmentAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 高度上限位报警 -->
|
||
{{ $t('message.towerCrane.text2') }}：
|
||
<span
|
||
:style="{ color: scope.row.workHeightAlarm ? '#F56C6C' : '' }"
|
||
>{{
|
||
scope.row.workHeightAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 高度下限位报警 -->
|
||
<!-- '报警':'正常' -->
|
||
{{ $t('message.towerCrane.text3') }}：
|
||
<span
|
||
:style="{
|
||
color: scope.row.workHeightLowerAlarm ? '#F56C6C' : '',
|
||
}"
|
||
>{{
|
||
scope.row.workHeightLowerAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 幅度外限位报警 -->
|
||
{{ $t('message.towerCrane.text4') }}：
|
||
<span
|
||
:style="{
|
||
color: scope.row.workMaxRangeAlarm ? '#F56C6C' : '',
|
||
}"
|
||
>{{
|
||
scope.row.workMaxRangeAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 幅度内限位报警 -->
|
||
<!-- '报警':'正常' -->
|
||
{{ $t('message.towerCrane.text5') }}：
|
||
<span
|
||
:style="{
|
||
color: scope.row.workMinRangeAlarm ? '#F56C6C' : '',
|
||
}"
|
||
>{{
|
||
scope.row.workMinRangeAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 力矩报警 -->
|
||
<!-- '预警' '报警':'正常' -->
|
||
{{ $t('message.towerCrane.text6') }}：
|
||
<span
|
||
:style="{ color: scope.row.workMomentAlarm ? '#F56C6C' : '' }"
|
||
>{{
|
||
scope.row.workMomentPreAlarm
|
||
? $t('message.towerCrane.earlyWarning')
|
||
: scope.row.workMomentAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 多机防撞报警 -->
|
||
{{ $t('message.towerCrane.text7') }}：
|
||
<span
|
||
:style="{ color: scope.row.workMultiAlarm ? '#F56C6C' : '' }"
|
||
>{{
|
||
scope.row.workMultiAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 逆时针回转限位报警 -->
|
||
{{ $t('message.towerCrane.text8') }}：
|
||
<span
|
||
:style="{
|
||
color: scope.row.workNegAngleAlarm ? '#F56C6C' : '',
|
||
}"
|
||
>{{
|
||
scope.row.workNegAngleAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 倾角报警 -->
|
||
{{ $t('message.towerCrane.text9') }}：
|
||
<span
|
||
:style="{
|
||
color: scope.row.workObliguityAlarm ? '#F56C6C' : '',
|
||
}"
|
||
>{{
|
||
scope.row.workObliguityAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 顺时针回转限位报警 -->
|
||
{{ $t('message.towerCrane.text10') }}：
|
||
<span
|
||
:style="{
|
||
color: scope.row.workPosAngleAlarm ? '#F56C6C' : '',
|
||
}"
|
||
>{{
|
||
scope.row.workPosAngleAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 风速报警 -->
|
||
{{ $t('message.towerCrane.text12') }}：
|
||
<span
|
||
:style="{
|
||
color: scope.row.workWindSpeedAlarm ? '#F56C6C' : '',
|
||
}"
|
||
>{{
|
||
scope.row.workWindSpeedAlarm == 0
|
||
? '正常'
|
||
: scope.row.workWindSpeedAlarm == 1
|
||
? '报警'
|
||
: '预警'
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环中是否出现环境防碰撞报警 -->
|
||
{{ $t('message.towerCrane.whether1') }}：
|
||
<span
|
||
:style="{
|
||
color: scope.row.workEnvironmentAlarm ? '#F56C6C' : '',
|
||
}"
|
||
>{{
|
||
scope.row.workEnvironmentAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="table-item">
|
||
<!-- 工作循环中是否出现力矩预警 -->
|
||
<!-- '报警':'正常' -->
|
||
{{ $t('message.towerCrane.whether2') }}：
|
||
<span
|
||
:style="{
|
||
color: scope.row.workMomentPreAlarm ? '#F56C6C' : '',
|
||
}"
|
||
>{{
|
||
scope.row.workMomentPreAlarm
|
||
? $t('message.towerCrane.callThePolice')
|
||
: $t('message.towerCrane.normal')
|
||
}}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getTowerListApi,
|
||
selectTowerWorkCycleApi,
|
||
exporExcelTowerWorkCycleApi
|
||
} from '@/assets/js/api/towerCrane'
|
||
export default {
|
||
props: ['sn'],
|
||
data() {
|
||
return {
|
||
devSn: '',
|
||
projectSn: '',
|
||
devList: [],
|
||
tableData: [],
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
valueTime: ''
|
||
}
|
||
},
|
||
created() {
|
||
this.projectSn = this.sn ? this.sn : this.$store.state.projectSn
|
||
this.queryDev()
|
||
// this.selectNowDate()
|
||
this.queryTowerWorkCycle()
|
||
},
|
||
computed: {
|
||
transformTimestamp() {
|
||
return function (timestamp) {
|
||
if (timestamp) {
|
||
let a = new Date(timestamp).getTime()
|
||
const date = new Date(a)
|
||
const Y = date.getFullYear() + '-'
|
||
const M =
|
||
(date.getMonth() + 1 < 10
|
||
? '0' + (date.getMonth() + 1)
|
||
: date.getMonth() + 1) + '-'
|
||
const D =
|
||
(date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
|
||
const h =
|
||
(date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) +
|
||
':'
|
||
const m =
|
||
(date.getMinutes() < 10
|
||
? '0' + date.getMinutes()
|
||
: date.getMinutes()) + ':'
|
||
const s = date.getSeconds() // 秒
|
||
const dateString = Y + M + D + h + m + s
|
||
return dateString
|
||
}
|
||
}
|
||
},
|
||
transformTimestamp2() {
|
||
return function (timestamp) {
|
||
if (timestamp) {
|
||
let a = new Date(timestamp).getTime()
|
||
const date = new Date(a)
|
||
const Y = date.getFullYear() + '-'
|
||
const M =
|
||
(date.getMonth() + 1 < 10
|
||
? '0' + (date.getMonth() + 1)
|
||
: date.getMonth() + 1) + '-'
|
||
const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
|
||
const h =
|
||
(date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) +
|
||
':'
|
||
const m =
|
||
(date.getMinutes() < 10
|
||
? '0' + date.getMinutes()
|
||
: date.getMinutes()) + ':'
|
||
const s = date.getSeconds() // 秒
|
||
const dateString = Y + M + D
|
||
return dateString
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
|
||
selectNowDate() {
|
||
var date = new Date(),
|
||
year = date.getFullYear(),
|
||
month = date.getMonth() + 1,
|
||
day = date.getDate(),
|
||
hours = date.getHours(), //获取当前小时数(0-23)
|
||
minutes = date.getMinutes(), //获取当前分钟数(0-59)
|
||
seconds = date.getSeconds()
|
||
month >= 1 && month <= 9 ? (month = '0' + month) : ''
|
||
day >= 0 && day <= 9 ? (day = '0' + day) : ''
|
||
hours >= 0 && hours <= 9 ? (hours = '0' + hours) : ''
|
||
minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : ''
|
||
seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : ''
|
||
// var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
|
||
var timer = year + '-' + month + '-' + day
|
||
this.valueTime = [timer, timer]
|
||
console.log(timer)
|
||
// return timer;
|
||
},
|
||
queryDev() {
|
||
getTowerListApi({ projectSn: this.projectSn }).then((res) => {
|
||
// console.log(res)
|
||
if (res.code == 200 && res.result) {
|
||
this.devList = res.result
|
||
}
|
||
})
|
||
},
|
||
quertData() {
|
||
this.pageNo = 1
|
||
this.pageSize = 10
|
||
console.log(this.devSn)
|
||
this.queryTowerWorkCycle()
|
||
},
|
||
refresh() {
|
||
this.pageNo = 1
|
||
this.pageSize = 10
|
||
this.total = 0
|
||
this.devSn = ''
|
||
this.valueTime = ''
|
||
this.queryTowerWorkCycle()
|
||
},
|
||
queryTowerWorkCycle() {
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
let data = {
|
||
devSn: this.devSn,
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
projectSn: this.projectSn,
|
||
startTime: this.valueTime ? this.valueTime[0] : '',
|
||
endTime: this.valueTime ? this.valueTime[1] : ''
|
||
}
|
||
console.log(data)
|
||
selectTowerWorkCycleApi(data).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200 && res.result) {
|
||
this.tableData = res.result.records
|
||
this.total = res.result.total
|
||
loading.close()
|
||
}
|
||
})
|
||
},
|
||
handleSizeChange(value) {
|
||
this.pageSize = value
|
||
this.queryTowerWorkCycle()
|
||
},
|
||
handleCurrentChange(value) {
|
||
this.pageNo = value
|
||
this.queryTowerWorkCycle()
|
||
},
|
||
exportExcel() {
|
||
if (this.valueTime) {
|
||
window.location.href =
|
||
this.$http.defaults.baseURL +
|
||
'xmgl/download/exporExcelTowerWorkCycle?projectSn=' +
|
||
this.projectSn +
|
||
'&devSn=' +
|
||
this.devSn
|
||
? this.devSn
|
||
: '' +
|
||
'&startTime=' +
|
||
this.valueTime[0] +
|
||
'&endTime=' +
|
||
this.valueTime[1]
|
||
} else {
|
||
window.location.href =
|
||
this.$http.defaults.baseURL +
|
||
'xmgl/download/exporExcelTowerWorkCycle?projectSn=' +
|
||
this.projectSn +
|
||
'&devSn=' +
|
||
this.devSn
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
.search-box {
|
||
background: #fff;
|
||
padding: 25px;
|
||
margin-bottom: 14px;
|
||
.search-item {
|
||
display: inline-block;
|
||
margin-right: 26px;
|
||
}
|
||
}
|
||
.table-box {
|
||
flex: 1;
|
||
background: #fff;
|
||
/deep/.el-table {
|
||
td {
|
||
vertical-align: top;
|
||
}
|
||
.cell {
|
||
padding-left: 44px;
|
||
}
|
||
}
|
||
.f-2 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.table-item {
|
||
width: 50%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|