773 lines
16 KiB
Vue
773 lines
16 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar :title="title" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
|
:title-bold='true' height='45' id="navbar">
|
|
</u-navbar>
|
|
<view class="top">
|
|
<view class="top_left">
|
|
{{apiaryName}}
|
|
</view>
|
|
<view class="top_right" @click="showmiyuan = true">
|
|
{{yjtxt}} <view class="iconfont icon-xiangyou1" style="font-size: 40rpx;"></view>
|
|
</view>
|
|
</view>
|
|
<view class="cont_box">
|
|
<view class="left">
|
|
<view class="left_cont_box" v-for="(item, index) in tabs" :key="index"
|
|
@click="changeTag(index,item.type)" :class="currentIndex === index ? 'act4' : ''">
|
|
<view class="left_cont" :class="[
|
|
index=== currentIndex? 'act1' : '',
|
|
index + 1 === currentIndex? 'act2' : '',
|
|
index- 1 === currentIndex? 'act3' : '']">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view class="right" v-if="wuflag" scroll-y="true" @scrolltolower="loadMore">
|
|
<view class="right_cont" v-for="(item,index) in rzlist" :key="index">
|
|
<view class="right_cont_top">
|
|
<view class="cont_left">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uKzdmSTqoFrM6nlxTLGr" mode="">
|
|
</image>
|
|
<view class="txt" v-if="item.type == 1">
|
|
{{item.realValue}}°C
|
|
</view>
|
|
<view class="txt" v-if="item.type == 2">
|
|
{{item.realValue}}%
|
|
</view>
|
|
<view class="txt" v-if="item.type == 3">
|
|
{{item.realValue}}kg
|
|
</view>
|
|
<view class="txt" v-if="item.type == 4">
|
|
{{item.realValue}}%
|
|
</view>
|
|
<view class="txt" v-if="item.type == 5">
|
|
{{item.realValue}}次
|
|
</view>
|
|
<view class="txt" v-if="item.type == 6">
|
|
{{item.realValue}}Khz
|
|
</view>
|
|
<view class="txt" v-if="item.type == 7">
|
|
{{item.realValue}}km
|
|
</view>
|
|
<view class="txt" v-if="item.type == 8">
|
|
异常
|
|
</view>
|
|
</view>
|
|
<view class="cont_right">
|
|
<view class="btn1" @click="btnzdl(item.recordId)" v-if="item.status == 1">
|
|
知道了
|
|
</view>
|
|
<view class="btn2" v-else>
|
|
已读
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="cont">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uelHshjG1nuq3RacsYEY" mode=""></image>
|
|
<view class="txt1" v-if="title == '蜂场预警记录'">
|
|
{{item.apiaryName == null ? '--' : item.apiaryName}}-{{item.beehiveName == null ? '--' : item.beehiveName}}
|
|
</view>
|
|
<view class="txt1" v-else>
|
|
{{item.apiaryName == null ? '--' : item.apiaryName}}-{{item.beehiveName == null ? '--' : item.beehiveName}}
|
|
</view>
|
|
</view>
|
|
<view class="cont">
|
|
<view class="txt2">
|
|
{{item.msg}}
|
|
</view>
|
|
</view>
|
|
<view class="cont" style="margin-top: 26rpx;">
|
|
<view class="">
|
|
|
|
</view>
|
|
<view class="txt3">
|
|
{{item.createTime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="no_cont" v-else>
|
|
<view class="img">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uUZ3MF84e3bKgwAei8Rz" mode=""></image>
|
|
</view>
|
|
<view class="txt">
|
|
当前暂无预警记录...
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-select v-model="showmiyuan" :list="fclist" @confirm="confirmmy"></u-select>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: " #F4FAF8",
|
|
},
|
|
showmiyuan: false,
|
|
title: "蜂箱预警记录",
|
|
currentIndex: 0,
|
|
wuflag: false,
|
|
yjtxt:'',
|
|
tabs: [{
|
|
title: '全部',
|
|
type: null
|
|
},
|
|
{
|
|
title: '温度',
|
|
type: 1
|
|
},
|
|
{
|
|
title: '湿度',
|
|
type: 2
|
|
},
|
|
{
|
|
title: '重量',
|
|
type: 3
|
|
},
|
|
{
|
|
title: '电量',
|
|
type: 4
|
|
},
|
|
{
|
|
title: '进出量',
|
|
type: 5
|
|
},
|
|
{
|
|
title: '声音',
|
|
type: 6
|
|
}, {
|
|
title: '电子围栏',
|
|
type: 7
|
|
}, {
|
|
title: '定位异常',
|
|
type: 8
|
|
}
|
|
],
|
|
textValue: '',
|
|
currentCount: 0,
|
|
showxy: false,
|
|
apiaryId: '',
|
|
beehiveId: '',
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
rzlist: [],
|
|
fclist: [],
|
|
apiaryName: '',
|
|
type: null,
|
|
total: 0,
|
|
imglist: []
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.apiaryId = option.apiaryId
|
|
this.title = option.tit
|
|
},
|
|
onShow() {
|
|
this.pageNum = 1
|
|
this.rzlist = []
|
|
if (this.title == '蜂箱预警记录') {
|
|
this.yjtxt = '其他蜂箱'
|
|
this.getfx()
|
|
this.getyuj()
|
|
} else {
|
|
this.yjtxt = '其他蜂场'
|
|
this.getfc()
|
|
this.getyuj()
|
|
}
|
|
},
|
|
methods: {
|
|
// 列表滚动
|
|
loadMore() {
|
|
if (this.rzlist.length < this.total) {
|
|
this.getyuj()
|
|
} else {
|
|
uni.showToast({
|
|
title: '没有更多预警记录了',
|
|
icon: 'none',
|
|
duration: 1000
|
|
})
|
|
}
|
|
},
|
|
// 点击选择蜂箱
|
|
confirmmy(e) {
|
|
this.rzlist = []
|
|
this.pageNum = 1
|
|
this.apiaryId = e[0].value
|
|
this.apiaryName = e[0].label
|
|
this.getyuj()
|
|
},
|
|
// 点击处理预警
|
|
btnzdl(recordId) {
|
|
this.$u.put(`/farm/record/warn/${recordId}/read`).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '处理成功',
|
|
icon: 'success',
|
|
duration: 1000
|
|
})
|
|
this.rzlist.forEach(item => {
|
|
if (item.recordId == recordId) {
|
|
item.status = 2
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 1000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 请求蜂箱
|
|
getfx() {
|
|
this.$u.get(`/farm/beehive/listAll`).then(res => {
|
|
if (res.code == 200) {
|
|
if (res.data.length >= 1) {
|
|
res.data.forEach(item => {
|
|
if (item.beehiveId == this.apiaryId) {
|
|
this.apiaryName = item.name
|
|
}
|
|
})
|
|
this.fclist = res.data.map(item => ({
|
|
value: item.beehiveId,
|
|
label: item.name
|
|
}))
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 请求蜂场
|
|
getfc() {
|
|
this.$u.get(`/farm/apiary/listAll`).then(res => {
|
|
if (res.code == 200) {
|
|
if (res.data.length >= 1) {
|
|
res.data.forEach(item => {
|
|
if (item.apiaryId == this.apiaryId) {
|
|
this.apiaryName = item.name
|
|
}
|
|
})
|
|
this.fclist = res.data.map(item => ({
|
|
value: item.apiaryId,
|
|
label: item.name
|
|
}))
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 请求预警
|
|
getyuj() {
|
|
if (this.title == '蜂箱预警记录') {
|
|
let queryParams = {
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize,
|
|
beehiveId: this.apiaryId,
|
|
type: this.type
|
|
};
|
|
if (this.type == null) {
|
|
delete queryParams.type;
|
|
}
|
|
let queryString = Object.keys(queryParams).filter(key => queryParams[key] != null).map(key =>
|
|
`${encodeURIComponent(key)}=${encodeURIComponent(queryParams[key])}`).join('&')
|
|
this.$u.get(`/farm/record/warn/list?${queryString}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.total = res.total
|
|
if (res.total < 1) {
|
|
this.wuflag = false
|
|
} else {
|
|
this.pageNum++
|
|
this.wuflag = true
|
|
if (this.type == null) {
|
|
this.rzlist = [...this.rzlist, ...res.rows.map(row => ({
|
|
...row,
|
|
}))]
|
|
} else {
|
|
let existingBeehiveIds = new Set(this.rzlist.filter(row => row.type == this
|
|
.type).map(row => row.id));
|
|
let filteredAndDeduplicatedNewRows = res.rows.filter(row => row.type == this
|
|
.type).filter(row => !existingBeehiveIds.has(row.id)).map(row => ({
|
|
...row,
|
|
}));
|
|
this.rzlist = [...this.rzlist.filter(row => row.type == this.type), ...
|
|
filteredAndDeduplicatedNewRows
|
|
]
|
|
}
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
let queryParams = {
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize,
|
|
apiaryId: this.apiaryId,
|
|
type: this.type
|
|
};
|
|
if (this.type == null) {
|
|
delete queryParams.type;
|
|
}
|
|
let queryString = Object.keys(queryParams).filter(key => queryParams[key] != null).map(key =>
|
|
`${encodeURIComponent(key)}=${encodeURIComponent(queryParams[key])}`).join('&')
|
|
this.$u.get(`/farm/record/warn/list?${queryString}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.total = res.total
|
|
if (res.total < 1) {
|
|
this.wuflag = false
|
|
} else {
|
|
this.pageNum++
|
|
this.wuflag = true
|
|
if (this.type == null) {
|
|
this.rzlist = [...this.rzlist, ...res.rows.map(row => ({
|
|
...row,
|
|
}))]
|
|
} else {
|
|
let existingBeehiveIds = new Set(this.rzlist.filter(row => row.type == this
|
|
.type).map(row => row.id));
|
|
let filteredAndDeduplicatedNewRows = res.rows.filter(row => row.type == this
|
|
.type).filter(row => !existingBeehiveIds.has(row.id)).map(row => ({
|
|
...row,
|
|
}));
|
|
this.rzlist = [...this.rzlist.filter(row => row.type == this.type), ...
|
|
filteredAndDeduplicatedNewRows
|
|
]
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 点击切换tab标题
|
|
changeTag(idx, type) {
|
|
if (idx == 0) {
|
|
this.rzlist = []
|
|
}
|
|
this.pageNum = 1
|
|
this.type = type
|
|
this.currentIndex = idx
|
|
this.getyuj()
|
|
},
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F4FAF8;
|
|
}
|
|
|
|
.addtj {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
// background-color: #FFCC25;
|
|
// background-color: #fff;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
position: fixed;
|
|
left: 220rpx;
|
|
bottom: 0;
|
|
font-size: 36rpx;
|
|
padding-left: 80rpx;
|
|
padding-top: 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
view {
|
|
width: 336rpx;
|
|
height: 88rpx;
|
|
background-color: #FFCC25;
|
|
text-align: center;
|
|
line-height: 88rpx;
|
|
color: #fff;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.page {
|
|
// position: relative;
|
|
width: 750rpx;
|
|
|
|
.no_cont {
|
|
padding: 16rpx;
|
|
margin-left: -10rpx;
|
|
width: 100%;
|
|
height: 82vh;
|
|
background: #fff;
|
|
padding-left: 50rpx;
|
|
padding-top: 200rpx;
|
|
// overflow: scroll;
|
|
padding-bottom: 200rpx;
|
|
box-sizing: border-box;
|
|
|
|
.img {
|
|
padding-left: 50rpx;
|
|
box-sizing: border-box;
|
|
image {
|
|
width: 350rpx;
|
|
height: 350rpx;
|
|
}
|
|
}
|
|
|
|
.txt {
|
|
margin-top: 50rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
|
|
.set_log_box {
|
|
padding: 50rpx 56rpx;
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
left: 58rpx;
|
|
bottom: 68rpx;
|
|
width: 638rpx;
|
|
height: 88rpx;
|
|
background: #FFCC25;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.xy {
|
|
margin-top: 46rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.yuans {
|
|
margin-top: 2rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
border-radius: 50%;
|
|
border: #808080 solid 2rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.txt {
|
|
margin-left: 10rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #808080;
|
|
|
|
span {
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.input-container {
|
|
position: relative;
|
|
width: 612rpx;
|
|
height: 172rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
|
border-radius: 20rpx;
|
|
margin-top: 40rpx;
|
|
overflow: hidden;
|
|
padding-right: 38rpx;
|
|
box-sizing: border-box;
|
|
border: 2rpx solid #C7C7C7;
|
|
}
|
|
|
|
.placeholder {
|
|
position: absolute;
|
|
top: 18rpx;
|
|
left: 38rpx;
|
|
color: #999;
|
|
/* placeholder颜色 */
|
|
pointer-events: none;
|
|
/* 确保点击事件可以穿透到textarea上 */
|
|
}
|
|
|
|
.custom-textarea {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* 设置一个合适高度 */
|
|
padding-top: 18rpx;
|
|
/* 为placeholder留出空间 */
|
|
padding-left: 38rpx;
|
|
box-sizing: border-box;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.word-count {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.icon {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-top: 40rpx;
|
|
|
|
.imgbox {
|
|
width: 33%;
|
|
|
|
image {
|
|
width: 222rpx;
|
|
height: 222rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.tit {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.set_type_box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
// margin-top: 26rpx;
|
|
.type_li {
|
|
margin-top: 26rpx;
|
|
margin-right: 18rpx;
|
|
padding: 12rpx 50rpx;
|
|
background: #FFF5D6;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
border: 2rpx solid #FFC107;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.act1 {
|
|
background: #FFC107;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
border: 2rpx solid #FFC107;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 22rpx;
|
|
margin: 0 auto;
|
|
width: 658rpx;
|
|
height: 106rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
.top_left {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.top_right {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
|
|
.cont_box {
|
|
margin-top: 26rpx;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
|
|
.left {
|
|
margin-left: 48rpx;
|
|
width: 200rpx;
|
|
|
|
.left_cont_box {
|
|
width: 200rpx;
|
|
height: 100rpx;
|
|
background: #fff;
|
|
|
|
.left_cont {
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
padding-left: 30rpx;
|
|
width: 200rpx;
|
|
height: 100rpx;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
background-color: #F4FAF8;
|
|
|
|
// border-radius: 0rpx 40rpx 40rpx 0rpx;
|
|
// border: 1rpx solid #fff;
|
|
|
|
}
|
|
|
|
.act1 {
|
|
background: #fff;
|
|
border-radius: 40rpx 0 0 40rpx;
|
|
// box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.act2 {
|
|
border-radius: 0rpx 0rpx 40rpx 0rpx;
|
|
}
|
|
|
|
.act3 {
|
|
border-radius: 0rpx 40rpx 0rpx 0rpx;
|
|
}
|
|
}
|
|
|
|
.act4 {
|
|
background-color: #F4FAF8;
|
|
border-radius: 40rpx 0 0 40rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.right {
|
|
padding: 16rpx;
|
|
margin-left: -10rpx;
|
|
width: 100%;
|
|
height: 92vh;
|
|
background: #fff;
|
|
overflow: scroll;
|
|
padding-bottom: 200rpx;
|
|
box-sizing: border-box;
|
|
|
|
.right_cont {
|
|
margin-top: 20rpx;
|
|
padding: 20rpx 26rpx;
|
|
width: 462rpx;
|
|
height: 260rpx;
|
|
background: #F6F6F6;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
.cont {
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding-left: 80rpx;
|
|
|
|
image {
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
}
|
|
|
|
.txt1 {
|
|
margin-left: 8rpx;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #4D4D4D;
|
|
}
|
|
|
|
.txt2 {
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.txt3 {
|
|
margin-left: auto;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
|
|
.right_cont_top {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.cont_left {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.txt {
|
|
margin-left: 34rpx;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
|
|
}
|
|
}
|
|
|
|
.cont_right {
|
|
.btn1 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 110rpx;
|
|
height: 48rpx;
|
|
background: #FFC107;
|
|
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btn2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 86rpx;
|
|
height: 48rpx;
|
|
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
border: 1rpx solid #808080;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// border-radius: 40rpx 0 0 40rpx;
|
|
// box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
</style> |