guangyin
/
hbt-training-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:右侧弹出告警详情

wuyanfu
guangyin 2023-05-18 17:03:24 +08:00
parent 46bbbb9db7
commit 0a13e6fda2
5 changed files with 91 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/home/left/homeLeft.component.html
View File

@ -76,6 +76,7 @@
告警列表
</title-component>
<warning-list-component class="margin-top-23" @getItem="showWaring"
@changeClose="changeClose"
:data-list="dataList"></warning-list-component>
</div>
</div>

148
src/components/home/left/homeLeft.component.ts
View File

@ -5,6 +5,7 @@ import WarningListComponent from "@/components/warningList.component.vue"
import * as turf from '@turf/turf'
import Mock from "mockjs"
import moment from "moment"
import("@/assets/style/pageCommon.component.scss")
@ -23,78 +24,81 @@ export default class HomeLeftComponent extends Vue {
imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
currentCompany = false
popObj:any = {
popTitle:'报警记录',
type:'',
popObj: any = {
popTitle: '报警记录',
type: '',
title: '风险点异常',
info: '',
time: '',
address:'',
address: '',
level: '',
typeName:"",
reporter:"",
tel:"",
position:[],
content:"",
typeId:"",
id:''
typeName: "",
reporter: "",
tel: "",
position: [],
content: "",
typeId: "",
id: ''
}
typeList =[
typeList = [
{
label:'气体泄露',
value:'normal',
level:2,
id:1
},{
label:'火灾爆炸',
value:'fire',
level:1,
id:2
},{
label:'气液泄露',
value:'normal',
level:1,
id:3
},{
label:'安全事故',
value:'normal',
level:2,
id:4
},{
label:'自然灾害',
value:'normal',
level:3,
id:5
label: '气体泄露',
value: 'normal',
level: 2,
id: 1
}, {
label: '火灾爆炸',
value: 'fire',
level: 1,
id: 2
}, {
label: '气液泄露',
value: 'normal',
level: 1,
id: 3
}, {
label: '安全事故',
value: 'normal',
level: 2,
id: 4
}, {
label: '自然灾害',
value: 'normal',
level: 3,
id: 5
},
]
get dataList(){
get dataList() {
return this.$store.state.eventList
}
setData(val,type){
if (type === 'typeName'){
const find = this.typeList.find(item=>item.id == val) as any
setData(val, type) {
if (type === 'typeName') {
const find = this.typeList.find(item => item.id == val) as any
this.popObj.level = find.level
this.popObj.typeName = find.label
this.popObj.title = find.label
this.popObj.type = find.value
}else{
} else {
this.popObj[type] = val
}
}
//展示告警信息
showWaring(item){
showWaring(item) {
this.getItem(Object.assign({
typeName:'人员聚集',
content:'人员踩踏事故预警',
levelName:'二级',
levelClass:'level-2-text',
levelClassIcon:'level-2',
time:'2023年3月12日 13:56:00',
address:'工厂厂房',
reporter:'李四',
typeName: '人员聚集',
content: '人员踩踏事故预警',
levelName: '二级',
levelClass: 'level-2-text',
levelClassIcon: 'level-2',
time: '2023年3月12日 13:56:00',
address: '工厂厂房',
equipment: '5号监测设备',
reporter: '李四',
/*tableHeader:[
{
prop:'name',
@ -134,8 +138,9 @@ export default class HomeLeftComponent extends Vue {
name:'6号摄像头',
},
]*/
},item))
}, item))
}
//点击告警信息
@Emit('getItem')
getItem(item) {
@ -157,45 +162,48 @@ export default class HomeLeftComponent extends Vue {
console.log(1)
}
@Emit('changeClose')
changeClose() {
console.log(1)
}
addManual(){
addManual() {
this.currentCompany = true
this.popObj = {
popTitle:'报警记录',
type:'',
popTitle: '报警记录',
type: '',
title: '风险点异常',
info: '',
time: '',
address:'',
address: '',
level: '',
typeName:"",
reporter:"",
tel:"",
position:[],
content:"",
typeId:"",
id:''
typeName: "",
reporter: "",
tel: "",
position: [],
content: "",
typeId: "",
id: ''
}
}
submitWaring(){
submitWaring() {
this.popObj.id = Mock.mock("@id");
if (this.popObj.type === 'normal'){
this.popObj.position=turf.randomPosition([
if (this.popObj.type === 'normal') {
this.popObj.position = turf.randomPosition([
13312995.84,
4098177.2800000003,
13313096.96,
4098754.88,
]);
}else if(this.popObj.type === 'fire'){
this.popObj.position= [13312990.72, 4098613.12, 0.51]
} else if (this.popObj.type === 'fire') {
this.popObj.position = [13312990.72, 4098613.12, 0.51]
}
this.popObj.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
this.popObj.time = moment().subtract(0, "days").format("YYYY-MM-DD HH:mm:ss")
this.$store.commit("upDateEventList",[this.popObj])
this.currentCompany=false
this.$store.commit("upDateEventList", [this.popObj])
this.currentCompany = false
}
}

3
src/components/warningDetail.component.vue
View File

@ -108,7 +108,10 @@ export default class WarningDetailComponent extends Vue {
getHazardData(item){
this.getHazard(item)
}
@Emit('changeClose')
changeClose(){
}
}
</script>

2
src/views/overview.component.html
View File

@ -23,7 +23,7 @@
<!-- 运营管理-->
<ManageRightComponent v-if="currentNav === 'manage'" class="animate__animated animate__fadeInRight"></ManageRightComponent>
<!--告警详情-->
<WarningDetailComponent :info="info" v-if="waringRightShow && currentNav === 'home'" class="animate__animated animate__fadeInRight"></WarningDetailComponent>
<WarningDetailComponent @changeClose="changeClose" @changePoint="changePoint" :info="info" v-if="waringRightShow && currentNav === 'home'" class="animate__animated animate__fadeInRight"></WarningDetailComponent>
</div>
</div>

8
src/views/overview.component.ts
View File

@ -168,6 +168,14 @@ export default class OverViewComponent extends BaseComponent {
this.info = item
this.waringRightShow = true
}
//定位坐标
changePoint(item){
this.addWarnning(item)
}
//关闭告警详情
changeClose(){
this.waringRightShow = false
}
//进入自由导览
async showView (){
this.toggleAllPanel();