feat:右侧弹出告警详情

src/components/home/left/homeLeft.component.html

@@ -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>

src/components/home/left/homeLeft.component.ts

@@ -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 = {
+    popObj: any = {
-        popTitle:'报警记录',
+        popTitle: '报警记录',
-        type:'',
+        type: '',
         title: '风险点异常',
         info: '',
         time: '',
-        address:'',
+        address: '',
         level: '',
-        typeName:"",
+        typeName: "",
-        reporter:"",
+        reporter: "",
-        tel:"",
+        tel: "",
-        position:[],
+        position: [],
-        content:"",
+        content: "",
-        typeId:"",
+        typeId: "",
-        id:''
+        id: ''
 
     }
-    typeList =[
+    typeList = [
         {
-            label:'气体泄露',
+            label: '气体泄露',
-            value:'normal',
+            value: 'normal',
-            level:2,
+            level: 2,
-            id:1
+            id: 1
-        },{
+        }, {
-            label:'火灾爆炸',
+            label: '火灾爆炸',
-            value:'fire',
+            value: 'fire',
-            level:1,
+            level: 1,
-            id:2
+            id: 2
-        },{
+        }, {
-            label:'气液泄露',
+            label: '气液泄露',
-            value:'normal',
+            value: 'normal',
-            level:1,
+            level: 1,
-            id:3
+            id: 3
-        },{
+        }, {
-            label:'安全事故',
+            label: '安全事故',
-            value:'normal',
+            value: 'normal',
-            level:2,
+            level: 2,
-            id:4
+            id: 4
-        },{
+        }, {
-            label:'自然灾害',
+            label: '自然灾害',
-            value:'normal',
+            value: 'normal',
-            level:3,
+            level: 3,
-            id:5
+            id: 5
         },
     ]
-    get dataList(){
+
+    get dataList() {
         return this.$store.state.eventList
     }
-    setData(val,type){
+
-        if (type === 'typeName'){
+    setData(val, type) {
-            const find = this.typeList.find(item=>item.id == val) as any
+        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:'人员聚集',
+            typeName: '人员聚集',
-            content:'人员踩踏事故预警',
+            content: '人员踩踏事故预警',
-            levelName:'二级',
+            levelName: '二级',
-            levelClass:'level-2-text',
+            levelClass: 'level-2-text',
-            levelClassIcon:'level-2',
+            levelClassIcon: 'level-2',
-            time:'2023年3月12日 13:56:00',
+            time: '2023年3月12日 13:56:00',
-            address:'工厂厂房',
+            address: '工厂厂房',
-            reporter:'李四',
+            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:'报警记录',
+            popTitle: '报警记录',
-            type:'',
+            type: '',
             title: '风险点异常',
             info: '',
             time: '',
-            address:'',
+            address: '',
             level: '',
-            typeName:"",
+            typeName: "",
-            reporter:"",
+            reporter: "",
-            tel:"",
+            tel: "",
-            position:[],
+            position: [],
-            content:"",
+            content: "",
-            typeId:"",
+            typeId: "",
-            id:''
+            id: ''
 
         }
     }
-    submitWaring(){
+
+    submitWaring() {
         this.popObj.id = Mock.mock("@id");
-        if (this.popObj.type === 'normal'){
+        if (this.popObj.type === 'normal') {
-            this.popObj.position=turf.randomPosition([
+            this.popObj.position = turf.randomPosition([
                 13312995.84,
                 4098177.2800000003,
                 13313096.96,
                 4098754.88,
             ]);
-        }else if(this.popObj.type === 'fire'){
+        } else if (this.popObj.type === 'fire') {
-            this.popObj.position= [13312990.72, 4098613.12, 0.51]
+            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.$store.commit("upDateEventList", [this.popObj])
-        this.currentCompany=false
+        this.currentCompany = false
     }
 }
 

src/components/warningDetail.component.vue

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

src/views/overview.component.html

@@ -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>
 

src/views/overview.component.ts

@@ -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();