feat：新增车辆人员弹窗

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/views/overview.component.html

@@ -50,7 +50,112 @@
         <div class="top-btn" @click="toggleAllPanel">
             <i class="el-icon-close">退出自由导览</i>
         </div>
-        </div>
+    </div>
+
+
+    <!--    大号弹窗组件-->
+    <PermitPopUpComponent :title="bigPopTitle" :dialogVisibleForBigPop.sync="dialogVisibleForBigPop"
+        @onClose="closeCarPersonPop">
+
+        <!--    许可证弹窗 勿删-->
+        <!--        <div class="permit-info-content">
+            <div class="info">
+                <div>证书编号：XXXXXXXXXX</div>
+                <div>有效期限：2022年12月— 2025年12月</div>
+                <div>获奖单位：XXX有限公司</div>
+                <div>责任单位：XXX环境保护局</div>
+            </div>
+            <div class="permit-tb tb-style">
+                <el-table
+                        :data="tableDataForPermit"
+                        :span-method="objectSpanMethod"
+                        border>
+                    <el-table-column
+                            prop="id"
+                            label="排放口编号"
+                            width="95">
+                    </el-table-column>
+                    <el-table-column
+                            prop="name"
+                            width="95"
+                            label="排放口名称">
+                    </el-table-column>
+                    <el-table-column
+                            prop="type"
+                            width="100"
+                            label="污染物种类">
+                    </el-table-column>
+                    <el-table-column
+                            prop="unit"
+                            width="150"
+                            label="许可浓度（mg/L）">
+                    </el-table-column>
+                    <el-table-column label="许可排放量限值">
+                        <el-table-column
+                                prop="year1"
+                                label="2021年">
+                        </el-table-column>
+                        <el-table-column
+                                prop="year2"
+                                label="2022年">
+                        </el-table-column>
+                        <el-table-column
+                                prop="year3"
+                                label="2023年">
+                        </el-table-column>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>-->
+        <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>
+                <!--                <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>
+    </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";
 
 
 
@@ -20,7 +21,8 @@ import ManageRightComponent from "@/components/manage/right/manageRight.componen
         ViewLeftComponent,
         ViewRightComponent,
         ManageLeftComponent,
-        ManageRightComponent
+        ManageRightComponent,
+        PermitPopUpComponent
     }
 })
 export default class OverViewComponent extends BaseComponent {
@@ -33,8 +35,16 @@ export default class OverViewComponent extends BaseComponent {
 
     // 是否展开图层
     public openLayerDrawer = false;
+
+    public currentCarPeople:any = {};
     //展示导览右侧
-    viewRightShow = false
+    viewRightShow = false;
+
+    dialogVisibleForBigPop = false;
+
+    bigPopTitle = '人员信息卡'
+    //默认打开的折叠面板
+    activeNames = ['1']
 
     // 是否隐藏除地图外所有板块
     public hideAllPanel = false;
@@ -78,9 +88,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){