feat:右侧弹出告警详情

# Conflicts:
#	src/views/overview.component.ts

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,79 +24,82 @@ 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号监测设备',
-            tableHeader:[
+            reporter: '李四',
+            /*tableHeader:[
                 {
                     prop:'name',
                     label:'摄像头名称'
@@ -133,11 +137,12 @@ export default class HomeLeftComponent extends Vue {
                     distance:'22',
                     name:'6号摄像头',
                 },
-            ]
+            ]*/
-        },item))
+        }, item))
     }
+
     //点击告警信息
-    @Emit()
+    @Emit('getItem')
     getItem(item) {
         // console.log('item', 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

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <title-component :show-close="true" @change-close="changeClose">
+      {{ title }}
+    </title-component>
+    <div class="info-content tb-style">
+      <div class="info-content-text">
+        <span class="label">告警类型：</span>
+        <span class="text">{{info.typeName}}</span>
+      </div>
+      <div class="info-content-text">
+        <span class="label">告警级别：</span>
+        <span class="text" :class="info.levelClass">{{info.levelName}}</span>
+        <i class="cycle-icon" :class="info.levelClass"></i>
+      </div>
+      <div class="info-content-text">
+        <span class="label">告警内容：</span>
+        <span class="text">{{info.content}}</span>
+      </div>
+      <div class="info-content-text">
+        <span class="label">告警时间：</span>
+        <span class="text">{{info.time}}</span>
+      </div>
+      <div class="info-content-text cursor-pointer">
+        <span class="label">告警设备：</span>
+        <span class="text">{{info.equipment}}</span>
+        <i @click="changePoint(info)" class="position-icon"></i>
+      </div>
+      <div @click="getHazardData" class="info-content-text cursor-pointer" v-if="info.linkDangerSource">
+        <span class="label">关联危险源：</span>
+        <span class="text blue">{{info.linkDangerSource}}</span>
+      </div>
+      <div v-if="info.tableData" class="info-content-text cursor-pointer">
+        <span class="label">数据详情：</span>
+      </div>
+      <el-table
+          v-if="info.tableData"
+          :data="info.tableData"
+          style="width: 100%"
+          border
+          class="tb-info-style"
+          header-row-class-name="table-head-style"
+          :row-class-name="tableRowClassName">
+        <el-table-column
+            :key="i"
+            v-for="(item,i) in info.tableHeader"
+            :prop="item.prop"
+            :label="item.label"
+            :width="item.width"
+        >
+          <template slot-scope="scope">
+            <div class="font-size-12" v-html="scope.row[item.prop]"></div>
+          </template>
+        </el-table-column>
+
+      </el-table>
+<!--      <el-button class="pop-btn-style margin-top-30" @click="deal">处理</el-button>-->
+    </div>
+  </div>
+
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+import TitleComponent from "@/components/title.component.vue"
+
+@Component({
+  components: {TitleComponent}
+})
+export default class WarningDetailComponent extends Vue {
+  //传入的报警信息详情
+  @Prop({default: []}) info!: any[];
+  //传入的报警信息详情
+  @Prop({default: '告警详情'}) title!: any[];
+
+  //表格添加类
+  tableRowClassName({row, rowIndex}) {
+    if (rowIndex === 1) {
+      return 'blue-row';
+    }
+    if (rowIndex === 2) {
+      return 'yellow-row';
+    }
+    if (rowIndex === 3) {
+      return 'orange-row';
+    }
+    if (rowIndex === 4) {
+      return 'red-row';
+    }
+
+    return '';
+  }
+
+  //处理信息
+  @Emit()
+  deal() {
+
+  }
+  //点击点位信息
+  @Emit('changePoint')
+  changePoint(item) {
+
+  }
+  //点击点位信息
+  @Emit('getHazard')
+  getHazard(item) {
+
+  }
+  getHazardData(item){
+    this.getHazard(item)
+  }
+  @Emit('changeClose')
+  changeClose(){
+
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.tb-info-style {
+  margin-bottom: 20px;
+}
+
+</style>

src/mock/index.ts

@@ -649,12 +649,12 @@ export class MockData{
 
     public static getWaringList(){
        /* {
-                type:"fire",
+                type:"normal",
                 id:new Date().getTime()+"",
-                typeName:"火灾",
+                typeName:"泄露",
                 position:[13312990.72, 4098613.12, 0.51],
                 reporter:"张三",
-                content:"北京汉邦唐化工厂区发生火灾"
+                content:"北京汉邦唐化工厂区发生泄露"
 
             }*/
         const data = [
@@ -850,12 +850,12 @@ export class MockData{
 
     public static getEventList(){
         /* {
-                 type:"fire",
+                 type:"normal",
                  id:new Date().getTime()+"",
-                 typeName:"火灾",
+                 typeName:"泄露",
                  position:[13312990.72, 4098613.12, 0.51],
                  reporter:"张三",
-                 content:"北京汉邦唐化工厂区发生火灾"
+                 content:"北京汉邦唐化工厂区发生泄露"
 
              }*/
         const data = [
@@ -871,15 +871,15 @@ export class MockData{
                 content:"物体高空坠落"
             }
             , {
-                title: '火灾告警',
+                title: '罐体破裂',
-                info: '北京汉邦唐化工厂区发生火灾',
+                info: '北京汉邦唐化工厂区发生泄露',
                 time: '2023年1月20日  14:33:33',
                 level: '1',
-                type:"fire",
+                type:"normal",
-                typeName:"火灾",
+                typeName:"泄露",
                 reporter:"李四",
                 tel:"13985412541",
-                content:"北京汉邦唐化工厂区发生火灾"
+                content:"北京汉邦唐化工厂区发生泄露"
             }, {
                 title: '坍塌事故',
                 info: '建筑坍塌及时处理',
@@ -901,34 +901,32 @@ export class MockData{
                 tel:"13337542569",
                 content:"NO气体泄露"
             }, {
-                title: '火灾爆炸',
+                title: '罐体破裂',
-                info: '富土康厂区火灾爆炸',
+                info: '富土康厂区罐体破裂',
                 time: '2023年1月20日  14:33:33',
                 level: '2',
                 type:"normal",
-                typeName:"火灾爆炸",
+                typeName:"罐体破裂",
                 reporter:"张三",
                 tel:"13337542569",
-                content:"富土康厂区火灾爆炸"
+                content:"富土康厂区罐体破裂"
             }, {
-                title: '火灾爆炸',
+                title: '罐体破裂',
-                info: '北京汉邦唐化工厂区发生火灾',
+                info: '北京汉邦唐化工厂区发生泄露',
                 time: '2023年1月20日  14:33:33',
                 level: '1',
-                type:"fire",
+                type:"normal",
-                typeName:"火灾",
+                typeName:"泄露",
                 reporter:"李四",
                 tel:"13985412541",
-                content:"北京汉邦唐化工厂区发生火灾"
+                content:"北京汉邦唐化工厂区发生泄露"
             },
         ].map((item:any)=>{
             item.id = Mock.mock("@id");
             if (item.type === 'normal'){
                 item.position=turf.randomPosition([
-                    13312995.84,
+                    11660757, 3692398.75,
-                    4098177.2800000003,
+                    11661124, 3692643.5
-                    13313096.96,
-                    4098754.88,
                 ]);
             }else if(item.type === 'fire'){
                 item.position= [13312990.72, 4098613.12, 0.51]

src/store/index.ts

@@ -34,6 +34,9 @@ export default new Vuex.Store({
     setBoundsData(state,data){
         state.boundsData = data;
     },
+    upDateEventList(state:any,data){
+      state.eventList = [...data,...state.eventList];
+    },
   },
   actions: {
   },

src/views/overview.component.html

@@ -1,27 +1,38 @@
 <div class="overview-container">
 
-<MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>
+    <MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>
 
     <div class="bg-box left animate__animated">
         <div class="panel-container">
-<!--            首页-->
+            <!-- 首页-->
-            <HomeLeftComponent v-if="currentNav === 'home'" class="animate__animated animate__fadeInLeft"></HomeLeftComponent>
+            <HomeLeftComponent @getItem="getItem" v-if="currentNav === 'home'"
-<!--            导览-->
+                               class="animate__animated animate__fadeInLeft"></HomeLeftComponent>
-            <ViewLeftComponent @showView="showView" @playView="playView" @showViewRight="showViewRight" v-if="currentNav === 'view'" class="animate__animated animate__fadeInLeft"></ViewLeftComponent>
+            <!-- 导览-->
+            <ViewLeftComponent @showView="showView" @playView="playView" @showViewRight="showViewRight"
+                               v-if="currentNav === 'view'"
+                               class="animate__animated animate__fadeInLeft"></ViewLeftComponent>
 
-<!--            运营管理-->
+            <!-- 运营管理-->
-            <ManageLeftComponent v-if="currentNav === 'manage'" class="animate__animated animate__fadeInLeft"></ManageLeftComponent>
+            <ManageLeftComponent v-if="currentNav === 'manage'"
+                                 class="animate__animated animate__fadeInLeft"></ManageLeftComponent>
         </div>
     </div>
     <div class="bg-box right main animate__animated" :class="showBackGround">
         <div class="panel-container">
-<!--            首页-->
+            <!--  首页-->
-            <HomeRightComponent v-if="currentNav === 'home'"
+            <HomeRightComponent v-if="currentNav === 'home' && !waringRightShow"
                                 class="animate__animated animate__fadeInRight"></HomeRightComponent>
             <!--            导览-->
-            <ViewRightComponent @closeRight="closeRight" :viewRightData="viewRightData" @showDetail="showDetail" v-if="currentNav === 'view' && viewRightShow" class="animate__animated animate__fadeInLeft"></ViewRightComponent>
+            <ViewRightComponent @closeRight="closeRight" :viewRightData="viewRightData" @showDetail="showDetail"
+                                v-if="currentNav === 'view' && viewRightShow"
+                                class="animate__animated animate__fadeInRight"></ViewRightComponent>
             <!--            运营管理-->
-            <ManageRightComponent v-if="currentNav === 'manage'" class="animate__animated animate__fadeInLeft"></ManageRightComponent>
+            <ManageRightComponent v-if="currentNav === 'manage'"
+                                  class="animate__animated animate__fadeInRight"></ManageRightComponent>
+            <!--告警详情-->
+            <WarningDetailComponent @changeClose="changeClose" @changePoint="changePoint" :info="info"
+                                    v-if="waringRightShow && currentNav === 'home'"
+                                    class="animate__animated animate__fadeInRight"></WarningDetailComponent>
         </div>
     </div>
 
@@ -31,7 +42,7 @@
     </div>
     <div class="layer-btn-box" :style="{height:openLayerDrawer?(currentLayers.length+1) * 50+'px':'50px'}">
         <div class="layer-btn" :class="{active:item.selected}" v-show="openLayerDrawer"
-            v-for="(item,index) in currentLayers" :key="index">
+             v-for="(item,index) in currentLayers" :key="index">
             <el-tooltip effect="dark" :content="item.name" placement="left">
                 <hbt-svg :name="item.value" @click="toggleLayer(item)"></hbt-svg>
             </el-tooltip>
@@ -42,11 +53,10 @@
     </div>
 
 
-
     <div class="top-bg" :style="{top:hideAllPanel?'-90px':0}">
         <HeaderComponent @onDrawer="drawerChange($event)" @onNavChanged="navChange($event)"></HeaderComponent>
     </div>
-    <div class="exitFullScreen" :style="{top:!hideAllPanel?'-90px':0}" >
+    <div class="exitFullScreen" :style="{top:!hideAllPanel?'-90px':0}">
         <div class="top-btn" @click="toggleAllPanel">
             <i class="el-icon-close">退出自由导览</i>
         </div>
@@ -55,7 +65,7 @@
 
     <!--    大号弹窗组件-->
     <PermitPopUpComponent :title="bigPopTitle" :dialogVisibleForBigPop.sync="dialogVisibleForBigPop"
-        @onClose="closeCarPersonPop">
+                          @onClose="closeCarPersonPop">
         <el-collapse v-if="bigPopTitle === '人员信息卡'" v-model="activeNames" accordion>
             <el-collapse-item title="人员信息" name="1">
                 <div class="d-flex item-content">

src/views/overview.component.ts

@@ -11,6 +11,7 @@ import ViewRightComponent from "@/components/view/right/viewRight.component";
 import ManageLeftComponent from "@/components/manage/left/manageLeft.component";
 import ManageRightComponent from "@/components/manage/right/manageRight.component";
 import PermitPopUpComponent from "@/components/permitPopUp.component.vue";
+import WarningDetailComponent from "@/components/warningDetail.component.vue";
 
 
 
@@ -22,7 +23,8 @@ import PermitPopUpComponent from "@/components/permitPopUp.component.vue";
         ViewRightComponent,
         ManageLeftComponent,
         ManageRightComponent,
-        PermitPopUpComponent
+        PermitPopUpComponent,
+        WarningDetailComponent
     }
 })
 export default class OverViewComponent extends BaseComponent {
@@ -30,6 +32,8 @@ export default class OverViewComponent extends BaseComponent {
     public currentNav = 'home';
     // 当前图层
     public warnTimer = {};
+    //定时器
+    public timer:any = {};
 
     public currentLayers = [] as any;
 
@@ -45,15 +49,22 @@ export default class OverViewComponent extends BaseComponent {
     bigPopTitle = '人员信息卡'
     //默认打开的折叠面板
     activeNames = ['1']
+    //展示告警详情右侧
+    waringRightShow = false
 
     // 是否隐藏除地图外所有板块
     public hideAllPanel = false;
     public viewRightData = {};
+    //告警详情
+    public info = {};
 
 
     public viewLayer = {} as any;
     async created(){
         // this.currentLayers = this.getCurrentLayers();
+        this.timer = setInterval(()=>{
+           this.upDateEventList()
+        },10000)
     }
     public upDateEventList(){
         const eventList = MockData.getEventList().data
@@ -203,6 +214,17 @@ export default class OverViewComponent extends BaseComponent {
     //获取点击的信息
     getItem(item) {
         this.addWarnning(item)
+        this.info = item
+        this.waringRightShow = true
+    }
+    //定位坐标
+    changePoint(item){
+        this.addWarnning(item)
+    }
+    //关闭告警详情
+    changeClose(){
+        this.waringRightShow = false
+        this.player.api.customObject.delete(this.currentWanning.id)
     }
     //进入自由导览
     async showView (){
@@ -339,5 +361,6 @@ export default class OverViewComponent extends BaseComponent {
         if (this.player) {
             this.player = null
         }
+        clearInterval(this.timer)
     }
 }