Skip to content

Z
zhxf_vue
Commit 1c1e0574 authored by xiexingan's avatar xiexingan
Browse files
Options

tj

parent 970a1d36
Hide whitespace changes
Inline Side-by-side
Showing with 219 additions and 149 deletions
src/pages/alarms/untreated/index.vue
View file @ 1c1e0574
<template lang="pug"> <template lang="pug">
el-container(style="height:77vh") el-container(style="height:77vh")
el-aside( width="18vw" v-loading="leftLoading" style="z-index:1000;") el-aside( width="350px" v-loading="leftLoading" style="z-index:1000;")
div.left_aside(style="height:auto") div.left_aside(style="height:auto")
el-header.left_header 报警统计 el-header.left_header 报警统计
el-main.left_main el-main.left_main
...@@ -31,9 +31,10 @@ ...@@ -31,9 +31,10 @@
div.left_aside(style="height:auto;margin-bottom:10px;") div.left_aside(style="height:auto;margin-bottom:10px;")
el-header.left_header 等级分布 el-header.left_header 等级分布
div(id="myCharts" style="height:227px;background:#ffffff") div(id="myCharts" style="height:227px;background:#ffffff")
div.left_aside(style="height:auto;margin-bottom:0px;") div.left_aside(style="height:auto;margin-bottom:0px;")
el-header.left_header 报警分布 el-header.left_header 报警分布
div(id="xx" style="height:175px;background:#ffffff") div(id="alarms" style="height:175px;background:#ffffff")
el-main(style="padding:0px;z-index:1001;height:78vh" class="alarms-untreated-main") el-main(style="padding:0px;z-index:1001;height:78vh" class="alarms-untreated-main")
el-tabs(v-model="activeName" type="border-card" @tab-click="handleClick") el-tabs(v-model="activeName" type="border-card" @tab-click="handleClick")
el-tab-pane(label="报警列表" name="0") el-tab-pane(label="报警列表" name="0")
...@@ -42,187 +43,256 @@ ...@@ -42,187 +43,256 @@
<script> <script>
import QueryList from '../untreated/query-list' import QueryList from '../untreated/query-list'
export default { export default {
data() { data() {
return { return {
leftLoading: false, leftLoading: false,
activeName: '0', activeName: '0',
level: {}, level: {},
status: {}, status: {},
chartData: null chartData: null
} }
}, },
components: { components: {
QueryList QueryList
}, },
created() { created() {
this.eventList = [] this.eventList = []
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.queryList.init('0') this.$refs.queryList.init('0')
}) })
this.getGroupList() this.getGroupList()
}, },
methods: { mounted() {
groupInit() { this.alarmsInit()
let dom = document.getElementById('myCharts') },
if (!dom) return methods: {
let myCharts = this.$echarts.init(dom) alarmsInit() {
let option = { let dom = document.getElementById('alarms')
tooltip: { if (!dom) return
trigger: 'item', let myCharts = this.$echarts.init(dom)
formatter: '{b}: {c} ({d}%)' let option = {
}, color: ['#1D82D0'],
legend: { tooltip: {
orient: 'horizontal', trigger: 'axis',
bottom: 10, axisPointer: {
data: ['特别重大', '重大', '一般'] // 坐标轴指示器，坐标轴触发有效
}, type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
series: [ }
{ },
bottom: 30, grid: {
type: 'pie', left: '3%',
radius: ['50%', '70%'], right: '4%',
avoidLabelOverlap: false, bottom: '3%',
label: { containLabel: true
formatter: (element) => { },
//自定义文字 xAxis: [
//return element.name + '：' + element.value + '(' + element.percent + '%)' {
return element.percent + '%' type: 'category',
} data: ['CO', 'C02', '烟雾浓度', '温度', '音视频'],
}, axisTick: {
itemStyle: { alignWithLabel: true
normal: { },
color: function(params) { axisLabel: { interval: 0 }
//自定义颜色 }
let colorList = ['#F56C6C', '#E6A23C', '#409EFF'] ],
return colorList[params.dataIndex] yAxis: [
} {
} type: 'value'
}, }
labelLine: { ],
show: true series: [
}, {
data: this.chartData name: '直接访问',
} type: 'bar',
] barWidth: '60%',
} data: [7, 4, 3, 5, 6],
myCharts.setOption(option)
}, itemStyle: {
//获取按报警等级统计信息 normal: {
getGroupList() { label: {
this.leftLoading = true show: true, //开启显示
this.$http({ position: 'top', //在上方显示
url: this.$http.adornUrlAlarm(`/alarmsInfo/queryGroupUntreated`), textStyle: {
method: 'get', //数值样式
params: this.$http.adornParams({ color: 'black',
stationId: localStorage.getItem('stationId') fontSize: 16
}) }
}).then((data) => { }
this.leftLoading = false }
if (data && data.code === 0) { }
this.level = data.level }
this.status = data.status ]
}
myCharts.setOption(option)
},
groupInit() {
let dom = document.getElementById('myCharts')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
orient: 'horizontal',
bottom: 10,
data: ['特别重大', '重大', '一般']
},
series: [
{
bottom: 30,
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
formatter: (element) => {
//自定义文字
//return element.name + '：' + element.value + '(' + element.percent + '%)'
return element.percent + '%'
}
},
itemStyle: {
normal: {
color: function(params) {
//自定义颜色
let colorList = [
'#F56C6C',
'#E6A23C',
'#409EFF'
]
return colorList[params.dataIndex]
}
}
},
labelLine: {
show: true
},
data: this.chartData
}
]
}
myCharts.setOption(option)
},
//获取按报警等级统计信息
getGroupList() {
this.leftLoading = true
this.$http({
url: this.$http.adornUrlAlarm(
`/alarmsInfo/queryGroupUntreated`
),
method: 'get',
params: this.$http.adornParams({
stationId: localStorage.getItem('stationId')
})
}).then((data) => {
this.leftLoading = false
if (data && data.code === 0) {
this.level = data.level
this.status = data.status
this.chartData = [ this.chartData = [
{ value: this.level.oneCount, name: '特别重大' }, { value: this.level.oneCount, name: '特别重大' },
{ value: this.level.twoCount, name: '重大' }, { value: this.level.twoCount, name: '重大' },
{ value: this.level.threeCount, name: '一般' } { value: this.level.threeCount, name: '一般' }
] ]
this.groupInit() this.groupInit()
} }
}) })
}, },
handleClick(tab, event) { handleClick(tab, event) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.queryList.init(this.activeName) this.$refs.queryList.init(this.activeName)
}) })
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.left_aside { .left_aside {
margin-bottom: 10px; margin-bottom: 10px;
border: 1px #dcdfe6 solid; border: 1px #dcdfe6 solid;
background: #f4f4f4; background: #f4f4f4;
box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.2); box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.2);
} }
.left_header { .left_header {
line-height: 38px; line-height: 38px;
height: 38px !important; height: 38px !important;
background-color: #e1edf4; background-color: #e1edf4;
border-bottom: 1px #e4e7ed solid; border-bottom: 1px #e4e7ed solid;
font-size: 16px; font-size: 16px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
} }
.left_main { .left_main {
padding: 0rem 1rem 1rem 1rem; // padding: 0rem 1rem 1rem 1rem;
overflow: hidden; overflow: hidden;
background: #ffffff; background: #ffffff;
padding: 15px !important;
} }
.left_main_char { .left_main_char {
/*padding:0rem 1rem 1rem 1rem;*/ /*padding:0rem 1rem 1rem 1rem;*/
/*overflow: hidden;*/ /*overflow: hidden;*/
background: #ffffff; background: #ffffff;
/*height: 300px;*/ /*height: 300px;*/
.untreated_canvas { .untreated_canvas {
margin: 0 auto; margin: 0 auto;
/*transform: translateY(-80px);*/ /*transform: translateY(-80px);*/
top: -80px; top: -80px;
} }
} }
.left_main_body { .left_main_body {
margin-top: 1rem; margin-top: 5px;
border: 1px #d1d1d1 solid; border: 1px #d1d1d1 solid;
/*height:120px;*/ /*height:120px;*/
background: #fff; background: #fff;
} }
.left_col_header { .left_col_header {
background-color: #e1edf4; background-color: #e1edf4;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
color: #000000; color: #000000;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
font-family: Adobe Heiti Std; font-family: Adobe Heiti Std;
font-weight: bold; font-weight: bold;
} }
.row_style { .row_style {
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
/*height:60px;*/ /*height:60px;*/
/*padding:3px;*/ /*padding:3px;*/
} }
.alarms-untreated-main > .el-tabs { .alarms-untreated-main > .el-tabs {
box-shadow: none; box-shadow: none;
border: none; border: none;
} }
.alarms-untreated-main > .el-tabs > .el-tabs__content { .alarms-untreated-main > .el-tabs > .el-tabs__content {
padding: 0 !important; padding: 0 !important;
margin-top: 10px; margin-top: 10px;
} }
.el-tanle th { .el-tanle th {
background: #eef8ff !important; background: #eef8ff !important;
} }
.el-tabs__nav-scroll { .el-tabs__nav-scroll {
height: 42px; height: 42px;
/*padding-top: 10px;*/ /*padding-top: 10px;*/
/*padding-left: 10px;*/ /*padding-left: 10px;*/
line-height: 42px; line-height: 42px;
background: #f4f4f4; background: #f4f4f4;
border-bottom: 1px solid rgba(196, 196, 196, 1); border-bottom: 1px solid rgba(196, 196, 196, 1);
.el-tabs__item { .el-tabs__item {
border-top-color: #dcdfe6 !important; border-top-color: #dcdfe6 !important;
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment