2022-06-08 14:51:11 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="fullHeight">
|
|
|
|
|
<div class="fullHeight">
|
|
|
|
|
<div class="searchBox whiteBlock">
|
|
|
|
|
<el-form
|
|
|
|
|
:inline="true"
|
|
|
|
|
size="medium"
|
|
|
|
|
:model="formInline"
|
|
|
|
|
class="demo-form-inline"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item :label="$t('message.sixComplete.fence.warnType')">
|
|
|
|
|
<el-select v-model="formInline.alarmType">
|
|
|
|
|
<el-option :label="$t('message.sixComplete.fence.all')" value=""></el-option>
|
|
|
|
|
<el-option :label="item.label" :value="item.value" v-for="(item,index) in alarmTypeArr" :key="index"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item :label="$t('message.sixComplete.happenTime')">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
@change="changeTime"
|
|
|
|
|
v-model="dateRangeArr"
|
|
|
|
|
type="datetimerange"
|
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
|
:range-separator="$t('message.sixComplete.to')"
|
|
|
|
|
:start-placeholder="$t('message.sixComplete.start')"
|
|
|
|
|
:end-placeholder="$t('message.sixComplete.end')"
|
|
|
|
|
>
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item :label="$t('message.sixComplete.fence.devNo')">
|
|
|
|
|
<el-input v-model="formInline.hardwareId" :placeholder="$t('message.sixComplete.fence.placeholder')"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="getList(1)" plain>{{$t('message.sixComplete.query')}}</el-button>
|
|
|
|
|
<el-button type="warning" @click="refresh" plain>{{$t('message.sixComplete.fresh')}}</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- <el-button type="primary" size="medium" @click="addFn"
|
|
|
|
|
>新增课程</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button type="warning" plain size="medium" @click="refresh">{{
|
|
|
|
|
$t("message.alarmValueSet.refresh")
|
|
|
|
|
}}</el-button> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table_wrap">
|
|
|
|
|
<div class="listContent">
|
|
|
|
|
<vue-scroll>
|
|
|
|
|
<div
|
|
|
|
|
class="listBox"
|
|
|
|
|
v-for="(item, index) in workerList"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<div class="inner whiteBlock">
|
|
|
|
|
<div class="videoBox">
|
|
|
|
|
<!-- <video
|
|
|
|
|
class=""
|
|
|
|
|
:src="$store.state.FILEURL + item.eduVideo"
|
|
|
|
|
controls
|
|
|
|
|
></video> -->
|
|
|
|
|
<img :src="$store.state.FILEURL + item.imageUrl" :alt="$t('message.sixComplete.carDense.takePhoto')" :preview="$store.state.FILEURL + item.imageUrl">
|
|
|
|
|
<div class="desc">
|
|
|
|
|
<span class="time">{{getTypeName(item.alarmType)}}</span>
|
|
|
|
|
<span>{{ item.createTime }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="title">{{$t('message.sixComplete.carDense.from')+':'}}{{ item.location }}</div>
|
|
|
|
|
<!-- <div @click.stop="deleteBefore(item)" class="deleteBtn">
|
|
|
|
|
<img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</vue-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="placeholderBox" v-if="workerList.length == 0">
|
|
|
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
|
|
|
<p>{{$t('message.sixComplete.carDense.noWarn')}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <el-table class="tables" :data="workerList">
|
|
|
|
|
<el-table-column
|
|
|
|
|
type="index"
|
|
|
|
|
width="50"
|
|
|
|
|
align="center"
|
|
|
|
|
:label="$t('message.personnelPosition.beaconManage.table.index')"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column prop="eduCourseName" :label="'课程名称'"></el-table-column>
|
|
|
|
|
<el-table-column prop="passScore" :label="'及格分数'"></el-table-column>
|
|
|
|
|
<el-table-column prop="eduWorkerNum" :label="'考试人数'"></el-table-column>
|
|
|
|
|
<el-table-column prop="passWorkerNum" :label="'及格人数'"></el-table-column>
|
|
|
|
|
<el-table-column prop="addTime" :label="'创建时间'"></el-table-column>
|
|
|
|
|
<el-table-column width="200">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div class="tableBtns">
|
|
|
|
|
<div @click="editBefore(scope.row)" class="operationText">
|
|
|
|
|
<span>详细</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div @click="deleteBefore(scope.row)" class="operationText">
|
|
|
|
|
<img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
|
|
|
|
|
<span>{{$t('message.workType.delete')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table> -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
class="pagerBox"
|
|
|
|
|
@size-change="SizeChange"
|
|
|
|
|
@current-change="CurrentChange"
|
|
|
|
|
:current-page="pageInfo.pageNo"
|
|
|
|
|
:page-sizes="$store.state.PAGESIZRS"
|
|
|
|
|
:page-size="pageInfo.pageSize"
|
|
|
|
|
layout="total, sizes, prev, pager, next"
|
|
|
|
|
:total="pageInfo.total"
|
|
|
|
|
background
|
|
|
|
|
></el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
aiAnalyseHardWareAlarmRecordApi
|
|
|
|
|
} from '@/assets/js/api/equipmentCenter/electricBox';
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
pageType: "list",
|
|
|
|
|
workerList: [],
|
|
|
|
|
pageInfo: {
|
|
|
|
|
pageNo: 1, //页数
|
|
|
|
|
pageSize: 10, //条数
|
|
|
|
|
total: 0, //总条数
|
|
|
|
|
},
|
|
|
|
|
itemId: "",
|
|
|
|
|
formInline:{
|
|
|
|
|
alarmType:'',
|
|
|
|
|
endTime:'',
|
|
|
|
|
startTime:'',
|
|
|
|
|
hardwareId:''
|
|
|
|
|
},
|
|
|
|
|
dateRangeArr:[],
|
|
|
|
|
// alarmTypeArr:['安全帽报警','明火报警','聚众报警','倒地报警','越界报警','闯入报警','反光衣报警','吸烟报警']
|
|
|
|
|
|
|
|
|
|
alarmTypeArr:[{
|
|
|
|
|
label: this.$t('message.sixComplete.carWash.alarmTypeArr')[0],/* '烟感报警', */
|
|
|
|
|
value: 1,
|
|
|
|
|
},{
|
|
|
|
|
label: this.$t('message.sixComplete.carWash.alarmTypeArr')[1],/* '明火报警', */
|
|
|
|
|
value: 2,
|
|
|
|
|
},{
|
|
|
|
|
label: this.$t('message.sixComplete.carWash.alarmTypeArr')[2],/* '人员倒地报警', */
|
|
|
|
|
value: 3,
|
|
|
|
|
},{
|
|
|
|
|
label: this.$t('message.sixComplete.carWash.alarmTypeArr')[3],/* '未戴安全帽报警', */
|
|
|
|
|
value: 4,
|
|
|
|
|
},{
|
|
|
|
|
label: this.$t('message.sixComplete.carWash.alarmTypeArr')[4],/* '区域入侵报警', */
|
|
|
|
|
value: 5,
|
|
|
|
|
},{
|
|
|
|
|
label: this.$t('message.sixComplete.carWash.alarmTypeArr')[5],/* '越界入侵报警', */
|
|
|
|
|
value: 6,
|
|
|
|
|
},{
|
|
|
|
|
label: this.$t('message.sixComplete.carWash.alarmTypeArr')[6],/* '人员聚集报警', */
|
|
|
|
|
value: 7,
|
|
|
|
|
},{
|
|
|
|
|
label: this.$t('message.sixComplete.carWash.alarmTypeArr')[7],/* '反光衣报警', */
|
|
|
|
|
value: 8,
|
|
|
|
|
},{
|
|
|
|
|
label: this.$t('message.sixComplete.carWash.alarmTypeArr')[8],/* '裸土覆盖报警', */
|
|
|
|
|
value: 9,
|
|
|
|
|
},{
|
|
|
|
|
label:this.$t('message.sixComplete.carWash.alarmTypeArr')[9], /* '口罩识别报警', */
|
|
|
|
|
value: 13,
|
|
|
|
|
},{
|
|
|
|
|
label:this.$t('message.sixComplete.carWash.alarmTypeArr')[10], /* '徘徊预警', */
|
|
|
|
|
value: 14,
|
|
|
|
|
},{
|
|
|
|
|
label:this.$t('message.sixComplete.carWash.alarmTypeArr')[11], /* '物体滞留监测', */
|
|
|
|
|
value: 15,
|
|
|
|
|
},{
|
|
|
|
|
label: this.$t('message.sixComplete.carWash.alarmTypeArr')[12],/* '绊线监测', */
|
|
|
|
|
value: 16
|
|
|
|
|
}]
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.selectNowDate()
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
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 timer2 = year + '-' + month + '-' + day + ' ' + '00:00:00'
|
|
|
|
|
this.dateRangeArr = [timer2,timer]
|
|
|
|
|
this.formInline.startTime=this.dateRangeArr[0]
|
|
|
|
|
this.formInline.endTime=this.dateRangeArr[1]
|
|
|
|
|
console.log(timer)
|
|
|
|
|
// return timer;
|
|
|
|
|
},
|
|
|
|
|
getTypeName(val){
|
2022-06-27 15:56:25 +08:00
|
|
|
// console.log('点击',val)
|
2022-06-08 14:51:11 +08:00
|
|
|
let text = ""
|
|
|
|
|
this.alarmTypeArr.forEach(item=>{
|
|
|
|
|
if(item.value == val){
|
|
|
|
|
text = item.label
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return text
|
|
|
|
|
},
|
|
|
|
|
changeTime(){
|
|
|
|
|
if(this.dateRangeArr){
|
|
|
|
|
this.formInline.startTime=this.dateRangeArr[0]
|
|
|
|
|
this.formInline.endTime=this.dateRangeArr[1]
|
|
|
|
|
}else{
|
|
|
|
|
this.formInline.startTime=''
|
|
|
|
|
this.formInline.endTime=''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
refresh() {
|
|
|
|
|
this.pageInfo.pageNo=1
|
|
|
|
|
this.formInline.hardwareId=''
|
|
|
|
|
this.formInline.startTime=''
|
|
|
|
|
this.formInline.endTime=''
|
|
|
|
|
this.formInline.alarmType=''
|
|
|
|
|
this.dateRangeArr=[]
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
getList(val) {
|
|
|
|
|
if(val == 1){
|
|
|
|
|
this.pageInfo.pageNo = 1
|
|
|
|
|
}
|
|
|
|
|
let json = Object.assign(this.pageInfo,this.formInline)
|
|
|
|
|
json.projectSn=this.$store.state.projectSn
|
|
|
|
|
aiAnalyseHardWareAlarmRecordApi(json).then((res) => {
|
|
|
|
|
this.workerList = res.result.records;
|
|
|
|
|
this.pageInfo.total = res.result.total;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.$previewRefresh();
|
|
|
|
|
}, 100);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
goBack() {
|
|
|
|
|
this.pageType = "list";
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
// addFn() {
|
|
|
|
|
// this.itemId = "";
|
|
|
|
|
// this.pageType = "add";
|
|
|
|
|
// },
|
|
|
|
|
editBefore(item) {
|
|
|
|
|
this.itemId = item.id;
|
|
|
|
|
this.pageType = "detail";
|
|
|
|
|
},
|
|
|
|
|
deleteBefore(item) {
|
|
|
|
|
this.$confirm(this.$t('message.sixComplete.carWash.tipText')+'?', this.$t('message.sixComplete.carWash.tip'), {
|
|
|
|
|
confirmButtonText: this.$t('message.sixComplete.carWash.confirm'),
|
|
|
|
|
cancelButtonText: this.$t('message.sixComplete.carWash.cancel'),
|
|
|
|
|
type: "warning",
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
workerSafeEducationDeleteApi({ id: item.id }).then((res) => {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: "success",
|
|
|
|
|
message: this.$t('message.sixComplete.carWash.deleteSuccess')+'!',
|
|
|
|
|
});
|
|
|
|
|
this.getList();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: "info",
|
|
|
|
|
message: this.$t('message.sixComplete.carWash.cancelDelete'),
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
SizeChange(val) {
|
|
|
|
|
console.log(val)
|
|
|
|
|
this.pageInfo.pageSize = val;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
CurrentChange(val) {
|
|
|
|
|
console.log(val)
|
|
|
|
|
this.pageInfo.pageNo = val;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
|
|
|
|
.backText {
|
|
|
|
|
margin: -10px 0 0 0;
|
|
|
|
|
}
|
|
|
|
|
.jyjzPage .backText{
|
|
|
|
|
margin: 15px 15px 0;
|
|
|
|
|
/deep/.el-page-header__content{
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.listContent {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
height: calc(100% - 70px);
|
|
|
|
|
}
|
|
|
|
|
.listBox {
|
|
|
|
|
float: left;
|
|
|
|
|
width: 20%;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
.inner {
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
box-shadow: 0px 2px 16px 0px rgba(131, 183, 255, 0.2);
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.videoBox {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 200px;
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.desc {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: calc(100% - 20px);
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
padding: 10px 10px 20px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:hover{
|
|
|
|
|
color: @--color-primary;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:hover{
|
|
|
|
|
.deleteBtn{
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.deleteBtn{
|
|
|
|
|
display: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 10px;
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.pagerBox {
|
|
|
|
|
margin: 20px;
|
|
|
|
|
}
|
|
|
|
|
.table_wrap{
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
