Skip to content

Z
zhxf_vue
Commit 55896f3c authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

tj

parent 18a9609e
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 216 deletions
src/pages/alarms/untreated/index.vue
View file @ 55896f3c
...@@ -43,257 +43,255 @@ ...@@ -43,257 +43,255 @@
<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,
} typeNameList: [],
}, typeNumList: []
components: { }
QueryList },
}, components: {
created() { QueryList
this.eventList = [] },
this.$nextTick(() => { created() {
this.$refs.queryList.init('0') this.eventList = []
}) this.$nextTick(() => {
this.getGroupList() this.$refs.queryList.init('0')
}, })
mounted() { this.getGroupList()
this.alarmsInit() },
}, mounted() {},
methods: { methods: {
alarmsInit() { alarmsInit() {
let dom = document.getElementById('alarms') let dom = document.getElementById('alarms')
if (!dom) return if (!dom) return
let myCharts = this.$echarts.init(dom) let myCharts = this.$echarts.init(dom)
let option = { let option = {
color: ['#1D82D0'], color: ['#1D82D0'],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
// 坐标轴指示器，坐标轴触发有效 // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}, },
transitionDuration: 0 transitionDuration: 0
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: ['CO', 'C02', '烟雾浓度', '温度', '音视频'], data: this.typeNameList,
axisTick: { axisTick: {
alignWithLabel: true alignWithLabel: true
}, },
axisLabel: { interval: 0 } axisLabel: { interval: 0 }
} }
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: 'value'
} }
], ],
series: [ series: [
{ {
name: '', name: '',
type: 'bar', type: 'bar',
barWidth: '60%', barWidth: '60%',
data: [7, 4, 3, 5, 6], data: this.typeNumList,
itemStyle: { itemStyle: {
normal: { normal: {
label: { label: {
show: true, //开启显示 show: true, //开启显示
position: 'top', //在上方显示 position: 'top', //在上方显示
textStyle: { textStyle: {
//数值样式 //数值样式
color: 'black', color: 'black',
fontSize: 13 fontSize: 13
} }
} }
} }
} }
} }
] ]
} }
myCharts.setOption(option) myCharts.setOption(option)
}, },
groupInit() { groupInit() {
let dom = document.getElementById('myCharts') let dom = document.getElementById('myCharts')
if (!dom) return if (!dom) return
let myCharts = this.$echarts.init(dom) let myCharts = this.$echarts.init(dom)
let option = { let option = {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{b}: {c} ({d}%)' formatter: '{b}: {c} ({d}%)'
}, },
legend: { legend: {
orient: 'horizontal', orient: 'horizontal',
bottom: 10, bottom: 10,
data: ['特别重大', '重大', '一般'] data: ['特别重大', '重大', '一般']
}, },
series: [ series: [
{ {
bottom: 30, bottom: 30,
type: 'pie', type: 'pie',
radius: ['50%', '70%'], radius: ['50%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
formatter: (element) => { formatter: (element) => {
//自定义文字 //自定义文字
//return element.name + '：' + element.value + '(' + element.percent + '%)' //return element.name + '：' + element.value + '(' + element.percent + '%)'
return element.percent + '%' return element.percent + '%'
} }
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: function(params) { color: function(params) {
//自定义颜色 //自定义颜色
let colorList = [ let colorList = ['#F56C6C', '#E6A23C', '#409EFF']
'#F56C6C', return colorList[params.dataIndex]
'#E6A23C', }
'#409EFF' }
] },
return colorList[params.dataIndex] labelLine: {
} show: true
} },
}, data: this.chartData
labelLine: { }
show: true ]
}, }
data: this.chartData myCharts.setOption(option)
} },
] //获取按报警等级统计信息
} getGroupList() {
myCharts.setOption(option) this.leftLoading = true
}, this.$http({
//获取按报警等级统计信息 url: this.$http.adornUrlAlarm(`/alarmsInfo/queryGroupUntreated`),
getGroupList() { method: 'get',
this.leftLoading = true params: this.$http.adornParams({})
this.$http({ }).then((data) => {
url: this.$http.adornUrlAlarm( this.leftLoading = false
`/alarmsInfo/queryGroupUntreated` if (data && data.code === 0) {
), console.log('data:', data)
method: 'get', this.level = data.level
params: this.$http.adornParams({ this.status = data.status
stationId: localStorage.getItem('stationId') data.list.forEach((element) => {
}) this.typeNameList.push(element.eventTypeName)
}).then((data) => { this.typeNumList.push(element.num)
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()
} this.alarmsInit()
}) }
}, })
handleClick(tab, event) { },
this.$nextTick(() => { handleClick(tab, event) {
this.$refs.queryList.init(this.activeName) this.$nextTick(() => {
}) 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; 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: 5px; 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