Merge commit 'e83e91434742112d7100e93e6a770bdd9104d475'
吴延福
commit
9a94cd4e0e
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 199 B |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
|
|
@ -2777,4 +2777,350 @@ svg.loading-icon {
|
|||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.tree-box{
|
||||
width: 330px;
|
||||
height: 300px;
|
||||
padding: 14px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
box-shadow: 0 10px 20px -10px #000000;
|
||||
border-radius: 6px;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0)) 1 1;
|
||||
}
|
||||
|
||||
.tree-line{
|
||||
&.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
|
||||
background: rgba(125, 174, 255, 0.7);
|
||||
}
|
||||
&::before{
|
||||
content: "";
|
||||
height: 79%;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: 23px;
|
||||
top: 14px;
|
||||
border-width: 1px;
|
||||
border-left: 1px solid #ffffff;
|
||||
}
|
||||
& > div[role="treeitem"] {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.white{
|
||||
color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
}
|
||||
.custom-tree-node{
|
||||
position: relative;
|
||||
left: 8px;
|
||||
width: 100%;
|
||||
.doc-style{
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: -11px;
|
||||
}
|
||||
}
|
||||
.right-icon{
|
||||
transition: all .3s linear;
|
||||
position: relative;
|
||||
left: -10px;
|
||||
}
|
||||
.sub-item{
|
||||
padding-left: 16px;
|
||||
&::before{
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: 9px;
|
||||
border-width: 1px;
|
||||
//border-top: 1px solid #ffffff;
|
||||
}
|
||||
&::after{
|
||||
content: "";
|
||||
height: 130%;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 0px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.is-expanded{
|
||||
.sub-item{
|
||||
padding-left: 8px;
|
||||
&::before{
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: 9px;
|
||||
border-width: 1px;
|
||||
//border-top: 1px solid #ffffff;
|
||||
}
|
||||
&::after{
|
||||
content: "";
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 10px;
|
||||
border-width: 1px;
|
||||
border-left: 1px solid #ffffff;
|
||||
}
|
||||
}
|
||||
.sub-item-border-none{
|
||||
&::after{
|
||||
content: "";
|
||||
height: 130%;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 0px;
|
||||
border: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
div[role="treeitem"].is-expanded > div.el-tree-node__content > div > span:nth-child(2),
|
||||
div[role="group"] div[role="treeitem"].is-expanded,
|
||||
{
|
||||
.right-icon{
|
||||
transform: rotate(90deg);
|
||||
transition: all .3s linear;
|
||||
}
|
||||
}
|
||||
|
||||
&.el-tree,.el-tree-node__content, .el-upload-list__item{
|
||||
background: transparent;
|
||||
&:hover,&:focus,&:active,&:visited{
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
}
|
||||
.el-tree-node:focus>.el-tree-node__content{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tree-level-1-icon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
left: -12px;
|
||||
}
|
||||
|
||||
|
||||
margin-top:10px;
|
||||
.el-tree-node {
|
||||
position: relative;
|
||||
color: black;
|
||||
padding: 0;
|
||||
padding-left: 10px; // 缩进量
|
||||
}
|
||||
.el-tree-node__children {
|
||||
padding-left: 16px; // 缩进量
|
||||
}
|
||||
|
||||
// 竖线
|
||||
.el-tree-node::before {
|
||||
content: "";
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: -13px;
|
||||
border-width: 1px;
|
||||
border-left: 1px solid #ffffff;
|
||||
}
|
||||
// 当前层最后一个节点的竖线高度固定
|
||||
.el-tree-node:last-child::before {
|
||||
height: 34px; // 可以自己调节到合适数值
|
||||
}
|
||||
|
||||
// 横线
|
||||
.el-tree-node::after {
|
||||
content: "";
|
||||
width: 27px;
|
||||
//width: 16px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: 20px;
|
||||
border-width: 1px;
|
||||
border-top: 1px solid #ffffff;
|
||||
content: "";
|
||||
|
||||
}
|
||||
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
|
||||
& > .el-tree-node::after {
|
||||
border-top: none;
|
||||
}
|
||||
& > .el-tree-node::before {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.el-tree-node__content{
|
||||
padding-left:0 !important;
|
||||
color:#444;
|
||||
height: 40px;
|
||||
// 树缩进样式
|
||||
.el-icon-caret-right::before{
|
||||
content: "";
|
||||
width:14px;
|
||||
height:14px;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
.el-tree-node__expand-icon.expanded{
|
||||
transform: rotate(0);
|
||||
}
|
||||
// 树展开样式
|
||||
.el-tree-node__expand-icon.expanded::before{
|
||||
content: "";
|
||||
width:0;
|
||||
height:0;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
.el-tree-node__expand-icon.is-leaf::before{
|
||||
content: "";
|
||||
}
|
||||
.el-icon-caret-right.is-leaf::before{
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
.custom-tree-node .file_class{
|
||||
color: #ffb400;
|
||||
}
|
||||
.custom-tree-node .label{
|
||||
margin-left:5px;
|
||||
}
|
||||
.custom-tree-node .no_children{
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
// 使用flex布局对custom-tree-node_body盒子进行排版
|
||||
.custom-tree-node_body{
|
||||
width:100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// margin-top:-3px;
|
||||
}
|
||||
.tree_form_left_tree_icon{
|
||||
padding:0 3px;
|
||||
font-size:16px;
|
||||
color:#666;
|
||||
i{
|
||||
margin:0 4px;
|
||||
}
|
||||
}
|
||||
.tree_form_left_tree_icon:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
// 展开关闭的icon
|
||||
.el-tree-node__expand-icon{
|
||||
font-size: 16px;
|
||||
padding: 0 3px;
|
||||
// 叶子节点（无子节点）
|
||||
&.is-leaf{
|
||||
color: transparent;
|
||||
// display: none; // 也可以去掉
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.view-list{
|
||||
&-item{
|
||||
width: 330px;
|
||||
height: 186px;
|
||||
border-radius: 8px;
|
||||
background-color: #1B6BEB;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&-title{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-radius: 0 0 8px 8px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cover {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 鼠标hover,显示遮罩,设置过渡时间 */
|
||||
.cover:hover {
|
||||
transition: all .4s;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.view-right-title{
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid rgba(216,216,216,0.4);;
|
||||
}
|
||||
.sub-title{
|
||||
font-size: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.text-con{
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 14px;
|
||||
}
|
||||
.right-view-list{
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
@include scrollStyle(2px);
|
||||
}
|
||||
.right-view-item{
|
||||
width: 350px;
|
||||
height: 98px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
padding-left: 3px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
img{
|
||||
margin-right: 12px;
|
||||
}
|
||||
p{
|
||||
font-size: 16px;
|
||||
padding: 0 0 10px 0;
|
||||
}
|
||||
.right-sub-text{
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-rate__icon{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,9 +98,12 @@ export const lineChartData = function () {
|
|||
],
|
||||
|
||||
tooltip: {
|
||||
show: false,
|
||||
alwaysShowContent: false,
|
||||
trigger: 'item'
|
||||
trigger: 'item',
|
||||
backgroundColor:"rgba(0,0,0,0.6)",
|
||||
borderWidth:0,
|
||||
textStyle:{
|
||||
color:"rgba(255,255,255,0.8)",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
x: 30,
|
||||
|
|
@ -111,18 +114,23 @@ export const lineChartData = function () {
|
|||
}
|
||||
}
|
||||
|
||||
export const roundChartData = function () {
|
||||
export const radarChartData = function () {
|
||||
return {
|
||||
backgroundColor: "#0A2E5D",
|
||||
tooltip: {},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor:"rgba(0,0,0,0.6)",
|
||||
borderWidth:0,
|
||||
textStyle:{
|
||||
color:"rgba(255,255,255,0.8)",
|
||||
},
|
||||
},
|
||||
radar: {
|
||||
radius: "50%", //大小
|
||||
nameGap: 20, // 图中工艺等字距离图的距离
|
||||
radius: "70%", //大小
|
||||
nameGap: 10, // 图中工艺等字距离图的距离
|
||||
center: ["50%", "50%"], // 图的位置
|
||||
name: {
|
||||
textStyle: {
|
||||
color: "rgba(101, 213, 255, 1)",
|
||||
color: "rgba(255,255,255,0.8)",
|
||||
fontSize: 16
|
||||
},
|
||||
formatter: function(name) {
|
||||
|
|
@ -130,15 +138,14 @@ export const roundChartData = function () {
|
|||
}
|
||||
},
|
||||
indicator: [
|
||||
{"name":'社会稳定',"max":"100"},
|
||||
{"name":'社会治安',"max":"100"},
|
||||
{"name":'交通安全',"max":"100"},
|
||||
{"name":'消防安全',"max":"100"},
|
||||
{"name":'公共安全',"max":"100"},
|
||||
{"name":'1月',"max":"100"},
|
||||
{"name":'2月',"max":"100"},
|
||||
{"name":'3月',"max":"100"},
|
||||
{"name":'4月',"max":"100"},
|
||||
{"name":'5月',"max":"100"},
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
|
||||
color: "rgba(153, 409, 246, 0.2)"
|
||||
},
|
||||
show:true,
|
||||
|
|
@ -163,7 +170,7 @@ export const roundChartData = function () {
|
|||
|
||||
series: [
|
||||
{
|
||||
name: "报警类型分析",
|
||||
name: "物资统计",
|
||||
type: "radar",
|
||||
symbol: "angle",
|
||||
itemStyle: {
|
||||
|
|
@ -176,16 +183,16 @@ export const roundChartData = function () {
|
|||
symbol: "circle",
|
||||
symbolSize: 5,
|
||||
value: [70,42,63,84,75,34],
|
||||
areaStyle: { color: "rgba(64, 205, 241, 0.2)" },
|
||||
areaStyle: { color: "rgba(125,174,255,0.5)" },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth:1,
|
||||
color: "RGBA(0, 34, 66, 1)",
|
||||
borderColor: "rgba(146, 225, 255, 1)"
|
||||
color: "#7FB0FF",
|
||||
borderColor: "#7FB0FF"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: "rgba(146, 225, 255, 1)",
|
||||
color: "#7FB0FF",
|
||||
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>
|
||||
|
|
@ -3,7 +3,8 @@
|
|||
<title-component :imgSrc="imgSrc">
|
||||
能耗统计
|
||||
</title-component>
|
||||
<hbt-echarts className="line-chart-emergency" :options="option" @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
|
||||
<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">
|
||||
|
|
@ -35,79 +36,8 @@
|
|||
<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>
|
||||
<hbt-echarts className="line-chart-emergency" :options="radarData"
|
||||
@onChartInit="getEcharts($event,'radar')"></hbt-echarts>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {Component, Emit, Vue} from 'vue-property-decorator';
|
||||
import template from "./homeRight.component.html"
|
||||
import {lineChartData} from "./chartData";
|
||||
import {lineChartData,radarChartData} from "./chartData";
|
||||
import TitleComponent from "@/components/title.component.vue"
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
|
|
@ -25,15 +25,11 @@ export default class HomeRightComponent extends Vue {
|
|||
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}
|
||||
];
|
||||
//雷达图数据
|
||||
radarData: any = {}
|
||||
//折线图实例
|
||||
radar: any = {}
|
||||
|
||||
showPop = false
|
||||
showLogPop = false
|
||||
popTitle = '开启演练'
|
||||
|
|
@ -216,42 +212,17 @@ export default class HomeRightComponent extends Vue {
|
|||
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
|
||||
if (type === 'lineChart'){
|
||||
this.initLineData()
|
||||
}else{
|
||||
this.radarData = radarChartData()
|
||||
}
|
||||
|
||||
}
|
||||
setData(val,type){
|
||||
if (type === 'typeName'){
|
||||
|
|
@ -275,7 +246,6 @@ export default class HomeRightComponent extends Vue {
|
|||
this.timerForLineData = setInterval(() => {
|
||||
this.lineChart.clear()
|
||||
this.lineChart.setOption(this.option)
|
||||
this.getCount(this.count)
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
|
|
@ -287,7 +257,6 @@ export default class HomeRightComponent extends Vue {
|
|||
}
|
||||
|
||||
mounted() {
|
||||
this.getCount(70)
|
||||
this.autoChangeLineData()
|
||||
window.addEventListener("resize", this.resize);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -8,18 +8,14 @@
|
|||
<span>查看更多</span>
|
||||
<i class="el-icon-caret-right"></i>
|
||||
</div>
|
||||
<div class="manual" v-if="showManual" @click="addManual">
|
||||
<div class="manual" v-if="showViewFlag" @click="showView">
|
||||
<i class="el-icon-plus"></i>
|
||||
<span>人工接警</span>
|
||||
<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>
|
||||
|
||||
|
|
@ -36,9 +32,7 @@ export default class TitleComponent extends Vue {
|
|||
//关闭按钮显示隐藏
|
||||
@Prop({default: false}) showClose!: boolean;
|
||||
//人工接警按钮显示隐藏
|
||||
@Prop({default: false}) showManual!: boolean;
|
||||
//缺失物资清单
|
||||
@Prop({default: false}) showList!: boolean;
|
||||
@Prop({default: false}) showViewFlag!: boolean;
|
||||
|
||||
@Emit()
|
||||
changeMore(){
|
||||
|
|
@ -48,13 +42,9 @@ export default class TitleComponent extends Vue {
|
|||
changeClose(){
|
||||
return this.showClose
|
||||
}
|
||||
@Emit('addManual')
|
||||
addManual(){
|
||||
return this.showManual
|
||||
}
|
||||
@Emit('showListData')
|
||||
showListData(){
|
||||
return this.showManual
|
||||
@Emit('showView')
|
||||
showView(){
|
||||
return this.showView
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<div class="env-left emergency-part">
|
||||
|
||||
<div class="box-content flex-0 height-auto">
|
||||
<title-component :imgSrc="imgSrc">
|
||||
训练设置
|
||||
</title-component>
|
||||
<div class="tree-box margin-top-23">
|
||||
<el-tree
|
||||
class="tree-line"
|
||||
:indent="0"
|
||||
icon-class="none"
|
||||
highlight-current
|
||||
@node-click="nodeClick"
|
||||
:data="treeData"
|
||||
>
|
||||
<div class="custom-tree-node d-flex is-justify-space-between align-items-center"
|
||||
:class="getNodeClass(node)" slot-scope="{ node, data }">
|
||||
<span class="d-flex align-items-center">
|
||||
<!-- 判断是否存在子级数据 -->
|
||||
<div v-if="node.level === 1"
|
||||
class="tree-level-1-icon d-flex align-items-center is-justify-space-center">
|
||||
<img src="~@/assets/img/home/training-devices-B.png" alt="">
|
||||
</div>
|
||||
<i class="doc-style" v-if="node.level > 1"></i>
|
||||
<span class="white">{{ node.label }}</span>
|
||||
</span>
|
||||
<span class="d-flex align-items-center">
|
||||
<img class="right-icon" v-show="node.level<3 " src="~@/assets/img/view/tree-icon.png" alt="">
|
||||
</span>
|
||||
</div>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content margin-top-23">
|
||||
<title-component :showViewFlag="true" @showView="showView" :imgSrc="imgSrc">
|
||||
基地导览路线
|
||||
</title-component>
|
||||
<div class="view-list margin-top-23">
|
||||
<div class="view-list-item">
|
||||
<div @click="playView" class="cover d-flex align-items-center is-justify-space-center">
|
||||
<img src="~@/assets/img/view/play.png" alt="">
|
||||
</div>
|
||||
<div class="view-list-item-title d-flex align-items-center is-justify-space-center">
|
||||
<span>北大门东区</span>
|
||||
<i class="el-icon-right"></i>
|
||||
<span>南大门西区</span>
|
||||
</div>
|
||||
<img src="~@/assets/img/view/view.png" alt="">
|
||||
</div>
|
||||
<div class="view-list-item">
|
||||
<div @click="playView" class="cover d-flex align-items-center is-justify-space-center">
|
||||
<img src="~@/assets/img/view/play.png" alt="">
|
||||
</div>
|
||||
<div class="view-list-item-title d-flex align-items-center is-justify-space-center">
|
||||
<span>北大门东区</span>
|
||||
<i class="el-icon-right"></i>
|
||||
<span>南大门西区</span>
|
||||
</div>
|
||||
<img src="~@/assets/img/view/view.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
import {Component, Emit, Vue} from 'vue-property-decorator';
|
||||
import template from "./viewLeft.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 ViewLeftComponent extends Vue {
|
||||
//标题左侧图标
|
||||
imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
|
||||
|
||||
treeData = [
|
||||
{
|
||||
label: '技能训练设施',
|
||||
children: []
|
||||
}, {
|
||||
label: '灾害事故处置训练设施',
|
||||
children: [{
|
||||
label: '火灾扑救训练设',
|
||||
children: [
|
||||
{
|
||||
label: '综合训练楼',
|
||||
children: []
|
||||
},{
|
||||
label: '化工装置火灾事故处置训练设施',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}]
|
||||
}, {
|
||||
label: '战勤保障训练设施',
|
||||
children: []
|
||||
}]
|
||||
//获取class类
|
||||
getNodeClass(node){
|
||||
const arr:string[] = []
|
||||
if (node.level>1){
|
||||
arr.push('sub-item')
|
||||
}
|
||||
if (node.childNodes.length === 0 || !node.expanded){
|
||||
arr.push('sub-item-border-none')
|
||||
}
|
||||
return arr
|
||||
}
|
||||
@Emit('showView')
|
||||
showView(){
|
||||
//todo 展开自由导览
|
||||
}
|
||||
//点击告警信息
|
||||
@Emit()
|
||||
getItem(item) {
|
||||
// console.log('item', item)
|
||||
}
|
||||
//点击节点
|
||||
nodeClick(data,node,self){
|
||||
if (node.isLeaf){
|
||||
this.showViewRight(node.data)
|
||||
}
|
||||
|
||||
}
|
||||
//显示右侧
|
||||
@Emit('showViewRight')
|
||||
showViewRight(item){
|
||||
//
|
||||
}
|
||||
playView(){
|
||||
console.log('导览')
|
||||
}
|
||||
count = 1
|
||||
|
||||
|
||||
mounted() {
|
||||
|
||||
}
|
||||
|
||||
destroyed() {
|
||||
|
||||
}
|
||||
|
||||
changeMore() {
|
||||
console.log(1)
|
||||
}
|
||||
|
||||
changeClose() {
|
||||
console.log(1)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
|
||||
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: {
|
||||
trigger: 'item',
|
||||
backgroundColor:"rgba(0,0,0,0.6)",
|
||||
borderWidth:0,
|
||||
textStyle:{
|
||||
color:"rgba(255,255,255,0.8)",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
x: 30,
|
||||
y: 30,
|
||||
x2: 12,
|
||||
y2: 20,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const radarChartData = function () {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor:"rgba(0,0,0,0.6)",
|
||||
borderWidth:0,
|
||||
textStyle:{
|
||||
color:"rgba(255,255,255,0.8)",
|
||||
},
|
||||
},
|
||||
radar: {
|
||||
radius: "70%", //大小
|
||||
nameGap: 10, // 图中工艺等字距离图的距离
|
||||
center: ["50%", "50%"], // 图的位置
|
||||
name: {
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,0.8)",
|
||||
fontSize: 16
|
||||
},
|
||||
formatter: function(name) {
|
||||
return name;
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{"name":'1月',"max":"100"},
|
||||
{"name":'2月',"max":"100"},
|
||||
{"name":'3月',"max":"100"},
|
||||
{"name":'4月',"max":"100"},
|
||||
{"name":'5月',"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(125,174,255,0.5)" },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth:1,
|
||||
color: "#7FB0FF",
|
||||
borderColor: "#7FB0FF"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#7FB0FF",
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<div class="env-right emergency-part">
|
||||
|
||||
<div class="view-right-title flex-0">
|
||||
化工装置火灾事故装置训练设施
|
||||
</div>
|
||||
<h3 class="sub-title flex-0">训练内容</h3>
|
||||
<div class="text-con flex-0">
|
||||
模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗
|
||||
</div>
|
||||
<h3 class="sub-title flex-0">训练内容</h3>
|
||||
<div class="right-view-list">
|
||||
<div class="right-view-item d-flex align-items-center" @click="showDetail(item)" v-for="(item,i) in tableData">
|
||||
<img v-if="1%2 === 0" src="~@/assets/img/view/fire.png" alt="">
|
||||
<img v-else src="~@/assets/img/view/fire2.png" alt="">
|
||||
<div>
|
||||
<p>{{item.title}}</p>
|
||||
<div class="d-flex align-items-center right-sub-text">
|
||||
<span>难度:</span>
|
||||
<el-rate disabled v-model="item.rate" :max="5"></el-rate>
|
||||
</div>
|
||||
<div class="d-flex align-items-center right-sub-text">
|
||||
<span>火点:</span>
|
||||
<span>{{item.point}}个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import {Component, Emit, Vue} from 'vue-property-decorator';
|
||||
import template from "./viewRight.component.html"
|
||||
import {lineChartData,radarChartData} 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 ViewRightComponent extends Vue {
|
||||
|
||||
tableData = [
|
||||
{
|
||||
rate:3,
|
||||
title:'顶层沸溢火',
|
||||
point:'5',
|
||||
},{
|
||||
rate:4,
|
||||
title:'顶层沸溢火',
|
||||
point:'5',
|
||||
},{
|
||||
rate:2,
|
||||
title:'顶层沸溢火',
|
||||
point:'5',
|
||||
},{
|
||||
rate:3,
|
||||
title:'顶层沸溢火',
|
||||
point:'5',
|
||||
},{
|
||||
rate:4,
|
||||
title:'顶层沸溢火',
|
||||
point:'5',
|
||||
},{
|
||||
rate:2,
|
||||
title:'顶层沸溢火',
|
||||
point:'5',
|
||||
},
|
||||
]
|
||||
|
||||
//训练内容详情
|
||||
@Emit('showDetail')
|
||||
showDetail(item){
|
||||
//
|
||||
}
|
||||
|
||||
mounted() {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
beforeDestroy() {
|
||||
|
||||
}
|
||||
|
||||
destroyed() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -4,13 +4,19 @@
|
|||
|
||||
<div class="bg-box left animate__animated">
|
||||
<div class="panel-container">
|
||||
<!-- 首页-->
|
||||
<HomeLeftComponent v-if="currentNav === 'home'" class="animate__animated animate__fadeInLeft"></HomeLeftComponent>
|
||||
<!-- 导览-->
|
||||
<ViewLeftComponent @showView="showView" @showViewRight="showViewRight" v-if="currentNav === 'view'" class="animate__animated animate__fadeInLeft"></ViewLeftComponent>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-box right main animate__animated">
|
||||
<div class="bg-box right main animate__animated" :class="showBackGround">
|
||||
<div class="panel-container">
|
||||
<!-- 首页-->
|
||||
<HomeRightComponent v-if="currentNav === 'home'"
|
||||
class="animate__animated animate__fadeInRight"></HomeRightComponent>
|
||||
<!-- 导览-->
|
||||
<ViewRightComponent @showDetail="showDetail" v-if="currentNav === 'view' && viewRightShow" class="animate__animated animate__fadeInLeft"></ViewRightComponent>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,17 @@ 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";
|
||||
import ViewLeftComponent from "@/components/view/left/viewLeft.component";
|
||||
import ViewRightComponent from "@/components/view/right/viewRight.component";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
HomeLeftComponent,
|
||||
HomeRightComponent
|
||||
HomeRightComponent,
|
||||
ViewLeftComponent,
|
||||
ViewRightComponent,
|
||||
}
|
||||
})
|
||||
export default class OverViewComponent extends BaseComponent {
|
||||
|
|
@ -25,6 +29,9 @@ export default class OverViewComponent extends BaseComponent {
|
|||
|
||||
// 是否展开图层
|
||||
public openLayerDrawer = false;
|
||||
//展示导览右侧
|
||||
viewRightShow = false
|
||||
|
||||
// 是否隐藏除地图外所有板块
|
||||
public hideAllPanel = false;
|
||||
async created(){
|
||||
|
|
@ -120,12 +127,32 @@ export default class OverViewComponent extends BaseComponent {
|
|||
this.addMarker(layer,true)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//进入自由导览
|
||||
showView(){
|
||||
//todo 进入自由导览
|
||||
}
|
||||
//展开导览右侧
|
||||
showViewRight(){
|
||||
if (this.viewRightShow){
|
||||
this.viewRightShow = false
|
||||
setTimeout(()=>{
|
||||
this.viewRightShow = true
|
||||
})
|
||||
}else{
|
||||
this.viewRightShow = true
|
||||
}
|
||||
}
|
||||
//右侧详情点击事件
|
||||
showDetail(item){
|
||||
console.log('右侧详情点击事件')
|
||||
}
|
||||
mounted() {
|
||||
console.log(2)
|
||||
}
|
||||
|
||||
get showBackGround(){
|
||||
let flag = this.currentNav === 'view' && !this.viewRightShow
|
||||
return flag?'none':''
|
||||
}
|
||||
|
||||
|
||||
public getCurrentLayers(){
|
||||
|
|
|
|||
Loading…
Reference in New Issue