@@ -1,243 +1,120 @@
< template >
< div >
< el-card >
< el-badge :value = "value" class = "item" style = "margin-bottom: 10px; float: right" >
< el-button size = "small" @click ="openWindow" > Andon信息 < / el -button >
< / el-badge >
< el-table :data = "tableData" s tyl e= "width: 100%;" size = "mini" height = "800" highlight -current -row border stripe >
< el-table-column align = "center" label = "照片" width = "50" >
< template slot -scop e =" scope " >
< el-popover v-if = "scope.row.文件标识 && scope.row.文件标识 !== 'null'" placement="top-start" width="200" trigger="hover" >
< el -button type = "text" style = "float:right" @click ="deletePhoto(scope.row)" > 删除 < / el -button >
< el-image : src = "scope.row.文件标识 && scope.row.文件标识 !== 'null' ? (readFile + scope.row.文件标识 + '.' + scope.row.文件后缀) : readFile + '123.jpg'" >
< div slot = "error" class = "image-slot" >
< i class = "el-icon-picture-outline " / >
< / div >
< / el-image >
< el-image slot = "reference" : src = "scope.row.文件标识 && scope.row.文件标识 !== 'null' ? (readFile + scope.row.文件标识 + '.' + scope.row.文件后缀) : readFile + '123.jpg'" style = "width:30px;" >
< div slot = "error" class = "image-slot" >
< i class = "el-icon-picture-outline" / >
< / div >
< / el-image >
< / el-popover >
< span v-else > — < / span >
< / template >
< / el -table -column >
< el-table-column align = "center" label = "工位号" >
< template slot -scope = " scope " >
< el-button type = "text" @click ="openNew(scope.row.工位号)" > {{ scope.row.工位号 }} < / el -button >
< / template >
< / el-table-column >
< el-table-column align = "center" label = "登陆人" >
< template slot -scope = " scope " >
< span v-if = "scope.row.姓名===''||scope.row.姓名===null" slot="reference" size="small" style="width: 80px" type="warning" > 未登录 < / span >
< span v-else slot = "reference" type = "success" size = "small" style = "width: 80px" > { { scope . row . 姓名 } } < / span >
< / template >
< / el-table-column >
< el-table-column align = "center" label = "呼叫类型" >
< template slot -scope = " scope " >
< div v-if = "scope.row.呼叫备注===''|| scope.row.呼叫备注===null"><div style="width: 12px;height: 12px;border-radius: 50%;background-color: rgb(103, 194, 58);display: inline-block;margin:0px 5px 0 0" /> 正常工作 < / div >
< div v-else > < div style = "width: 12px;height: 12px;border-radius: 50%;background-color: red;display: inline-block;margin:0px 5px 0 0" / > { { scope . row . 呼叫备注 } } < / div >
< / template >
< / el-table-column >
< el-table-column label = "操作" fixed = "right" align = "center" width = "200" >
< template slot -scope = " scope " >
< el-button
: disabled = "scope.row.文件标识 && scope.row.文件标识 !== 'null'"
size = "mini"
type = "text"
icon = "el-icon-picture"
@click ="handlePicture(scope.row)" > 上传图片 < / el -button >
< / template >
< / el-table-column >
< / el-table >
< el-date-picker
v-model = "dateRange"
size = "small"
typ e = "daterange"
align = "center"
styl e ="width: 300px;margin: 5px"
value -format = " yyyy -MM -dd "
format = "yyyy-MM-dd"
range -separator = " ~ "
start -placeholder = " 开始日期 "
end -placeholder = " 结束日期 "/ >
< el-button type = "primary" plain size = "small" icon = "el-icon-search" style = "margin-left: 10px" @click ="total1=0;pageCurrent1=1;pageSize1=50;searchTable()" > 查询 < / el -button >
< / el-card >
< el-dialog :visible.sync = "dialogVisible" width = "60%" >
< el-table :data = "tableDataMassage" style = "width: 100%;" size= "mini" height= "5 00" highlight -current -row border >
< el-table-column align = "center" label = "工位号 " >
< el-card >
< el-table v-loading = "loading" :data="tableData" :row-class-name="tableRowClassName" style= "width: 100%;" size= "mini" height="7 00" highlight -current -row border >
< el-table-column align = "center" label = "报警 工位" >
< template slot -scope = " scope " >
< el-button type = "text" > {{ scope . row . 工位号 } } < / el-button >
{ { scope . row . 工位号 } }
< / template >
< / el-table-column >
< el-table-column align = "center" label = "登陆 人" >
< el-table-column align = "center" label = "报警 人" >
< template slot -scope = " scope " >
< el-tag v-if = "scope.row.姓名===''||scope.row.姓名===null" slot="reference" size="small" style="width: 80px" type="warning" > 未登录 < / el -tag >
< el-tag v-else slot = "reference" type = "success" size = "small" style = "width: 80px" > { { scope . row . 姓名 } } < / el-tag >
{ { scope . row . 呼叫人 } }
< / template >
< / el-table-column >
< el-table-column align = "center" label = "呼叫 类型" >
< el-table-column align = "center" label = "报警 类型" >
< template slot -scope = " scope " >
< div v-if = "scope.row.呼叫备注===''|| scope.row.呼叫备注===null"><div style="width: 12px;height: 12px;border-radius: 50%;background-color: rgb(103, 194, 58);display: inline-block;margin:0px 5px 0 0" /> 正常工作 < / div >
< div v-else > < div style = "width: 12px;height: 12px;border-radius: 50%;background-color: red;display: inline-block;margin:0px 5px 0 0" / > { { scope . row . 呼叫备注 } } < / div >
{ { scope . row . 编号描述 } }
< / template >
< / el-table-column >
< el-table-column align = "center" label = "报警内容" >
< template slot -scope = " scope " >
{ { scope . row . 安东明细描述 } }
< / template >
< / el-table-column >
< el-table-column align = "center" label = "报警时间" >
< template slot -scope = " scope " >
{ { scope . row . 呼叫时间 } }
< / template >
< / el-table-column >
< el-table-column align = "center" label = "复位时间" >
< template slot -scope = " scope " >
{ { scope . row . 解除时间 } }
< / template >
< / el-table-column >
< el-table-column align = "center" label = "处理时长" >
< template slot -scope = " scope " >
{ { scope . row . 处理时长 } }
< / template >
< / el-table-column >
< / el-table >
< / el-dialog >
< el-dialog :visible.sync = "dialogFormVisible" title = "上传图片" center style = "height: 800px" width = "30%" >
< el-upload
id = "invoiceScan "
ref = "upload "
:multiple = "true "
:auto-upload = "false "
:on-success = "uploadSuccess "
:before-upload = "beforeUpload "
:on-exceed = "warningExceed"
:limit = "limit"
: action = "upload+'?num='+ OPId"
list -type = " picture -card " >
< i class = "el-icon-plus" / >
< / el-upload >
< div slot = "footer" class = "dialog-footer" >
< el-button @click ="dialogFormVisible=false" > 取消 < / el -button >
< el-button type = "primary" style = "width: 70px" @click ="submitPerson()" > 确定 < / el -button >
< div class = "block" style = "margin-top: 10px;" >
< el-pagination
:current-page = "pageCurrent1"
: page -sizes = " [ 50 , 100 , 150 , 200 ] "
:page-size = "pageSize1 "
:total = "total1 "
style = "display:inline-block;width:50% "
layout = "total, sizes, prev, pager, next, jumper "
@ size -change = " handleSizeChange1 "
@ current -change = " handleCurrentChange1 " / >
< / div >
< / el-dialog >
< / el-card >
< / div >
< / template >
< script >
import { ANDON _countselect } from '@/api/ManufacturingCenter/AntonMonitoring'
import { wsuri , name1 , uploadOP } from '@/utils/request '
import { readFile } from '@/utils/request'
import request from '@/utils/request'
import { searchTable } from '@/api/ManufacturingCenter/AntonMonitoring'
import { getNowShotTime } from '@/utils/tool '
export default {
data ( ) {
return {
readFile : readFile ,
limit : 9999 ,
dateRange : [ ] ,
tableData : [ ] ,
timer _ANDON : '' ,
andonMsg : '' ,
Name : '' ,
upload : uploadOP ,
dialogFormVisible : false ,
OPId : '' ,
massage : [ ] ,
dialogVisible : false ,
tableDataMassage : [ ] ,
value : 0
loading : false ,
total1 : 0 ,
pageCurrent1 : 1 ,
pageSize1 : 50
}
} ,
mounted ( ) {
this . ANDON _countselect ( )
this . timer _ANDON = setInterval ( this . search ( ) , 60 * 1000 * 5 ) // ANDON看板 5 分钟一刷新
} ,
created ( ) {
this . initWebpack ( )
this . dateRange [ 0 ] = getNowShotTime ( )
this . dateRange [ 1 ] = getNowShotTime ( )
this . searchTable ( )
} ,
methods : {
deletePhoto ( row ) {
this . $confirm ( '此操作将永久删除该图片, 是否继续?' , '提示' , {
confirmButtonText : '确定' ,
cancelButtonText : '取消' ,
type : 'warning'
} ) . then ( ( ) => {
request ( {
url : '' ,
method : 'post' ,
data : {
type : '4' ,
name : ` delete from 设备管理_设备监控_图片 where 工位 = ' ${ row . 工位号 } ' `
}
} ) . then ( response => {
if ( response . data [ 0 ] . result === '1' ) {
this . $message . success ( '删除成功' )
this . ANDON _countselect ( )
} else {
this . $message . error ( '删除失败' )
}
} )
} ) . catch ( ( ) => {
this . $message ( {
type : 'info' ,
message : '取消删除'
} )
searchTable ( ) {
this . loading = true
this . tableData = [ ]
var check1
this . dateRange ? check1 = 1 : ( check1 = 0 , this . dateRange = '' )
searchTable ( check1 , this . dateRange [ 0 ] , this . dateRange [ 1 ] , this . pageCurrent1 , this . pageSize1 ) . then ( response => {
this . tableData = response . data . rows
this . total1 = response . data . total
this . loading = false
} )
} ,
openNew ( val ) {
window . open ( ` http://192.168.1.231:8008/#/EquipmentConditionAnalysis?opname= ${ val } ` , '_blank' )
} ,
ANDON _countselect ( ) {
ANDON _countselect ( ) . then ( response => {
this . tableData = response . data
} )
} ,
// 初始化websocket
initWebpack ( ) {
this . websock = new WebSocket ( wsuri ) // 这里面的this都指向vue
this . websock . onopen = this . websocketopen
this . websock . onmessage = this . websocketonmessage
this . websock . onclose = this . websocketclose
this . websock . onerror = this . websocketerror
} ,
// 打开
websocketopen ( ) {
console . log ( 'WebSocket连接成功' )
this . websock . send ( '{<' + name1 + '>}' )
} ,
// 数据接收
websocketonmessage ( msg ) {
console . log ( msg )
this . andonMsg = msg . data . split ( '|' ) [ 3 ]
this . Name = msg . data . split ( '|' ) [ 2 ]
if ( this . andonMsg === '1' ) {
this . search ( )
// 完成日期变色
tableRowClassName ( { row , rowIndex } ) {
row . index = rowIndex
if ( ! row . 解除时间 ) {
return 'ANDON_Uncomplete'
}
} ,
// 关闭
websocketclose ( ) {
console . log ( 'WebSocket关闭' )
handleSizeChange1 ( val ) {
this . pageCurrent1 = 1
this . pageSize1 = val
this . searchTable ( )
} ,
// 失败
websocketerror ( ) {
console . log ( 'WebSocket连接失败' )
} ,
uploadSuccess ( res ) { // 上传成功回调
if ( res [ 0 ] . result === '1' ) {
this . $message . success ( '增加成功' )
this . dialogFormVisible = false
this . ANDON _countselect ( )
this . $refs . upload . clearFiles ( )
} else {
this . $message . error ( '增加失败' )
}
} ,
beforeUpload ( file ) { // 上传前检测
const isJPG = /^image\/.*/ . test ( file . type )
if ( ! isJPG ) {
this . $message . error ( '只能上传图片。。' )
}
return isJPG
} ,
warningExceed ( ) {
this . $message . error ( '仅可上传五张照片' )
} ,
handlePicture ( row ) {
this . dialogFormVisible = true
this . OPId = row . 工位号
} ,
submitPerson ( ) {
this . $refs . upload . submit ( )
} ,
search ( ) {
this . tableDataMassage = [ ]
ANDON _countselect ( ) . then ( response => {
this . tableData = response . data
return response . data
} ) . then ( data => {
for ( let i = 0 ; i < data . length ; i ++ ) {
if ( data [ i ] . 呼叫备注 !== null ) {
this . tableDataMassage . push ( data [ i ] )
handleCurrentChange1 ( val ) {
this . pageCurrent1 = val
this . searchTable ( )
}
}
this . value = this . tableDataMassage . length
} )
} ,
openWindow ( ) {
this . dialogVisible = true
}
}
}
< / script >
@@ -249,3 +126,8 @@ export default {
margin - right : 2 px ;
}
< / style >
< style >
. ANDON _Uncomplete {
background : # 9 bd7fc ! important ;
}
< / style >