<template>
|
<div class="alarm-container">
|
<div class="left-content">
|
<div class="handle-box">
|
<div class="handle-title">报警处理</div>
|
<div class="handle-content">
|
<div class="handle-echarts">
|
<div id="handel"></div>
|
</div>
|
<div class="handel-box">
|
<ul>
|
<li v-for="(item,index) in toBeHandData" :style="{color:item.color}">{{item.description}}</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div class="analysis-box">
|
<div class="analysis-title">报警分析</div>
|
<div class="analysis-content">
|
<div id="analysis"></div>
|
<div class="analysis-mini">
|
<div v-for="(item,index) in statisticList" class="mini-item" :key="index">
|
<div :style="{background:item.color}"></div>
|
<div>{{ item.description}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right-content">
|
<div class="table-box">
|
<div class="table-title">报警记录</div>
|
<div class="table-content">
|
<el-table v-loading="loading" :data="tableData" width="100%" max-height="690px">
|
<el-table-column
|
label="序号"
|
align="center"
|
prop="num"
|
fixed="left"
|
>
|
</el-table-column>
|
<el-table-column
|
v-for="(item, key, index) of tableHeader"
|
:prop="key.toString()"
|
:label="item"
|
:key="index"
|
align="center"
|
>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="pagination">
|
<el-pagination
|
v-model:current-page="pageParam.page"
|
background
|
:page-size="pageParam.limit"
|
layout="total,prev, pager, next, jumper"
|
:total="pageParam.total"
|
@current-change="currentPage"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import alarmHistoryApi from '@/api/alarmApi/alarmHistory'
|
import alarm from '@/api/screen/alarm/index'
|
import * as echarts from 'echarts'
|
import {romColor,screenAlarmColor} from '@/utils/color'
|
import {onBeforeUnmount} from "vue";
|
|
|
//初始化echarts
|
let loadingEcharts = {
|
text: 'loading',
|
textColor: 'rgba(105,133,219, 1)',
|
maskColor: 'rgba(202, 224, 252, 0.2)',
|
fontSize: '20px',
|
}
|
let analysisEcharts = undefined
|
let handelEcharts = undefined
|
const initEcharts = () =>{
|
analysisEcharts = echarts.init(document.getElementById('analysis'));
|
handelEcharts = echarts.init(document.getElementById('handel'));
|
}
|
/**
|
* 报警处理
|
* */
|
|
//echarts配置项
|
const setHandelOptions = () =>{
|
let option = {
|
tooltip: {
|
trigger: 'item',
|
},
|
series: [
|
{
|
name: '报警处理',
|
type: 'pie',
|
radius: ['30%', '70%'], // 设置饼图的内半径和外半径，形成圆环
|
center: ['50%', '50%'], // 饼图的中心（圆心）坐标
|
roseType: 'radius', // 设置为南丁格尔图，'radius'模式
|
itemStyle: {
|
borderRadius: 5
|
},
|
data: handleData.value,
|
label:{
|
formatter: '{b}:{c}单 \n\n 占比:{d}%',
|
textStyle: {
|
fontSize: 18,
|
color:'#77C9A3',
|
fontWeight:500
|
}
|
}
|
}
|
]
|
};
|
handelEcharts.setOption(option,true);
|
}
|
//请求报警处理数据
|
const handleData = ref([])
|
const getHandelData = async () => {
|
handelEcharts.showLoading(loadingEcharts)
|
await alarm().getHandel().then((res) => {
|
let list = []
|
list.push({value:res.data.YesSolve,name:'已处理'}) //{YesSolve noSolve }
|
list.push({value:res.data.noSolve,name:'未处理'}) //{YesSolve noSolve }
|
handleData.value = list
|
handleData.value.forEach((item,index) => {
|
if(item.name === '未处理'){
|
item.label={ show:true,color:'#C97F7F'}
|
}else{
|
item.label={ show:true,color:'#77C9A3'}
|
}
|
})
|
})
|
handelEcharts.hideLoading()
|
setHandelOptions()
|
}
|
//待处理数据
|
const toBeHandData = ref([])
|
const handelColor = screenAlarmColor()
|
const gettoBeHandelData = async () => {
|
let val = {limit:10000,page:1,isSolve:0}
|
await alarmHistoryApi().search(val).then((res) =>{
|
toBeHandData.value = res.data.list
|
toBeHandData.value.forEach((item,index) => {
|
item.color = handelColor[index]
|
})
|
})
|
setHandelOptions()
|
}
|
/**
|
* 报警分析
|
* */
|
//echarts配置项
|
const colors = romColor()
|
const setAnalysisOptions = () =>{
|
//自定义颜色组
|
const itemStyles = statisticData.value.map(() => colors.shift());
|
statisticList.value.forEach((item,index) => {
|
item.color = itemStyles[index]
|
})
|
let option = {
|
legend:{},
|
xAxis: {
|
type: 'category',
|
data:statisticDataName.value,
|
axisTick:{
|
show: false,
|
},
|
axisLabel:{
|
color:'#BAEBEC',
|
fontSize: 14
|
},
|
},
|
yAxis: {
|
type: 'value',
|
splitLine:{
|
show:true,
|
lineStyle:{
|
width:1,
|
color:'rgba(231,236,240,0.1)',
|
}
|
},
|
axisLabel:{
|
color:'#BAEBEC',
|
fontSize: 16
|
},
|
axisLine:{
|
show: true,
|
lineStyle:{
|
color:'rgba(231,236,240,0.4)',
|
width:1
|
}
|
},
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
},
|
series: {
|
data:statisticData.value.map((value,index) =>({
|
value,
|
itemStyle: {
|
color: itemStyles[index]
|
}
|
})),
|
type: 'bar'
|
},
|
grid:{
|
width:'95%',
|
height:'80%',
|
top:'10%',
|
left:'8%',
|
}
|
};
|
analysisEcharts.setOption(option,true);
|
}
|
//请求分析数据
|
const statisticList = ref()
|
const statisticData = ref()
|
const statisticDataName = ref()
|
const getStatictis = async () =>{
|
analysisEcharts.showLoading(loadingEcharts)
|
await alarm().get().then((res) =>{
|
statisticList.value = res.data
|
let list = []
|
let listName = []
|
res.data.forEach((item) =>{
|
list.push(item.count)
|
listName.push(item.description)
|
})
|
statisticData.value = list
|
statisticDataName.value = listName
|
})
|
analysisEcharts.hideLoading()
|
setAnalysisOptions()
|
}
|
/**
|
* Table表格数据列表相关
|
*/
|
const pageParam = ref({
|
total:200,
|
limit:10,
|
page:1,
|
})
|
const tableData = ref([]);
|
let tableHeader = ref({
|
description: "报警内容",
|
code: "代码",
|
createTimeView: "报警时间",
|
})
|
|
/** 获取列表 */
|
const loading = ref(false);
|
async function getTableData(val) {
|
loading.value = true;
|
if(val){
|
if(!val.limit){
|
val.limit = 8
|
}
|
if(!val.page){
|
val.page = 8
|
}
|
}else{
|
val = { limit:8,page:1 }
|
}
|
await alarmHistoryApi().search(val).then((res) =>{
|
tableData.value = res.data.list
|
//添加序号
|
tableData.value.forEach((item,index) =>{
|
item.num = index + 1
|
})
|
//分页参数
|
pageParam.value.total = res.data.total
|
pageParam.value.limit = res.data.limit
|
pageParam.value.page = res.data.page
|
})
|
loading.value = false;
|
}
|
//分页
|
const currentPage = (val) =>{
|
getTableData({page:val})
|
}
|
window.addEventListener('resize', function() {
|
analysisEcharts.resize();
|
handelEcharts.resize();
|
});
|
onMounted(async () => {
|
initEcharts()
|
await getStatictis()
|
getHandelData()
|
gettoBeHandelData()
|
await getTableData()
|
})
|
//卸载前销毁图表
|
const disposeEcharts = (echarts) => {
|
if (echarts) {
|
echarts.dispose();
|
echarts = null;
|
}
|
}
|
onBeforeUnmount(async ()=> {
|
disposeEcharts(analysisEcharts)
|
disposeEcharts(handelEcharts)
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.alarm-container{
|
width: 100%;
|
height: 100%;
|
padding:1%;
|
display:flex;
|
justify-content:center;
|
.left-content{
|
width: 50.5%;
|
height: 100%;
|
//background: #a2b9e8;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
.handle-box{
|
width: 100%;
|
height:46.5%;
|
background-image: url("../../../assets/images/screen/alarm/analysis.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding:1.5%;
|
.handle-title{
|
width: 100%;
|
height:13%;
|
background-image: url("../../../assets/images/screen/alarm/title-icon.png");
|
background-repeat: no-repeat;
|
background-position:5% 100%;
|
font-weight: 400;
|
font-size: 20px;
|
color: #FFFFFF;
|
display: flex;
|
align-items:flex-end;
|
padding-left:12%;
|
}
|
.handle-content{
|
width: 100%;
|
height:87%;
|
display: flex;
|
padding-left: 10%;
|
position: relative;
|
.handle-echarts{
|
width: 63%;
|
height: 100%;
|
background-image: url("../../../assets/images/screen/alarm/center.png");
|
background-repeat: no-repeat;
|
background-position: center;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
#handel{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.handel-box{
|
right: 5%;
|
position: absolute;
|
width: 30%;
|
height: 100%;
|
padding:2% 0 4%;
|
ul{
|
background:transparent;
|
border: 1px solid #1FB0BE;
|
border-radius: 10px;
|
height: 100%;
|
padding-top:3%;
|
opacity: 0.8;
|
overflow-y: auto;
|
li{
|
list-style-type:circle;
|
margin-top: 2%;
|
font-size: 16px;
|
font-weight: lighter;
|
}
|
}
|
}
|
}
|
}
|
.analysis-box{
|
width: 100%;
|
height:53.5%;
|
background-image: url("../../../assets/images/screen/alarm/handle.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
padding:1.5%;
|
.analysis-title{
|
width: 100%;
|
height: 12%;
|
background-image: url("../../../assets/images/screen/alarm/title-icon.png");
|
background-repeat: no-repeat;
|
background-position:5% 100%;
|
padding:2% 0 0 12%;
|
font-weight: 400;
|
font-size: 20px;
|
color: #FFFFFF;
|
}
|
.analysis-content{
|
width: 100%;
|
height: 88%;
|
display: flex;
|
align-items: center;
|
justify-content:center;
|
#analysis{
|
width: 70%;
|
height: 100%;
|
}
|
.analysis-mini{
|
width: 29%;
|
height: 80%;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
padding: 0 2%;
|
.mini-item{
|
width:50%;
|
height:10%;
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
div:last-child{
|
font-weight: 400;
|
font-size: 14px;
|
color: #BAEBEC;
|
width: 50%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
div:first-child{
|
width: 20px;
|
height: 20px;
|
background: #ecd4e6;
|
border-radius: 2px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.right-content{
|
width: 49.5%;
|
height: 100%;
|
.table-box{
|
width: 100%;
|
height: 100%;
|
background-image: url("../../../assets/images/screen/alarm/table-border.png");
|
background-repeat: no-repeat;
|
background-size: 98% 96%;
|
background-position: 50% 50%;
|
position: relative;
|
.table-title{
|
position: absolute;
|
top: 2.5%;
|
left: 1.5%;
|
height:8%;
|
width:97%;
|
display: flex;
|
justify-content:center;
|
align-items: center;
|
font-weight: 500;
|
font-size: 22px;
|
color: #8DFEFF;
|
background: linear-gradient(to right,rgba(21,173,248,0.5),rgba(66,93,114,0.3));
|
}
|
.table-content{
|
position: absolute;
|
top: 10%;
|
left: 1.5%;
|
height:77%;
|
width:100%;
|
padding: 1% 4%;
|
overflow-y: hidden;
|
//修改边框和字体
|
:deep(.el-table){
|
--el-table-border-color:rgba(0,0,0,0);
|
font-weight: 400;
|
font-size: 20px;
|
color: #D1D1D1;
|
}
|
//修改头部字体
|
:deep(.el-table__header th){
|
font-weight: 400;
|
font-size: 20px;
|
color: #D1D1D1;
|
}
|
/*最外层透明*/
|
:deep(.el-table),
|
:deep(.el-table__expanded-cell){
|
background-color: transparent !important;
|
}
|
/* 表格内背景颜色 */
|
:deep(.el-table th),
|
:deep(.el-table tr),
|
:deep(.el-table td){
|
background-color: transparent !important;
|
border-bottom:1px solid #1D627D !important;
|
}
|
//:deep(.el-table tr){
|
// border:1px solid #000 !important;
|
//}
|
/*去除底边框*/
|
:deep(.el-table td.el-table__cell){
|
border:0;
|
}
|
:deep(.el-table th.el-table__cell.is-leaf) {
|
border: 0;
|
}
|
/*去除底部灰条.el-table::before*/
|
:deep(.el-table::before) {
|
display: none;
|
}
|
}
|
.pagination{
|
position: absolute;
|
top: 90%;
|
left: 1.5%;
|
width:100%;
|
height:10%;
|
display:flex;
|
justify-content:center;
|
:deep(.el-pagination__total),
|
:deep(.el-pagination__goto),
|
:deep(.el-pagination__classifier){
|
color: #bcd4f3
|
}
|
:deep(.el-pager li) {
|
font-size: 15px;
|
color: #BAEBEC;
|
background: transparent;
|
padding: 0 4px;
|
border: 1px solid #BAEBEC;
|
border-radius: 0;
|
margin: 0 4px;
|
min-width: 25px;
|
height: 25px;
|
}
|
:deep(.el-pagination button) {
|
color: #BAEBEC;
|
background: transparent;
|
padding: 0 4px;
|
border-radius: 0;
|
margin: 0 4px;
|
}
|
:deep(.el-pagination .btn-next .el-icon),
|
:deep(.el-pagination .btn-prev .el-icon) {
|
font-size: 18px !important;
|
}
|
:deep(.el-input__wrapper) {
|
background: transparent;
|
box-shadow: 0 0 0 1px #BAEBEC inset;
|
border-radius: 0;
|
height: 25px;
|
min-width: 30px;
|
}
|
:deep(.el-input__inner) {
|
font-size: 16px;
|
color: #BAEBEC;
|
height: 25px;
|
line-height: 30px !important;
|
}
|
:deep(.el-pager li.is-active) {
|
background-color: #1FB0BE;
|
color: #ffffff;
|
border: 1px solid #1FB0BE;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
