574 lines
16 KiB
Vue
574 lines
16 KiB
Vue
<style lang='scss' scoped>
|
||
.warnAnalysis {
|
||
width: 100%;
|
||
|
||
:not(not) {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.alrmAnalysis,
|
||
.alrmWarning,
|
||
.tradeAnalyzeAlarm,
|
||
.warningTrend {
|
||
|
||
/* padding-bottom: 30rpx; */
|
||
&-header {
|
||
padding: 20rpx $paddingLR;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0px 4rpx 4rpx 0px rgba(0, 0, 0, 0.08);
|
||
}
|
||
}
|
||
|
||
.alrmAnalysis-content {
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 40rpx 0;
|
||
padding-bottom: 20rpx;
|
||
.alrmAnalysis-title {
|
||
width: 130rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.alrmAnalysis-info {
|
||
width: calc(100% - 130rpx);
|
||
font-size: 22rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 50%);
|
||
grid-auto-columns: repeat(2, 50%);
|
||
}
|
||
}
|
||
.alrm-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 20rpx;
|
||
&-circle {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
border-radius: $uni-border-radius-circle;
|
||
/* background-color: #C93548; */
|
||
margin-top: 2rpx;
|
||
}
|
||
}
|
||
|
||
.alrmWarning-content {
|
||
width: 100%;
|
||
padding: 40rpx $paddingLR;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.alrmWarning-alam-trend,
|
||
.alrmWarning-warning-trend {
|
||
width: 170rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.alrmWarning-alam-today-alrm,
|
||
.alrmWarning-alam-yesterday-alrm,
|
||
.alrmWarning-warning-today-alrm,
|
||
.alrmWarning-warning-yesterday-alrm {
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.canvas-yesterdayAlrmId,
|
||
.canvas-todayAlrmId {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
}
|
||
|
||
.tradeAnalyzeAlarm-content {
|
||
padding: 40rpx 25rpx;
|
||
|
||
.canvas-tradeAnalyzeAlarm {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
}
|
||
}
|
||
|
||
.warningTrend-content {
|
||
padding: 40rpx 25rpx;
|
||
|
||
.canvas-warningTrend {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="warnAnalysis" v-if="pageShowFlag">
|
||
<!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
|
||
<view class="">
|
||
<view class="alrmAnalysis" >
|
||
<view class="alrmAnalysis-header">
|
||
<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
|
||
<text class="pl20">报警分析</text>
|
||
</view>
|
||
<view class="alrmAnalysis-content" v-if="alarmCategoriesList && alarmCategoriesList.length>0">
|
||
<view class="alrmAnalysis-title">报警</view>
|
||
<view class="alrmAnalysis-info">
|
||
<view class="alrm-row" v-for="(item,index) in alarmCategoriesList" :key="item.typeCode">
|
||
<view class="alrm-row-circle" :style="{backgroundColor:item.color}"></view>
|
||
<view class="alrm-row-text pl10">
|
||
<text class="pr15">{{item.typeName}}</text>
|
||
<text class="text--base--grey">|</text>
|
||
<text class="pl15">{{item.ratio}}%</text>
|
||
<text class="pl15" style="color: #999;">{{item.alarmTotal}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
|
||
</view>
|
||
<view class="alrmWarning">
|
||
<view class="alrmWarning-header">
|
||
<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
|
||
<text class="pl20">报警预警分析</text>
|
||
</view>
|
||
<view class="alrmWarning-content" >
|
||
<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="pt20" style="color: #D9382A;">今日报警</view>
|
||
</view>
|
||
<view class="alrmWarning-alam-yesterday-alrm">
|
||
<canvas canvas-id="yesterdayAlrmId" class="canvas-yesterdayAlrmId"></canvas>
|
||
<view class="pt20">昨日报警</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="pt20" style="color: #D9382A;">今日报警</view>
|
||
</view>
|
||
<view class="alrmWarning-warning-yesterday-alrm">
|
||
<canvas canvas-id="yesterdayWarningId" class="canvas-yesterdayAlrmId"></canvas>
|
||
<view class="pt20">昨日报警</view>
|
||
</view>
|
||
<view class="alrmWarning-warning-trend">
|
||
<view class="">
|
||
<text class="pr10">{{warningAnalysisStatisticsData.dayOnDay}}%</text>
|
||
<!-- <u-icon name="arrow-upward" color="#E23F34" size="40"></u-icon> -->
|
||
<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>
|
||
|
||
</view>
|
||
<view class="tradeAnalyzeAlarm">
|
||
<view class="tradeAnalyzeAlarm-header">
|
||
<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
|
||
<text class="pl20">行业报警分析</text>
|
||
</view>
|
||
<view class="tradeAnalyzeAlarm-content" v-if="industryAlarmAnalysisList && industryAlarmAnalysisList.length>0">
|
||
<canvas canvas-id="tradeAnalyzeAlarmId" class="canvas-tradeAnalyzeAlarm"></canvas>
|
||
</view>
|
||
<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
|
||
</view>
|
||
<view class="warningTrend">
|
||
<view class="warningTrend-header">
|
||
<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
|
||
<text class="pl20">报警预警趋势</text>
|
||
</view>
|
||
<view class="warningTrend-content" v-if="alarmWarningTrendData">
|
||
<canvas canvas-id="warningTrendId" class="canvas-warningTrend" disable-scroll=true @touchstart="touchLineA"
|
||
@touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
|
||
</view>
|
||
<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
let _self;
|
||
import uCharts from '@/components/u-charts/u-charts.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
alarmTodayWidth: "",
|
||
alarmTodayHeight: "",
|
||
alarmTodayArcbarWidth: "",
|
||
|
||
pixelRatio: 1,
|
||
|
||
tradeAnalyzeWidth: "",
|
||
tradeAnalyzeHeight: "",
|
||
|
||
warningTrendWidth: "",
|
||
warningTrendHeight: "",
|
||
|
||
alarmColorList: ["#C93548", "#5E5490", "#52B249", "#F7A23E", "#EA9B87", "#A94791", "#F1DF31", "#DE5654", "#2DAEE5"],
|
||
alarmCategoriesList: null, // 报警分析列表
|
||
warningAnalysisStatisticsData: null, // 预警分析
|
||
alarmAnalysisStatisticsData: null, // 报警分析
|
||
alarmWarningTrendData:null, // 报警预警趋势
|
||
industryAlarmAnalysisList:null, // 行业报警分析
|
||
showCurveA: null ,// 趋势图chart
|
||
pageShowFlag:false,
|
||
|
||
// list: [{
|
||
// name: '待收货'
|
||
// }, {
|
||
// name: '待付款'
|
||
// }, {
|
||
// name: '待评价',
|
||
// count: 5
|
||
// }],
|
||
// current: 0
|
||
}
|
||
},
|
||
onLoad() {
|
||
_self = this;
|
||
this.alarmTodayWidth = uni.upx2px(140);
|
||
this.alarmTodayHeight = uni.upx2px(140);
|
||
this.alarmTodayArcbarWidth = uni.upx2px(20);
|
||
|
||
this.tradeAnalyzeWidth = uni.upx2px(700);
|
||
this.tradeAnalyzeHeight = uni.upx2px(300);
|
||
|
||
this.warningTrendWidth = uni.upx2px(700);
|
||
this.warningTrendHeight = uni.upx2px(300);
|
||
|
||
this.getPageDataFn();
|
||
},
|
||
methods: {
|
||
// change(index) {
|
||
// this.current = index;
|
||
// },
|
||
// 获取页面数据
|
||
getPageDataFn() {
|
||
this.$get("/app/index/warning-analysis", {}).then((res) => {
|
||
console.log(res, "res");
|
||
this.alarmCategoriesList = res.data.alarmCategoriesList.map((item, index, arr) => {
|
||
item.color = this.alarmColorList[index];
|
||
if (index + 1 > this.alarmColorList.length) {
|
||
item.color = this.alarmColorList[index - this.alarmColorList.length];
|
||
}
|
||
return item;
|
||
});
|
||
this.alarmAnalysisStatisticsData = res.data.warningAnalysisStatisticsVo.find((item) => {
|
||
return item.alarmDivide === "ALARM";
|
||
})
|
||
this.warningAnalysisStatisticsData = res.data.warningAnalysisStatisticsVo.find((item) => {
|
||
return item.alarmDivide === "WARNING";
|
||
})
|
||
console.log(this.alarmAnalysisStatisticsData,"alarmAnalysisStatisticsData");
|
||
console.log(this.warningAnalysisStatisticsData,"warningAnalysisStatisticsData");
|
||
this.alarmWarningTrendData = res.data.alarmChartDataVo;
|
||
this.industryAlarmAnalysisList = res.data.industryAlarmList;
|
||
this.showAlarmAnalysisStatisticsFn(); // 报警分析
|
||
this.showWarningAnalysisStatisticsFn(); // 预警分析
|
||
this.showAlarmWarningTrendFn(this.alarmWarningTrendData); // 报警预警趋势
|
||
this.showIndustryAlarmAnalysisFn(this.industryAlarmAnalysisList); // 行业报警分析
|
||
}).finally(()=>{
|
||
this.pageShowFlag = true;
|
||
})
|
||
},
|
||
// 渲染报警分析
|
||
showIndustryAlarmAnalysisFn(data) {
|
||
let series = data.map((item) => {
|
||
return {
|
||
name: item.industryName,
|
||
data: item.total
|
||
}
|
||
})
|
||
|
||
//自定义文案示例，需设置format字段
|
||
for (let i = 0; i < series.length; i++) {
|
||
series[i].format = () => {
|
||
return series[i].name + series[i].data
|
||
};
|
||
}
|
||
// _self.textarea = JSON.stringify(res.data.data.Ring);
|
||
this.showRing("tradeAnalyzeAlarmId", {
|
||
series: series
|
||
})
|
||
},
|
||
// 渲染报警预警趋势
|
||
showAlarmWarningTrendFn(data) {
|
||
let LineA = {
|
||
categories: data.name,
|
||
series: [{
|
||
name: "报警",
|
||
data: data.alarm
|
||
}, {
|
||
name: "预警",
|
||
data: data.warning
|
||
}]
|
||
};
|
||
_self.showCurve("warningTrendId", LineA)
|
||
},
|
||
// 渲染预警分析模块
|
||
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,
|
||
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,
|
||
index: 0,
|
||
legendShape: "circle",
|
||
name: "",
|
||
pointShape: "circle",
|
||
show: true,
|
||
type: "arcbar"
|
||
}]
|
||
}
|
||
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;
|
||
// 报警总数
|
||
let alarmTotalValue = this.alarmAnalysisStatisticsData.todayAlarm + this.alarmAnalysisStatisticsData.yesterdayAlarm;
|
||
// 今日报警数据
|
||
let todayAlrmData = {
|
||
title: this.alarmAnalysisStatisticsData.todayAlarm + "",
|
||
series: [{
|
||
color: "#D9382A",
|
||
data: this.alarmAnalysisStatisticsData.todayAlarm / alarmTotalValue || 0,
|
||
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,
|
||
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);
|
||
|
||
},
|
||
// 环形
|
||
showRing(canvasId, chartData) {
|
||
let canvaRing = new uCharts({
|
||
$this:_self,
|
||
canvasId: canvasId,
|
||
type: 'ring',
|
||
fontSize:11,
|
||
padding:[5,5,5,5],
|
||
legend:{
|
||
show:true,
|
||
position:'right',
|
||
float:'center',
|
||
itemGap:10,
|
||
padding:5,
|
||
lineHeight:26,
|
||
margin:5,
|
||
borderWidth :1
|
||
},
|
||
background:'#FFFFFF',
|
||
pixelRatio:_self.pixelRatio,
|
||
series: chartData.series,
|
||
animation: false,
|
||
width: _self.tradeAnalyzeWidth * _self.pixelRatio,
|
||
height: _self.tradeAnalyzeHeight * _self.pixelRatio,
|
||
disablePieStroke: true,
|
||
dataLabel: true,
|
||
|
||
extra: {
|
||
pie: {
|
||
offsetAngle: 0,
|
||
ringWidth: 15*_self.pixelRatio,
|
||
labelWidth:15
|
||
}
|
||
},
|
||
});
|
||
},
|
||
toJSON() {},
|
||
// 进度圆环图 接收参数:一个块的id,一个数据
|
||
showArcbar(canvasId, sizeObj, chartData) {
|
||
let canvaLineA = new uCharts({
|
||
$this: _self,
|
||
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,
|
||
});
|
||
},
|
||
// 曲线图
|
||
showCurve(canvasId, chartData) {
|
||
this.showCurveA = new uCharts({
|
||
$this: _self,
|
||
canvasId: canvasId,
|
||
type: 'line',
|
||
fontSize: 11,
|
||
padding: [15, 20, 0, 15],
|
||
legend: {
|
||
show: true,
|
||
padding: 5,
|
||
lineHeight: 11,
|
||
margin: 0,
|
||
},
|
||
dataLabel: true,
|
||
dataPointShape: true,
|
||
background: '#FFFFFF',
|
||
pixelRatio: _self.pixelRatio,
|
||
categories: chartData.categories,
|
||
series: chartData.series,
|
||
animation: true,
|
||
enableScroll: true, //开启图表拖拽功能
|
||
xAxis: {
|
||
disableGrid: false,
|
||
type: 'grid',
|
||
gridType: 'dash',
|
||
itemCount: 7,
|
||
scrollShow: true,
|
||
scrollAlign: 'left',
|
||
},
|
||
// xAxis: {
|
||
// disableGrid:false,
|
||
// type:'grid',
|
||
// gridType:'dash',
|
||
// itemCount:4,
|
||
// scrollShow:true,
|
||
// scrollAlign:'left'
|
||
// },
|
||
|
||
yAxis: {
|
||
gridType: 'dash',
|
||
gridColor: '#CCCCCC',
|
||
dashLength: 8,
|
||
splitNumber: 5,
|
||
format: (val) => {
|
||
return val.toFixed(0)
|
||
}
|
||
},
|
||
width: _self.warningTrendWidth * _self.pixelRatio,
|
||
height: _self.warningTrendHeight * _self.pixelRatio,
|
||
extra: {
|
||
line: {
|
||
type: 'curve'
|
||
}
|
||
}
|
||
});
|
||
},
|
||
touchLineA(e) {
|
||
this.showCurveA.scrollStart(e);
|
||
},
|
||
moveLineA(e) {
|
||
this.showCurveA.scroll(e);
|
||
},
|
||
touchEndLineA(e) {
|
||
this.showCurveA.scrollEnd(e);
|
||
//下面是toolTip事件，如果滚动后不需要显示，可不填写
|
||
this.showCurveA.touchLegend(e);
|
||
this.showCurveA.showToolTip(e, {
|
||
format: function(item, category) {
|
||
return category + ' ' + item.name + ':' + item.data
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|