Compare commits
No commits in common. "b1eb8f3a9f997b7e938c394e728cf884e76a6ddb" and "3d77e7584fe49f629a6b1c231999e5bc182c419a" have entirely different histories.
b1eb8f3a9f
...
3d77e7584f
|
|
@ -18,7 +18,7 @@
|
||||||
"echarts-wordcloud": "^2.1.0",
|
"echarts-wordcloud": "^2.1.0",
|
||||||
"element-ui": "^2.15.13",
|
"element-ui": "^2.15.13",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
"hbt-common": "0.0.5",
|
"hbt-common": "0.0.3",
|
||||||
"jquery": "^3.6.4",
|
"jquery": "^3.6.4",
|
||||||
"layui-layer": "^1.0.9",
|
"layui-layer": "^1.0.9",
|
||||||
"mockjs": "^1.1.0",
|
"mockjs": "^1.1.0",
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 376 B |
Binary file not shown.
|
Before Width: | Height: | Size: 390 B |
Binary file not shown.
|
Before Width: | Height: | Size: 353 B |
Binary file not shown.
|
Before Width: | Height: | Size: 369 B |
Binary file not shown.
|
Before Width: | Height: | Size: 384 B |
Binary file not shown.
|
Before Width: | Height: | Size: 385 B |
Binary file not shown.
|
Before Width: | Height: | Size: 378 B |
Binary file not shown.
|
Before Width: | Height: | Size: 388 B |
|
|
@ -492,9 +492,6 @@
|
||||||
.margin-top-23 {
|
.margin-top-23 {
|
||||||
margin-top: 23px;
|
margin-top: 23px;
|
||||||
}
|
}
|
||||||
.margin-top-47 {
|
|
||||||
margin-top: 47px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.linear-gradient {
|
.linear-gradient {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -2409,9 +2406,6 @@ svg.loading-icon {
|
||||||
.margin-top-16 {
|
.margin-top-16 {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
.margin-top-10 {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -2769,12 +2763,5 @@ svg.loading-icon {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.grayColor{
|
|
||||||
color: #B2B2B2;
|
|
||||||
}
|
|
||||||
.device-box{
|
|
||||||
img{
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="header-box">
|
<div class="header-box">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img src="~@/assets/img/logo.png" alt="">
|
化工园区
|
||||||
<div>{{currentPage.label}}</div>
|
<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>
|
||||||
|
|
||||||
</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="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>
|
<div class="arrow left el-icon-caret-left" v-if="currentPage.children.length>5 && navLeft<0 && showArrow" @click.stop="moveNav(false)"></div>
|
||||||
|
|
@ -55,7 +63,7 @@ export default class HeaderComponent extends Vue {
|
||||||
public showPageList = false;
|
public showPageList = false;
|
||||||
public pageList = pageListData;
|
public pageList = pageListData;
|
||||||
public currentPage = JSON.parse(localStorage.getItem("currentPage") as any) || this.pageList[0];
|
public currentPage = JSON.parse(localStorage.getItem("currentPage") as any) || this.pageList[0];
|
||||||
public currentNav = localStorage.getItem("currentNav") || this.currentPage.children[0].value;
|
public currentNav = localStorage.getItem("currentNav") || this.currentPage.value;
|
||||||
public showArrow = false;
|
public showArrow = false;
|
||||||
|
|
||||||
public showContent = true;
|
public showContent = true;
|
||||||
|
|
@ -146,17 +154,61 @@ export default class HeaderComponent extends Vue {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
.logo{
|
.logo{
|
||||||
font-family: "Microsoft Yahei",serif;
|
// font-family: "Microsoft Yahei";
|
||||||
//font-family: "logo";
|
font-family: "logo";
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
img{
|
.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;
|
position: relative;
|
||||||
top: 3px;
|
.arrow{
|
||||||
margin-right: 10px;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nav-box{
|
.nav-box{
|
||||||
|
|
|
||||||
|
|
@ -1,98 +0,0 @@
|
||||||
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'
|
|
||||||
}
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,201 +0,0 @@
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,196 +0,0 @@
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,289 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,321 +0,0 @@
|
||||||
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'
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,269 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,112 +0,0 @@
|
||||||
<!--通用标题组件-->
|
|
||||||
<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>
|
|
||||||
|
|
@ -1,139 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -26,7 +26,7 @@ export default [ {
|
||||||
color:COLOR.BOUNDS,
|
color:COLOR.BOUNDS,
|
||||||
selected:false,
|
selected:false,
|
||||||
pages:["closePark","peopleCar"]
|
pages:["closePark","peopleCar"]
|
||||||
},{
|
}{
|
||||||
name:"人员定位",
|
name:"人员定位",
|
||||||
ids:[] as string[],
|
ids:[] as string[],
|
||||||
type:"moveMarker",
|
type:"moveMarker",
|
||||||
|
|
@ -37,7 +37,7 @@ export default [ {
|
||||||
coordinateType:1,
|
coordinateType:1,
|
||||||
selected:false,
|
selected:false,
|
||||||
pages:["closePark","peopleCar","smartSafetySupervision","smartEmergency"]
|
pages:["closePark","peopleCar","smartSafetySupervision","smartEmergency"]
|
||||||
},{
|
}{
|
||||||
name:"车辆定位",
|
name:"车辆定位",
|
||||||
ids:[] as string[],
|
ids:[] as string[],
|
||||||
type:"moveMarker",
|
type:"moveMarker",
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,14 @@ export default new Vuex.Store({
|
||||||
state.specialEnvList = data;
|
state.specialEnvList = data;
|
||||||
},
|
},
|
||||||
upDateEventList(state:any,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){
|
setDangrousList(state:any,data){
|
||||||
state.dangrousList = data;
|
state.dangrousList = data;
|
||||||
|
|
|
||||||
|
|
@ -4,13 +4,10 @@
|
||||||
|
|
||||||
<div class="bg-box left animate__animated">
|
<div class="bg-box left animate__animated">
|
||||||
<div class="panel-container">
|
<div class="panel-container">
|
||||||
<HomeLeftComponent v-if="currentNav === 'home'" class="animate__animated animate__fadeInLeft"></HomeLeftComponent>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-box right main animate__animated">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,41 +4,22 @@ import {MockData} from "@/mock";
|
||||||
|
|
||||||
import layer from "layui-layer"
|
import layer from "layui-layer"
|
||||||
import BaseComponent from "./base.component"
|
import BaseComponent from "./base.component"
|
||||||
import HomeLeftComponent from "@/components/home/left/homeLeft.component";
|
|
||||||
import HomeRightComponent from "@/components/home/right/homeRight.component";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {
|
components: {
|
||||||
HomeLeftComponent,
|
|
||||||
HomeRightComponent
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export default class OverViewComponent extends BaseComponent {
|
export default class OverViewComponent extends BaseComponent {
|
||||||
//当前菜单
|
//当前菜单
|
||||||
public currentNav = 'home';
|
public currentNav = '';
|
||||||
// 当前图层
|
// 当前图层
|
||||||
public warnTimer = {};
|
|
||||||
|
|
||||||
public currentLayers = [] as any;
|
public currentLayers = [] as any;
|
||||||
|
|
||||||
// 是否展开图层
|
// 是否展开图层
|
||||||
public openLayerDrawer = false;
|
public openLayerDrawer = false;
|
||||||
created(){
|
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(){
|
public getCarList(){
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue