277 lines
8.0 KiB
Vue
277 lines
8.0 KiB
Vue
<style lang='scss' scoped>
|
|
.alrmWarning-content {
|
|
width: 100%;
|
|
/* padding: 40rpx $paddingLR; */
|
|
text-align: center;
|
|
.alrmWarning-alam {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 20rpx;
|
|
|
|
&-title {
|
|
color: #D9382A;
|
|
/* width: 140rpx; */
|
|
/* display: flex; */
|
|
/* justify-content: center; */
|
|
/* align-items: center; */
|
|
}
|
|
}
|
|
.alrmWarning-warning {
|
|
padding-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
&.hide{
|
|
.alrmWarning-alam,.alrmWarning-warning{
|
|
position: absolute;
|
|
left: -999rpx;
|
|
min-height: 180rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
.canvas-yesterdayAlrmId,
|
|
.canvas-todayAlrmId {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="alrmWarning-content" :class="hide?'hide':''">
|
|
<view class="alrmWarning-alam" v-if="alarmAnalysisStatisticsData">
|
|
<view class="alrmWarning-alam-title">报警 ></view>
|
|
<view class="alrmWarning-alam-today-alrm">
|
|
<canvas canvas-id="todayAlrmId" class="canvas-todayAlrmId"></canvas>
|
|
<view class="" style="color: #D9382A;">今日报警</view>
|
|
</view>
|
|
<view class="alrmWarning-alam-yesterday-alrm">
|
|
<canvas canvas-id="yesterdayAlrmId" class="canvas-yesterdayAlrmId"></canvas>
|
|
<view class="">昨日报警</view>
|
|
</view>
|
|
<view class="alrmWarning-alam-trend">
|
|
<view>
|
|
<text class="pr10">{{alarmAnalysisStatisticsData.dayOnDay}}%</text>
|
|
<u-icon :name="parseFloat(alarmAnalysisStatisticsData.dayOnDay)>0?'arrow-upward':'arrow-downward'" :color="parseFloat(alarmAnalysisStatisticsData.dayOnDay)>0?'#E23F34':'#45A63E'"
|
|
size="40"></u-icon>
|
|
</view>
|
|
<view>同比</view>
|
|
</view>
|
|
</view>
|
|
<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
|
|
<view class="alrmWarning-warning" v-if="warningAnalysisStatisticsData">
|
|
<view style="color: #D18820;">预警 ></view>
|
|
<view class="alrmWarning-warning-today-alrm">
|
|
<canvas canvas-id="todayWarningId" class="canvas-todayAlrmId"></canvas>
|
|
<view class="" style="color: #D9382A;">今日报警</view>
|
|
</view>
|
|
<view class="alrmWarning-warning-yesterday-alrm">
|
|
<canvas canvas-id="yesterdayWarningId" class="canvas-yesterdayAlrmId"></canvas>
|
|
<view class="">昨日报警</view>
|
|
</view>
|
|
<view class="alrmWarning-warning-trend">
|
|
<view class="">
|
|
<text class="pr10">{{warningAnalysisStatisticsData.dayOnDay}}%</text>
|
|
<u-icon :name="parseFloat(warningAnalysisStatisticsData.dayOnDay)>0?'arrow-upward':'arrow-downward'" :color="parseFloat(warningAnalysisStatisticsData.dayOnDay)>0?'#E23F34':'#45A63E'"
|
|
size="40"></u-icon>
|
|
</view>
|
|
<view class="">同比</view>
|
|
</view>
|
|
</view>
|
|
<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import uCharts from '@/components/u-charts/u-charts.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
alarmTodayWidth:"",
|
|
alarmTodayHeight:"",
|
|
alarmTodayArcbarWidth:"",
|
|
// warningAnalysisStatisticsData:{
|
|
// alarmDivide: "ALARM",
|
|
// dayOnDay: "0.00",
|
|
// todayAlarmTotal: 0,
|
|
// yesterdayAlarm: 0
|
|
// },
|
|
// alarmAnalysisStatisticsData:{
|
|
// alarmDivide: "WARNING",
|
|
// dayOnDay: "0.00",
|
|
// todayAlarmTotal: 0,
|
|
// yesterdayAlarm: 0
|
|
// }
|
|
}
|
|
},
|
|
props:{
|
|
warningAnalysisStatisticsData:{
|
|
type:Object,
|
|
default:null
|
|
},
|
|
alarmAnalysisStatisticsData:{
|
|
type:Object,
|
|
default:null
|
|
},
|
|
hide:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
},
|
|
watch:{
|
|
warningAnalysisStatisticsData(newVal,oldVal){
|
|
if (!!newVal) {
|
|
this.showWarningAnalysisStatisticsFn();
|
|
}
|
|
},
|
|
alarmAnalysisStatisticsData(newVal,oldVal){
|
|
console.log(newVal,"newVal");
|
|
console.log(!!newVal,"!!newVal");
|
|
if (!!newVal){
|
|
this.showAlarmAnalysisStatisticsFn();
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.alarmTodayWidth = uni.upx2px(120);
|
|
this.alarmTodayHeight = uni.upx2px(120);
|
|
this.alarmTodayArcbarWidth = uni.upx2px(20);
|
|
console.log(this.alarmAnalysisStatisticsData,"alarmAnalysisStatisticsData");
|
|
if(this.warningAnalysisStatisticsData){
|
|
this.showWarningAnalysisStatisticsFn();
|
|
}
|
|
if(this.alarmAnalysisStatisticsData){
|
|
this.showAlarmAnalysisStatisticsFn()
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
toJSON(){},
|
|
// 渲染预警分析模块
|
|
showWarningAnalysisStatisticsFn(){
|
|
if(!this.warningAnalysisStatisticsData) return;
|
|
// 预警总数
|
|
let warningTotalValue = this.warningAnalysisStatisticsData.todayAlarm + this.warningAnalysisStatisticsData.yesterdayAlarm;
|
|
// 今日预警数据
|
|
let todayWarningData = {
|
|
title: this.warningAnalysisStatisticsData.todayAlarm + "",
|
|
series: [{
|
|
color: "#D9382A",
|
|
data: this.warningAnalysisStatisticsData.todayAlarm / warningTotalValue || 0.01,
|
|
index: 0,
|
|
legendShape: "circle",
|
|
name: "",
|
|
pointShape: "circle",
|
|
show: true,
|
|
type: "arcbar"
|
|
}]
|
|
}
|
|
// 昨日预警数据
|
|
let yesterdayWarningData = {
|
|
title: this.warningAnalysisStatisticsData.yesterdayAlarm + "",
|
|
series: [{
|
|
color: "#2DAEE5",
|
|
data: this.warningAnalysisStatisticsData.yesterdayAlarm / warningTotalValue || 0.01,
|
|
index: 0,
|
|
legendShape: "circle",
|
|
name: "",
|
|
pointShape: "circle",
|
|
show: true,
|
|
type: "arcbar"
|
|
}]
|
|
}
|
|
console.log(todayWarningData,"todayWarningData");
|
|
console.log(yesterdayWarningData,"yesterdayWarningData");
|
|
this.showArcbar("todayWarningId", {
|
|
width: this.alarmTodayWidth,
|
|
height: this.alarmTodayHeight
|
|
}, todayWarningData);
|
|
this.showArcbar("yesterdayWarningId", {
|
|
width: this.alarmTodayWidth,
|
|
height: this.alarmTodayHeight
|
|
}, yesterdayWarningData);
|
|
},
|
|
// 渲染报警分析模块
|
|
showAlarmAnalysisStatisticsFn() {
|
|
if(!this.alarmAnalysisStatisticsData) return;
|
|
console.log('this.alarmAnalysisStatisticsData', this.alarmAnalysisStatisticsData)
|
|
// 报警总数
|
|
let alarmTotalValue = this.alarmAnalysisStatisticsData.todayAlarm + this.alarmAnalysisStatisticsData.yesterdayAlarm;
|
|
// 今日报警数据
|
|
let todayAlrmData = {
|
|
title: this.alarmAnalysisStatisticsData.todayAlarm + "",
|
|
series: [{
|
|
color: "#D9382A",
|
|
data: this.alarmAnalysisStatisticsData.todayAlarm / alarmTotalValue || 0.01,
|
|
index: 0,
|
|
legendShape: "circle",
|
|
name: "",
|
|
pointShape: "circle",
|
|
show: true,
|
|
type: "arcbar"
|
|
}]
|
|
}
|
|
// 昨日报警数据
|
|
let yesterdayAlrmData = {
|
|
title: this.alarmAnalysisStatisticsData.yesterdayAlarm + "",
|
|
series: [{
|
|
color: "#2DAEE5",
|
|
data: this.alarmAnalysisStatisticsData.yesterdayAlarm / alarmTotalValue || 0.01,
|
|
index: 0,
|
|
legendShape: "circle",
|
|
name: "",
|
|
pointShape: "circle",
|
|
show: true,
|
|
type: "arcbar"
|
|
}]
|
|
}
|
|
// 找到id为todayAlrmId的块
|
|
this.showArcbar("todayAlrmId", {
|
|
width: this.alarmTodayWidth,
|
|
height: this.alarmTodayHeight
|
|
}, todayAlrmData);
|
|
this.showArcbar("yesterdayAlrmId", {
|
|
width: this.alarmTodayWidth,
|
|
height: this.alarmTodayHeight
|
|
}, yesterdayAlrmData);
|
|
},
|
|
// 进度圆环图 接收参数:一个块的id,一个数据
|
|
showArcbar(canvasId, sizeObj, chartData) {
|
|
let canvaLineA = new uCharts({
|
|
$this: this,
|
|
canvasId: canvasId,
|
|
type: 'arcbar',
|
|
fontSize: 11,
|
|
legend: false,
|
|
title: {
|
|
name: chartData.title,
|
|
color: chartData.series[0].color,
|
|
fontSize: 18
|
|
},
|
|
subtitle: {
|
|
// name: chartData.series[0].name,
|
|
// color: '#666666',
|
|
// fontSize: 15*_self.pixelRatio
|
|
},
|
|
extra: {
|
|
arcbar: {
|
|
type: 'circle', //整圆类型进度条图
|
|
width: 4, //圆弧的宽度
|
|
startAngle: 1.5 //整圆类型只需配置起始角度即可
|
|
}
|
|
},
|
|
background: '#FFFFFF',
|
|
pixelRatio: 1,
|
|
series: chartData.series,
|
|
animation: true,
|
|
width: sizeObj.width,
|
|
height: sizeObj.height,
|
|
dataLabel: true,
|
|
});
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|