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>
|