698 lines
16 KiB
Vue
698 lines
16 KiB
Vue
<template>
|
||
<view class="notice-box">
|
||
<view class="notice-box-main">
|
||
<view class="notice-item">
|
||
<view class="item-header">
|
||
<view class="item-header-title">
|
||
未处理
|
||
</view>
|
||
<view class="item-header-txt">{{alarmCount.alarmUnCount}}</view>
|
||
</view>
|
||
<view class="item-bottom">
|
||
<view class="bottom-item">
|
||
<view class="bottom-item-left">
|
||
<view class="item-bg bg-green"></view>
|
||
<view class="bottom-item-name">当日</view>
|
||
</view>
|
||
<view class="bottom-item-right">
|
||
{{alarmCount.alarmToday}}
|
||
</view>
|
||
</view>
|
||
<view class="bottom-item">
|
||
<view class="bottom-item-left">
|
||
<view class="item-bg bg-red"></view>
|
||
<view class="bottom-item-name">当月</view>
|
||
</view>
|
||
<view class="bottom-item-right">
|
||
{{alarmCount.alarmMonth}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="notice-item">
|
||
<view class="item-header">
|
||
<view class="item-header-title">
|
||
告警配置
|
||
</view>
|
||
<view class="item-header-txt">{{alarmCount.ruleCount}}</view>
|
||
</view>
|
||
<view class="item-bottom">
|
||
<view class="bottom-item">
|
||
<view class="bottom-item-left">
|
||
<view class="item-bg bg-green"></view>
|
||
<view class="bottom-item-name">正常</view>
|
||
</view>
|
||
<view class="bottom-item-right">
|
||
{{alarmCount.ruleEnabled}}
|
||
</view>
|
||
</view>
|
||
<view class="bottom-item">
|
||
<view class="bottom-item-left">
|
||
<view class="item-bg bg-red"></view>
|
||
<view class="bottom-item-name">禁用</view>
|
||
</view>
|
||
<view class="bottom-item-right">
|
||
{{alarmCount.ruleDisable}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="main-item">
|
||
<view class="main-header device-header" @click="goAlarmList">
|
||
<view class="main-title device-title">
|
||
<view class="title-box device-title-box">
|
||
<view class="iconfont icon-baojingguanli"></view>
|
||
</view>
|
||
<text>最新告警</text>
|
||
</view>
|
||
<view class="main-header-right">
|
||
<view class="header-other">
|
||
更多
|
||
</view>
|
||
<view class="iconfont icon-xiangyou1"></view>
|
||
</view>
|
||
</view>
|
||
<view class="main-content">
|
||
<view class="content-item" v-if="nowAlarmList.length>0" v-for="item in nowAlarmList" :key="item.id">
|
||
<view class="content-item-header">
|
||
{{item.alarmName}}<u-tag :text="item.applyState === 2?'已忽略':item.applyState === 1?'已处理':'未处理'" :type="item.applyState === 2?'info':item.applyState === 1?'success':'error'" mode="light" size="mini" style="margin-left: 10rpx;" />
|
||
</view>
|
||
<view class="content-body-item">
|
||
<view class="content-body-label">
|
||
告警内容：
|
||
</view>
|
||
<view class="content-body-value">
|
||
{{item.alarmContent}}
|
||
</view>
|
||
</view>
|
||
<view class="content-body-item">
|
||
<view class="content-body-label">
|
||
告警等级：
|
||
</view>
|
||
<view class="content-body-value">
|
||
{{item.alarmLevel}}
|
||
</view>
|
||
</view>
|
||
<view class="content-body-item">
|
||
<view class="content-body-label">
|
||
告警设备：
|
||
</view>
|
||
<view class="content-body-value">
|
||
{{item.devName}}
|
||
</view>
|
||
</view>
|
||
<view class="content-body-item">
|
||
<view class="content-body-label">
|
||
告警时间：
|
||
</view>
|
||
<view class="content-body-value">
|
||
{{item.createdAt}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-empty v-else margin-top="50" text="告警为空" mode="list"></u-empty>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="chart-box">
|
||
<view class="chart-header">
|
||
<view class="main-title device-title">
|
||
<view class="title-box device-title-box">
|
||
<view class="iconfont icon-line-chart"></view>
|
||
</view>
|
||
<text>告警统计</text>
|
||
</view>
|
||
<view class="chart-right">
|
||
<uni-data-select
|
||
v-model="statisticsParams.alarmLevel"
|
||
:localdata="alarmLevelList"
|
||
placeholder="选择告警等级"
|
||
@change="changeLevel"
|
||
></uni-data-select>
|
||
<uni-data-select
|
||
style="margin-left: 10rpx;"
|
||
v-model="statisticsParams.dateType"
|
||
:localdata="dateTypeList"
|
||
:clear="false"
|
||
placeholder="选择类型"
|
||
@change="changeType"
|
||
></uni-data-select>
|
||
<view class="select-item" @click="openTimeModel">
|
||
<text v-if="statisticsParams.dateType==='date'" class="select-item-left">{{timeNum.year + '-' + timeNum.month + '-' + timeNum.day}}</text>
|
||
<text v-if="statisticsParams.dateType==='month'" class="select-item-left">{{timeNum.year + '-' + timeNum.month}}</text>
|
||
<text v-if="statisticsParams.dateType==='year'" class="select-item-left">{{timeNum.year}}</text>
|
||
<text class="iconfont icon-calendar11"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="chart-main">
|
||
<qiun-data-charts
|
||
type="line"
|
||
:opts="opts"
|
||
:chartData="chartData"
|
||
:canvas2d="true"
|
||
:reshow="charShow"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<u-picker mode="time" v-model="timeShow" :params="timeParams" @confirm="changeTime"></u-picker>
|
||
<u-tabbar class="tabbar-box" v-model="tabbarIndex" active-color="#1890ff" :list="tabbarList" @change="tabbarChange"></u-tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import IotsTabbarMixin from "../iotsTabbarMixins.js"
|
||
import {numberfilter} from "@/static/common/js/util/number-to-chinese.js"
|
||
export default {
|
||
mixins: [IotsTabbarMixin],
|
||
filters: {
|
||
numberfilter
|
||
},
|
||
data() {
|
||
return {
|
||
tabbarIndex:3,
|
||
opts: {
|
||
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||
padding: [15,15,15,5],
|
||
enableScroll: false,
|
||
legend: {show:false},
|
||
xAxis: {
|
||
disableGrid: true,
|
||
// format: "xAxisDemo2"
|
||
scrollShow: true,
|
||
// itemCount: 6,
|
||
fontSize:10,
|
||
// rotateAngle:60,
|
||
// rotateLabel:true,
|
||
labelCount: 6, //默认显示个数
|
||
// itemCount:24 //x轴数据的长度
|
||
},
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2,
|
||
splitNumber:5,
|
||
data:[{tofix:2,min:0}]
|
||
},
|
||
extra: {
|
||
line: {
|
||
type: "straight",
|
||
width: 2,
|
||
activeType: "hollow"
|
||
}
|
||
},
|
||
update:true
|
||
},
|
||
|
||
// 告警数量
|
||
alarmCount:{
|
||
alarmUnCount: 0,
|
||
alarmToday: 0,
|
||
alarmMonth: 0,
|
||
ruleCount: 0,
|
||
ruleEnabled: 0,
|
||
ruleDisable: 0
|
||
},
|
||
// 最新告警
|
||
nowAlarmList:[],
|
||
// 告警等级
|
||
levelShow:false,
|
||
alarmLevelList:[],
|
||
statisticsParams:{
|
||
alarmLevel:null,
|
||
dateType:null,
|
||
dateValue:null,
|
||
},
|
||
dateTypeList:[
|
||
{
|
||
text:'天',
|
||
value:'date'
|
||
},
|
||
{
|
||
text:'月',
|
||
value:'month'
|
||
},
|
||
{
|
||
text:'年',
|
||
value:'year'
|
||
}
|
||
],
|
||
timeParams: {
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: false,
|
||
minute: false,
|
||
second: false
|
||
},
|
||
timeShow: false,
|
||
timeNum:{
|
||
year: null,
|
||
month: null,
|
||
day: null,
|
||
},
|
||
chartData: {},
|
||
charShow: true,
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.statisticsParams.dateType = 'date';
|
||
let newTime = new Date().getTime();
|
||
let today = new Date();
|
||
this.timeNum.year = today.getFullYear();
|
||
this.timeNum.month = today.getMonth() + 1; // 月份是从 0 开始的，所以需要加1
|
||
this.timeNum.day = today.getDate();
|
||
if(this.$u.os()=='ios'){
|
||
this.statisticsParams.dateValue = this.$u.timeFormat(new Date(), 'yyyy/mm/dd');
|
||
}else{
|
||
this.statisticsParams.dateValue = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getAlarmReacordCount();
|
||
this.getAlarmReacordList();
|
||
this.getAlarmLevelList();
|
||
this.getAlarmRecordStat();
|
||
},
|
||
methods: {
|
||
getAlarmReacordCount(){
|
||
this.$api.iotsApi.getAlarmReacordCount({}).then(res => {
|
||
console.log("获取告警数量为", res)
|
||
if (res.code == 0) {
|
||
this.alarmCount = res.data;
|
||
}else{
|
||
this.alarmCount = {
|
||
alarmUnCount: 0,
|
||
alarmToday: 0,
|
||
alarmMonth: 0,
|
||
ruleCount: 0,
|
||
ruleEnabled: 0,
|
||
ruleDisable: 0
|
||
}
|
||
}
|
||
}, error => {})
|
||
},
|
||
// 获取最新告警
|
||
getAlarmReacordList(){
|
||
let params = {
|
||
page: 1,
|
||
pageSize: 2,
|
||
"Sorters": {
|
||
"sorters": [
|
||
{"columnKey":"id","order":"descend"}
|
||
]
|
||
},
|
||
}
|
||
this.$api.iotsApi.getAlarmReacordList(params).then(res => {
|
||
console.log("获取最新告警为", res)
|
||
if (res.code == 0) {
|
||
this.nowAlarmList = res.data.list ? res.data.list : [];
|
||
}else{
|
||
this.nowAlarmList = [];
|
||
}
|
||
}, error => {})
|
||
},
|
||
// 获取告警等级
|
||
getAlarmLevelList(){
|
||
this.$api.iotsApi.getAlarmLevelList({page:1,pageSize:999}).then(res => {
|
||
console.log("获取告警等级为", res)
|
||
if (res.code == 0 && res.data.list) {
|
||
this.alarmLevelList = res.data.list.map(item=>{
|
||
return {
|
||
text:item.name,
|
||
value:item.level,
|
||
}
|
||
});
|
||
console.log("alarmLevelList",this.alarmLevelList)
|
||
}else{
|
||
this.alarmLevelList = [];
|
||
}
|
||
}, error => {})
|
||
},
|
||
changeLevel(e){
|
||
console.log("e",e)
|
||
// this.statisticsParams.alarmLevel = e;
|
||
this.getAlarmRecordStat()
|
||
},
|
||
changeType(e){
|
||
// this.statisticsParams.dateType = e;
|
||
if(e === 'date'){
|
||
this.timeParams={
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: false,
|
||
minute: false,
|
||
second: false
|
||
}
|
||
}else if(e === 'month'){
|
||
this.timeParams={
|
||
year: true,
|
||
month: true,
|
||
day: false,
|
||
hour: false,
|
||
minute: false,
|
||
second: false
|
||
}
|
||
}else if(e === 'year'){
|
||
this.timeParams={
|
||
year: true,
|
||
month: false,
|
||
day: false,
|
||
hour: false,
|
||
minute: false,
|
||
second: false
|
||
}
|
||
}
|
||
this.getAlarmRecordStat()
|
||
},
|
||
openTimeModel(){
|
||
this.timeShow = true;
|
||
},
|
||
changeTime(e){
|
||
console.log("选择时间",e)
|
||
this.timeNum.year = e.year;
|
||
if(e.month){
|
||
this.timeNum.month = e.month;
|
||
}
|
||
if(e.day){
|
||
this.timeNum.day = e.day;
|
||
}
|
||
this.getAlarmRecordStat()
|
||
},
|
||
|
||
// 获取概览页统计(图表)
|
||
getAlarmRecordStat(){
|
||
let params = {
|
||
alarmLevel: this.statisticsParams.alarmLevel,
|
||
dateType: this.statisticsParams.dateType,
|
||
dateValue: this.timeNum.year + '-' + this.timeNum.month + '-' + this.timeNum.day,
|
||
}
|
||
this.$api.iotsApi.getAlarmRecordStat(params).then(res => {
|
||
console.log("获取概览页统计", res)
|
||
if (res.code == 0) {
|
||
this.chartData = {
|
||
categories:res.data.xdata,
|
||
series:[{
|
||
name:'告警数量',
|
||
data:res.data.ydata
|
||
}]
|
||
}
|
||
}else{
|
||
// this.alarmLevelList = [];
|
||
}
|
||
}, error => {})
|
||
},
|
||
goAlarmList(){
|
||
uni.navigateTo({
|
||
url:'/pages/iots/notice/list'
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
page,.notice-box{
|
||
background: #f5f5f5;
|
||
}
|
||
</style>
|
||
|
||
<style scoped lang="scss">
|
||
.notice-box{
|
||
// background: #ebeef5;
|
||
// height: 100%;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
padding: 20rpx;
|
||
padding-bottom: 50px;
|
||
}
|
||
.notice-box-main{
|
||
display: flex;
|
||
align-items: center;
|
||
.notice-item{
|
||
flex: 1;
|
||
border: 1px solid #f0f0f0;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0px 0px 15rpx 0px rgba(201, 201, 201, 0.4);
|
||
&:first-child{
|
||
margin-right: 20rpx;
|
||
}
|
||
.item-header{
|
||
border-bottom: 1px solid #e8e8f2;
|
||
.item-header-txt{
|
||
line-height: 80rpx;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.item-bottom{
|
||
margin-top: 20rpx;
|
||
// line-height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.bottom-item{
|
||
flex: 1;
|
||
display: flex;
|
||
// justify-content: center;
|
||
align-items: center;
|
||
|
||
.bottom-item-left{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 20rpx;
|
||
.item-bg{
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bg-green{
|
||
background-color: #52c41a;
|
||
}
|
||
.bg-red{
|
||
background-color: red;
|
||
}
|
||
|
||
.main-item{
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
// height: 200rpx;
|
||
box-shadow: 0px 0px 15rpx 0px rgba(201, 201, 201, 0.4);
|
||
margin-bottom: 20rpx;
|
||
.main-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 70rpx;
|
||
padding: 0 20rpx;
|
||
border-bottom: 1px solid #e8e8f2;
|
||
.main-title {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
.title-box{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 20rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(180deg, #FFE99E, #FA9930);
|
||
box-shadow: 0px 6rpx 10rpx 0px rgba(255,206,142,0.81);
|
||
.iconfont{
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
>text{
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.main-header-right{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #939393;
|
||
.header-other{
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main-content{
|
||
padding:20rpx;
|
||
.content-item{
|
||
&:not(:first-child){
|
||
border-top: 1px solid #e8e8f2;
|
||
padding-top: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.content-item-header{
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
.content-body-item{
|
||
display: flex;
|
||
margin-top: 5rpx;
|
||
.content-body-label{
|
||
color: #888888;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.chart-box{
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0px 0px 15rpx 0px rgba(201, 201, 201, 0.4);
|
||
.chart-header{
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
border-bottom: 1px solid #e8e8f2;
|
||
.main-title {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
.title-box{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 20rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(180deg, #9EDAFF, #5D96FF);
|
||
box-shadow: 0px 6px 10px 0px rgba(142,181,255,0.81);
|
||
.iconfont{
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
>text{
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.chart-right{
|
||
display: flex;
|
||
.select-item{
|
||
margin-left: 10rpx;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 10rpx;
|
||
padding: 0 10rpx;
|
||
width: 190rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
.chart-main{
|
||
height: 600rpx;
|
||
}
|
||
}
|
||
/deep/.uni-select{
|
||
padding: 0 10rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.notice-top{
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 80rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #FFFFFF;
|
||
border-bottom: 1px solid #f4f6f8;
|
||
z-index: 999;
|
||
.iconfont{
|
||
transform: rotate(90deg);
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
.notice-list{
|
||
padding: 24rpx 24rpx 0;
|
||
.notice-item{
|
||
width: 702rpx;
|
||
min-height: 381rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 24rpx;
|
||
.item-header{
|
||
// height: 104rpx;
|
||
// padding-left: 28rpx;
|
||
// padding-top: 23rpx;
|
||
padding: 20rpx 25rpx;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #e8e8f2;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.item-header-left{
|
||
.header-title{
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
color: #444444;
|
||
}
|
||
.header-time{
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
color: #999;
|
||
margin-top: 15rpx;
|
||
}
|
||
}
|
||
.item-header-right{
|
||
|
||
}
|
||
}
|
||
.item-body{
|
||
padding: 18rpx 26rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
.item-body-left{
|
||
.body-txt{
|
||
font-size: 26rpx;
|
||
line-height: 42rpx;
|
||
color: #0053A2;
|
||
text{
|
||
color: #444;
|
||
}
|
||
}
|
||
}
|
||
.item-body-right{
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style>
|