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

@@ -76,7 +76,6 @@
             告警列表
         </title-component>
         <warning-list-component class="margin-top-23" @getItem="showWaring"
-                                @changeClose="changeClose"
                                 :data-list="dataList"></warning-list-component>
     </div>
 </div>

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

@@ -5,7 +5,6 @@ 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")
 
 
@@ -24,82 +23,79 @@ 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: '工厂厂房',
-            equipment: '5号监测设备',
-            reporter: '李四',
-            /*tableHeader:[
+            typeName:'人员聚集',
+            content:'人员踩踏事故预警',
+            levelName:'二级',
+            levelClass:'level-2-text',
+            levelClassIcon:'level-2',
+            time:'2023年3月12日 13:56:00',
+            address:'工厂厂房',
+            reporter:'李四',
+            tableHeader:[
                 {
                     prop:'name',
                     label:'摄像头名称'
@@ -137,12 +133,11 @@ export default class HomeLeftComponent extends Vue {
                     distance:'22',
                     name:'6号摄像头',
                 },
-            ]*/
-        }, item))
+            ]
+        },item))
     }
-
     //点击告警信息
-    @Emit('getItem')
+    @Emit()
     getItem(item) {
         // console.log('item', item)
     }
@@ -162,48 +157,45 @@ 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
     }
 }
 

src/components/warningDetail.component.vue

@@ -1,128 +0,0 @@
-<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>

src/mock/index.ts

@@ -649,12 +649,12 @@ export class MockData{
 
     public static getWaringList(){
        /* {
-                type:"normal",
+                type:"fire",
                 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:"normal",
+                 type:"fire",
                  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:"normal",
-                typeName:"泄露",
+                type:"fire",
+                typeName:"火灾",
                 reporter:"李四",
                 tel:"13985412541",
-                content:"北京汉邦唐化工厂区发生泄露"
+                content:"北京汉邦唐化工厂区发生火灾"
             }, {
                 title: '坍塌事故',
                 info: '建筑坍塌及时处理',
@@ -901,32 +901,34 @@ 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:"normal",
-                typeName:"泄露",
+                type:"fire",
+                typeName:"火灾",
                 reporter:"李四",
                 tel:"13985412541",
-                content:"北京汉邦唐化工厂区发生泄露"
+                content:"北京汉邦唐化工厂区发生火灾"
             },
         ].map((item:any)=>{
             item.id = Mock.mock("@id");
             if (item.type === 'normal'){
                 item.position=turf.randomPosition([
-                    11660757, 3692398.75,
-                    11661124, 3692643.5
+                    13312995.84,
+                    4098177.2800000003,
+                    13313096.96,
+                    4098754.88,
                 ]);
             }else if(item.type === 'fire'){
                 item.position= [13312990.72, 4098613.12, 0.51]

src/store/index.ts

@@ -34,9 +34,6 @@ 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,38 +1,27 @@
 <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 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"
+<!--            首页-->
+            <HomeRightComponent v-if="currentNav === 'home'"
                                 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__fadeInLeft"></ViewRightComponent>
             <!--            运营管理-->
-            <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>
+            <ManageRightComponent v-if="currentNav === 'manage'" class="animate__animated animate__fadeInLeft"></ManageRightComponent>
         </div>
     </div>
 
@@ -42,7 +31,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>
@@ -53,10 +42,11 @@
     </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>
@@ -65,7 +55,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">

src/views/overview.component.ts

@@ -11,7 +11,6 @@ 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";
 
 
 
@@ -23,8 +22,7 @@ import WarningDetailComponent from "@/components/warningDetail.component.vue";
         ViewRightComponent,
         ManageLeftComponent,
         ManageRightComponent,
-        PermitPopUpComponent,
-        WarningDetailComponent
+        PermitPopUpComponent
     }
 })
 export default class OverViewComponent extends BaseComponent {
@@ -32,8 +30,6 @@ export default class OverViewComponent extends BaseComponent {
     public currentNav = 'home';
     // 当前图层
     public warnTimer = {};
-    //定时器
-    public timer:any = {};
 
     public currentLayers = [] as any;
 
@@ -49,22 +45,15 @@ 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
@@ -214,17 +203,6 @@ 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 (){
@@ -361,6 +339,5 @@ export default class OverViewComponent extends BaseComponent {
         if (this.player) {
             this.player = null
         }
-        clearInterval(this.timer)
     }
 }