252 lines
7.2 KiB
Vue
252 lines
7.2 KiB
Vue
<style lang='scss' scoped>
|
||
.temperatureAlarm{
|
||
width: 100%;
|
||
background-color: #F9F9F9;
|
||
&-chart-ctn{
|
||
padding: $paddingTB $paddingLR;
|
||
}
|
||
&-chart{
|
||
padding: 20rpx 0;
|
||
background-color: #fff;
|
||
&-title{
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
/* 列表 */
|
||
.temperatureAlarm{
|
||
&-info-list{
|
||
background-color: #F9F9F9;
|
||
padding: 30rpx $paddingLR;
|
||
}
|
||
&-info-box{
|
||
width: 100%;
|
||
border-radius: $uni-border-radius-lg;
|
||
background-color: #fff;
|
||
box-shadow: $box-shadow;
|
||
margin-bottom: 20rpx;
|
||
font-size: 24rpx;
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
&-msg{
|
||
padding: 20rpx;
|
||
/* border-bottom: 2px dotted #A1A1A1; */
|
||
border-bottom: 1px dashed #A1A1A1;
|
||
position: relative;
|
||
}
|
||
.box-checkbox{
|
||
position: absolute;
|
||
right: -16rpx;
|
||
top: 14rpx;
|
||
}
|
||
.box-dealwith{
|
||
position: absolute;
|
||
right: 20rpx;
|
||
bottom: 20rpx;
|
||
}
|
||
.box-left-line{
|
||
width: 8rpx;
|
||
height: 180rpx;
|
||
background: #93CDFC;
|
||
position: absolute;
|
||
z-index: 1;
|
||
left: 20rpx;
|
||
top: 4rpx;
|
||
// left: 40rpx;
|
||
// top: 20rpx;
|
||
}
|
||
&-msg-row{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
.msg-row-icon{
|
||
border-radius: $uni-border-radius-circle;
|
||
/* padding: 10rpx; */
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: $main-color;
|
||
z-index: 10;
|
||
}
|
||
.msg-row-text{
|
||
color: #000;
|
||
width: 480rpx;
|
||
}
|
||
}
|
||
&-bottom{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
}
|
||
}
|
||
&-info-box-msg-row-ctn{
|
||
position: relative;
|
||
}
|
||
&-info-box-msg-content{
|
||
display: flex;
|
||
}
|
||
&-info-box-msg-warning{
|
||
width: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #FF3F3F;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="temperatureAlarm">
|
||
<headerSelect @onDateChangeFn="hello" :defaultDate="dateVal"></headerSelect>
|
||
<view class="temperatureAlarm-chart-ctn">
|
||
<view class="temperatureAlarm-chart">
|
||
<view class="temperatureAlarm-chart-title">24小时温度报警情况</view>
|
||
<lineScroll :chartData="chartData" width="670" height="400"></lineScroll>
|
||
</view>
|
||
</view>
|
||
<bottomSelect :alarmValue="alarmValue" :stateValue="stateValue" @onStateConfirm="onStateConfirmFn" @onAlarmConfirm="onAlarmConfirmFn"></bottomSelect>
|
||
<mescroll-body top="0" ref="mescrollRef" height="860rpx" bottom="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||
<view class="temperatureAlarm-info-list">
|
||
<view class="temperatureAlarm-info-box" v-for="(item,index) in tempAlarmList" :key="index">
|
||
<view class="temperatureAlarm-info-box-msg">
|
||
<!-- <u-checkbox class="box-checkbox" v-if="checkboxShowFlag" v-model="item.checkedFlag"></u-checkbox> -->
|
||
<tuiIcon class="box-dealwith" :name="item.processState==2?'yichuli':'weichuli'" size="80" @click="openDealwithFn(item)" :color="item.totalLineFlag?'#71B943':'#BE2D08'"></tuiIcon>
|
||
<view class="temperatureAlarm-info-box-msg-content">
|
||
<view class="temperatureAlarm-info-box-msg-warning">{{item.alarmDivide=='ALARM'?"报警":"预警"}}</view>
|
||
<view class="temperatureAlarm-info-box-msg-row-ctn">
|
||
<view class="box-left-line"></view>
|
||
<view class="temperatureAlarm-info-box-msg-row">
|
||
<view class="msg-row-icon">
|
||
<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
|
||
</view>
|
||
<view class="msg-row-text pl20">项目：{{item.projectName}}</view>
|
||
</view>
|
||
<view class="temperatureAlarm-info-box-msg-row">
|
||
<view class="msg-row-icon">
|
||
<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
|
||
</view>
|
||
<view class="msg-row-text pl20">地点：{{item.projectAddress}}</view>
|
||
</view>
|
||
<view class="temperatureAlarm-info-box-msg-row">
|
||
<view class="msg-row-icon">
|
||
<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
|
||
</view>
|
||
<view class="msg-row-text pl20">线路：总线已通</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="temperatureAlarm-info-box-bottom">
|
||
<text>时间：{{item.alarmTime}}</text>
|
||
<text>报警类型：{{item.typeName}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import headerSelect from "@/components/electricalSafe/headerSelect.vue";
|
||
import bottomSelect from "@/components/electricalSafe/bottomSelect.vue";
|
||
import lineScroll from "@/components/uchartComponents/line-scroll.vue";
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
let _self;
|
||
export default {
|
||
data() {
|
||
return {
|
||
dateVal:null,
|
||
chartData:null,
|
||
alarmValue:"ALARM",
|
||
stateValue:"",
|
||
projectId:"",
|
||
tempAlarmList:[]
|
||
}
|
||
},
|
||
components:{headerSelect,bottomSelect,lineScroll},
|
||
mixins:[MescrollMixin],
|
||
onLoad(e) {
|
||
this.projectId = e.projectId;
|
||
this.dateVal = this.$u.timeFormat(new Date().getTime(),'yyyy-mm');
|
||
this.getServerData();
|
||
_self = this;
|
||
},
|
||
methods: {
|
||
onStateConfirmFn(e){
|
||
this.stateValue = e;
|
||
},
|
||
onAlarmConfirmFn(e){
|
||
this.alarmValue = e;
|
||
},
|
||
hello(e){
|
||
this.dateVal = e;
|
||
this.mescroll.resetUpScroll();
|
||
},
|
||
/*上拉加载的回调*/
|
||
upCallback(page) {
|
||
console.log(this.dateVal,"this.dateVal");
|
||
let pageNum = page.num; // 页码, 默认从1开始
|
||
let pageSize = page.size; // 页长, 默认每页10条
|
||
let obj = {
|
||
pageSize:pageSize,
|
||
pageNum:pageNum,
|
||
alarmDivide:this.alarmValue,
|
||
createDate:this.dateVal,
|
||
projectId:this.projectId,
|
||
// typeCode:"a00007"
|
||
}
|
||
this.$get("/app/alarm/table",obj).then((res)=>{
|
||
console.log(res,"ressssssssssss");
|
||
if (res.rows && res.rows.length>0) {
|
||
// 接口返回的当前页数据列表 (数组)
|
||
let curPageData = res.rows;
|
||
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
||
let curPageLen = curPageData.length;
|
||
//设置列表数据
|
||
if(pageNum == 1) this.tempAlarmList = []; //如果是第一页需手动置空列表
|
||
this.tempAlarmList = this.tempAlarmList.concat(curPageData); //追加新数据
|
||
this.mescroll.endBySize(curPageLen, res.total); // 推荐
|
||
// this.mescroll.endByPage(curPageLen, res.data.total)
|
||
// this.mescroll.endSuccess(curPageData.length);
|
||
} else{
|
||
this.tempAlarmList = [];
|
||
this.mescroll.endErr();
|
||
this.mescroll.showEmpty();
|
||
// this.mescroll.endUpScroll(true);
|
||
}
|
||
}).catch(()=>{
|
||
//联网失败, 结束加载
|
||
this.mescroll.endErr();
|
||
})
|
||
},
|
||
getServerData(){
|
||
uni.request({
|
||
url: 'https://www.ucharts.cn/data.json',
|
||
data:{
|
||
},
|
||
success: function(res) {
|
||
console.log(res.data.data)
|
||
let LineA={categories:[],series:[]};
|
||
//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
|
||
LineA.categories=res.data.data.LineA.categories;
|
||
LineA.series=res.data.data.LineA.series;
|
||
_self.chartData = LineA;
|
||
// _self.textarea = JSON.stringify(res.data.data.LineA);
|
||
// _self.showLineA("canvasLineA",LineA);
|
||
|
||
|
||
},
|
||
fail: () => {
|
||
// _self.tips="网络错误，小程序端请检查合法域名";
|
||
},
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|