feat:右侧弹出告警详情

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

src/components/permitPopUp.component.vue

@@ -0,0 +1,86 @@
+<!--许可证弹窗-->
+<template>
+  <el-dialog
+      class="pop-up-permit"
+      :title="title"
+      append-to-body
+      :modal="false"
+      :close-on-click-modal="false"
+      :visible.sync="dialogVisibleForBigPop"
+      width="648"
+      top="5vh"
+      :before-close="handleClose">
+    <div slot="title">
+      <p class="title-style">{{title}}</p>
+      <el-divider></el-divider>
+    </div>
+    <slot></slot>
+  </el-dialog>
+</template>
+<script lang="ts">
+import {Component, PropSync, Prop, Vue, Emit} from 'vue-property-decorator';
+
+@Component
+export default class PermitPopUpComponent extends Vue {
+  //传入的报警信息列表
+  @PropSync('dialogVisibleForBigPop', {default: false}) syncDialogVisibleForPermit!: boolean;
+  @Prop({default: '排污许可证'}) title!: string;
+  @Emit("onClose")
+  onCloseCallback(){
+    //
+  }
+
+
+  //关闭弹窗
+  handleClose() {
+    this.syncDialogVisibleForPermit = false
+    this.onCloseCallback()
+  }
+
+
+}
+</script>
+<style lang="scss">
+
+
+.pop-up-permit {
+  .el-dialog {
+    width: 648px;
+    height: 410px;
+    background: url("~@/assets/img/permitBg.png") no-repeat 50% 50%;
+    .el-dialog__header{
+      padding-bottom: 0;
+      padding-left: 36px;
+      padding-right: 36px;
+    }
+    .el-dialog__headerbtn {
+      top: 25px;
+      right: 30px;
+    }
+
+    .el-dialog__title,.title-style {
+      //font-weight: bold;
+      position: relative;
+      font-size: 16px;
+      top: 8px;
+      left: 0;
+      color: #FFFFFF;
+    }
+
+    .el-dialog__body {
+      padding-top: 0 !important;
+      padding-left: 36px;
+      padding-right: 36px;
+    }
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #FFFFFF;
+  }
+
+  .el-dialog__title, .el-dialog__body, .el-form-item__label {
+    color: #FFFFFF;
+  }
+}
+
+</style>

src/components/warningDetail.component.vue

@@ -54,7 +54,7 @@
         </el-table-column>
 
       </el-table>
-      <el-button class="pop-btn-style margin-top-30" @click="deal">处理</el-button>
+<!--      <el-button class="pop-btn-style margin-top-30" @click="deal">处理</el-button>-->
     </div>
   </div>
 

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

src/views/overview.component.html

@@ -1,29 +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 @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>
+            <!-- 首页-->
+            <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>
 
-<!--            运营管理-->
-            <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' && !waringRightShow"
                                 class="animate__animated animate__fadeInRight"></HomeRightComponent>
             <!--            导览-->
-            <ViewRightComponent @closeRight="closeRight" :viewRightData="viewRightData" @showDetail="showDetail" v-if="currentNav === 'view' && viewRightShow" class="animate__animated animate__fadeInRight"></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__fadeInRight"></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>
+            <WarningDetailComponent @changeClose="changeClose" @changePoint="changePoint" :info="info"
+                                    v-if="waringRightShow && currentNav === 'home'"
+                                    class="animate__animated animate__fadeInRight"></WarningDetailComponent>
         </div>
     </div>
 
@@ -33,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>
@@ -44,15 +53,51 @@
     </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>
-        </div>
+    </div>
+
+
+    <!--    大号弹窗组件-->
+    <PermitPopUpComponent :title="bigPopTitle" :dialogVisibleForBigPop.sync="dialogVisibleForBigPop"
+                          @onClose="closeCarPersonPop">
+        <el-collapse v-if="bigPopTitle === '人员信息卡'" v-model="activeNames" accordion>
+            <el-collapse-item title="人员信息" name="1">
+                <div class="d-flex item-content">
+                    <img class="avatar-style" src="~@/assets/img/avatar.jpg" alt="">
+                    <div>
+                        <div class="collapse-top">
+                            <span>贺丽</span>
+                            <span>（访客）</span>
+                            <img class="margin-left-40" src="~@/assets/img/phone.png" alt="">
+                            <span>联系方式：18020101697</span>
+                        </div>
+                        <div class="collapse-bottom">
+                            <span>性别：女</span>
+                            <span>所属单位：北京汉邦唐科技有限公司</span>
+                            <span>职务：设备运维</span>
+                            <span>年龄：25岁</span>
+                        </div>
+                    </div>
+                </div>
+
+            </el-collapse-item>
+        </el-collapse>
+        <el-collapse v-if="bigPopTitle === '车辆信息卡'" v-model="activeNames" accordion>
+            <el-collapse-item title="车辆信息" name="1">
+                <div class="info-content">
+                    <span>车辆类型：公司车辆</span>
+                    <span>车牌号：苏A45W34</span>
+                    <span>行为分：10分</span>
+                </div>
+            </el-collapse-item>
+        </el-collapse>
+    </PermitPopUpComponent>
 
 
 </div>

src/views/overview.component.ts

@@ -10,6 +10,7 @@ import ViewLeftComponent from "@/components/view/left/viewLeft.component";
 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,6 +23,7 @@ import WarningDetailComponent from "@/components/warningDetail.component.vue";
         ViewRightComponent,
         ManageLeftComponent,
         ManageRightComponent,
+        PermitPopUpComponent,
         WarningDetailComponent
     }
 })
@@ -37,8 +39,16 @@ export default class OverViewComponent extends BaseComponent {
 
     // 是否展开图层
     public openLayerDrawer = false;
+
+    public currentCarPeople:any = {};
     //展示导览右侧
-    viewRightShow = false
+    viewRightShow = false;
+
+    dialogVisibleForBigPop = false;
+
+    bigPopTitle = '人员信息卡'
+    //默认打开的折叠面板
+    activeNames = ['1']
     //展示告警详情右侧
     waringRightShow = false
 
@@ -89,9 +99,45 @@ export default class OverViewComponent extends BaseComponent {
 
     public handleChange(data) {
         if(data.GroupID){
+            const currentData = (this.layerData.find(item=>item.value === data.GroupID)as any).data.find(item=>item.id === data.Id)
+            if(data.GroupID==="peo"){
+                this.emitPersonPop(currentData)
+            }
+            if(data.GroupID==="car"){
+                this.emitCarPop(currentData)
+            }
         }
     }
 
+
+    //展示人员详情
+    emitPersonPop(item){
+        this.resetMap();
+        setTimeout(()=>{
+            this.currentCarPeople = item;
+            this.player.api.marker.focus(item.id,50,2);
+            setTimeout(()=>{
+                this.bigPopTitle = '人员信息卡';
+                this.dialogVisibleForBigPop = true
+            },2000)
+        },1000)
+    }
+    //展示车辆详情
+    emitCarPop(item){
+        this.resetMap();
+        setTimeout(()=>{
+            this.currentCarPeople = item;
+            this.player.api.marker.focus(item.id,50,2);
+            setTimeout(()=>{
+                this.bigPopTitle = '车辆信息卡';
+                this.dialogVisibleForBigPop = true
+            },2000)
+        },1000)
+    }
+    closeCarPersonPop(){
+        this.currentCarPeople = null;
+    }
+
     public navChange(data: string) {
         this.currentNav = data;
         if(this.player){
@@ -101,6 +147,9 @@ export default class OverViewComponent extends BaseComponent {
                 this.addCustom(this.viewLayer[this.currentEvent.id],true);
                 this.currentEvent = null;
             }
+            if(this.currentWanning){
+                this.player.api.customObject.delete(this.currentWanning.id)
+            }
             this.resetMap();
         }
     }
@@ -164,7 +213,7 @@ export default class OverViewComponent extends BaseComponent {
 
     //获取点击的信息
     getItem(item) {
-        // this.addWarnning(item)
+        this.addWarnning(item)
         this.info = item
         this.waringRightShow = true
     }
@@ -175,6 +224,7 @@ export default class OverViewComponent extends BaseComponent {
     //关闭告警详情
     changeClose(){
         this.waringRightShow = false
+        this.player.api.customObject.delete(this.currentWanning.id)
     }
     //进入自由导览
     async showView (){