feat:右侧弹出告警详情

2023-05-18 16:53:24 +08:00 · 2023-05-18 16:53:24 +08:00 · 46bbbb9db7
parent 15165f96fa
commit 46bbbb9db7
5 changed files with 154 additions and 10 deletions
--- a/src/components/home/left/homeLeft.component.ts
+++ b/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)
    }
--- a/src/components/warningDetail.component.vue
+++ b/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>
--- a/src/store/index.ts
+++ b/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: {
  },
--- a/src/views/overview.component.html
+++ b/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>

--- a/src/views/overview.component.ts
+++ b/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)
    }
 }