feat:右侧弹出告警详情

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

@@ -95,7 +95,7 @@ export default class HomeLeftComponent extends Vue {
             time:'2023年3月12日 13:56:00',
             address:'工厂厂房',
             reporter:'李四',
-            tableHeader:[
+            /*tableHeader:[
                 {
                     prop:'name',
                     label:'摄像头名称'
@@ -133,11 +133,11 @@ export default class HomeLeftComponent extends Vue {
                     distance:'22',
                     name:'6号摄像头',
                 },
-            ]
+            ]*/
         },item))
     }
     //点击告警信息
-    @Emit()
+    @Emit('getItem')
     getItem(item) {
         // console.log('item', item)
     }

src/components/warningDetail.component.vue

@@ -0,0 +1,125 @@
+<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)
+  }
+
+
+}
+</script>
+<style lang="scss" scoped>
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.tb-info-style {
+  margin-bottom: 20px;
+}
+
+</style>

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,11 +1,11 @@
 <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>
 
@@ -16,12 +16,14 @@
     <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 :info="info" v-if="waringRightShow && currentNav === 'home'" class="animate__animated animate__fadeInRight"></WarningDetailComponent>
         </div>
     </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 WarningDetailComponent from "@/components/warningDetail.component.vue";
 
 
 
@@ -20,7 +21,8 @@ import ManageRightComponent from "@/components/manage/right/manageRight.componen
         ViewLeftComponent,
         ViewRightComponent,
         ManageLeftComponent,
-        ManageRightComponent
+        ManageRightComponent,
+        WarningDetailComponent
     }
 })
 export default class OverViewComponent extends BaseComponent {
@@ -28,6 +30,8 @@ export default class OverViewComponent extends BaseComponent {
     public currentNav = 'home';
     // 当前图层
     public warnTimer = {};
+    //定时器
+    public timer:any = {};
 
     public currentLayers = [] as any;
 
@@ -35,15 +39,22 @@ export default class OverViewComponent extends BaseComponent {
     public openLayerDrawer = false;
     //展示导览右侧
     viewRightShow = false
+    //展示告警详情右侧
+    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
@@ -153,7 +164,9 @@ export default class OverViewComponent extends BaseComponent {
 
     //获取点击的信息
     getItem(item) {
-        this.addWarnning(item)
+        // this.addWarnning(item)
+        this.info = item
+        this.waringRightShow = true
     }
     //进入自由导览
     async showView (){
@@ -290,5 +303,6 @@ export default class OverViewComponent extends BaseComponent {
         if (this.player) {
             this.player = null
         }
+        clearInterval(this.timer)
     }
 }