Skip to content

Z
zhxf_vue
Commit 8dbd9fa5 authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

报警

parent 2035bae8
Hide whitespace changes
Inline Side-by-side
Showing with 255 additions and 365 deletions
src/App.vue
View file @ 8dbd9fa5
...@@ -336,6 +336,7 @@ export default { ...@@ -336,6 +336,7 @@ export default {
}) })
}).then((data) => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
console.log('报警信息:', data.list)
this.tipList = data.list this.tipList = data.list
if (this.tipList.length < 4) { if (this.tipList.length < 4) {
......
src/pages/alarms/untreated/alarm-detail.vue
View file @ 8dbd9fa5
...@@ -66,369 +66,258 @@ ...@@ -66,369 +66,258 @@
</div> </div>
</div> </div>
</div> </div>
div.alarms-untreated-dialog-bottom(v-if="dataForm.type !== null")
el-tabs(v-model="activeName" type='border-card')
el-tab-pane(v-if="dataForm.type === 1" label="处理报警" name="first")
<div class="instruct-list-dialog" style="width:100%; height:230px">
<div style="margin:20px;" :style="{'width':`${opinionList.length}`*200+'px'}">
el-steps(:space="300" :active="opinionActive")
el-step(v-for="item in opinionList" :key='item.id' icon='el-icon-stepsIcon' )
template(slot="description")
div 处理人： {{item.name }}
div 处理时间： {{item.opinionTime}}
div 处理意见：
font(:title="item.content") {{item.content,82|substr}}
</div>
</div>
el-tab-pane(v-if="dataForm.type === 2" label="应急预案" name="second" )
div.instruct-list-dialog(v-if="planStepList.length > 0" style="width:100%; height:230px" v-loading="loading")
div(style="margin:20px;" :style="{'width':`${planStepList.length}`*200+'px'}")
el-steps(:space="300" :active="stepActive")
el-step(v-for="(item,index) in planStepList" :key='index' icon='el-icon-stepsIcon')
template(slot="description")
div(v-if="item.instrId == null")
el-row
el-col(:span="24" v-if="item.runMode === 1") 人为响应：
el-col(:span="24" v-if="item.runMode === 2") 系统响应：
el-row
el-col(:span="24" v-if="item.runMode === 1") 执行单位：{{item.exeName}}
el-col(:span="24" v-if="item.runMode === 2") 资源点：{{item.resName}}
el-row
el-col(:span="24" v-if="item.runMode === 1")
div 动作：
font(:title="item.content" ) {{item.content,25|substr}}
el-col(:span="24" v-if="item.runMode === 2") 动作：{{item.actionName}}
el-row(v-if="item.runMode == 2 && item.status === 2")
el-col(:span="24" )
div 执行结果：
span(v-if="item.byx1 === '1'")
font(color='#67C23A') 成功
font.action_font(class="el-icon-picture" v-if="item.actionName === '抓图'" @click="queryActionHandle(item.id,1)") 抓图详情
font.action_font(class="el-icon-picture" v-if="item.actionName === '录像下载'" @click="queryActionHandle(item.id,2)") 录像下载详情
font(color='#F56C6C' v-if="item.byx1 === '2'") 失败
font(color='#F56C6C' v-if="item.byx1 === '3'") 中止
el-row
el-col(:span="24") 开始执行：{{item.updateTime}}
el-row
el-col(:span="24") 执行完成：{{item.byx1 === '1' ? item.endTime: item.runMode == 1 ? item.endTime : ''}}
//el-row(v-if="stepActive === index && item.runMode === 1")
el-col(:span="24")
el-button(mini="size" type="primary" @click="nextHandle(item)") 下一步
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button size='medium' type='primary' @click="visible = false">关闭</el-button> <el-button size='medium' type='primary' @click="visible = false">关闭</el-button>
</span> </span>
el-dialog(:modal="false" width="35%" :modal-append-to-body="false" class="dialogActionClass" :close-on-press-escape="false" :visible.sync="actionVisible")
div(slot="title")
span.title-bold {{actionType == 0 ? '' : actionType==1 ? '抓图详情' : '录像下载详情'}}
div(v-loading="actionLoading")
img(v-if="actionList.length === 0" height="360px" width="100%" src="../../../assets/images/videoImg.png" alt="")
el-carousel(v-if="actionList.length > 0" height="360px" arrow="always")
el-carousel-item(v-for="(item,index) in actionList")
img(v-if="item.fileType === 'jpg' && item.path && item.path != 'null'" :src="urlPath+item.path" height="320px" width="100%")
video(v-else-if="item.fileType === 'mp4' && item.path && item.path != 'null'" height="320px" width="100%" :src="urlPath+item.path" autoplay loop controls muted="true")
img(v-else height="360px" width="100%" src="../../../assets/images/videoImg.png" alt="")
div.action_div
span.action_span(style="") {{index+1}}</span>{{'/'+actionList.length}}
//span.dialog-footer(slot="footer" style="padding:0 20px 0px 20px;")
el-button(size='medium' type='primary' @click="actionVisible = false") 关闭
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
visible: false, visible: false,
loading: false, loading: false,
actionVisible: false, actionVisible: false,
actionLoading: false, actionLoading: false,
actionList: [], actionList: [],
actionType: 0, actionType: 0,
dataForm: {}, //基本信息 dataForm: {}, //基本信息
disposeForm: {}, //处理报警 disposeForm: {}, //处理报警
urlPath: window.CONFIG.urlPath, urlPath: window.CONFIG.urlPath,
planForm: {}, planForm: {},
planList: [], //应急预案 planList: [], //应急预案
opinionList: [], //处理报警步骤集合 opinionList: [], //处理报警步骤集合
stepList: [], //应急预案步骤集合 stepList: [], //应急预案步骤集合
planStepList: [], planStepList: [],
opinionActive: 0, opinionActive: 0,
stepActive: 0, stepActive: 0,
activeName: 'first', activeName: 'first',
imgList: [], imgList: [],
videoList: [] videoList: []
}
},
filters: {
substr (val, len) {
if (!val) return ''
if (val.length > len) {
return val.slice(1, len) + '...'
}
return val
}
},
methods: {
//指令步骤抓图和录像下载查询
queryActionHandle(id, type) {
this.actionType = type
this.actionList = []
this.actionVisible = true
this.actionLoading = true
this.$http({
url: this.$http.adornUrlAlarm(`/orAttachment/queryByAlarmStepId/` + id),
method: 'get'
}).then(data => {
this.actionLoading = false
if (data && data.code === 0) {
this.actionList = data.list
}
})
},
init(bean) {
this.activeName = 'first'
this.visible = true
this.dataForm = {}
this.disposeForm = {}
this.planList = {}
this.planForm = {}
this.opinionList = []
this.stepList = []
this.planStepList = []
this.getById(bean.id)
this.getListByAlarmsId(bean.id)
this.getHmdListByAlarmsId(bean.id)
},
//获取报警基本信息
getById(id) {
this.$http({
url: this.$http.adornUrlAlarm(`/alarmsInfo/getId`),
method: 'get',
params: {
id: id,
stationId: null
}
}).then(data => {
if (data && data.code === 0) {
this.dataForm = data.bean
}
}).then(data => {
//初始化处理报警信息
if (this.dataForm.type === 1) {
this.activeName = 'first'
this.$http({
url: this.$http.adornUrlAlarm(`/alarmsOpinion/getAlarmsId/`),
method: 'get',
params: this.$http.adornParams({
stationId: null,
alarmsId: this.dataForm.id
})
}).then(data => {
if (data && data.code === 0) {
this.opinionList = data.list
this.opinionActive = this.opinionList.length
}
})
}
//应急预案
if (this.dataForm.type === 2) {
this.activeName = 'second'
this.getPlanInfo()
}
})
},
//获取截图和视频
getListByAlarmsId(id) {
this.imgList = []
this.videoList = []
this.$http({
url: this.$http.adornUrlAlarm(`/linkAttachment/queryListByAlarmsId/` + id),
method: 'get'
}).then(data => {
if (data && data.code === 0) {
let arr = data.list
for (let i in arr) {
let val = { 'src': this.urlPath + arr[i].path }
if (arr[i].fileType === 'jpg') {
this.imgList.push(val)
}
if (arr[i].fileType === 'mp4') {
this.videoList.push(val)
}
}
}
})
},
//获取截图和视频
getHmdListByAlarmsId(id) {
// this.num = this.num + 1
this.imgList = []
this.videoList = []
this.$http({
url: this.$http.adornUrlAlarm(`/alarmAttachment/list`),
method: 'post',
params: {
alarmsId: id,
stationId: null
}
}).then(data => {
if (data && data.code === 0) {
let arr = data.list
for (let i in arr) {
let val = { 'src': this.urlPath + arr[i].path }
this.imgList.push(val)
}
}
})
},
//获取应急预案信息
getPlanInfo() {
this.$http({
url: this.$http.adornUrlAlarm(`/alarmsPlanStep/getPlanStepList`),
method: 'get',
params: {
alarmsId: this.dataForm.id,
stationId: null
}
}).then(data => {
if (data && data.code === 0) {
this.planStepList = data.list
for (let i in this.planStepList) {
if (this.planStepList[i].status === 1) {
this.stepActive = Number(i)
break
}
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.action_font{
cursor:pointer;
line-height: 20px;
padding-left:10px;
}
.action_div{
float:left;
width:100%;
height:40px;
background: #F6F7FB;
line-height: 40px;
bottom: 0;
} }
.action_span{ },
float:left; filters: {
text-indent: 1rem; substr(val, len) {
font-size:18px; if (!val) return ''
font-weight:bold; if (val.length > len) {
color:rgba(33,172,252,1) return val.slice(1, len) + '...'
}
return val
} }
.dialogActionClass{ },
/deep/ .el-dialog__body{ methods: {
padding: 10px; init(bean) {
this.activeName = 'first'
this.visible = true
this.dataForm = {}
this.disposeForm = {}
this.planList = {}
this.planForm = {}
this.opinionList = []
this.stepList = []
this.planStepList = []
this.getById(bean.id)
// this.getListByAlarmsId(bean.id)
// this.getHmdListByAlarmsId(bean.id)
},
//获取报警基本信息
getById(id) {
this.$http({
url: this.$http.adornUrlAlarm(`/alarmsInfo/getId`),
method: 'get',
params: {
id: id,
stationId: null
} }
} }).then((data) => {
.el_form_item{ if (data && data.code === 0) {
margin-bottom: 0px !important; this.dataForm = data.bean
}
.col_style{
height: 2rem;
line-height: 2rem;
}
.row_div{
padding: 1rem 1.5rem 1rem 0rem;
border: 1px #DCDFE6 solid;
/*background-color: #EBEEF5;*/
height: 20rem;
}
.col_div{
padding: 1rem;
border: 1px #DCDFE6 solid;
/*background-color: #EBEEF5;*/
height: 13rem;
max-height: 13rem;
overflow-x:auto;
overflow-y:hidden;
}
.no_img{
text-align: center;
font-size: 36px;
font-weight: bold;
}
.col_div_two{
padding: 1rem;
border: 1px #DCDFE6 solid;
/*background-color: #EBEEF5;*/
border-left: none;
height: 13rem;
}
.row_image_div{
padding: 1.5rem 2rem;
border: 1px #DCDFE6 solid;
border-left: none;
/*background-color: #EBEEF5;*/
height: 20rem;
}
.alarms_font{
color:#409EFF;
line-height: 2rem;
font-weight: bold;
}
.dialogClass {
/deep/ .el-dialog__body{
padding-bottom: 10px;
} }
})
} }
.instruct-list-dialog{ //获取截图和视频
height:410px; width: 450px; float: left;background: #fff; box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.2); overflow: auto; // getListByAlarmsId(id) {
.header{ // this.imgList = []
height: 40px; background: #EEF8FF; line-height: 40px; padding-left: 15px;font-weight:400;margin-bottom: 20px; // this.videoList = []
} // this.$http({
.el-tree{ // url: this.$http.adornUrlAlarm(`/linkAttachment/queryListByAlarmsId/` + id),
background:rgba(255,255,255,0); // method: 'get'
} // }).then(data => {
.el-tree-node__content:hover{ // if (data && data.code === 0) {
background: #35AFF8 // let arr = data.list
} // for (let i in arr) {
.el-input{ // let val = { 'src': this.urlPath + arr[i].path }
width: 90%; // if (arr[i].fileType === 'jpg') {
} // this.imgList.push(val)
.el-carousel__container{ // }
width:300px; margin:0 auto; // if (arr[i].fileType === 'mp4') {
} // this.videoList.push(val)
.el-carousel__arrow--left { // }
left:-50px; // }
} // }
.el-carousel__arrow--right{ // })
right:-50px; // },
} //获取截图和视频
.carousel-name{ // getHmdListByAlarmsId(id) {
position: absolute; // // this.num = this.num + 1
width:100%; height:40px;background:#F6F7FB;bottom:0; line-height:40px; // this.imgList = []
} // this.videoList = []
} // this.$http({
.alarms-untreated-dialog-bottom{ // url: this.$http.adornUrlAlarm(`/alarmAttachment/list`),
.el-tabs__nav-scroll { // method: 'post',
height: 40px; // params: {
padding-top: 10px; // alarmsId: id,
padding-left: 10px; // stationId: null
background: #EEF8FF; // }
.el-tabs__item{ // }).then(data => {
border-top-color: #DCDFE6 !important; // if (data && data.code === 0) {
} // let arr = data.list
} // for (let i in arr) {
// let val = { 'src': this.urlPath + arr[i].path }
// this.imgList.push(val)
// }
// }
// })
// },
}
}
</script>
<style lang="scss" scoped>
.action_font {
cursor: pointer;
line-height: 20px;
padding-left: 10px;
}
.action_div {
float: left;
width: 100%;
height: 40px;
background: #f6f7fb;
line-height: 40px;
bottom: 0;
}
.action_span {
float: left;
text-indent: 1rem;
font-size: 18px;
font-weight: bold;
color: rgba(33, 172, 252, 1);
}
.dialogActionClass {
/deep/ .el-dialog__body {
padding: 10px;
}
}
.el_form_item {
margin-bottom: 0px !important;
}
.col_style {
height: 2rem;
line-height: 2rem;
}
.row_div {
padding: 1rem 1.5rem 1rem 0rem;
border: 1px #dcdfe6 solid;
/*background-color: #EBEEF5;*/
height: 20rem;
}
.col_div {
padding: 1rem;
border: 1px #dcdfe6 solid;
/*background-color: #EBEEF5;*/
height: 13rem;
max-height: 13rem;
overflow-x: auto;
overflow-y: hidden;
}
.no_img {
text-align: center;
font-size: 36px;
font-weight: bold;
}
.col_div_two {
padding: 1rem;
border: 1px #dcdfe6 solid;
/*background-color: #EBEEF5;*/
border-left: none;
height: 13rem;
}
.row_image_div {
padding: 1.5rem 2rem;
border: 1px #dcdfe6 solid;
border-left: none;
/*background-color: #EBEEF5;*/
height: 20rem;
}
.alarms_font {
color: #409eff;
line-height: 2rem;
font-weight: bold;
}
.dialogClass {
/deep/ .el-dialog__body {
padding-bottom: 10px;
}
}
.instruct-list-dialog {
height: 410px;
width: 450px;
float: left;
background: #fff;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
overflow: auto;
.header {
height: 40px;
background: #eef8ff;
line-height: 40px;
padding-left: 15px;
font-weight: 400;
margin-bottom: 20px;
}
.el-tree {
background: rgba(255, 255, 255, 0);
}
.el-tree-node__content:hover {
background: #35aff8;
}
.el-input {
width: 90%;
}
.el-carousel__container {
width: 300px;
margin: 0 auto;
}
.el-carousel__arrow--left {
left: -50px;
}
.el-carousel__arrow--right {
right: -50px;
}
.carousel-name {
position: absolute;
width: 100%;
height: 40px;
background: #f6f7fb;
bottom: 0;
line-height: 40px;
}
}
.alarms-untreated-dialog-bottom {
.el-tabs__nav-scroll {
height: 40px;
padding-top: 10px;
padding-left: 10px;
background: #eef8ff;
.el-tabs__item {
border-top-color: #dcdfe6 !important;
} }
}
}
.alarms-untreated-dialog-bottom{ .alarms-untreated-dialog-bottom {
.el-tabs{ .el-tabs {
.el-tabs__content{ .el-tabs__content {
padding:0 !important; padding: 0 !important;
}
}
} }
}
}
</style> </style>
src/pages/alarms/untreated/query-list.vue
View file @ 8dbd9fa5
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
el-option(label="特别重大" value=1) el-option(label="特别重大" value=1)
el-option(label="重大" value=2) el-option(label="重大" value=2)
el-option(label="一般" value=3) el-option(label="一般" value=3)
el-form-item(v-if="systemType === '0'" label="报警类型:") el-form-item(label="报警类型:")
el-select(v-model="dataForm.eventType" style="width:150px" placeholder="请选择" clearable) el-select(v-model="dataForm.eventType" style="width:150px" placeholder="请选择" clearable)
el-option(v-for="(item,index) in alarmOption" :label="item.eventName" :value="item.id" :key="index") el-option(v-for="(item,index) in alarmOption" :label="item.eventName" :value="item.id" :key="index")
el-form-item(label="报警状态:") el-form-item(label="报警状态:")
...@@ -86,17 +86,17 @@ export default { ...@@ -86,17 +86,17 @@ export default {
{ label: '资源点名称', prop: 'resourceName' }, { label: '资源点名称', prop: 'resourceName' },
{ label: '发生时间', prop: 'occurrenceTime', slot: true }, { label: '发生时间', prop: 'occurrenceTime', slot: true },
{ label: '发生地点', prop: 'occurrenceSite' }, { label: '发生地点', prop: 'occurrenceSite' },
{ label: '处理状态', prop: 'status', slot: true, width: 120 }, { label: '处理状态', prop: 'status', slot: true, width: 120 }
], ],
tableOption: { tableOption: {
border: false, //是否边框 border: false, //是否边框
maxHeight: 500, //高度 maxHeight: 500 //高度
}, }
} }
}, },
components: { components: {
dragTable, dragTable,
AlarmDetail, AlarmDetail
}, },
watch: { watch: {
totalPage() { totalPage() {
...@@ -107,7 +107,7 @@ export default { ...@@ -107,7 +107,7 @@ export default {
this.pageIndex = pages || 1 this.pageIndex = pages || 1
this.getDataList() //获取表格数据的方法 this.getDataList() //获取表格数据的方法
} }
}, }
}, },
created() { created() {
this.checkList = [...this.tableHeader] this.checkList = [...this.tableHeader]
...@@ -136,8 +136,8 @@ export default { ...@@ -136,8 +136,8 @@ export default {
page: this.pageIndex, page: this.pageIndex,
rows: this.pageSize, rows: this.pageSize,
sort: sort, sort: sort,
order: order, order: order
}, }
}).then((data) => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.dataList = data.page.rows this.dataList = data.page.rows
...@@ -168,7 +168,7 @@ export default { ...@@ -168,7 +168,7 @@ export default {
this.$http({ this.$http({
url: this.$http.adornUrl(`/linkEvent/list`), url: this.$http.adornUrl(`/linkEvent/list`),
method: 'post', method: 'post',
params: {}, params: {}
}).then((data) => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.alarmOption = data.list this.alarmOption = data.list
...@@ -199,7 +199,7 @@ export default { ...@@ -199,7 +199,7 @@ export default {
this.$http({ this.$http({
url: this.$http.adornUrlAlarm(`/alarmsInfo/update`), url: this.$http.adornUrlAlarm(`/alarmsInfo/update`),
method: 'post', method: 'post',
data: bean, data: bean
}).then((data) => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.$message({ this.$message({
...@@ -208,7 +208,7 @@ export default { ...@@ -208,7 +208,7 @@ export default {
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.getDataList() this.getDataList()
}, }
}) })
} else { } else {
this.$message.error(data.msg) this.$message.error(data.msg)
...@@ -221,8 +221,8 @@ export default { ...@@ -221,8 +221,8 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.alarmDetail.init(bean) this.$refs.alarmDetail.init(bean)
}) })
}, }
}, }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment