156 lines
3.8 KiB
Vue
156 lines
3.8 KiB
Vue
<style lang='scss' scoped>
|
||
.warningTrend-content {
|
||
padding: 40rpx 25rpx;
|
||
|
||
.canvas-warningTrend {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
}
|
||
&.hide{
|
||
position: absolute;
|
||
left: -999rpx;
|
||
min-height: 300rpx;
|
||
}
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="alarmTrend">
|
||
<view class="warningTrend-content" :class="hide?'hide':''" v-if="trendData">
|
||
<!-- disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA" -->
|
||
<canvas canvas-id="warningTrendId" class="canvas-warningTrend" disable-scroll=true
|
||
@touchstart.stop="touchLineA" @touchmove.stop="moveLineA" @touchend.stop="touchEndLineA"></canvas>
|
||
</view>
|
||
<view v-else>
|
||
<view class="pt30"></view>
|
||
<u-empty class="" text="暂无数据" mode="data"></u-empty>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
<script>
|
||
import uCharts from '@/components/u-charts/u-charts.js';
|
||
let _self;
|
||
export default {
|
||
data() {
|
||
return {
|
||
showCurveA:null,
|
||
warningTrendWidth: "",
|
||
warningTrendHeight: "",
|
||
pixelRatio:1,
|
||
// trendData:{
|
||
// alarm: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||
// name: ["12-14", "12-13", "12-12", "12-11", "12-10", "12-09", "12-08", "12-07", "12-06", "12-05",
|
||
// "12-04","12-03","12-02","12-01","11-30","11-29","11-28","11-27","11-26","11-25","11-24","11-23",
|
||
// "11-22","11-21","11-20","11-19","11-18","11-17","11-16","11-15"],
|
||
// warning: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
||
// }
|
||
}
|
||
},
|
||
props:{
|
||
trendData:{
|
||
type:Object,
|
||
default:null
|
||
},
|
||
hide:{
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
},
|
||
watch:{
|
||
trendData(newVal){
|
||
console.log(newVal,"newVal");
|
||
this.getCurveDataFn();
|
||
}
|
||
},
|
||
created() {
|
||
_self=this;
|
||
this.warningTrendWidth = uni.upx2px(622);
|
||
this.warningTrendHeight = uni.upx2px(300);
|
||
this.getCurveDataFn();
|
||
},
|
||
methods: {
|
||
toJSON(){},
|
||
getCurveDataFn(){
|
||
if (this.trendData) {
|
||
let LineA = {
|
||
categories: this.trendData.name,
|
||
series: [{
|
||
name: "报警",
|
||
data: this.trendData.alarm || new Array(this.trendData.name.length).fill(0)
|
||
}, {
|
||
name: "预警",
|
||
data: this.trendData.warning || new Array(this.trendData.name.length).fill(0)
|
||
}]
|
||
};
|
||
this.showCurve("warningTrendId", LineA);
|
||
}
|
||
},
|
||
// 曲线图
|
||
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',
|
||
},
|
||
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>
|