feat:右侧弹出告警详情

Merge branch 'master' into guangyin
# Conflicts: # src/views/overview.component.ts
2023-05-18 17:11:05 +08:00 · 2023-05-18 17:04:59 +08:00 · 2023-05-18 17:03:24 +08:00 · 2023-05-18 16:53:24 +08:00
7 changed files with 284 additions and 113 deletions
--- a/src/components/home/left/homeLeft.component.html
+++ b/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>
--- a/src/components/home/left/homeLeft.component.ts
+++ b/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 = {
-        popTitle:'报警记录',
-        type:'',
+    popObj: any = {
+        popTitle: '报警记录',
+        type: '',
        title: '风险点异常',
        info: '',
        time: '',
-        address:'',
+        address: '',
        level: '',
-        typeName:"",
-        reporter:"",
-        tel:"",
-        position:[],
-        content:"",
-        typeId:"",
-        id:''
+        typeName: "",
+        reporter: "",
+        tel: "",
+        position: [],
+        content: "",
+        typeId: "",
+        id: ''

    }
-    typeList =[
+    typeList = [
        {
-            label:'气体泄露',
-            value:'normal',
-            level:2,
-            id:1
-        },{
-            label:'火灾爆炸',
-            value:'fire',
-            level:1,
-            id:2
-        },{
-            label:'气液泄露',
-            value:'normal',
-            level:1,
-            id:3
-        },{
-            label:'安全事故',
-            value:'normal',
-            level:2,
-            id:4
-        },{
-            label:'自然灾害',
-            value:'normal',
-            level:3,
-            id:5
+            label: '气体泄露',
+            value: 'normal',
+            level: 2,
+            id: 1
+        }, {
+            label: '火灾爆炸',
+            value: 'fire',
+            level: 1,
+            id: 2
+        }, {
+            label: '气液泄露',
+            value: 'normal',
+            level: 1,
+            id: 3
+        }, {
+            label: '安全事故',
+            value: 'normal',
+            level: 2,
+            id: 4
+        }, {
+            label: '自然灾害',
+            value: 'normal',
+            level: 3,
+            id: 5
        },
    ]
-    get dataList(){
+
+    get dataList() {
        return this.$store.state.eventList
    }
-    setData(val,type){
-        if (type === 'typeName'){
-            const find = this.typeList.find(item=>item.id == val) as any
+
+    setData(val, type) {
+        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:'人员聚集',
-            content:'人员踩踏事故预警',
-            levelName:'二级',
-            levelClass:'level-2-text',
-            levelClassIcon:'level-2',
-            time:'2023年3月12日 13:56:00',
-            address:'工厂厂房',
-            reporter:'李四',
-            tableHeader:[
+            typeName: '人员聚集',
+            content: '人员踩踏事故预警',
+            levelName: '二级',
+            levelClass: 'level-2-text',
+            levelClassIcon: 'level-2',
+            time: '2023年3月12日 13:56:00',
+            address: '工厂厂房',
+            equipment: '5号监测设备',
+            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:'报警记录',
-            type:'',
+            popTitle: '报警记录',
+            type: '',
            title: '风险点异常',
            info: '',
            time: '',
-            address:'',
+            address: '',
            level: '',
-            typeName:"",
-            reporter:"",
-            tel:"",
-            position:[],
-            content:"",
-            typeId:"",
-            id:''
+            typeName: "",
+            reporter: "",
+            tel: "",
+            position: [],
+            content: "",
+            typeId: "",
+            id: ''

        }
    }
-    submitWaring(){
+
+    submitWaring() {
        this.popObj.id = Mock.mock("@id");
-        if (this.popObj.type === 'normal'){
-            this.popObj.position=turf.randomPosition([
+        if (this.popObj.type === 'normal') {
+            this.popObj.position = turf.randomPosition([
                13312995.84,
                4098177.2800000003,
                13313096.96,
                4098754.88,
            ]);
-        }else if(this.popObj.type === 'fire'){
-            this.popObj.position= [13312990.72, 4098613.12, 0.51]
+        } else if (this.popObj.type === 'fire') {
+            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.currentCompany=false
+        this.$store.commit("upDateEventList", [this.popObj])
+        this.currentCompany = false
    }
 }

--- a/src/components/warningDetail.component.vue
+++ b/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>
--- a/src/mock/index.ts
+++ b/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]
--- 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,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>
-<!--            导览-->
-            <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'"
+            <!--  首页-->
+            <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">
--- a/src/views/overview.component.ts
+++ b/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)
    }
 }
Author	SHA1	Message	Date
guangyin	c7c09b5ca9	feat:右侧弹出告警详情	2023-05-18 17:11:05 +08:00
guangyin	e3bc8cd3d9	Merge branch 'master' into guangyin # Conflicts: # src/views/overview.component.ts	2023-05-18 17:04:59 +08:00
guangyin	0a13e6fda2	feat:右侧弹出告警详情	2023-05-18 17:03:24 +08:00
guangyin	46bbbb9db7	feat:右侧弹出告警详情	2023-05-18 16:53:24 +08:00