695 lines
22 KiB
Vue

<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="区域">
<el-select
ref="selectRef"
v-model="selectVal"
placeholder="请选择"
style="width: 100%;"
size="medium"
clearable
@change="selectChange"
>
<el-option style="height:auto" :value="[]">
<el-tree
:data="areaList"
node-key="id"
ref="groupTree"
:props="defaultAreaProps"
:default-expand-all="false"
@node-click="treeAreaClick"
>
</el-tree>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="企业">
<el-select
ref="selectEnterpriseRef"
v-model="selectEnterpriseVal"
placeholder="请选择"
clearable
@change="selectEnterpriseChange"
>
<el-option style="height:auto" :value="[]">
<el-tree
:data="treeList"
node-key="enterpriseId"
ref="groupTree"
:props="defaultProps"
:default-expand-all="false"
@node-click="treeClick"
>
</el-tree>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="处置状态">
<el-select v-model="formInline.handleDone" clearable>
<el-option :label="item.name" :value="item.value" v-for="(item, index) in handleResultStatus" :key="index"></el-option>
</el-select>
</el-form-item>
<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.name" :value="item.data" v-for="(item, index) in alarmTypeArrList" :key="item.data"></el-option>
</el-select>
</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 :label="$t('message.sixComplete.happenTime')">
<el-date-picker
@change="changeTime"
v-model="dateRangeArr"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', '23:59:59']"
: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>
<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=""
:preview="$store.state.FILEURL + item.imageUrl"
/>
<div class="desc">
<span class="time">{{ getTypeName(item.alarmType) }}</span>
<span>{{ item.createTime }}</span>
</div>
<div class="status-style" :class="item.handleResult?'result-style':'no-result-style'">{{item.handleResult?'已处置':'未处置'}}</div>
</div>
<!-- 来源 -->
<div class="title" @click="openDialogDetail(item)">{{ $t('message.sixComplete.carDense.from') + ':' }}{{ item.alarmDesc }}</div>
<!-- 去处置 -->
<div class="toDisposeOf" @click="openDialog(item)" v-if="!item.handleResult">
<el-button v-permission="{key: 'ai_disposition', menuPath: '/project/aiAnalysis/warningList'}" type="primary" size="small">去处置</el-button>
</div>
<div class="toDisposeDetail" @click="openDialogDetail(item)" v-else>
<el-button type="info" size="small">已闭合</el-button>
</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="Number(pageInfo.total)"
background
></el-pagination>
</div>
</div>
<!-- 处置记录弹框-->
<el-dialog :modal-append-to-body="false" @close="close" title="处置详情" :visible.sync="recordShow" width="667px">
<div class="dialog_content">
<el-form size="medium" ref="addEditForm" :model="addEditForm" :rules="addEditRules" label-width="120px" class="dialogFormBox">
<!-- <el-form-item label="处置结果" prop="handleResult">
<el-radio :disabled="isDetail" v-model="addEditForm.handleResult" :label="1">已处置</el-radio>
<el-radio :disabled="isDetail" v-model="addEditForm.handleResult" :label="2">误报忽略</el-radio>
</el-form-item>
<el-form-item label="描述" prop="desc" v-if="addEditForm.handleResult != 2">
<el-input
:autosize="{ minRows: 2, maxRows: 6 }"
:disabled="isDetail"
type="textarea"
v-model="addEditForm.desc"
:placeholder="'请输入'"
></el-input>
</el-form-item> -->
<el-form-item label="选择违章人员" prop="workerInfoList" v-if="addEditForm.handleResult != 2">
<el-select :disabled="isDetail" filterable multiple v-model="selectList" placeholder="请选择" clearable @change="dutySelectChange">
<el-option v-for="(item, index) in workerListOptions" :key="index" :label="item.workerName" :value="item.id"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="扣分" prop="deductScore" v-if="addEditForm.handleResult != 2">
<el-input-number disabled v-model="addEditForm.deductScore" :min="0" :max="100" :placeholder="'请输入'"></el-input-number>
</el-form-item>
<div class="dialog-footer" v-if="!isDetail">
<el-button class="cancleBtn" icon="el-icon-circle-close" size="medium" @click="recordShow = false">取消 </el-button>
<el-button @click="addBtn" type="primary" icon="el-icon-circle-check" size="medium">确定 </el-button>
</div>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import {
aiAnalyseHardWareAlarmRecordApi,
aiAnalyseHardWareAlarmRecordEdit,
getViolatorList
} from '@/assets/js/api/equipmentCenter/electricBox'
import { getDictionaryItemApi } from '@/assets/js/api/companyDiagram.js'
import { getWorkerInfoList, selectHierarchyEnterpriseListApi } from '@/assets/js/api/laborPerson.js'
import {
getQualityRegionListApi
} from '@/assets/js/api/quality.js'
export default {
data() {
return {
handleResultStatus: [
{name: '未处置', value: false},
{name: '已处置', value: true}
],
// 对应的字段
defaultProps: {
children: "children",
label: "enterpriseName",
},
treeList: [],
areaList: [],
areaSelectVal: "",
// 对应的字段
defaultAreaProps: {
children: "children",
label: "regionName",
},
selectVal: "",
selectEnterpriseVal: "",
isDetail: false,
pageType: 'list',
workerList: [],
pageInfo: {
pageNo: 1, //页数
pageSize: 10, //条数
total: 0 //总条数
},
itemId: '',
formInline: {
alarmType: '',
handleDone: "",
endTime: '',
startTime: '',
hardwareId: '',
qualityRegionId: '',
enterpriseId: ''
},
dateRangeArr: [],
alarmTypeArrList: [],
recordShow: false,
addEditForm: {
workerInfoList: [],
handleResult: 1,
dutyId: '',
desc: '',
deductScore: 0
},
addEditRules: {
dutyId: [
{
required: true,
message: '请选择',
trigger: 'change'
}
],
handleResult: [
{
required: true,
message: '必填',
trigger: 'blur'
}
]
},
workerListOptions: [],
selectList: []
}
},
mounted() {
this.selectNowDate()
this.getList()
this.getDictionaryList()
this.getDutyPerson()
this.getPositionList();
this.getTreeList();
},
methods: {
// 树形控件点击
treeClick(data) {
console.log(data);
if (data.status == 1) {
this.$message.warning("无法选中已禁用组织");
} else {
this.selectEnterpriseVal = data.enterpriseName;
this.formInline.enterpriseId = data.enterpriseId;
this.$refs.selectEnterpriseRef.blur();
}
},
getTreeList() {
selectHierarchyEnterpriseListApi({
projectSn: this.$store.state.projectSn,
}).then((result) => {
if (result.success) {
this.treeList = result.result;
}
});
},
//获取承包商/厂区
getPositionList() {
let data = {
projectSn: this.$store.state.projectSn
}
getQualityRegionListApi(data).then((res) => {
console.log('res=================', res);
if (res.code == 200) {
this.areaList = res.result
console.log(this.areaList,135456)
}
})
},
selectChange(val) {
console.log(val, 123);
if (!val) {
this.selectVal = "";
this.areaSelectVal = "";
this.formInline.qualityRegionId = "";
}
},
selectEnterpriseChange(val){
console.log(val, 123);
if (!val) {
this.selectEnterpriseVal = "";
this.formInline.enterpriseId = "";
}
},
// 树形控件点击
treeAreaClick(data) {
console.log(data);
if (data.status == 1) {
this.$message.warning("无法选中已禁用组织");
} else {
this.selectVal = data.regionName;
this.areaSelectVal = data.id;
this.formInline.qualityRegionId = data.id;
this.$refs.selectRef.blur();
}
},
// 选择人员下拉回调
dutySelectChange(e) {
// const item = this.dutyList.find(item => item.userId === e)
// this.addEditForm.dutyUserName = item.realName
const newArray = e.map(item => ({ id: item }))
this.addEditForm.workerInfoList = newArray
console.log('下拉选择', newArray)
},
close() {
this.addEditForm = {}
this.selectList = []
this.isDetail = false
this.$nextTick(() => {
this.$refs.addEditForm.clearValidate()
})
},
//查询选择人员下拉
getPersonDetail(itemId) {
let data = {
projectSn: this.$store.state.projectSn,
aiAnalyseHardWareAlarmRecordId: itemId
}
getViolatorList(data).then(res => {
if (res.code == 200) {
this.selectList = res.result.map(items => items.id)
console.log('回显选择人员', this.selectList)
} else {
this.$message.error(res.message)
}
})
},
//查询选择人员下拉
getDutyPerson() {
let data = {
projectSn: this.$store.state.projectSn,
isFilterQualityRegionEnterprise: 1
}
getWorkerInfoList(data).then(res => {
if (res.code == 200) {
this.workerListOptions = res.result.records
console.log('获取施工人员下拉', this.workerListOptions)
} else {
this.$message.error(res.message)
}
})
},
// 打开处置弹窗
openDialog(item) {
this.addEditForm = JSON.parse(JSON.stringify(item))
this.addEditForm.deductScore = item.aiDeductRule.deductScore
this.getPersonDetail(item.id)
this.recordShow = true
console.log('打开处置弹窗', item)
},
// 打开 详情处置弹窗
openDialogDetail(item) {
this.isDetail = true
this.addEditForm = JSON.parse(JSON.stringify(item))
this.addEditForm.deductScore = item.aiDeductRule.deductScore
this.getPersonDetail(item.id)
this.recordShow = true
console.log('打开处置弹窗', item)
},
// 保存
addBtn() {
let params = JSON.parse(JSON.stringify(this.addEditForm))
params.projectSn = this.$store.state.projectSn
params.handleResult = 1;
if(params.handleResult == 1){
params.handleDone = true;
}
this.$refs.addEditForm.validate(valid => {
if (valid) {
console.log('保存', params)
aiAnalyseHardWareAlarmRecordEdit(params).then(result => {
if (result.success) {
this.$message.success(result.message)
this.getList()
this.recordShow = false
}
})
} else {
return false
}
})
},
//获取字典施工阶段
getDictionaryList() {
getDictionaryItemApi({
dictionaryEncoding: 'ai_analyse_hard_ware_alarm_record_type',
projectSn: this.$store.state.projectSn
}).then(res => {
if (res.result.length > 0) {
console.log('获取字典施工阶段', res.result)
this.alarmTypeArrList = res.result
}
})
},
// 获取当前时间 返回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 + ' ' + '23:59:59'
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) {
let text = ''
this.alarmTypeArrList.forEach(item => {
if (item.data == val) {
text = item.name
}
})
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.formInline.handleDone = ""
this.dateRangeArr = []
// 区域内容清空
this.selectVal = "";
this.areaSelectVal = "";
this.formInline.qualityRegionId = "";
// 企业内容情况
this.selectEnterpriseVal = "";
this.formInline.enterpriseId = "";
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
json.isPushed = 1
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;
}
.status-style{
position: absolute;
top: 0px;
left: 0px;
color: white;
text-align: center;
width: 60px;
height: 20px;
line-height: 20px;
border-radius: 10px;
z-index: 10;
font-size: 14px;
}
.result-style{
background-color: #DA4846;
}
.no-result-style{
background-color: #5B82EE;
}
}
.title {
width: 70%;
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;
}
.toDisposeOf {
color: #fff;
font-size: 12px;
cursor: pointer;
position: absolute;
right: 3%;
bottom: 4%;
}
.toDisposeDetail {
color: #fff;
cursor: pointer;
position: absolute;
right: 3%;
bottom: 4%;
}
// 下拉框样式修改
/deep/.el-select-dropdown__item.hover,.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
background-color: transparent;
}
.searchBox .el-form-item {
margin: 5px 15px 0px 0;
}
</style>