Merge commit '6bcb4c6b0dd3ff9858d4afa293976aa42d75c51c'

# Conflicts:
#	src/mock/layer.ts

package.json

@@ -18,7 +18,7 @@
     "echarts-wordcloud": "^2.1.0",
     "element-ui": "^2.15.13",
     "file-saver": "^2.0.5",
-    "hbt-common": "0.0.3",
+    "hbt-common": "0.0.5",
     "jquery": "^3.6.4",
     "layui-layer": "^1.0.9",
     "mockjs": "^1.1.0",

src/assets/style/pageCommon.component.scss

@@ -492,6 +492,9 @@
 .margin-top-23 {
   margin-top: 23px;
 }
+.margin-top-47 {
+  margin-top: 47px;
+}
 
 .linear-gradient {
   position: relative;
@@ -2406,6 +2409,9 @@ svg.loading-icon {
 .margin-top-16 {
   margin-top: 16px;
 }
+.margin-top-10 {
+  margin-top: 10px;
+}
 
 .link {
   position: relative;
@@ -2763,5 +2769,12 @@ svg.loading-icon {
     cursor: pointer;
   }
 }
-
+.grayColor{
+  color: #B2B2B2;
+}
+.device-box{
+  img{
+    margin-right: 6px;
+  }
+}
 

src/components/header.component.vue

@@ -1,16 +1,8 @@
 <template>
 <div class="header-box">
     <div class="logo">
-        化工园区
-        <div class="line"></div>
-        <div class="nav-list" @click="togglePageList">
-            {{currentPage.label}}
-            <div class="arrow el-icon-caret-bottom"></div>
-            <div class="drop-box" @click.stop="" v-if="showPageList" :class="{animate:showPageList}">
-                <div class="list" :class="{active:item.value === currentPage.value}" @click.stop="selectPage(item)" v-for="(item,index) in pageList" :key="index">{{item.label}}</div>
-            </div>
-        </div>
-
+      <img src="~@/assets/img/logo.png" alt="">
+      <div>{{currentPage.label}}</div>
     </div>
     <div class="nav-box" :style="{width:currentPage.children.length<=5?currentPage.children.length*180+'px':5*180+'px'}" v-if="currentPage.children.length>1" @mouseenter="showArrow=true" @mouseleave="showArrow=false">
         <div class="arrow left el-icon-caret-left" v-if="currentPage.children.length>5 && navLeft<0 && showArrow" @click.stop="moveNav(false)"></div>
@@ -63,7 +55,7 @@ export default class HeaderComponent extends Vue {
     public showPageList = false;
     public pageList = pageListData;
     public currentPage = JSON.parse(localStorage.getItem("currentPage") as any) || this.pageList[0];
-    public currentNav = localStorage.getItem("currentNav") || this.currentPage.value;
+    public currentNav = localStorage.getItem("currentNav") || this.currentPage.children[0].value;
     public showArrow = false;
 
     public showContent = true;
@@ -154,62 +146,18 @@ export default class HeaderComponent extends Vue {
     white-space: nowrap;
     flex-wrap: wrap;
     .logo{
-        // font-family: "Microsoft Yahei";
-        font-family: "logo";
+         font-family: "Microsoft Yahei",serif;
+        //font-family: "logo";
         font-size: 28px;
         height: 28px;
         line-height: 100%;
         display: flex;
         align-self: center;
-        .line{
-            width: 2px;
-            height: 16px;
-            background: $font-color;
-            margin:0 15px;
-            align-self: center;
-        }
-        .nav-list{
-            // font-family: "Microsoft Yahei";
-            font-family: "logo";
-            cursor: pointer;
-            position: relative;
-            .arrow{
-                margin-left: 20px;
-            }
-            .drop-box{
-                width: 100%;
-                position: absolute;
-                top: 48px;
-                left: -30px;
-                background: rgba($color: #040404, $alpha: 0.6);
-                padding: 20px 0;
-                border-radius: 4px;
-                &.animate{
-                    animation-name: bounceIn;
-                    animation-duration: 1s;
-                }
-                .list{
-                    // font-family: "Microsoft Yahei";
-                    font-family: "logo";
-                    font-size: 26px;
-                    width: 100%;
-                    height: 50px;
-                    position: relative;
-                    text-align: center;
-
-                    &.active::before,&:hover::after{
-                        width: 100%;
-                        height: 3px;
-                        content: "";
-                        position: absolute;
-                        left: 0;
-                        bottom: 8px;
-                        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #FFFFFF 47%, rgba(255,255,255,0) 100%);
-                        border-radius: 0px 0px 0px 0px;
-                    }
-                }
-            }
-        }
+       img{
+         position: relative;
+         top: 3px;
+         margin-right: 10px;
+       }
     }
     .nav-box{
         width: 900px;

src/components/home/left/chartData.js

@@ -0,0 +1,98 @@
+export const pieChartData = {
+    title: {
+        text: '90%',
+        subtext: '在线率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#E8E8E8',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#E8E8E8'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height:100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '气体'},
+            {value: 25, name: '水质'},
+            {value: 15, name: '特征污染物'},
+            {value: 20, name: '废气'},
+            {value: 15, name: '废水'}
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            left:-50,
+            radius: [50, 75],
+            data: [
+                {value: 25, name: '气体',num:90},
+                {value: 1, name: '',num:0},
+                {value: 25, name: '水质',num:95},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '特征污染物',num:94},
+                {value: 1, name: '',num:0},
+                {value: 20, name: '废气',num:91},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '废水',num:89},
+                {value: 1, name: '',num:0},
+            ],
+            color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip:{
+                backgroundColor:'rgba(0,0,0,0.4)',
+                textStyle:{
+                    color:'#ffffff'
+                },
+                formatter:function (params) {
+                    return params.data.name+' : '+ params.data.num+'%'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}

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

@@ -0,0 +1,81 @@
+<div class="env-left emergency-part">
+
+    <div class="box-content flex-0 height-auto">
+        <title-component :imgSrc="imgSrc">
+            值班人员
+        </title-component>
+        <div class="personList margin-top-23">
+            <div>
+                <span class="has-border head-style">消防组</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">医疗队</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">救援小组</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">后勤处</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="box-content  margin-top-47">
+        <title-component :imgSrc="imgSrc">
+            告警列表
+        </title-component>
+        <warning-list-component class="margin-top-23" @getItem="showWaring"
+                                :data-list="dataList"></warning-list-component>
+    </div>
+</div>

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

@@ -0,0 +1,201 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./homeLeft.component.html"
+import TitleComponent from "@/components/title.component.vue"
+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")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class HomeLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+
+    currentCompany = false
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        id:''
+
+    }
+    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
+        },
+    ]
+    get dataList(){
+        return this.$store.state.eventList
+    }
+    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{
+            this.popObj[type] = val
+        }
+
+    }
+
+    //展示告警信息
+    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:[
+                {
+                    prop:'name',
+                    label:'摄像头名称'
+                },{
+                    prop:'type',
+                    label:'类型'
+                },{
+                    prop:'distance',
+                    label:'距离 (m)'
+                }
+            ],
+            tableData : [
+                {
+                    type:'简型摄像头',
+                    distance:'10',
+                    name:'1号摄像头',
+                },{
+                    type:'简型摄像头',
+                    distance:'20',
+                    name:'2号摄像头',
+                },{
+                    type:'简型摄像头',
+                    distance:'22',
+                    name:'3号摄像头',
+                },{
+                    type:'简型摄像头',
+                    distance:'10',
+                    name:'4号摄像头',
+                },{
+                    type:'简型摄像头',
+                    distance:'20',
+                    name:'5号摄像头',
+                },{
+                    type:'简型摄像头',
+                    distance:'22',
+                    name:'6号摄像头',
+                },
+            ]
+        },item))
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        // console.log('item', item)
+    }
+
+    count = 1
+
+
+    mounted() {
+
+    }
+
+    destroyed() {
+
+    }
+
+    changeMore() {
+        console.log(1)
+    }
+
+    changeClose() {
+        console.log(1)
+    }
+    addManual(){
+        this.currentCompany = true
+        this.popObj = {
+            popTitle:'报警记录',
+            type:'',
+            title: '风险点异常',
+            info: '',
+            time: '',
+            address:'',
+            level: '',
+            typeName:"",
+            reporter:"",
+            tel:"",
+            position:[],
+            content:"",
+            typeId:"",
+            id:''
+
+        }
+    }
+    submitWaring(){
+        this.popObj.id = Mock.mock("@id");
+        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]
+        }
+        this.popObj.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
+
+        this.$store.commit("upDateEventList",[this.popObj])
+        this.currentCompany=false
+    }
+}
+

src/components/home/right/chartData.js

@@ -0,0 +1,196 @@
+
+export const lineChartData = function () {
+    return {
+        color:['#FADFA4','#947FEA'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: ['1月','2月','3月','4月','5月']
+        },
+        legend: {
+            top: 'top',
+            itemGap: 30,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'应急事件',
+                    icon:'roundRect'
+                },{
+                    name:'应急演练',
+                    icon:'roundRect'
+                }
+            ]
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name:'应急事件',
+                data: [60,80,140,70,100],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },{
+                name:'应急演练',
+                data: [50,70,130,60,90],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 30,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
+
+export const roundChartData = function () {
+    return {
+        backgroundColor: "#0A2E5D",
+        tooltip: {},
+
+        radar: {
+            radius: "50%", //大小
+            nameGap: 20, // 图中工艺等字距离图的距离
+            center: ["50%", "50%"], // 图的位置
+            name: {
+                textStyle: {
+                    color: "rgba(101, 213, 255, 1)",
+                    fontSize: 16
+                },
+                formatter: function(name) {
+                    return name;
+                }
+            },
+            indicator: [
+                {"name":'社会稳定',"max":"100"},
+                {"name":'社会治安',"max":"100"},
+                {"name":'交通安全',"max":"100"},
+                {"name":'消防安全',"max":"100"},
+                {"name":'公共安全',"max":"100"},
+            ],
+            axisLine: {
+                lineStyle: {
+
+                    color: "rgba(153, 409, 246, 0.2)"
+                },
+                show:true,
+                symbolSize : [20,15],
+                symbolOffset:[0,15]
+
+            },
+            splitArea: {
+                show: false,
+                areaStyle: {
+                    color: "rgba(255,0,0,0)" // 图表背景的颜色
+                }
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    width: 1,
+                    color: "rgba(153, 209, 246, 0.2)" // 设置网格的颜色
+                }
+            }
+        },
+
+        series: [
+            {
+                name: "报警类型分析",
+                type: "radar",
+                symbol: "angle",
+                itemStyle: {
+                    normal: {
+                        areaStyle: { type: "default" }
+                    }
+                },
+                data: [
+                    {
+                        symbol: "circle",
+                        symbolSize: 5,
+                        value: [70,42,63,84,75,34],
+                        areaStyle: { color: "rgba(64, 205, 241, 0.2)" },
+                        itemStyle: {
+                            normal: {
+                                borderWidth:1,
+                                color: "RGBA(0, 34, 66, 1)",
+                                borderColor: "rgba(146, 225, 255, 1)"
+                            }
+                        },
+                        lineStyle: {
+                            color: "rgba(146, 225, 255, 1)",
+                            width: 1
+                        }
+                    }
+                ]
+            }
+        ]
+    }
+}

src/components/home/right/confirm.component.vue

@@ -0,0 +1,289 @@
+<template>
+  <div>
+    <div class="d-flex align-items-center margin-bottom-20">
+      <span class="cycle-icon blue"></span>
+      <span class="blue-text">确认警情</span>
+      <span class="link"></span>
+      <span class="line-gray"></span>
+      <span class="round-style"></span>
+      <span>事故研判</span>
+    </div>
+    <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">{{info.content}}</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.levelClassIcon"></i>
+    </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.address}}</span>
+      <i @click="changePoint(info)" class="position-icon"></i>
+    </div>
+    <div class="info-content-text cursor-pointer">
+      <span class="label">上报人：</span>
+      <span class="text">{{info.reporter}}</span>
+      <span class="phone-btn d-flex align-items-center is-justify-space-center"><img src="~@/assets/img/phone-gray.png" alt="">一健联系</span>
+    </div>
+
+    <div class="info-content-text cursor-pointer">
+      <span class="label">附近摄像头：</span>
+    </div>
+    <div class="plan-head">
+      <span class="span-item">摄像头名称</span>
+      <span class="span-item">类型</span>
+      <span class="span-item">距离 (m)</span>
+    </div>
+    <div class="plan-head-tbody">
+      <div class="tr" :key="i" v-for="(item,i) in info.tableData">
+        <span class="span-item">{{ item.name }}</span>
+        <span class="span-item">{{ item.type }}</span>
+        <span class="span-item">{{ item.distance }}</span>
+      </div>
+
+    </div>
+    <div class="d-flex margin-top-30 is-justify-space-center confirm-btn-group">
+      <div class="confirm-btn deal-btn" @click="showJudgmentFlag">事故研判</div>
+      <div class="confirm-btn" @click="hidePop">消警</div>
+    </div>
+    <!-- 报警记录弹窗 -->
+    <div class="pop-box right-position " v-if="showDealMsg">
+      <div class="close" @click="showDealMsg=false">×</div>
+      <div class="border l-t"></div>
+      <div class="border r-t"></div>
+      <div class="border r-b"></div>
+      <div class="border l-b"></div>
+      <div class="title">处理意见</div>
+      <el-form class="margin-top-23" label-width="100px">
+
+        <el-form-item label="处理建议：">
+          <el-input  :rows="5"  v-model="popObj.content" class="item-radius-style" type="textarea" placeholder="请输入事件描述"></el-input>
+        </el-form-item>
+        <el-form-item label="执行人：">
+          <el-select v-model="popObj.typeId"  class="item-radius-style">
+            <el-option v-for="(item,i) in typeList" :key="i" :label="item.label" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="d-flex btn-group align-items-center">
+        <div class="btn-style" @click="hideConfirm">确认</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+
+@Component
+export default class ConfirmComponent extends Vue {
+  //传入的报警信息详情
+  @Prop({default: function () {
+      return {
+        type:'人员聚集',
+        content:'人员踩踏事故预警',
+        levelName:'二级',
+        levelClass:'level-2-text',
+        levelClassIcon:'level-2',
+        time:'2023年3月12日 13:56:00',
+        position:'工厂厂房',
+        reporter:'李四',
+        tableHeader:[
+          {
+            prop:'name',
+            label:'摄像头名称'
+          },{
+            prop:'type',
+            label:'类型'
+          },{
+            prop:'distance',
+            label:'距离 (m)'
+          }
+        ],
+        tableData : [
+          {
+            type:'简型摄像头',
+            distance:'10',
+            name:'1号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'20',
+            name:'2号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'22',
+            name:'3号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'10',
+            name:'4号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'20',
+            name:'5号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'22',
+            name:'6号摄像头',
+          },
+        ]
+      }
+    } }) info!: any[];
+  showDealMsg = false
+  popObj:any = {
+    popTitle:'报警记录',
+    type:'',
+    title: '风险点异常',
+    info: '',
+    time: '',
+    address:'',
+    level: '',
+    typeName:"",
+    reporter:"",
+    tel:"",
+    position:[],
+    content:"",
+    typeId:"",
+    id:''
+
+  }
+  typeList = [
+    {
+      label:'张三',
+      value:'张三',
+    },{
+      label:'李四',
+      value:'李四',
+    },{
+      label:'王五',
+      value:'王五',
+    }
+  ]
+  //表格添加类
+  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('showJudgmentFlag')
+  showJudgmentFlag() {
+//
+  }
+  //点击点位
+  @Emit('changePoint')
+  changePoint(item) {
+    console.log(item)
+//
+  }
+  hidePop(){
+    this.showDealMsg = true
+  }
+  //处理信息
+  @Emit('hideConfirm')
+  hideConfirm(){
+    this.showDealMsg = false
+//
+  }
+
+
+}
+</script>
+<style lang="scss" scoped>
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.tb-info-style {
+  margin-bottom: 20px;
+}
+.confirm-btn{
+  width: 140px;
+  height: 34px;
+  background: transparent;
+  border-radius: 17px;
+  border: 1px solid #FFFFFF;
+  text-align: center;
+  line-height: 32px;
+  cursor: pointer;
+}
+.deal-btn{
+  background: rgba(255,255,255,0.15);
+  margin-right: 20px;
+}
+.confirm-btn-group{
+  width: 100%;
+  text-align: center;
+}
+.blue{
+  background: #7DAEFF;
+}
+.blue-text{
+  color: #7DAEFF;
+}
+.overview-container .pop-box {
+  left: -170%;
+  ::v-deep{
+    .el-form-item__label{
+      color: #FFFFFF;
+    }
+    .item-radius-style {
+      .el-input__inner {
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.6);
+        color: #d7d7d7;
+      }
+
+      .el-textarea__inner {
+        color: #d7d7d7;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 5px;
+        border: 1px solid rgba(255, 255, 255, 0.6);
+      }
+
+    }
+  }
+  .btn-group {
+    justify-content: space-evenly;
+
+    .btn-style {
+      width: 96px;
+      height: 34px;
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 17px;
+      border: 1px solid #FFFFFF;
+      text-align: center;
+      line-height: 34px;
+      cursor: pointer;
+    }
+
+    .cancel {
+      background: rgba(255, 255, 255, 0);
+    }
+  }
+
+}
+</style>

src/components/home/right/homeRight.component.html

@@ -0,0 +1,113 @@
+<div class="env-right emergency-part">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            能耗统计
+        </title-component>
+        <hbt-echarts className="line-chart-emergency" :options="option" @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
+    </div>
+    <div class="box-content flex-15 margin-top-20 device-box">
+        <title-component :imgSrc="imgSrc">
+            设备在线统计
+        </title-component>
+        <div class="energyRightTitle d-flex is-justify-space-between margin-top-23">
+            <div class="d-flex align-items-center">
+                <img src="~@/assets/img/home/security-equipment.png" alt="">
+                <span>安防设备</span>
+                </div>
+            <span>100<span class="grayColor">/300</span></span>
+        </div>
+        <div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
+            <div class="d-flex align-items-center">
+                <img src="~@/assets/img/home/training-devices.png" alt="">
+                <span>训练设备</span>
+            </div>
+            <span>100<span class="grayColor">/300</span></span>
+        </div>
+        <div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
+            <div class="d-flex align-items-center">
+                <img src="~@/assets/img/home/logistics.png" alt="">
+                <span>配套设备</span>
+            </div>
+            <span>100<span class="grayColor">/300</span></span>
+        </div>
+    </div>
+    <div class="box-content margin-top-20 emergency-part">
+        <title-component :imgSrc="imgSrc">
+            物资盘点
+        </title-component>
+        <div class="charts-box">
+            <div class="text">
+                <div class="count">{{count}}%</div>
+                物资完备度
+            </div>
+            <el-progress type="circle" :width="200" define-back-color="rgba(255,255,255,0.16)" :format="textFormat" :stroke-width="20" :percentage="count" :color="colors"></el-progress>
+        </div>
+    </div>
+    <!-- 开启应急演练弹窗 -->
+    <div class="pop-box right-position" v-if="showPop">
+        <div class="close" @click="showPop=false">×</div>
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">{{popTitle}}</div>
+        <el-form class="margin-top-23" label-width="90px">
+            <el-form-item label="事件类型：">
+                <el-select v-model="popObj.typeId" filterable @change="val=>setData(val,'typeName')" class="item-radius-style">
+                    <el-option v-for="(item,i) in typeList" :key="i" :label="item.label" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="事件等级：">
+                <el-select v-model="popObj.level" filterable class="item-radius-style">
+                    <el-option v-for="(item,i) in levelList" :key="i" :label="item.label" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="演练计划：">
+                <el-select v-model="popObj.plan" filterable class="item-radius-style">
+                    <el-option v-for="(item,i) in planList" :key="i" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="关联预案：">
+                <el-select v-model="popObj.linkPlan" filterable  class="item-radius-style">
+                    <el-option v-for="(item,i) in linkPlanList" :key="i" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <div class="d-flex btn-group">
+            <div class="btn-style" @click="submitWaring">确认</div>
+            <div class="btn-style cancel" @click="showPop=false">取消</div>
+        </div>
+    </div>
+    <!-- 开启应急演练弹窗 -->
+    <div class="pop-box right-log-position" v-if="showLogPop">
+        <div class="close" @click="showLogPop=false">×</div>
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">报警记录</div>
+       <div class="head">
+           <span>告警类型</span>
+           <span>告警内容</span>
+           <span>报警内容</span>
+           <span>上报人员</span>
+           <span>事故地点</span>
+           <span>处理意见</span>
+       </div>
+        <div class="tbody">
+            <div class="tr" :key="i" v-for="(item,i) in tableData">
+                <span>{{item.type}}</span>
+                <span>{{item.content}}</span>
+                <span>{{item.alarm}}</span>
+                <span>{{item.reporter}}</span>
+                <span>{{item.address}}</span>
+                <span>{{item.suggestion}}</span>
+            </div>
+        </div>
+        <el-pagination
+                background
+                layout="prev, pager, next"
+                :total="1000">
+        </el-pagination>
+    </div>
+</div>

src/components/home/right/homeRight.component.ts

@@ -0,0 +1,321 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./homeRight.component.html"
+import {lineChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class HomeRightComponent extends Vue {
+    //标题图片
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //定时器
+    timer: any = null;
+    //折线图数据
+    option: any = {}
+    //折线图实例
+    lineChart: any = {}
+    // 计数
+    count = 0
+    public colors = [
+        {color: '#FF5959', percentage: 20},
+        {color: '#FFA900', percentage: 40},
+        {color: '#FADFA4', percentage: 60},
+        {color: '#C9FFD7', percentage: 80},
+        {color: '#76c893', percentage: 100}
+    ];
+    showPop = false
+    showLogPop = false
+    popTitle = '开启演练'
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        plan:"",
+        linkPlan:"化工园区氢气泄露处理预案",
+        id:''
+
+    }
+    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
+        },
+    ]
+    levelList =[
+        {
+            label:'一级',
+            value:'1',
+            id:1
+        },{
+            label:'二级',
+            value:'2',
+            id:2
+        },{
+            label:'三级',
+            value:'3',
+            id:3
+        },{
+            label:'四级',
+            value:'4',
+            id:4
+        }
+    ]
+    planList =[
+        {
+            label:'氢气泄露演练',
+            value:'氢气泄露演练',
+            id:1
+        },{
+            label:'氯气泄露演练',
+            value:'氯气泄露演练',
+            id:2
+        },{
+            label:'氯化氢泄露演练',
+            value:'氯化氢泄露演练',
+            id:3
+        },{
+            label:'二氧化硫泄露演练',
+            value:'二氧化硫泄露演练',
+            id:5
+        }
+    ]
+    linkPlanList =[
+        {
+            label:'化工园区氢气泄露处理预案',
+            value:'化工园区氢气泄露处理预案',
+            id:1
+        }
+    ]
+    tableData = [
+        {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        },{
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        },
+    ]
+    //开始演练
+    startDrill(){
+        this.showPop = true
+    }
+    //报警记录
+    showLog(){
+        this.showLogPop = true
+    }
+    submitWaring(){
+        this.showPop = false
+        this.showPlan()
+    }
+    @Emit('showPlan')
+    showPlan(){
+        //
+    }
+    public textFormat(data){
+        return ""
+    }
+    public getCount(data){
+        this.count = 0;
+        setTimeout(()=>{
+            const timer = setInterval(()=>{
+                if(this.count<data){
+                    this.count++
+                }else{
+                    clearInterval(timer)
+                }
+            },20)
+        },400)
+
+    }
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        this.initLineData()
+    }
+    setData(val,type){
+        if (type === 'typeName'){
+            const find = this.typeList.find(item=>item.id == val) as any
+            this.popObj.title = find.label
+            this.popObj.type = find.value
+        }
+        this.popObj[type] = val
+    }
+    //图表自适应
+    resize() {
+        setTimeout(() => {
+            this.lineChart.resize();
+        }, 300)
+    }
+
+    timerForLineData: any = null;
+
+    //自动切换line图表数据
+    autoChangeLineData() {
+        this.timerForLineData = setInterval(() => {
+            this.lineChart.clear()
+            this.lineChart.setOption(this.option)
+            this.getCount(this.count)
+        }, 5000)
+    }
+
+    //获取范围内随机数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    mounted() {
+        this.getCount(70)
+        this.autoChangeLineData()
+        window.addEventListener("resize", this.resize);
+    }
+
+    //初始化line图表
+    initLineData() {
+        this.option = lineChartData()
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+        clearInterval(this.timerForLineData)
+    }
+
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //改变污染物监测颜色
+    changeColor(val) {
+        if (Number(val) <= 30) {
+            return '#ffffff'
+        } else if (Number(val) > 30 && Number(val) <= 50) {
+            return '#F2A183'
+        } else {
+            return '#DD7171'
+        }
+
+    }
+}
+

src/components/home/right/judgment.component.vue

@@ -0,0 +1,269 @@
+<template>
+  <div>
+    <div class="d-flex align-items-center margin-bottom-20">
+      <span class="cycle-icon blue"></span>
+      <span class="blue-text">确认警情</span>
+      <span class="line-blue"></span>
+      <span class="cycle-icon blue"></span>
+      <span class="blue-text">事故研判</span>
+    </div>
+    <div class="d-flex flex-wrap top-border">
+      <div class="judgment-item-2">区域内人数：345</div>
+      <div class="judgment-item-2">区域内车辆：45</div>
+      <div class="judgment-item-2">附近危险源：4</div>
+      <div class="judgment-item-2">附近应急设施：4</div>
+    </div>
+    <div class="top-border">
+      <div class="d-flex align-items-center height-40">
+        <span class="label">事故类型：</span>
+        <el-select v-model="info.typeName" class="item-radius-style">
+          <el-option label="人员聚集" value="人员聚集"></el-option>
+        </el-select>
+      </div>
+      <div class="d-flex align-items-center  height-40">
+        <span class="label">事故内容：</span>
+        <span  v-if="!contentFlag" >{{info.content}}</span>
+        <el-input v-else @blur="showEdit('contentFlag')" v-model="info.content" class="item-radius-style"></el-input>
+        <span class="edit-con"  @click="showEdit('contentFlag')"><i class="el-icon-edit"></i>修改</span>
+      </div>
+      <div class="d-flex align-items-center  height-40">
+        <span class="label">事故级别：</span>
+        <el-select v-model="info.levelName" class="item-radius-style">
+          <el-option label="一级" value="一级"></el-option>
+          <el-option label="二级" value="二级"></el-option>
+          <el-option label="三级" value="三级"></el-option>
+          <el-option label="四级" value="四级"></el-option>
+        </el-select>
+      </div>
+      <div class="d-flex align-items-center  height-40">
+        <span class="label">上报位置：</span>
+        <span v-if="!positionFlag" >{{info.address}}</span>
+        <i @click="changePoint(info)" v-if="!positionFlag" class="position-icon"></i>
+        <el-input v-else @blur="showEdit('positionFlag')" v-model="info.address" class="item-radius-style"></el-input>
+        <span class="edit-con" @click="showEdit('positionFlag')"><i class="el-icon-edit"></i>修改</span>
+      </div>
+      <div class="d-flex align-items-center  height-40">
+        <span class="label">上报人：</span>
+        <span class="text">{{ info.reporter }}</span>
+        <span class="phone-btn d-flex align-items-center is-justify-space-center"><img src="~@/assets/img/phone-gray.png"
+                                                                                       alt="">一健联系</span>
+      </div>
+    </div>
+    <div class="top-border">
+      <div><el-radio v-model="radio" label="1">
+        <div class="d-flex align-items-center"> <span>大型活动处理预案</span> <el-rate disabled :max="3"></el-rate></div>
+
+      </el-radio></div>
+      <div><el-radio v-model="radio" label="2">
+        <div class="d-flex align-items-center"> <span>氢气爆炸处理预案</span> <el-rate disabled :max="2"></el-rate></div>
+      </el-radio></div>
+      <div><el-radio v-model="radio" label="3">
+        <div class="d-flex align-items-center"> <span>氯气泄露处理预案</span> <el-rate disabled :max="2"></el-rate></div>
+      </el-radio></div>
+      <div><el-radio v-model="radio" label="4">
+        <div class="d-flex align-items-center"> <span class="text-style">自定义</span>  <el-select v-model="info.plan" class="item-radius-style">
+          <el-option label="CO泄露处理预案" value="CO泄露处理预案"></el-option>
+          <el-option label="NO泄露处理预案" value="NO泄露处理预案"></el-option>
+          <el-option label="HCL泄露处理预案" value="HCL泄露处理预案"></el-option>
+        </el-select></div>
+      </el-radio></div>
+    </div>
+
+    <div class="d-flex margin-top-30 is-justify-space-center confirm-btn-group">
+      <div class="confirm-btn deal-btn" @click="deal">确认</div>
+
+    </div>
+
+
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+
+@Component
+export default class JudgmentComponent extends Vue {
+  //传入的报警信息详情
+  @Prop({
+    default: function () {
+      return {
+      }
+    }
+  }) infoData!: any[];
+  info:any = {}
+  contentFlag = false
+  positionFlag = false
+  radio = ''
+
+  @Watch('infoData', {immediate: true, deep: true})
+  onChangeValue(newVal: any, oldVal: any) {
+    if (newVal) {
+      this.info = newVal
+    }
+  }
+
+  //表格添加类
+  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()
+  cancel() {
+
+  }
+
+
+  showEdit(type){
+    this[type] = !this[type]
+  }
+  //点击点位
+  @Emit('changePoint')
+  changePoint(item) {
+    console.log(item)
+//
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.tb-info-style {
+  margin-bottom: 20px;
+}
+
+.confirm-btn {
+  width: 140px;
+  height: 34px;
+  background: transparent;
+  border-radius: 17px;
+  border: 1px solid #FFFFFF;
+  text-align: center;
+  line-height: 32px;
+  cursor: pointer;
+}
+
+.deal-btn {
+  background: rgba(255, 255, 255, 0.15);
+  margin-right: 20px;
+}
+
+.confirm-btn-group {
+  width: 100%;
+  text-align: center;
+}
+
+.blue {
+  background: #7DAEFF;
+}
+
+.blue-text {
+  color: #7DAEFF;
+}
+
+.judgment-item-2 {
+  width: 50%;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.top-border {
+  border-top: 1px solid rgba(216, 216, 216, 0.4);
+  padding-top: 20px;
+  font-size: 14px;
+  .label{
+    font-size: 14px;
+  }
+}
+::v-deep{
+  .item-radius-style {
+    width: 202px;
+    .el-input__inner {
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 20px;
+      border: 1px solid rgba(255, 255, 255, 0.6);
+      color: #d7d7d7;
+
+    }
+
+    .el-textarea__inner {
+      color: #d7d7d7;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 5px;
+      border: 1px solid rgba(255, 255, 255, 0.6);
+    }
+
+    .el-icon-search {
+      cursor: pointer;
+    }
+
+  }
+  .el-radio{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .el-rate__icon{
+    margin-right: 2px;
+  }
+  .el-radio__label{
+    color: #ffffff;
+  }
+}
+.phone-btn {
+  width: 90px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 16px;
+  border: 1px solid #FFFFFF;
+  cursor: pointer;
+  text-align: center;
+  font-size: 14px;
+  margin-left: 8px;
+}
+.label{
+  width: 80px;
+}
+.edit-con{
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  right: 0;
+}
+.height-40{
+  height: 40px;
+  line-height: 40px;
+  margin-bottom: 10px;
+}
+.position-icon {
+  width: 16px;
+  height: 16px;
+  background: url("~@/assets/icons/png/point.png");
+  margin-left: 8px;
+
+}
+.text-style{
+  margin-right: 10px;
+}
+</style>

src/components/title.component.vue

@@ -0,0 +1,112 @@
+<!--通用标题组件-->
+<template>
+  <div class="title">
+    <img :src="imgSrc" alt="">
+    <div class="title-text">
+      <slot></slot>
+      <div class="more" v-if="showMore" @click="changeMore">
+        <span>查看更多</span>
+        <i class="el-icon-caret-right"></i>
+      </div>
+      <div class="manual" v-if="showManual" @click="addManual">
+        <i class="el-icon-plus"></i>
+        <span>人工接警</span>
+      </div>
+      <div class="close" v-if="showClose" @click="changeClose">
+<!--        <span>关闭</span>-->
+        <i class="el-icon-close" title="关闭"></i>
+      </div>
+      <div class="close" v-if="showList" @click="showListData">
+        <span>缺失物资清单</span>
+        <i class="el-icon-caret-right" title="缺失物资清单"></i>
+      </div>
+    </div>
+  </div>
+
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+
+@Component
+export default class TitleComponent extends Vue {
+  // 传入标题所需的图片
+  @Prop({default: require('@/assets/icons/png/env/env-title-icon.png')}) imgSrc!: string;
+  //查看更多显示隐藏控制
+  @Prop({default: false}) showMore!: boolean;
+  //关闭按钮显示隐藏
+  @Prop({default: false}) showClose!: boolean;
+  //人工接警按钮显示隐藏
+  @Prop({default: false}) showManual!: boolean;
+  //缺失物资清单
+  @Prop({default: false}) showList!: boolean;
+
+  @Emit()
+  changeMore(){
+    return this.showMore
+  }
+  @Emit()
+  changeClose(){
+    return this.showClose
+  }
+  @Emit('addManual')
+  addManual(){
+    return this.showManual
+  }
+  @Emit('showListData')
+  showListData(){
+    return this.showManual
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.title {
+  display: flex;
+  flex: 0;
+
+  .title-text {
+    font-family: "logo", Sans-Serif, serif;
+    font-weight: 400;
+    font-size: 18px;
+    width: 295px;
+    text-indent: 20px;
+    background: url('~@/assets/icons/png/env/env-title-bg.png') no-repeat;
+    background-position: bottom;
+    position: relative;
+
+    div.more,div.close,div.manual {
+      position: absolute;
+      right: 10px;
+      top: 4px;
+      font-size: 12px;
+      display: inline-block;
+      cursor: pointer;
+      span{
+        position: relative;
+        left: 20px;
+      }
+      i{
+        width: 20px;
+      }
+    }
+    div.close{
+      span{
+
+        left: 18px;
+      }
+      .el-icon-close{
+        font-size: 24px;
+        position: relative;
+        left: -10px;
+        top: -3px;
+      }
+    }
+    div.manual{
+      right: 22px;
+    }
+    .el-icon-caret-right{
+      color: #FFFFFF;
+    }
+  }
+}
+</style>

src/components/warningList.component.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="warning-list scroll-list">
+    <div v-show="dataList.length>0" @click="getItem(item)" :key="i" v-for="(item,i) in dataList"
+         :class="[warningBgMap[item.level]]"
+         :data-index="i"
+         class="warning-list-box red-warning-bg animate__animated">
+      <div :data-index="i" class="warning-list-box-title">{{ item.title }}</div>
+      <div :data-index="i" class="warning-list-box-info">{{ item.info }}</div>
+      <div :data-index="i" class="warning-list-box-date">{{ item.time }}</div>
+    </div>
+    <div class="d-flex align-items-center is-justify-space-center" v-show="dataList.length === 0">
+      <i class="el-icon-warning-outline"></i><span>暂无数据</span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+
+@Component
+export default class WarningListComponent extends Vue {
+  //传入的报警信息列表
+  @Prop({default: []}) dataList!: any[];
+  //监听报警信息列表数据变化
+  @Watch('dataList', {immediate: false, deep: true})
+  onChangeValue(newVal: any, oldVal: any) {
+    if (newVal.length === oldVal.length) return
+    this.$nextTick(() => {
+      const dom: any = document.querySelector('.warning-list-box')
+      dom?.classList.remove('animate__fadeInLeft')
+      setTimeout(() => {
+        dom?.classList.add('animate__fadeInLeft')
+      },)
+      setTimeout(()=>{
+        dom?.classList.remove('animate__fadeInLeft')
+      },1000)
+    })
+  }
+  //2个对象数组对比获得差异项
+  getArrDifference(arr1, arr2) {
+    let e = arr1.filter(i => arr2.some(j => j.id === i.id))
+    let f = arr1.concat(arr2).filter(v => e.some(n => n.id !== v.id))
+    return f
+  }
+  //报警级别对应class
+  warningBgMap: any = {
+    '1': 'red-warning-bg',
+    '2': 'yellow-warning-bg',
+    '3': 'blue-warning-bg',
+  }
+  //监听点击事件
+  @Emit('getItem')
+  getItem(item) {
+    // console.log(item)
+    // return item
+  }
+  mounted() {
+/*    let dom = document.querySelector('div.warning-list') as any
+    const self = this as any
+    dom.addEventListener('click',function (e) {
+      console.log(e.target.dataset.index)
+      let i = e.target.dataset.index
+      console.log(self.dataList[i])
+      self.getItem(self.dataList[i])
+    })*/
+  }
+  // warning-list-box
+
+}
+</script>
+<style lang="scss" scoped>
+
+//滚动条样式
+@mixin scrollStyle($width) {
+  &::-webkit-scrollbar {
+    width: $width !important;
+    height: 100% !important;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    opacity: 0.2;
+    background: #ffffff;
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    background: transparent;
+  }
+}
+
+.warning-list {
+  height: 100%;
+  overflow-y: auto;
+  @include scrollStyle(2px);
+
+  &-box {
+    width: 330px;
+    height: 90px;
+    padding: 10px 24px;
+    cursor: pointer;
+    margin-bottom: 10px;
+
+    &-title {
+      font-size: 14px;
+      color: #E8E8E8;
+
+    }
+
+    &-info {
+      font-size: 12px;
+      color: #E8E8E8;
+      margin: 8px 0;
+      width: 216px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-date {
+      font-size: 12px;
+      color: #E8E8E8;
+    }
+  }
+
+  .red-warning-bg {
+    background: url("@/assets/img/red-warning-bg.png") no-repeat;
+  }
+
+  .yellow-warning-bg {
+    background: url("@/assets/img/yellow-warning-bg.png") no-repeat;
+  }
+
+  .blue-warning-bg {
+    background: url("@/assets/img/blue-warning-bg.png") no-repeat;
+  }
+}
+
+
+</style>

src/mock/layer.ts

@@ -25,8 +25,8 @@ export default [ {
     value:"bounds",
     color:COLOR.BOUNDS,
     selected:false,
-    pages:["closePark","peopleCar"]  
-}{
+    pages:["closePark","peopleCar"]
+},{
     name:"人员定位",
     ids:[] as string[],
     type:"moveMarker",
@@ -36,8 +36,8 @@ export default [ {
     assetPath:"/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01",
     coordinateType:1,
     selected:false,
-    pages:["closePark","peopleCar","smartSafetySupervision","smartEmergency"]  
-}{
+    pages:["closePark","peopleCar","smartSafetySupervision","smartEmergency"]
+},{
     name:"车辆定位",
     ids:[] as string[],
     type:"moveMarker",
@@ -51,5 +51,5 @@ export default [ {
     ],
     coordinateType:1,
     selected:false,
-    pages:["closePark","peopleCar","smartSafetySupervision","smartEmergency"]  
-}]
+    pages:["closePark","peopleCar","smartSafetySupervision","smartEmergency"]
+}]

src/store/index.ts

@@ -50,14 +50,7 @@ export default new Vuex.Store({
         state.specialEnvList = data;
     },
     upDateEventList(state:any,data){
-      if (state.eventList.length === 50){
-        const temp = [...data,...state.eventList];
-        temp.pop()
-        state.eventList = temp;
-      }else{
-        state.eventList = [...data,...state.eventList];
-      }
-
+      state.eventList = [...data,...state.eventList];
     },
     setDangrousList(state:any,data){
       state.dangrousList = data;

src/views/overview.component.html

@@ -4,10 +4,13 @@
 
     <div class="bg-box left animate__animated">
         <div class="panel-container">
+            <HomeLeftComponent v-if="currentNav === 'home'" class="animate__animated animate__fadeInLeft"></HomeLeftComponent>
         </div>
     </div>
     <div class="bg-box right main animate__animated">
-        <div class="panel-container" >
+        <div class="panel-container">
+            <HomeRightComponent v-if="currentNav === 'home'"
+                                class="animate__animated animate__fadeInRight"></HomeRightComponent>
         </div>
     </div>
 

src/views/overview.component.ts

@@ -4,22 +4,41 @@ import {MockData} from "@/mock";
 
 import layer from "layui-layer"
 import BaseComponent from "./base.component"
+import HomeLeftComponent from "@/components/home/left/homeLeft.component";
+import HomeRightComponent from "@/components/home/right/homeRight.component";
+
 
 
 @Component({
     components: {
-
+        HomeLeftComponent,
+        HomeRightComponent
     }
 })
 export default class OverViewComponent extends BaseComponent {
     //当前菜单
-    public currentNav = '';
+    public currentNav = 'home';
     // 当前图层
+    public warnTimer = {};
+
     public currentLayers = [] as any;
 
     // 是否展开图层
     public openLayerDrawer = false;
     created(){
+        this.warnTimer = setInterval(()=>{
+            this.upDateEventList()
+        },10000)
+    }
+    public upDateEventList(){
+        const eventList = MockData.getEventList().data
+        this.$store.commit("upDateEventList",eventList)
+    }
+    public getHiddenDangrous(){
+        this.parkService.getHiddenDangrous().then((res:any)=>{
+            this.dataList["hidden-dangrous"] = res.data;
+            this.$store.commit("setHiddenDangrousList",res.data)
+        })
     }
     //  获取车辆
     public getCarList(){