<template>
|
<div>
|
<div class="content">
|
<div class="header_ct">{{ localInfo.taskViewName }}</div>
|
<div class="tab_page">
|
<div class="operation" @click="goOperation">运营数据分析</div>
|
<div class="alarm">告警数据分析</div>
|
</div>
|
<div class="header-time">
|
<div class="rung-bar"></div>
|
<div class="time">{{ timeObj.nowTime }}</div>
|
<div>
|
<div>{{ timeObj.week }}</div>
|
<div>{{ timeObj.nowDate }}</div>
|
</div>
|
<!-- <div class="vertical-bar"></div> -->
|
</div>
|
<div class="info_ct">
|
<div class="left_ct">
|
<div class="block alarm_overview">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">告警</span>
|
<span>概况</span>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<div class="icon_ct">
|
<div class="icon_fa">
|
<div class="icon_img_fa">
|
<img src="@/assets/img/bigdata/gaojingzongshu.png" alt="" />
|
</div>
|
<div class="icon_name">告警总数本月</div>
|
<div class="icon_num">{{ overviewData.monthlyAlarmCount }}</div>
|
</div>
|
<div class="icon_fa">
|
<div class="icon_img_fa">
|
<img src="@/assets/img/bigdata/jinrigaojing.png" alt="" />
|
</div>
|
<div class="icon_name">今日告警</div>
|
<div class="icon_num">{{ overviewData.alarmCount }}</div>
|
</div>
|
<div class="icon_fa">
|
<div class="icon_img_fa">
|
<img src="@/assets/img/bigdata/yichuli.png" alt="" />
|
</div>
|
<div class="icon_name">已处理</div>
|
<div class="icon_num">{{ overviewData.dealedAlarmCount }}</div>
|
</div>
|
<div class="icon_fa">
|
<div class="icon_img_fa">
|
<img src="@/assets/img/bigdata/rengongqueren.png" alt="" />
|
</div>
|
<div class="icon_name">人工确认</div>
|
<div class="icon_num">{{ overviewData.confirmedAlarmCount }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="block alarm_statis">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">告警</span>
|
<span>统计</span>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<seamlessTable
|
:columns="alarmStatisColumns"
|
:scrollOption="{ limitMoveNum: 5 }"
|
:dataList="alarmStatData"
|
height="18.5vh"
|
id="alarmStatisChart"
|
>
|
<div slot="tableCol">
|
<div class="singlexaminatio" v-for="(item, index) in alarmStatData" :key="index">
|
<span>{{ index + 1 }}</span>
|
<span
|
:title="item.departName"
|
style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden"
|
>{{ item.departName }}</span
|
>
|
<span style="text-align: center">{{ item.alarmCount }}</span>
|
<span style="text-align: center">{{ item.confirmedAlarmCount }}</span>
|
</div>
|
</div>
|
</seamlessTable>
|
</div>
|
<div class="block alarm_type">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">告警</span>
|
<span>类型</span>
|
</div>
|
<div class="tab">
|
<div @click="changeAlarmTypeRange(0)" :class="{ active: alarmTypeRange == 0 }">当天</div>
|
<div @click="changeAlarmTypeRange(1)" :class="{ active: alarmTypeRange == 1 }">本月</div>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<div id="alarmTypeChart"></div>
|
</div>
|
</div>
|
<div class="middle_ct">
|
<div class="gas_station_img">
|
<div style="position: relative;width: 100%;height:100%">
|
<img v-if="localInfo.bigDataPath" style="width: 100%;height:98%;margin-bottom:30px;margin-top:10px" :src="staticUrl + localInfo.bigDataPath" alt="" />
|
<img v-else style="width: 100%; margin-bottom: -30px" src="@/assets/img/bigdata/a.png" alt="" />
|
<!-- <div v-if="partitionAlarmStatData[1]" class="rotate_ct unloading_area">
|
<div class="title">
|
卸油区（{{ (partitionAlarmStatData[1].confirmedProportion * 100).toFixed(0) }}%）
|
</div>
|
<div>
|
异常次数：<span
|
>{{ partitionAlarmStatData[1].alarmCount ? partitionAlarmStatData[1].alarmCount : 0 }}/次</span
|
>
|
</div>
|
<div>
|
人工确认：<span
|
>{{
|
partitionAlarmStatData[1].confirmedAlarmCount ? partitionAlarmStatData[1].confirmedAlarmCount : 0
|
}}/次</span
|
>
|
</div>
|
</div>
|
<div v-if="partitionAlarmStatData[3]" class="rotate_ct market">
|
<div class="title">
|
便利店（{{ (partitionAlarmStatData[3].confirmedProportion * 100).toFixed(0) }}%）
|
</div>
|
<div>
|
异常次数：<span
|
>{{ partitionAlarmStatData[3].alarmCount ? partitionAlarmStatData[3].alarmCount : 0 }}/次</span
|
>
|
</div>
|
<div>
|
人工确认：<span
|
>{{
|
partitionAlarmStatData[3].confirmedAlarmCount ? partitionAlarmStatData[3].confirmedAlarmCount : 0
|
}}/次</span
|
>
|
</div>
|
</div>
|
<div v-if="partitionAlarmStatData[2]" class="rotate_ct add_oil">
|
<div class="title">
|
加油区（{{ (partitionAlarmStatData[2].confirmedProportion * 100).toFixed(0) }}%）
|
</div>
|
<div>
|
异常次数：<span
|
>{{ partitionAlarmStatData[2].alarmCount ? partitionAlarmStatData[2].alarmCount : 0 }}/次</span
|
>
|
</div>
|
<div>
|
人工确认：<span
|
>{{
|
partitionAlarmStatData[2].confirmedAlarmCount ? partitionAlarmStatData[2].confirmedAlarmCount : 0
|
}}/次</span
|
>
|
</div>
|
</div> -->
|
</div>
|
</div>
|
<div class="block latest_alarm">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">最新</span>
|
<span>告警</span>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<div class="latest_alarm_table_ct">
|
<div v-show="latestAlarmData.length" class="latest_alarm_table">
|
<div v-for="(item, index) in latestAlarmData" :key="index" class="col">
|
<div>{{ item.departName }}</div>
|
<div>{{ item.cameraName }}</div>
|
<div>{{ item.alarmTime }}</div>
|
<div style="color: #f48521" v-show="item.eventType == '异常告警'">{{ item.eventType }}</div>
|
<div style="color: #5b81f9" v-show="item.eventType == '异常事件'">{{ item.eventType }}</div>
|
<div>{{ item.algorithmName }}</div>
|
</div>
|
</div>
|
<div style="font-size: 18px; color: #ccc" v-show="!latestAlarmData.length">暂无数据</div>
|
</div>
|
</div>
|
</div>
|
<div class="right_ct">
|
<div class="block terminal_statis">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">网关</span>
|
<span>统计</span>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<div class="info_ct">
|
<div class="info">
|
<div class="title">网关总数</div>
|
<div v-if="deviceStatusStatData.countArr" class="num">
|
{{ deviceStatusStatData.countArr[0] + deviceStatusStatData.countArr[1] }}
|
</div>
|
<div class="online">在线</div>
|
<div class="outline">离线</div>
|
</div>
|
<div class="chart_ct">
|
<div class="online_position">
|
<div v-if="deviceStatusStatData.countArr" style="font-size: 30px">
|
{{ deviceStatusStatData.countArr[0] }}
|
</div>
|
<div>在线总数</div>
|
</div>
|
<img src="@/assets/img/bigdata/222.png" alt="" />
|
<div id="terminalStatisCharts"></div>
|
</div>
|
</div>
|
</div>
|
<div class="block alarm_point">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">处理</span>
|
<span>进度</span>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<div class="words_ct">
|
<div class="item" v-for="(item, index) in alarmRankingData" :key="index">
|
<div class="num">{{ index + 1 > 9 ? index + 1 : '0' + (index + 1) }}</div>
|
<div class="info">
|
<div style="display: flex; justify-content: space-between">
|
<div>{{ item.departName }}</div>
|
<div class="count">
|
{{ item.alarmCount }}次（{{
|
(
|
(item.dealedAlarmCount / item.alarmCount ? item.dealedAlarmCount / item.alarmCount : 0) * 100
|
).toFixed(2) + '%'
|
}}）
|
</div>
|
</div>
|
<div style="display: flex; position: relative">
|
<div class="dashed-progress-ct">
|
<div
|
v-show="(item.dealedAlarmCount / item.alarmCount) * 100 < 25"
|
class="progress-color-green"
|
:style="{
|
width:
|
(
|
(item.dealedAlarmCount / item.alarmCount ? item.dealedAlarmCount / item.alarmCount : 0) *
|
100
|
).toFixed(2) + '%',
|
}"
|
></div>
|
<div
|
v-show="
|
(item.dealedAlarmCount / item.alarmCount) * 100 > 24 &&
|
(item.dealedAlarmCount / item.alarmCount) * 100 < 50
|
"
|
class="progress-color-blue"
|
:style="{
|
width:
|
(item.dealedAlarmCount / item.alarmCount ? item.dealedAlarmCount / item.alarmCount : 0) *
|
100 +
|
'%',
|
}"
|
></div>
|
<div
|
v-show="
|
(item.dealedAlarmCount / item.alarmCount) * 100 > 49 &&
|
(item.dealedAlarmCount / item.alarmCount) * 100 < 75
|
"
|
class="progress-color-yellow"
|
:style="{
|
width:
|
(item.dealedAlarmCount / item.alarmCount ? item.dealedAlarmCount / item.alarmCount : 0) *
|
100 +
|
'%',
|
}"
|
></div>
|
<div
|
v-show="(item.dealedAlarmCount / item.alarmCount) * 100 > 74"
|
class="progress-color-red"
|
:style="{
|
width:
|
(item.dealedAlarmCount / item.alarmCount ? item.dealedAlarmCount / item.alarmCount : 0) *
|
100 +
|
'%',
|
}"
|
></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="block alarm_trend">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">告警</span>
|
<span>趋势</span>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<div id="alarmTrendChart"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="videocontainer">
|
<video class="fullscreenvideo" src="@/assets/img/bigdata/bgvideo.mp4" autoplay loop></video>
|
<img class="" src="@/assets/img/bigdata/videomodel.png" alt="" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Highcharts from 'highcharts'
|
import Highcharts3d from 'highcharts/highcharts-3d'
|
|
Highcharts3d(Highcharts)
|
|
import seamlessTable from './modules/seamlessTable.vue'
|
import { USER_INFO } from '@tievd/cube-block/lib/store/mutation-types'
|
import * as echarts from 'echarts'
|
import { getAction, postAction } from '@tievd/cube-block/lib/api/manage'
|
|
export default {
|
components: {
|
seamlessTable,
|
},
|
data() {
|
return {
|
staticUrl: window._CONFIG['staticDomainURL'],
|
alarmTypeChart: null, //告警类型统计
|
alarmTrendChart: null, //月度销售统计
|
terminalStatisCharts: null, //网关统计
|
overviewData: {}, //告警概况数据
|
alarmStatData: [], //告警统计数据
|
alarmTypeStatData: {}, //告警类型数据
|
partitionAlarmStatData: {}, //中间加油站图片数据
|
latestAlarmData: [], //最新告警数据列表
|
deviceStatusStatData: {}, //网关统计数据
|
alarmRankingData: [], //告警点位数据
|
alarmTrendStatData: {}, //告警趋势数据
|
alarmStatisColumns: ['序号', '加油站名称', '告警数量', '人工确认'], //告警统计表头
|
alarmTypeRange: 0, //告警类型范围
|
userInfo: {},
|
timer: null,
|
initDataTimer: null,
|
timeObj: {
|
nowTime: '',
|
nowDate: '2022/07/03',
|
week: '',
|
},
|
countLabelList: [],
|
localInfo: {},
|
}
|
},
|
created() {
|
this.userInfo = this.$ls.get(USER_INFO)
|
this.timer = setInterval(() => {
|
this.getRightTime()
|
}, 1000)
|
this.localInfo = JSON.parse(localStorage.getItem('localInfo'))
|
document.title = this.localInfo.taskViewName
|
},
|
mounted() {
|
this.initData()
|
this.initDataTimer = setInterval(() => {
|
this.initData()
|
}, 60000)
|
|
window.addEventListener('resize', () => {
|
//监听浏览器大小去改变图表尺寸
|
this.alarmTypeChart.resize()
|
this.alarmTrendChart.resize()
|
})
|
},
|
methods: {
|
initData() {
|
this.getOverviewData()
|
this.getAlarmStatData()
|
this.getAlarmTypeStatData()
|
this.getLatestAlarmData()
|
this.getPartitionAlarmStat()
|
this.getDeviceStatusStatData()
|
this.getAlarmRankingData()
|
this.getAlarmTrendStatData()
|
},
|
changeAlarmTypeRange(type) {
|
if (type == this.alarmTypeRange) return
|
this.alarmTypeRange = type
|
this.getAlarmTypeStatData()
|
},
|
goOperation() {
|
// this.$router.replace("operationBigdata")
|
window.location.href = window.location.origin + '/analysisScreen/organOperationBigdata'
|
},
|
//获取告警概况数据
|
getOverviewData() {
|
getAction('/jyz/alarmData/overview', {}).then((res) => {
|
this.overviewData = res.result
|
})
|
},
|
//获取告警统计数据
|
getAlarmStatData() {
|
getAction('/jyz/alarmData/regionAlarmStat', {
|
limit: 1000,
|
}).then((res) => {
|
this.alarmStatData = res.result
|
})
|
},
|
//获取告警类型数据
|
getAlarmTypeStatData() {
|
getAction('/jyz/alarmData/alarmTypeStat', {
|
freq: this.alarmTypeRange,
|
}).then((res) => {
|
this.alarmTypeStatData = res.result
|
this.setAlarmTypeChart()
|
})
|
},
|
//获取中间加油站图数据
|
getPartitionAlarmStat() {
|
getAction('/jyz/alarmData/partitionAlarmStat', {}).then((res) => {
|
this.partitionAlarmStatData = res.result
|
})
|
},
|
//获取最新告警数据
|
getLatestAlarmData() {
|
getAction('/jyz/alarmData/latestAlarm', {
|
limit: 6,
|
}).then((res) => {
|
this.latestAlarmData = res.result
|
})
|
},
|
//获取网关统计数据数据
|
getDeviceStatusStatData() {
|
getAction('/jyz/alarmData/deviceStatusStat', {
|
type: 1,
|
}).then((res) => {
|
this.deviceStatusStatData = res.result
|
this.$nextTick(() => {
|
this.setTerminalStatisCharts()
|
})
|
})
|
},
|
//获取告警点位数据
|
getAlarmRankingData() {
|
getAction('/jyz/alarmData/regionAlarmStat', {
|
limit: 3,
|
}).then((res) => {
|
this.alarmRankingData = res.result
|
})
|
},
|
//获取告警趋势数据
|
getAlarmTrendStatData() {
|
getAction('/jyz/alarmData/alarmTrendStat', {
|
type: 0,
|
}).then((res) => {
|
this.alarmTrendStatData = res.result
|
this.setAlarmTrendChart()
|
})
|
},
|
//设置网关统计图表
|
setTerminalStatisCharts() {
|
let data = []
|
// ['香蕉', 8],
|
this.deviceStatusStatData.countArr.map((el, index) => {
|
data.push([this.deviceStatusStatData.statusArr[index], el])
|
})
|
this.deviceStatusStatTotal = 0
|
this.terminalStatisCharts = Highcharts.chart('terminalStatisCharts', {
|
chart: {
|
type: 'pie',
|
backgroundColor: 'transparent',
|
options3d: {
|
enabled: true,
|
alpha: 65,
|
},
|
},
|
title: {
|
text: '',
|
},
|
subtitle: {
|
text: '',
|
},
|
credits: {
|
enabled: false,
|
},
|
plotOptions: {
|
pie: {
|
innerSize: 110,
|
depth: 20,
|
dataLabels: {
|
enabled: false,
|
},
|
enableMouseTracking: false,
|
},
|
},
|
colors: ['#5A7FF6', '#CC894D'],
|
series: [
|
{
|
name: '统计',
|
data: data,
|
},
|
],
|
})
|
},
|
|
//设置告警类型图表
|
setAlarmTypeChart() {
|
if (!this.alarmTypeChart) {
|
let chartDom = document.getElementById('alarmTypeChart')
|
this.alarmTypeChart = echarts.init(chartDom)
|
}
|
let data = []
|
this.alarmTypeStatData.algorithmNameArr.map((el, index) => {
|
data.push({
|
value: this.alarmTypeStatData.alarmCountArr[index],
|
name: el,
|
})
|
})
|
let option = {
|
backgroundColor: 'transparent',
|
title: [],
|
legend: {
|
orient: 'vertical',
|
icon: 'circle',
|
right: '0',
|
top: '10%',
|
itemWidth: 14,
|
itemGap: 20,
|
textStyle: {
|
rich: {
|
a: {
|
color: '#AFB1B4',
|
fontSize: 12,
|
padding: [0, 10, 0, 0],
|
},
|
b: {
|
color: '#5B81F9',
|
fontSize: 12,
|
padding: [0, 10, 0, 10],
|
},
|
},
|
},
|
formatter: function (name) {
|
var target, unit
|
for (var i = 0, l = data.length; i < l; i++) {
|
if (data[i].name == name) {
|
target = data[i].value
|
unit = data[i].unit
|
break
|
}
|
}
|
return `{a| ${name}}{b|${target}次}`
|
},
|
},
|
tooltip: {
|
trigger: 'item',
|
axisPointer: { type: 'line' },
|
backgroundColor: 'rgba(49, 66, 114, .7)',
|
borderColor: 'rgba(52, 58, 68, 1)',
|
textStyle: { color: '#fff' },
|
},
|
series: [
|
// 主要展示层的
|
{
|
center: ['30%', '50%'],
|
radius: ['70%', '85%'],
|
type: 'pie',
|
label: {
|
show: false,
|
},
|
minAngle: 10,
|
itemStyle: {
|
borderColor: 'rgba(0,0,0,1)',
|
borderWidth: 8,
|
emphasis: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)', //鼠标放在区域边框颜色
|
textColor: '#000',
|
}, //鼠标放在各个区域的样式
|
},
|
data: data,
|
},
|
// 边框的设置
|
{
|
type: 'pie',
|
clockWise: false, //顺时加载
|
hoverAnimation: false, //鼠标移入变大
|
center: ['30%', '50%'],
|
radius: ['60%', '55%'],
|
label: {
|
show: false,
|
},
|
tooltip: {
|
show: false,
|
},
|
data: [
|
{
|
value: 2,
|
name: '',
|
itemStyle: {
|
normal: {
|
color: '#ccc',
|
borderWidth: 2,
|
borderColor: '#ccc',
|
},
|
},
|
},
|
],
|
},
|
],
|
}
|
option && this.alarmTypeChart.setOption(option, true)
|
},
|
|
//设置告警趋势
|
setAlarmTrendChart() {
|
if (!this.alarmTrendChart) {
|
let chartDom = document.getElementById('alarmTrendChart')
|
this.alarmTrendChart = echarts.init(chartDom)
|
}
|
let XData = this.alarmTrendStatData.dateArr
|
XData = XData.map((el) => {
|
return el.substring(5, 10)
|
})
|
let valueData = {
|
oilEventAlarmCountArr: this.alarmTrendStatData.oilEventAlarmCountArr,
|
oiloutEventAlarmCountArr: this.alarmTrendStatData.oiloutEventAlarmCountArr,
|
}
|
var option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
// 坐标轴指示器，坐标轴触发有效
|
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
|
shadowStyle: {
|
shadowColor: 'rgba(60, 161, 246, 0.43)',
|
shadowBlur: 10,
|
},
|
},
|
backgroundColor: 'rgba(49, 66, 114, .7)',
|
borderColor: 'rgba(52, 58, 68, 1)',
|
textStyle: { color: '#fff' },
|
borderWidth: 1,
|
formatter: function (params) {
|
// return params.value;
|
let strName1 = params[0].seriesName
|
let value1 = params[0].value
|
let strName2 = params[1].seriesName
|
let value2 = params[1].value
|
|
return (
|
'<div><span style="color:#fff;display: inline-block;width: 86px;">异常告警</span><span style="color:#5DB6FB">' +
|
value1 +
|
'</span></div><div><span style="color:#fff;display: inline-block;width: 86px;">异常事件</span><span style="color:#F48521">' +
|
value2
|
)
|
},
|
textStyle: {
|
rich: {
|
name: {
|
color: 'rgba(36, 36, 36, 1)',
|
fontSize: 13,
|
align: 'center',
|
},
|
percent: {
|
fontFamily: 'DIN',
|
fontWeight: 500,
|
fontSize: 22,
|
color: '#1D91F5',
|
align: 'center',
|
},
|
},
|
},
|
},
|
grid: {
|
left: '2%',
|
right: '4%',
|
bottom: '4%',
|
top: '14%',
|
containLabel: true,
|
},
|
legend: {
|
top: '0%',
|
right: '5%',
|
icon: 'ract',
|
itemStyle: {},
|
itemWidth: 12,
|
itemHeight: 8,
|
selectedMode: false,
|
textStyle: {
|
color: '#8C8B8B',
|
fontSize: 12,
|
},
|
},
|
xAxis: {
|
type: 'category',
|
data: XData,
|
axisLabel: { textStyle: { fontSize: '90%', color: 'rgba(140, 139, 139, 1)' } },
|
axisLine: { show: true, lineStyle: { color: '#494D56' } },
|
axisTick: {
|
show: false,
|
},
|
},
|
yAxis: [
|
{
|
name: '单位/次',
|
type: 'value',
|
splitLine: { lineStyle: { color: 'rgba(255,255,255, .1)', type: 'dashed' } },
|
axisLabel: { textStyle: { fontSize: '90%', color: 'rgba(140, 139, 139, 1)' } },
|
axisLine: { show: true, lineStyle: { color: '#494D56' } },
|
axisTick: {
|
show: false,
|
},
|
},
|
{
|
type: 'value',
|
nameTextStyle: {
|
color: 'rgba(185, 185, 185, 1)',
|
},
|
position: 'right',
|
axisLine: {
|
show: false,
|
},
|
splitLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
axisLabel: {
|
show: true,
|
formatter: '{value} %', //右侧Y轴文字显示
|
textStyle: {
|
color: 'rgba(185, 185, 185, 1)',
|
},
|
},
|
},
|
],
|
|
series: [
|
{
|
name: '异常告警',
|
type: 'line',
|
smooth: true,
|
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
symbol: 'emptycircle', //标记的图形为实心圆
|
symbolSize: 0, //标记的大小
|
areaStyle: {
|
normal: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [
|
{
|
offset: 0,
|
color: 'rgba(91, 129, 249, .5)', // 0% 处的颜色
|
},
|
{
|
offset: 1,
|
color: 'rgba(91, 129, 249, .1)', // 100% 处的颜色
|
},
|
],
|
global: false, // 缺省为 false
|
},
|
},
|
},
|
itemStyle: {
|
color: 'rgba(91, 129, 249, 1)',
|
},
|
|
data: valueData.oiloutEventAlarmCountArr,
|
},
|
{
|
name: '异常事件',
|
type: 'line',
|
smooth: true,
|
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
symbol: 'emptycircle', //标记的图形为实心圆
|
symbolSize: 0, //标记的大小
|
areaStyle: {
|
normal: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [
|
{
|
offset: 0,
|
color: 'rgba(244, 133, 33, .5)', // 0% 处的颜色
|
},
|
{
|
offset: 1,
|
color: 'rgba(244, 133, 33, .1)', // 100% 处的颜色
|
},
|
],
|
global: false, // 缺省为 false
|
},
|
},
|
},
|
itemStyle: {
|
color: 'rgba(244, 133, 33, 1)',
|
},
|
|
data: valueData.oilEventAlarmCountArr,
|
},
|
],
|
}
|
option && this.alarmTrendChart.setOption(option, true)
|
},
|
//获取时间
|
getRightTime() {
|
var date = new Date()
|
var sign2 = ':'
|
var year = date.getFullYear() // 年
|
var month = date.getMonth() + 1 // 月
|
var day = date.getDate() // 日
|
var hour = date.getHours() // 时
|
var minutes = date.getMinutes() // 分
|
var seconds = date.getSeconds() //秒
|
var weekArr = ['Sunday', 'Monday', 'Tuesday', 'Wendnesday', 'Thursday', 'Friday', 'Saturday']
|
var week = weekArr[date.getDay()]
|
// 给一位数的数据前面加 “0”
|
if (month >= 1 && month <= 9) {
|
month = '0' + month
|
}
|
if (day >= 0 && day <= 9) {
|
day = '0' + day
|
}
|
if (hour >= 0 && hour <= 9) {
|
hour = '0' + hour
|
}
|
if (minutes >= 0 && minutes <= 9) {
|
minutes = '0' + minutes
|
}
|
if (seconds >= 0 && seconds <= 9) {
|
seconds = '0' + seconds
|
}
|
this.timeObj.nowDate = year + '/' + month + '/' + day
|
this.timeObj.nowTime = hour + sign2 + minutes + sign2 + seconds
|
this.timeObj.week = week
|
},
|
},
|
destroyed() {
|
clearInterval(this.timer)
|
clearInterval(this.initDataTimer)
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
* {
|
box-sizing: border-box;
|
margin: 0;
|
padding: 0;
|
}
|
|
@font-face {
|
font-family: 'trends';
|
src: url('../../assets/font/trends/font.TTF');
|
font-style: normal;
|
font-weight: normal;
|
}
|
|
@font-face {
|
font-family: 'CAPSUULA';
|
src: url('../../assets/font/CAPSUULA.TTF');
|
font-style: normal;
|
font-weight: normal;
|
}
|
|
.content {
|
width: 100vw;
|
height: 100vh;
|
padding: 20px 30px;
|
font-family: 'trends';
|
|
.header_ct {
|
width: 100%;
|
height: 7.5vh;
|
background: url(~@/assets/img/bigdata/top.png) no-repeat;
|
background-size: 100% 100%;
|
text-align: center;
|
font-size: 40px;
|
color: #fff;
|
}
|
|
.tab_page {
|
display: flex;
|
justify-content: center;
|
font-size: 14px;
|
color: #fff;
|
|
div {
|
cursor: pointer;
|
|
&:hover {
|
opacity: 0.8;
|
}
|
}
|
|
.operation {
|
width: 140px;
|
height: 2.8vh;
|
padding-left: 20px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: url(~@/assets/img/bigdata/1.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.alarm {
|
width: 140px;
|
height: 2.8vh;
|
padding-right: 20px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: url(~@/assets/img/bigdata/2.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
|
.header-time {
|
display: flex;
|
align-items: center;
|
color: #bdc7d0;
|
font-size: 10px;
|
padding-right: 30px;
|
position: fixed;
|
right: 20px;
|
top: 6vh;
|
font-family: Arial;
|
|
.rung-bar {
|
width: 17px;
|
height: 4px;
|
background: #ffcc3b;
|
border-radius: 4px;
|
margin-right: 16px;
|
margin-bottom: 16px;
|
}
|
|
.time {
|
width: 120px;
|
font-size: 34px;
|
font-weight: 400;
|
letter-spacing: 0.5px;
|
font-family: 'CAPSUULA';
|
}
|
|
.vertical-bar {
|
width: 2px;
|
height: 28px;
|
margin: 0 20px;
|
background: #fff;
|
opacity: 0.2;
|
}
|
}
|
|
.info_ct {
|
color: #fff;
|
display: flex;
|
justify-content: space-between;
|
|
.left_ct {
|
width: 23vw;
|
height: 86vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.middle_ct {
|
width: 48vw;
|
|
.gas_station_img {
|
width: 100%;
|
height: 54.5vh;
|
display: flex;
|
align-items: flex-end;
|
position: relative;
|
|
.rotate_ct {
|
transform: rotateX(-24.5deg) rotateY(41deg);
|
position: absolute;
|
font-family: Adobe Heiti Std;
|
|
.title {
|
color: #5b81f9;
|
font-size: 18px;
|
}
|
|
span {
|
color: #e0d41e;
|
}
|
}
|
|
.unloading_area {
|
top: 83px;
|
left: 59px;
|
}
|
|
.market {
|
top: 3px;
|
left: 275px;
|
}
|
|
.add_oil {
|
top: -15px;
|
left: 630px;
|
}
|
}
|
|
.latest_alarm {
|
height: 31.5vh;
|
|
.latest_alarm_table_ct {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 25vh;
|
width: 100%;
|
|
.latest_alarm_table {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.col {
|
display: flex;
|
color: #92969e;
|
|
div {
|
flex: 1;
|
text-align: center;
|
border: 1px solid #343a44;
|
padding: 7px 0;
|
font-family: Adobe Heiti Std;
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.right_ct {
|
width: 23vw;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.terminal_statis {
|
height: 23vh;
|
|
.info_ct {
|
height: 80%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.info {
|
width: 30%;
|
height: 100%;
|
padding-left: 30px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
|
.title {
|
color: #afb1b4;
|
font-size: 12px;
|
}
|
|
.num {
|
color: #5b81f9;
|
font-size: 30px;
|
}
|
|
.online {
|
font-size: 11px;
|
color: #8c8b8b;
|
|
&::before {
|
content: ' ';
|
display: inline-block;
|
width: 12px;
|
height: 7px;
|
background: #5b81f9;
|
margin-right: 5px;
|
}
|
}
|
|
.outline {
|
font-size: 11px;
|
color: #8c8b8b;
|
|
&::before {
|
content: ' ';
|
display: inline-block;
|
width: 12px;
|
height: 7px;
|
background: #f48521;
|
margin-right: 5px;
|
}
|
}
|
}
|
|
.chart_ct {
|
position: relative;
|
width: 70%;
|
height: 200px;
|
|
#terminalStatisCharts {
|
width: 100%;
|
height: 100%;
|
}
|
|
.online_position {
|
position: absolute;
|
z-index: 999;
|
top: 50px;
|
left: 120px;
|
color: #fff;
|
text-align: center;
|
font-size: 12px;
|
line-height: 1.2;
|
}
|
|
img {
|
position: absolute;
|
top: 75px;
|
left: -1px;
|
}
|
}
|
}
|
}
|
|
.alarm_point {
|
height: 28vh;
|
width: 100%;
|
|
.words_ct {
|
width: 100%;
|
height: 85%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
|
.item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 2vh;
|
|
.info {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
width: 100%;
|
font-size: 14px;
|
color: #98afcc;
|
font-weight: 400;
|
line-height: 1;
|
|
.dashed-progress-ct {
|
display: flex;
|
align-items: center;
|
margin-top: 5px;
|
width: 100%;
|
height: 7px;
|
background-size: 6px 7px;
|
background-repeat: repeat-x;
|
background-image: linear-gradient(to right, rgba(42, 51, 63) 70%, transparent 70%);
|
|
.progress-color-green {
|
width: 100%;
|
height: 7px;
|
// border-top: 4px dashed red;
|
background-size: 6px 7px;
|
background-repeat: repeat-x;
|
background-image: linear-gradient(to right, #4dd41d 70%, transparent 70%);
|
box-shadow: 0 0 10px #4dd41d inset, 0 0 10px #4dd41d;
|
}
|
|
.progress-color-blue {
|
width: 100%;
|
height: 7px;
|
// border-top: 4px dashed red;
|
background-size: 6px 7px;
|
background-repeat: repeat-x;
|
background-image: linear-gradient(to right, #8dc6f7 70%, transparent 70%);
|
box-shadow: 0 0 10px #8dc6f7 inset, 0 0 10px #8dc6f7;
|
}
|
|
.progress-color-yellow {
|
width: 100%;
|
height: 7px;
|
// border-top: 4px dashed red;
|
background-size: 6px 7px;
|
background-repeat: repeat-x;
|
background-image: linear-gradient(to right, #e8b94f 70%, transparent 70%);
|
box-shadow: 0 0 10px #e8b94f inset, 0 0 10px #e8b94f;
|
}
|
|
.progress-color-red {
|
width: 100%;
|
height: 7px;
|
// border-top: 4px dashed red;
|
background-size: 6px 7px;
|
background-repeat: repeat-x;
|
background-image: linear-gradient(to right, #f7450f 70%, transparent 70%);
|
box-shadow: 0 0 10px #f7450f inset, 0 0 10px #f7450f;
|
}
|
}
|
|
.count {
|
margin-left: 16px;
|
}
|
}
|
|
.num {
|
width: 42px;
|
height: 30px;
|
background: url('../../assets/img/bigdata/4144.png');
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 12px;
|
font-family: 'pmzd';
|
font-size: 14px;
|
font-weight: 400;
|
color: #98afcc;
|
}
|
}
|
}
|
}
|
|
.alarm_trend {
|
height: 31.5vh;
|
|
#alarmTrendChart {
|
height: 24vh;
|
}
|
}
|
}
|
|
.block {
|
width: 100%;
|
padding: 14px;
|
background: rgba(0, 0, 0, 0.5);
|
border: 1px solid rgba(112, 113, 118, 0.5);
|
border-radius: 8px;
|
|
.block_title {
|
font-size: 20px;
|
line-height: 1;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.blue_text {
|
color: #5b81f9;
|
}
|
|
.tab {
|
display: flex;
|
font-size: 12px;
|
|
div {
|
padding: 4px 8px;
|
margin-left: 5px;
|
border: 1px solid #74777c;
|
background: rgba(116, 119, 124, 0.6);
|
cursor: pointer;
|
|
&.active {
|
border: 1px solid #5b81f9;
|
|
background: rgba(91, 129, 249, 0.6);
|
}
|
}
|
}
|
}
|
|
.title_line {
|
width: 100%;
|
margin-top: -1vh;
|
height: 10px;
|
}
|
}
|
|
.alarm_overview {
|
height: 21vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
padding-bottom: 10px;
|
|
.icon_ct {
|
display: flex;
|
justify-content: space-around;
|
|
.icon_fa {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.icon_name {
|
font-size: 14px;
|
color: #8c8b8b;
|
}
|
|
.icon_num {
|
font-size: 22px;
|
}
|
}
|
}
|
|
.pie_chart_ct {
|
height: 9vh;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
background: linear-gradient(180deg, rgba(47, 76, 134, 0.19), rgba(18, 23, 29, 0.19));
|
border: 1px solid rgba(91, 129, 249, 0.2);
|
border-radius: 8px;
|
|
.line {
|
margin: 0 20px;
|
}
|
|
.pie_self {
|
width: 30%;
|
height: 100%;
|
}
|
}
|
}
|
|
.alarm_statis {
|
height: 30vh;
|
|
#alarmStatisChart {
|
width: 100%;
|
height: 85%;
|
}
|
}
|
|
.alarm_type {
|
height: 32vh;
|
|
#alarmTypeChart {
|
width: 100%;
|
height: 25vh;
|
}
|
}
|
}
|
|
.singlexaminatio {
|
height: 3.7vh;
|
width: 100%;
|
color: #92969e;
|
font-size: 12px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
span {
|
flex: 1;
|
height: 100%;
|
border: 1px solid #333842;
|
flex-wrap: nowrap;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
|
.videocontainer {
|
position: fixed;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
z-index: -100;
|
top: 0;
|
left: 0;
|
}
|
|
.videocontainer:before {
|
content: '';
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
display: block;
|
z-index: -1;
|
top: 0;
|
left: 0;
|
}
|
|
.fullscreenvideo {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
min-width: 100%;
|
min-height: 100%;
|
width: auto;
|
height: auto;
|
z-index: -100;
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
transform: translateX(-50%) translateY(-50%);
|
-webkit-transition: 1s opacity;
|
transition: 1s opacity;
|
}
|
</style>
|
