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 @@
<script>
import QueryList from '../untreated/query-list'
export default {
data() {
return {
leftLoading: false,
activeName: '0',
level: {},
status: {},
chartData: null
}
},
components: {
QueryList
},
created() {
this.eventList = []
this.$nextTick(() => {
this.$refs.queryList.init('0')
})
this.getGroupList()
},
mounted() {
this.alarmsInit()
},
methods: {
alarmsInit() {
let dom = document.getElementById('alarms')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
color: ['#1D82D0'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
transitionDuration: 0
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['CO', 'C02', '烟雾浓度', '温度', '音视频'],
axisTick: {
alignWithLabel: true
},
axisLabel: { interval: 0 }
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '',
type: 'bar',
barWidth: '60%',
data: [7, 4, 3, 5, 6],
data() {
return {
leftLoading: false,
activeName: '0',
level: {},
status: {},
chartData: null,
typeNameList: [],
typeNumList: []
}
},
components: {
QueryList
},
created() {
this.eventList = []
this.$nextTick(() => {
this.$refs.queryList.init('0')
})
this.getGroupList()
},
mounted() {},
methods: {
alarmsInit() {
let dom = document.getElementById('alarms')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
color: ['#1D82D0'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
transitionDuration: 0
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.typeNameList,
axisTick: {
alignWithLabel: true
},
axisLabel: { interval: 0 }
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '',
type: 'bar',
barWidth: '60%',
data: this.typeNumList,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: 'black',
fontSize: 13
}
}
}
}
}
]
}
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
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: 'black',
fontSize: 13
}
}
}
}
}
]
}
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({})
}).then((data) => {
this.leftLoading = false
if (data && data.code === 0) {
console.log('data:', data)
this.level = data.level
this.status = data.status
data.list.forEach((element) => {
this.typeNameList.push(element.eventTypeName)
this.typeNumList.push(element.num)
})
this.chartData = [
{ value: this.level.oneCount, name: '特别重大' },
{ value: this.level.twoCount, name: '重大' },
{ value: this.level.threeCount, name: '一般' }
]
this.groupInit()
}
})
},
handleClick(tab, event) {
this.$nextTick(() => {
this.$refs.queryList.init(this.activeName)
})
}
}
this.chartData = [
{ value: this.level.oneCount, name: '特别重大' },
{ value: this.level.twoCount, name: '重大' },
{ value: this.level.threeCount, name: '一般' }
]
this.groupInit()
this.alarmsInit()
}
})
},
handleClick(tab, event) {
this.$nextTick(() => {
this.$refs.queryList.init(this.activeName)
})
}
}
}
</script>
<style lang="scss" scoped>
.left_aside {
margin-bottom: 10px;
border: 1px #dcdfe6 solid;
background: #f4f4f4;
box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
border: 1px #dcdfe6 solid;
background: #f4f4f4;
box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.2);
}
.left_header {
line-height: 38px;
height: 38px !important;
background-color: #e1edf4;
border-bottom: 1px #e4e7ed solid;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 38px;
height: 38px !important;
background-color: #e1edf4;
border-bottom: 1px #e4e7ed solid;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
}
.left_main {
// padding: 0rem 1rem 1rem 1rem;
overflow: hidden;
background: #ffffff;
padding: 15px !important;
// padding: 0rem 1rem 1rem 1rem;
overflow: hidden;
background: #ffffff;
padding: 15px !important;
}
.left_main_char {
/*padding:0rem 1rem 1rem 1rem;*/
/*overflow: hidden;*/
background: #ffffff;
/*height: 300px;*/
.untreated_canvas {
margin: 0 auto;
/*transform: translateY(-80px);*/
top: -80px;
}
/*padding:0rem 1rem 1rem 1rem;*/
/*overflow: hidden;*/
background: #ffffff;
/*height: 300px;*/
.untreated_canvas {
margin: 0 auto;
/*transform: translateY(-80px);*/
top: -80px;
}
}
.left_main_body {
margin-top: 5px;
border: 1px #d1d1d1 solid;
/*height:120px;*/
background: #fff;
margin-top: 5px;
border: 1px #d1d1d1 solid;
/*height:120px;*/
background: #fff;
}
.left_col_header {
background-color: #e1edf4;
height: 30px;
line-height: 30px;
color: #000000;
text-align: center;
font-size: 15px;
font-family: Adobe Heiti Std;
font-weight: bold;
background-color: #e1edf4;
height: 30px;
line-height: 30px;
color: #000000;
text-align: center;
font-size: 15px;
font-family: Adobe Heiti Std;
font-weight: bold;
}
.row_style {
line-height: 24px;
text-align: center;
/*height:60px;*/
/*padding:3px;*/
line-height: 24px;
text-align: center;
/*height:60px;*/
/*padding:3px;*/
}
.alarms-untreated-main > .el-tabs {
box-shadow: none;
border: none;
box-shadow: none;
border: none;
}
.alarms-untreated-main > .el-tabs > .el-tabs__content {
padding: 0 !important;
margin-top: 10px;
padding: 0 !important;
margin-top: 10px;
}
.el-tanle th {
background: #eef8ff !important;
background: #eef8ff !important;
}
.el-tabs__nav-scroll {
height: 42px;
/*padding-top: 10px;*/
/*padding-left: 10px;*/
line-height: 42px;
background: #f4f4f4;
border-bottom: 1px solid rgba(196, 196, 196, 1);
.el-tabs__item {
border-top-color: #dcdfe6 !important;
}
height: 42px;
/*padding-top: 10px;*/
/*padding-left: 10px;*/
line-height: 42px;
background: #f4f4f4;
border-bottom: 1px solid rgba(196, 196, 196, 1);
.el-tabs__item {
border-top-color: #dcdfe6 !important;
}
}
</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