540 lines
22 KiB
Vue
540 lines
22 KiB
Vue
|
<template>
|
|||
|
|
<div class="renyuan">
|
|||
|
|
<div class="block1">
|
|||
|
|
<div class="options">
|
|||
|
|
<div v-for="(item,index) in block1OptionsList" :key="index" class="option">
|
|||
|
|
{{ item.title }}：<count-to :start-val="0" :end-val="+item.count" :duration="3600"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="block2">
|
|||
|
|
<layout-title title="重大危险源统计"/>
|
|||
|
|
<div class="content">
|
|||
|
|
<div id="main2"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="block3">
|
|||
|
|
<layout-title title="危险源列表"/>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="table">
|
|||
|
|
<div class="tr">
|
|||
|
|
<div class="td">危险源名称</div>
|
|||
|
|
<div class="td">液位</div>
|
|||
|
|
<div class="td">温度</div>
|
|||
|
|
<div class="td">状态</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-infinite-scroll="false" :infinite-scroll-disabled="false" class="scroll">
|
|||
|
|
<div v-for="(item,index) in block3List" :key="index" class="tr">
|
|||
|
|
<div class="td">{{ item.MAJORDANGERSOURCE_NAME }}</div>
|
|||
|
|
<div class="td">{{ item.STORAGETANK_LIQUIDLEVEL }}</div>
|
|||
|
|
<div class="td">{{ item.STORAGETANK_TEMPERATURE }}</div>
|
|||
|
|
<div class="td">
|
|||
|
|
<span v-if="item.MAJORDANGERSOURCE_STATUS == 1">正常</span>
|
|||
|
|
<span v-if="item.MAJORDANGERSOURCE_STATUS == 2">停用</span>
|
|||
|
|
<span v-if="item.MAJORDANGERSOURCE_STATUS == 3">检修</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="block4">
|
|||
|
|
<layout-title title="报警处置情况"/>
|
|||
|
|
<div class="content">
|
|||
|
|
<div id="main3"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="block5">
|
|||
|
|
<layout-title title="报警信息"/>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="table">
|
|||
|
|
<div class="tr">
|
|||
|
|
<div class="td">设备名称</div>
|
|||
|
|
<div class="td">报警时间</div>
|
|||
|
|
<div class="td">处置状态</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-infinite-scroll="false" :infinite-scroll-disabled="false" class="scroll">
|
|||
|
|
<div v-for="(item,index) in block5List" :key="index" class="tr">
|
|||
|
|
<div class="td">{{ item.MAJORDANGERSOURCE_NAME }}</div>
|
|||
|
|
<div class="td">{{ item.CREATTIME }}</div>
|
|||
|
|
<div class="td">
|
|||
|
|
<span v-if="item.DISPOSAL_STATUS == -1">未处置</span>
|
|||
|
|
<span v-if="item.DISPOSAL_STATUS == 0">报警升级</span>
|
|||
|
|
<span v-if="item.DISPOSAL_STATUS == 1">完成处置</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import layoutTitle from './title.vue'
|
|||
|
|
import CountTo from 'vue-count-to'
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
import { requestFN } from '@/utils/request'
|
|||
|
|
|
|||
|
|
let myChart2 = null
|
|||
|
|
let myChart3 = null
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
CountTo,
|
|||
|
|
layoutTitle
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
block1OptionsList: [],
|
|||
|
|
block3List: [],
|
|||
|
|
block5List: [],
|
|||
|
|
loading: false,
|
|||
|
|
currentPage: 1,
|
|||
|
|
count: 0,
|
|||
|
|
totalPage: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
window.onresize = function() {
|
|||
|
|
myChart2 && myChart2.resize()
|
|||
|
|
myChart3 && myChart3.resize()
|
|||
|
|
}
|
|||
|
|
// this.initEcharts2()
|
|||
|
|
this.getFindDeclarationLevelChartData()
|
|||
|
|
this.getFindAlarmDisposalChartData()
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
myChart2 = null
|
|||
|
|
myChart3 = null
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getFindMajorDangerSourceListAll()
|
|||
|
|
this.getListDisposal()
|
|||
|
|
this.getFindMajorDangerSourceCount()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initEcharts1(o) {
|
|||
|
|
myChart2 = echarts.init(document.querySelector('#main2'))
|
|||
|
|
const img = 'data:image/png;base64,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
|
|||
|
|
const trafficWay = o.seriesData
|
|||
|
|
const data = []
|
|||
|
|
const color = ['#ee0e44', '#fc5600', '#9628a3', '#fedc00']
|
|||
|
|
for (let i = 0; i < trafficWay.length; i++) {
|
|||
|
|
data.push(
|
|||
|
|
{
|
|||
|
|
value: trafficWay[i].value,
|
|||
|
|
name: trafficWay[i].name,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
borderWidth: 5,
|
|||
|
|
shadowBlur: 20,
|
|||
|
|
borderColor: color[i],
|
|||
|
|
shadowColor: color[i]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 2,
|
|||
|
|
name: '',
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
color: 'rgba(0, 0, 0, 0)',
|
|||
|
|
borderColor: 'rgba(0, 0, 0, 0)',
|
|||
|
|
borderWidth: 0
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
const seriesOption = [
|
|||
|
|
{
|
|||
|
|
name: '',
|
|||
|
|
type: 'pie',
|
|||
|
|
clockWise: false,
|
|||
|
|
radius: [55, 59],
|
|||
|
|
hoverAnimation: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
const option = {
|
|||
|
|
color: color,
|
|||
|
|
graphic: {
|
|||
|
|
elements: [
|
|||
|
|
{
|
|||
|
|
type: 'image',
|
|||
|
|
z: 3,
|
|||
|
|
style: {
|
|||
|
|
image: img,
|
|||
|
|
width: 88,
|
|||
|
|
height: 88
|
|||
|
|
},
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'center'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
icon: 'circle',
|
|||
|
|
orient: 'vertical',
|
|||
|
|
data: ['一级', '二级', '三级', '四级'],
|
|||
|
|
right: '30px',
|
|||
|
|
top: 'center',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
},
|
|||
|
|
itemGap: 10
|
|||
|
|
},
|
|||
|
|
series: seriesOption
|
|||
|
|
}
|
|||
|
|
myChart2.setOption(option)
|
|||
|
|
},
|
|||
|
|
initEcharts2(o) {
|
|||
|
|
myChart3 = echarts.init(document.querySelector('#main3'))
|
|||
|
|
const data = o
|
|||
|
|
const series = []
|
|||
|
|
for (let i = 0; i < data.seriesData.length; i++) {
|
|||
|
|
series.push({
|
|||
|
|
name: data.legendData[i],
|
|||
|
|
type: 'bar',
|
|||
|
|
data: data.seriesData[i]
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const option = {
|
|||
|
|
color: ['#3db1ee', '#0def67', '#fc5008'],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '2%',
|
|||
|
|
right: '5%',
|
|||
|
|
bottom: '12%',
|
|||
|
|
top: '16%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: 0,
|
|||
|
|
data: data.legendData,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
height: 5,
|
|||
|
|
xAxisIndex: [0],
|
|||
|
|
bottom: '5%',
|
|||
|
|
right: '5%',
|
|||
|
|
start: 0,
|
|||
|
|
end: 50,
|
|||
|
|
moveHandleSize: '3',
|
|||
|
|
moveHandleStyle: {
|
|||
|
|
color: '#2a569e'
|
|||
|
|
},
|
|||
|
|
fillerColor: '#2a569e',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'transparent'
|
|||
|
|
},
|
|||
|
|
borderColor: '#3a7a95'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'inside',
|
|||
|
|
show: true,
|
|||
|
|
start: 0,
|
|||
|
|
end: 25
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: data.xAxisData,
|
|||
|
|
axisLabel: {
|
|||
|
|
rotate: 45,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(255,255,255,0.5)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(255,255,255,0.5)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(255,255,255,0.5)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series
|
|||
|
|
}
|
|||
|
|
myChart3.setOption(option)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 重大危险源统计
|
|||
|
|
getFindDeclarationLevelChartData() {
|
|||
|
|
requestFN('/api/homemajor/findDeclarationLevelChartData').then(res => {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.initEcharts1(res.chartData)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 危险源列表
|
|||
|
|
getFindMajorDangerSourceListAll() {
|
|||
|
|
requestFN('/api/homemajor/findMajorDangerSourceListAll').then(res => {
|
|||
|
|
if (res.varList) {
|
|||
|
|
// created by liuJiaNan description:数据展示多条可能出现滚动调，所以只展示3条
|
|||
|
|
this.block3List = []
|
|||
|
|
this.block3List = res.varList
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 报警信息
|
|||
|
|
getListDisposal() {
|
|||
|
|
requestFN('/api/homemajor/listDisposal').then(res => {
|
|||
|
|
if (res.varList) {
|
|||
|
|
// created by liuJiaNan description:数据展示多条可能出现滚动调，所以只展示3条
|
|||
|
|
this.block5List = []
|
|||
|
|
this.block5List = res.varList
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getFindMajorDangerSourceCount() {
|
|||
|
|
requestFN('/api/homemajor/findMajorDangerSourceCount').then(res => {
|
|||
|
|
this.block1OptionsList = [
|
|||
|
|
{ title: '重大危险源', count: res.pd.COUNTSOURCE },
|
|||
|
|
{ title: '监测点数', count: res.pd.COUNTSOURCE * 2 },
|
|||
|
|
{ title: '监测天数', count: res.pd.COUNTDAYS }
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getFindDisposalCount() {
|
|||
|
|
requestFN('/api/homemajor/findDisposalCount').then(res => {
|
|||
|
|
this.top_risk_list1 = [
|
|||
|
|
{ title: '报警数', value: res.pd.COUNTALARM },
|
|||
|
|
{ title: '已处置', value: res.pd.COUNTDISPOSED },
|
|||
|
|
{ title: '处置中', value: res.pd.COUNTDISPOSAL }
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getFindAlarmChartData() {
|
|||
|
|
requestFN('/api/homemajor/findAlarmChartData').then(res => {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.initEcharts3(res.chartData)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getVideoInfo(id) {
|
|||
|
|
requestFN('/api/homemajor/getVideoInfo', { VIDOMANAGER_ID: id }).then(res => {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.videoForm = res.pd
|
|||
|
|
this.dialogVideo = true
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getFindAlarmDisposalChartData() {
|
|||
|
|
requestFN('/api/homemajor/findAlarmDisposalChartData').then(res => {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.initEcharts2(res.chartData)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
initMap() {
|
|||
|
|
this.iframeSrc = config.weburl + 'static/mapshowimage.html?t=' + Math.random()
|
|||
|
|
requestFN('/api/homemajor/listMajordangersourceLocation').then(res => {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
const boxList = this.initMapData()
|
|||
|
|
// eslint-disable-next-line no-new-object
|
|||
|
|
var wallMap = new Object() // 一公司外墙
|
|||
|
|
const iframe = document.querySelector('#iframe')
|
|||
|
|
// 处理兼容行问题
|
|||
|
|
if (iframe.attachEvent) {
|
|||
|
|
iframe.attachEvent('onload', function() {
|
|||
|
|
this.contentWindow.postMessage(
|
|||
|
|
{
|
|||
|
|
'varList': res.varList,
|
|||
|
|
'boxList': boxList,
|
|||
|
|
'wallMap': wallMap,
|
|||
|
|
'LONGITUDE': 119.65138731427636,
|
|||
|
|
'LATITUDE': 39.93429609044706,
|
|||
|
|
'distance': 800, // 距屏幕中心点距离（单位m）
|
|||
|
|
'rotate': 60, // 旋转角（单位°）
|
|||
|
|
'tilt': 45 // 倾斜角（单位°）
|
|||
|
|
}, '*')
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
iframe.onload = function() {
|
|||
|
|
this.contentWindow.postMessage(
|
|||
|
|
{
|
|||
|
|
'varList': res.varList,
|
|||
|
|
'boxList': boxList,
|
|||
|
|
'wallMap': wallMap,
|
|||
|
|
'LONGITUDE': 119.65138731427636,
|
|||
|
|
'LATITUDE': 39.93429609044706,
|
|||
|
|
'distance': 800, // 距屏幕中心点距离（单位m）
|
|||
|
|
'rotate': 60, // 旋转角（单位°）
|
|||
|
|
'tilt': 45 // 倾斜角（单位°）
|
|||
|
|
}, '*')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
load() {
|
|||
|
|
this.loading = true
|
|||
|
|
this.currentPage += 1
|
|||
|
|
this.getUnitPersonnel('1')
|
|||
|
|
},
|
|||
|
|
getUnitPersonnel(index) {
|
|||
|
|
requestFN(
|
|||
|
|
'/map/getUnitPersonnel?showCount=20' + '¤tPage=' + this.currentPage,
|
|||
|
|
{
|
|||
|
|
CORPINFO_ID: this.corpInfoId,
|
|||
|
|
AREA: this.area,
|
|||
|
|
GANGKOU: this.gangkou,
|
|||
|
|
INDEX: index
|
|||
|
|
}
|
|||
|
|
).then((data) => {
|
|||
|
|
this.block3List = this.block3List.concat(data.varList)
|
|||
|
|
this.totalPage = data.page.totalPage
|
|||
|
|
this.currentPage = data.page.currentPage
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.renyuan {
|
|||
|
|
|
|||
|
|
.block1 {
|
|||
|
|
width: 410px;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|||
|
|
|
|||
|
|
.options {
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid;
|
|||
|
|
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0.4), rgba(58, 122, 149, 1)) 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.option {
|
|||
|
|
flex:1;
|
|||
|
|
background-image: url("../../../assets/map/anquan/label.png");
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
width: 125px;
|
|||
|
|
height: 25px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 25px;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.block2,.block4 {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
width: 410px;
|
|||
|
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
border: 1px solid;
|
|||
|
|
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
|
|||
|
|
border-top: none;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
|
|||
|
|
#main2,#main3 {
|
|||
|
|
width: 405px;
|
|||
|
|
height: 150px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.block3,.block5 {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
width: 410px;
|
|||
|
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
border: 1px solid;
|
|||
|
|
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
|
|||
|
|
border-top: none;
|
|||
|
|
padding: 10px;
|
|||
|
|
|
|||
|
|
.table {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
.scroll {
|
|||
|
|
max-height: 100px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
|
|||
|
|
&::-webkit-scrollbar {
|
|||
|
|
width: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::-webkit-scrollbar-thumb {
|
|||
|
|
border-radius: 5px;
|
|||
|
|
background: rgba(2, 30, 81, 0.851);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::-webkit-scrollbar-track {
|
|||
|
|
border-radius: 5px;
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tr {
|
|||
|
|
&:nth-child(odd) {
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.tr {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
&:nth-child(odd) {
|
|||
|
|
background-color: rgba(42, 86, 158, 0.53);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.td {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|