339 lines
8.6 KiB
Vue
339 lines
8.6 KiB
Vue
<style lang='scss' scoped>
|
||
.temperature{
|
||
width: 100%;
|
||
/* height: 100%; */
|
||
background-color: #F9F9F9;
|
||
&-chart-ctn{
|
||
width: 100%;
|
||
/* height: calc(100% - 58rpx); */
|
||
padding: $paddingTB $paddingLR;
|
||
}
|
||
&-canvas{
|
||
width: 100%;
|
||
height: 500rpx;
|
||
/* border: 1px solid red; */
|
||
background-color: #fff;
|
||
.canvas-columnChart{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.temperature-mescroll{
|
||
background-color: #F9F9F9;
|
||
|
||
}
|
||
}
|
||
.temperature-info-list{
|
||
width: 100%;
|
||
padding: 0 $paddingLR;
|
||
|
||
}
|
||
.temperature-info-box{
|
||
/* border: 1px solid red; */
|
||
background-color: #fff;
|
||
|
||
&-header{
|
||
padding: 16rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #E8EBF2;
|
||
&-text{
|
||
|
||
}
|
||
}
|
||
&-content{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 24rpx;
|
||
padding-bottom: 14rpx;
|
||
}
|
||
&-temp{
|
||
width: 50%;
|
||
padding-bottom: 10rpx;
|
||
.temp-name{
|
||
color: #666;
|
||
}
|
||
.temp-value{
|
||
color: #59C141;
|
||
font-size: 34rpx;
|
||
}
|
||
.temp-unit{
|
||
color: #59c141;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="temperature">
|
||
<headerSelect @onDateChangeFn="hello" :defaultDate="currentDate"></headerSelect>
|
||
<!-- <view class="temperature-chart-ctn">
|
||
<view class="temperature-canvas">
|
||
<canvas canvas-id="columnChartId" class="canvas-columnChart"></canvas>
|
||
</view>
|
||
</view> -->
|
||
<mescroll-body top="0" class="temperature-mescroll" height="600rpx" ref="mescrollRef" bottom="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||
<view class="temperature-info-list">
|
||
<view class="temperature-info-box mb20" v-for="(item, key) in temperatureAlarmList" :key="key" >
|
||
<view class="temperature-info-box-header">
|
||
<view class="temperature-info-box-header-text">
|
||
<tuiIcon name="ditu2" color="#1C9AFF"></tuiIcon>
|
||
<text class="pl20">{{ item.deviceSpaceName + ' ' + item.deviceName }}</text>
|
||
</view>
|
||
<u-tag @click="goDetailFn(item)" text="详情" type="primary" mode="dark" shape="circle" />
|
||
</view>
|
||
<view class="temperature-info-box-content">
|
||
<view class="temperature-info-box-temp" v-for="(val, index) in item.leakageCurrent" :key="index" :style="{textAlign:((index+1)%2)==0?'right':'left'}">
|
||
<text class="temp-name">{{ index + '：' }}</text>
|
||
<text class="temp-value">{{ val }}</text>
|
||
<text class="temp-unit">°C</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import headerSelect from "@/components/electricalSafe/headerSelect.vue";
|
||
import uCharts from '@/components/u-charts/u-charts.js';
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
let _self;
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentDate:null, // 当前日期
|
||
pixelRatio:1,
|
||
columnChartWidth:"",
|
||
columnChartHeight:"",
|
||
temperatureAlarmList:[],
|
||
canvaColumn:null,
|
||
projectId: null,
|
||
}
|
||
},
|
||
components:{headerSelect},
|
||
mixins:[MescrollMixin],
|
||
onLoad(param) {
|
||
_self = this;
|
||
this.currentDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm');
|
||
this.projectId = param.projectId
|
||
this.columnChartWidth = uni.upx2px(670);
|
||
this.columnChartHeight = uni.upx2px(500);
|
||
|
||
let Column={
|
||
categories:[],
|
||
series:[],
|
||
}
|
||
let chartData = [];
|
||
let arr = [{
|
||
alarmTotal: 24,
|
||
ratio: "50.00",
|
||
typeCode: "a00002",
|
||
typeName: "漏电报警"
|
||
},{
|
||
alarmTotal: 26,
|
||
ratio: "50.00",
|
||
typeCode: "a00002",
|
||
typeName: "1电报警"
|
||
},{
|
||
alarmTotal: 28,
|
||
ratio: "50.00",
|
||
typeCode: "a00002",
|
||
typeName: "2电报警"
|
||
},{
|
||
alarmTotal: 30,
|
||
ratio: "50.00",
|
||
typeCode: "a00002",
|
||
typeName: "3电报警"
|
||
}]
|
||
arr.map((item)=>{
|
||
Column.categories.push(item.typeName);
|
||
chartData.push(item.alarmTotal)
|
||
})
|
||
Column.series = [{
|
||
// area: [74.95, 284, 155, 295],
|
||
color: "green",
|
||
data: chartData,
|
||
index: 0,
|
||
legendShape: "rect",
|
||
name: "安全",
|
||
pointShape: "circle",
|
||
show: true,
|
||
type: "column"
|
||
},{
|
||
// area: [74.95, 284, 155, 295],
|
||
color: "yellow",
|
||
data: chartData,
|
||
index: 0,
|
||
legendShape: "rect",
|
||
name: "预警",
|
||
pointShape: "circle",
|
||
show: true,
|
||
type: "column"
|
||
},{
|
||
// area: [74.95, 284, 155, 295],
|
||
color: "red",
|
||
data: chartData,
|
||
index: 0,
|
||
legendShape: "rect",
|
||
name: "报警",
|
||
pointShape: "circle",
|
||
show: true,
|
||
type: "column"
|
||
}]
|
||
console.log(Column.categories,"Column.categories");
|
||
this.showColumn("columnChartId",Column);
|
||
},
|
||
methods: {
|
||
goDetailFn(item){
|
||
uni.navigateTo({
|
||
url:`./temperature-detail?deviceId=${item.deviceId}&deviceName=${item.deviceName}&deviceSpaceName=${item.deviceSpaceName}`
|
||
})
|
||
},
|
||
/*上拉加载的回调*/
|
||
upCallback(page) {
|
||
console.log(page,"page");
|
||
let obj = {
|
||
projectId: this.projectId
|
||
}
|
||
this.$get("/app/electrical/safety/temperature-new", obj).then((res)=>{
|
||
console.log(res,"ressssssssssss");
|
||
if (res.data && res.data.length>0) {
|
||
// 接口返回的当前页数据列表 (数组)
|
||
this.temperatureAlarmList = res.data;
|
||
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
||
let curPageLen = res.data.length;
|
||
//设置列表数据
|
||
// if(pageNum == 1) this.temperatureAlarmList = []; //如果是第一页需手动置空列表
|
||
// this.temperatureAlarmList = this.temperatureAlarmList.concat(curPageData); //追加新数据
|
||
// this.mescroll.endBySize(curPageLen, res.total); // 推荐
|
||
// this.mescroll.endByPage(curPageLen, res.data.total)
|
||
this.mescroll.endSuccess(curPageLen);
|
||
} else{
|
||
this.temperatureAlarmList = [];
|
||
// this.mescroll.endErr();
|
||
// this.mescroll.showEmpty();
|
||
// this.mescroll.endUpScroll(true);
|
||
}
|
||
}).catch(()=>{
|
||
//联网失败, 结束加载
|
||
this.mescroll.endErr();
|
||
})
|
||
},
|
||
hello(e){
|
||
console.log("abc",e);
|
||
},
|
||
toJSON(){},
|
||
touchColumn(e){
|
||
this.canvaColumn.scrollStart(e);
|
||
},
|
||
moveColumn(e) {
|
||
this.canvaColumn.scroll(e);
|
||
},
|
||
touchEndColumn(e) {
|
||
this.canvaColumn.scrollEnd(e);
|
||
this.canvaColumn.touchLegend(e, {
|
||
animation:true,
|
||
});
|
||
this.canvaColumn.showToolTip(e, {
|
||
format: function (item, category) {
|
||
return category + ' ' + item.name + ':' + item.data
|
||
}
|
||
});
|
||
},
|
||
showColumn(canvasId,chartData){
|
||
this.canvaColumn = new uCharts({
|
||
$this:_self,
|
||
canvasId: canvasId,
|
||
type: 'column',
|
||
fontSize:11,
|
||
padding:[5,15,15,15],
|
||
legend:{
|
||
show:true,
|
||
position:'top',
|
||
float:'center',
|
||
itemGap:30,
|
||
padding:5,
|
||
margin:5,
|
||
//backgroundColor:'rgba(41,198,90,0.2)',
|
||
//borderColor :'rgba(41,198,90,0.5)',
|
||
borderWidth :1
|
||
},
|
||
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:4,
|
||
scrollShow:true,
|
||
scrollAlign:'left',
|
||
},
|
||
yAxis: {
|
||
//disabled:true
|
||
gridType:'dash',
|
||
splitNumber:4,
|
||
min:10,
|
||
// max:180,
|
||
format:(val)=>{return val.toFixed(0)}//如不写此方法，Y轴刻度默认保留两位小数
|
||
},
|
||
width: _self.columnChartWidth*_self.pixelRatio,
|
||
height: _self.columnChartHeight*_self.pixelRatio,
|
||
extra: {
|
||
column: {
|
||
type:'group',
|
||
width: _self.columnChartWidth*_self.pixelRatio*0.45/chartData.categories.length
|
||
}
|
||
},
|
||
});
|
||
// let canvaColumn = new uCharts({
|
||
// $this:_self,
|
||
// canvasId: canvasId,
|
||
// type: 'column',
|
||
// padding:[25,15,10,15],
|
||
// legend:{
|
||
// show:false,
|
||
// // padding:5,
|
||
// // lineHeight:11,
|
||
// // margin:0,
|
||
// },
|
||
// fontSize:11,
|
||
// background:'#FFFFFF',
|
||
// pixelRatio:_self.pixelRatio,
|
||
// animation: true,
|
||
// // enableScroll: true,
|
||
// categories: chartData.categories,
|
||
// series: chartData.series,
|
||
|
||
// xAxis: {
|
||
// disableGrid:true,
|
||
// },
|
||
// yAxis: {
|
||
// data:[{
|
||
// min:0,
|
||
// position:'right',
|
||
// axisLine:false,
|
||
// format:(val)=>{return val.toFixed(0)},
|
||
// }]
|
||
// },
|
||
// dataLabel: true,
|
||
// width: _self.columnChartWidth*_self.pixelRatio,
|
||
// height: _self.columnChartHeight*_self.pixelRatio,
|
||
// extra: {
|
||
// column: {
|
||
// type:'group',
|
||
// width: _self.columnChartWidth*_self.pixelRatio*0.45/chartData.categories.length
|
||
// }
|
||
// }
|
||
// });
|
||
},
|
||
}
|
||
}
|
||
</script>
|