2024-03-06 17:42:01 +08:00

355 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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="560"
style="width: 100%"
>
<!-- 违章数据 -->
<el-table-column :label="$t('message.towerCrane.violationData')">
<template slot-scope="scope">
<div class="table-list f-2">
<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.violationInfo1') }}{{
scope.row.banRegionViolation==0?'正常':'违章'
}}
</div>
<div class="table-item">
<!-- 群塔碰撞违章 -->
{{ $t('message.towerCrane.violationInfo2') }}{{
scope.row.collisionViolation==0?'正常':'违章'
}}
</div>
<div class="table-item">
<!-- 吊钩违章 -->
{{ $t('message.towerCrane.violationInfo3') }}{{
scope.row.hookViolation==0?'正常':'违章'
}}
</div>
<div class="table-item">
<!-- 力矩违章 -->
{{ $t('message.towerCrane.violationInfo4') }}{{
scope.row.momentViolation==0?'正常':'违章'
}}
</div>
<div class="table-item">
<!-- 人员报警违章 -->
{{ $t('message.towerCrane.violationInfo5') }}{{
scope.row.personViolation==0?'正常':'违章'
}}
</div>
<div class="table-item">
<!-- 风速违章 -->
{{ $t('message.towerCrane.violationInfo6') }}{{
scope.row.windSpeedViolation==0?'正常':'违章'
}}
</div>
<div class="table-item">
<!-- 添加时间 -->
{{ $t('message.towerCrane.violationInfo7') }}{{
scope.row.addTime
}}
</div>
<div class="table-item">
<!-- 违章时间 -->
{{ $t('message.towerCrane.violationInfo8') }}{{
scope.row.violationTime
}}
</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,
selectTowerViolationApi,
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;
let timer = year + '-' + month + '-' + day + ' ' + '00:00:00';
// var timer = year + '-' + month + '-' + day
let timerOut = year + '-' + month + '-' + day + ' ' + '23:59:59'
this.valueTime = [timer, timerOut]
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)
selectTowerViolationApi(data).then((res) => {
console.log(res)
if (res.code == 200 && res.result) {
this.tableData = res.result.records
console.log(this.tableData)
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>